/* ============================================================
   XINIX — STAGE design language
   The product is the hero, lit on a dark stage. Nothing on this page
   describes how a unit is built: form and envelope only.

   Replaces the engineering-blueprint language. Deliberately absent:
   drafting grids, dimension lines, registration ticks, title blocks,
   exploded views, section sizes — all of which gave away construction.
   ============================================================ */

:root {
  --st-void:   #070B16;      /* deepest, behind everything */
  --st-stage:  #0E1526;      /* the stage floor */
  --st-riser:  #16203A;      /* raised surfaces */
  --st-line:   rgba(150,174,232,0.16);
  --st-line-2: rgba(150,174,232,0.28);

  --st-ink:    #F2F5FC;
  --st-ink-2:  rgba(226,234,255,0.68);
  --st-ink-3:  rgba(226,234,255,0.42);

  --st-ember:  #E4623A;
  --st-ember-2:#F79068;
  --st-steel:  #8FA6D8;

  --st-paper:  #F7F6F3;      /* the one light surface: specs */
  --st-paper-ink: #131A2E;
  --st-paper-ink-2: rgba(19,26,46,0.62);
  --st-paper-line: rgba(19,26,46,0.12);

  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Roboto Mono", monospace;
}

.st { background: var(--st-void); color: var(--st-ink); }
.st-wrap { width: min(1240px, 90vw); margin: 0 auto; }
.st-section { padding: clamp(56px, 7vw, 104px) 0; position: relative; }

/* ---------- type ----------
   Display face for headlines, mono ONLY where a value is measured.
   Mono-for-everything was the blueprint tell; this is not that. */
.st-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--st-ember-2);
  display: inline-flex; align-items: center; gap: 10px;
}
.st-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }

.st-h1 {
  font-family: var(--font-display, "Sora", sans-serif);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.03;
  font-size: clamp(38px, 5.4vw, 74px); margin: 0;
}
.st-h2 {
  font-family: var(--font-display, "Sora", sans-serif);
  font-weight: 700; letter-spacing: -0.022em; line-height: 1.1;
  font-size: clamp(26px, 3.2vw, 42px); margin: 0;
}
.st-h3 {
  font-family: var(--font-display, "Sora", sans-serif);
  font-weight: 700; letter-spacing: -0.015em; font-size: clamp(18px, 1.9vw, 23px); margin: 0;
}
.st-lead { font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.66; color: var(--st-ink-2); max-width: 56ch; }
.st-note { font-size: 13.5px; line-height: 1.65; color: var(--st-ink-3); max-width: 60ch; }

/* ---------- the stage ---------- */
.st-stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(78% 62% at 50% 26%, rgba(96,124,196,0.24), rgba(14,21,38,0) 68%),
    radial-gradient(120% 80% at 50% 104%, rgba(228,98,58,0.13), rgba(7,11,22,0) 62%),
    linear-gradient(180deg, var(--st-void), var(--st-stage) 46%, var(--st-void));
}
/* the horizon: a single soft line where the stage floor meets the dark */
.st-stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--st-line-2) 22%, var(--st-line-2) 78%, transparent);
  pointer-events: none;
}
.st-stage canvas { display: block; width: 100%; height: clamp(340px, 52vw, 600px); position: relative; z-index: 1; }

.st-stage-tools {
  position: absolute; top: 18px; right: 18px; z-index: 3; display: flex;
  border: 1px solid var(--st-line); border-radius: 2px; overflow: hidden;
  background: rgba(7,11,22,0.62); backdrop-filter: blur(6px);
}
.st-stage-tools button {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--st-ink-3); background: transparent; border: 0;
  border-left: 1px solid var(--st-line); padding: 10px 14px; cursor: pointer;
  transition: color .14s linear, background .14s linear;
}
.st-stage-tools button:first-child { border-left: 0; }
.st-stage-tools button:hover { color: var(--st-ink); }
.st-stage-tools button[aria-pressed="true"] { color: var(--st-ink); background: rgba(228,98,58,0.22); }

.st-stage-hint {
  position: absolute; left: 20px; bottom: 18px; z-index: 3; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--st-ink-3);
}
.st-stage-tag {
  position: absolute; left: 20px; top: 20px; z-index: 3; pointer-events: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--st-ink-3);
}
.st-fallback {
  display: none; padding: 48px 26px; text-align: center;
  font-size: 14px; line-height: 1.8; color: var(--st-ink-3);
}
.st-stage[data-3d-failed] canvas,
.st-stage[data-3d-failed] .st-stage-tools,
.st-stage[data-3d-failed] .st-stage-hint { display: none; }
.st-stage[data-3d-failed] .st-fallback { display: block; }

/* ---------- specification: the one light surface on the page ---------- */
.st-spec-panel {
  background: var(--st-paper); color: var(--st-paper-ink);
  border-radius: 3px; padding: clamp(24px, 3.4vw, 40px);
}
.st-spec { width: 100%; border-collapse: collapse; }
.st-spec th, .st-spec td {
  text-align: left; padding: 13px 0; border-bottom: 1px solid var(--st-paper-line);
  vertical-align: baseline;
}
.st-spec th {
  font-size: 12.5px; font-weight: 500; color: var(--st-paper-ink-2);
  letter-spacing: .01em; width: 52%;
}
.st-spec td {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--st-paper-ink);
}
.st-spec tr:last-child th, .st-spec tr:last-child td { border-bottom: 0; }
.st-spec-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--st-paper-ink-2); margin: 0 0 18px; display: block;
}
.st-await {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--st-ember); border: 1px dashed currentColor; padding: 2px 7px; font-weight: 600;
}

/* ---------- key figures pulled out of the table ---------- */
.st-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--st-line); border: 1px solid var(--st-line); }
.st-figures > div { background: var(--st-void); padding: 20px 22px; }
.st-figures .v {
  font-family: var(--mono); font-size: clamp(20px, 2.3vw, 27px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--st-ink); display: block;
}
.st-figures .k {
  font-size: 11.5px; letter-spacing: .05em; color: var(--st-ink-3);
  display: block; margin-top: 7px;
}

/* ---------- buttons ---------- */
.st-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  padding: 14px 24px; border-radius: 2px; border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.st-btn--go { background: var(--st-ember); color: #fff; }
.st-btn--go:hover { background: #F0714A; }
.st-btn--ghost { border-color: var(--st-line-2); color: var(--st-ink); }
.st-btn--ghost:hover { border-color: var(--st-ink); background: rgba(255,255,255,0.05); }

/* ---------- layout ---------- */
.st-split { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(28px, 4.6vw, 66px); align-items: start; }
@media (max-width: 900px) { .st-split { grid-template-columns: 1fr; } }

.st-rule { height: 1px; background: var(--st-line); margin: clamp(34px, 5vw, 60px) 0; }

/* ---------- header ---------- */
.st-nav {
  position: relative; z-index: 20; display: flex; align-items: center;
  justify-content: space-between; gap: 22px;
  padding: 18px clamp(18px, 5vw, 46px); border-bottom: 1px solid var(--st-line);
}
.st-nav .brand { display: flex; align-items: center; gap: 12px; }
.st-nav .brand img { height: 30px; width: auto; display: block; }
.st-nav .brand b {
  font-family: var(--font-display, "Sora", sans-serif); font-weight: 700;
  letter-spacing: .16em; font-size: 15px; color: #fff;
}
.st-nav nav { display: none; gap: 30px; }
.st-nav nav a { color: var(--st-ink-2); text-decoration: none; font-size: 14px; }
.st-nav nav a:hover { color: var(--st-ink); }
@media (min-width: 880px) { .st-nav nav { display: flex; } }
.st-nav .wa {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: linear-gradient(140deg, #2BD96C, #12A854); color: #fff;
  font-weight: 700; font-size: 13.5px; padding: 11px 20px; border-radius: 2px;
}

/* ---------- how it's used: steps that drive the model ---------- */
.st-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px; background: var(--st-line); border: 1px solid var(--st-line);
}
.st-steps li { display: flex; }
.st-steps button {
  flex: 1; text-align: left; background: var(--st-void); border: 0; cursor: pointer;
  padding: 22px 22px 24px; color: inherit; font: inherit; position: relative;
  transition: background .18s ease;
}
.st-steps button:hover { background: var(--st-riser); }
.st-steps button[aria-current="true"] { background: var(--st-riser); }
.st-steps button[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--st-ember);
}
.st-steps .n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  color: var(--st-ink-3); display: block; margin-bottom: 12px;
}
.st-steps button[aria-current="true"] .n { color: var(--st-ember-2); }
.st-steps .t {
  font-family: var(--font-display, "Sora", sans-serif); font-weight: 700;
  font-size: 15.5px; letter-spacing: -0.01em; color: var(--st-ink);
  display: block; margin-bottom: 9px;
}
.st-steps .d { font-size: 13px; line-height: 1.6; color: var(--st-ink-2); display: block; }

/* ---------- photo strip (real photographs only) ---------- */
.st-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.st-photos figure { margin: 0; }
.st-photos img {
  /* height:100% fought aspect-ratio and let the image overrun its caption */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  display: block; border-radius: 2px; background: var(--st-riser);
}
.st-photos figcaption {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-ink-3); margin-top: 9px;
}


/* ============================================================
   PRODUCT INDEX on the stage. Cards are dark, glyphs are drawn in
   light strokes. No drafting furniture: the line art shows a
   silhouette, never how the frame is jointed.
   ============================================================ */
.st-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 1px; background: var(--st-line); border: 1px solid var(--st-line); }
.st-goals a { background: var(--st-void); padding: 20px 20px 22px; text-decoration: none;
  color: inherit; display: block; transition: background .16s ease; }
.st-goals a:hover { background: var(--st-riser); }
.st-goals .n { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--st-ember-2); display: block; margin-bottom: 9px; }
.st-goals .t { font-family: var(--font-display,"Sora",sans-serif); font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em; color: var(--st-ink); display: block; }
.st-goals .c { font-size: 12px; color: var(--st-ink-3); display: block; margin-top: 7px; }

.st-grouphead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--st-line); padding-bottom: 14px; }
.st-grouphead .ct { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  color: var(--st-ink-3); margin-left: auto; }
.st-groupnote { font-size: 14.5px; line-height: 1.62; color: var(--st-ink-2);
  max-width: 64ch; margin: 16px 0 28px; }

.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.st-card { border: 1px solid var(--st-line); background: var(--st-stage);
  padding: 16px 16px 14px; display: flex; flex-direction: column; position: relative;
  border-radius: 2px; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.st-card:hover { border-color: var(--st-line-2); background: var(--st-riser); transform: translateY(-2px); }
.st-card .pic { background: rgba(255,255,255,0.028); border-radius: 2px; padding: 6px;
  margin-bottom: 14px; overflow: hidden; }
.st-card .pic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 2px; }
.st-glyph { width: 100%; height: auto; display: block;
  --gl-ink: rgba(226,234,255,0.82); --gl-mark: var(--st-ember-2);
  --gl-fill: rgba(143,166,216,0.09); --gl-hair: var(--st-line); }
.st-card .code { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--st-ember-2); font-weight: 600; margin-bottom: 6px; }
.st-card h4 { font-family: var(--font-display,"Sora",sans-serif); font-weight: 700;
  font-size: 14px; line-height: 1.32; letter-spacing: -0.01em; color: var(--st-ink); margin: 0 0 8px; }
.st-card .fact { font-size: 12.5px; line-height: 1.55; color: var(--st-ink-3); margin: 0 0 14px; }
.st-card .q { margin-top: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; color: var(--st-ink-2); text-decoration: none;
  border-top: 1px solid var(--st-line); padding-top: 12px; display: flex;
  justify-content: space-between; align-items: center; }
.st-card .q:hover { color: var(--st-ember-2); }
.st-card .photo-tag { position: absolute; top: 0; right: 0; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  background: var(--st-ember); color: #fff; padding: 4px 8px; border-radius: 0 2px 0 2px; }

.st-sched { width: 100%; border-collapse: collapse; font-family: var(--mono);
  font-size: 12.5px; margin-bottom: 32px; }
.st-sched caption { text-align: left; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--st-ink-3); padding-bottom: 11px; }
.st-sched th, .st-sched td { text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--st-line); }
.st-sched tr:first-child th, .st-sched tr:first-child td { border-top: 1px solid var(--st-line-2); }
.st-sched th { color: var(--st-ember-2); font-weight: 600; letter-spacing: .1em; white-space: nowrap; width: 1%; }
.st-sched td { color: var(--st-ink-2); font-weight: 500; }
.st-sched tr:hover td, .st-sched tr:hover th { background: rgba(143,166,216,0.055); }
.st-sched .q { width: 1%; white-space: nowrap; text-align: right; }
.st-sched .q a { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--st-ink-3); text-decoration: none; }
.st-sched .q a:hover { color: var(--st-ember-2); }
@media (max-width: 620px) {
  .st-sched th, .st-sched td { display: block; padding: 7px 10px; border-bottom: 0; }
  .st-sched td.q { text-align: left; border-bottom: 1px solid var(--st-line); padding-top: 0; }
}


/* ---- family cards: one card per product family, variants listed inside.
   Four cards that differ only by a grey subtitle read as a page repeating
   itself, which is exactly what a buyer reported seeing. ---- */
.st-card--fam h4 { margin-bottom: 4px; }
.st-card--fam .vcount {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--st-ink-3); display: block; margin-bottom: 10px;
}
.vlist { list-style: none; margin: 8px 0 0; padding: 0; }
.vlist li { border-top: 1px solid var(--st-line); }
.vlist li:first-child { border-top: 1px solid var(--st-line-2); }
.vlist a {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
  text-decoration: none; color: var(--st-ink-2); transition: color .14s ease;
}
.vlist a:hover { color: var(--st-ember-2); }
.vlist b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--st-ember-2); font-weight: 600; flex: none;
}
.vlist a:hover b { color: var(--st-ink); }
.vlist span { font-size: 12px; line-height: 1.45; }
.vlist i { font-style: normal; color: var(--st-ink-3); font-size: 11px; }


/* step caption — the motion-graphics HUD line */
.st-stage-caption {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 3;
  pointer-events: none; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--st-ink-2);
  background: rgba(7,11,22,0.60); border: 1px solid var(--st-line);
  padding: 8px 16px; border-radius: 2px; white-space: nowrap;
}
.st-stage-caption:empty { display: none; }


/* ---- three doors: who is buying, and their first step ---- */
.st-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px; background: var(--st-line); border: 1px solid var(--st-line); margin-top: 30px; }
.door { background: var(--st-void); padding: 26px 24px 24px; text-decoration: none;
  color: inherit; display: flex; flex-direction: column; transition: background .16s ease; }
.door:hover { background: var(--st-riser); }
.door .d-n { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--st-ember-2); display: block; margin-bottom: 12px; }
.door h3 { font-family: var(--font-display,"Sora",sans-serif); font-weight: 700;
  font-size: 19px; letter-spacing: -0.015em; color: var(--st-ink); margin: 0 0 10px; }
.door p { font-size: 13.5px; line-height: 1.62; color: var(--st-ink-2); margin: 0 0 18px; }
.door .d-cta { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--st-ember-2); }
.door:hover .d-cta { color: var(--st-ink); }

/* ---- product theatre: three small stages in a row ---- */
.st-theatre { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.st-ministage { margin: 0; position: relative; border: 1px solid var(--st-line); border-radius: 2px;
  background:
    radial-gradient(90% 70% at 50% 22%, rgba(96,124,196,0.20), rgba(14,21,38,0) 70%),
    linear-gradient(180deg, var(--st-stage), var(--st-void));
  overflow: hidden; }
.st-ministage canvas { display: block; width: 100%; height: clamp(220px, 24vw, 300px); cursor: grab; }
.st-ministage figcaption {
  font-family: var(--font-display,"Sora",sans-serif); font-weight: 700; font-size: 14px;
  color: var(--st-ink); padding: 12px 16px 14px; border-top: 1px solid var(--st-line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.st-ministage figcaption span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--st-ink-3); }

/* ---- four holds: plain promises, no icons, no fluff ---- */
.st-holds { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--st-line); border: 1px solid var(--st-line); }
.st-holds > div { background: var(--st-void); padding: 24px 22px; }
.st-holds h3 { font-family: var(--font-display,"Sora",sans-serif); font-weight: 700;
  font-size: 16px; letter-spacing: -0.01em; color: var(--st-ink); margin: 0 0 10px; }
.st-holds p { font-size: 13.5px; line-height: 1.62; color: var(--st-ink-2); margin: 0; }

/* ---- floating WhatsApp + call pair ---- */
.st-float { position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px; }
.st-float a { display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45); transition: transform .14s ease; }
.st-float a:hover { transform: translateY(-2px); }
.st-float .f-wa { background: linear-gradient(140deg, #2BD96C, #12A854); color: #fff; }
.st-float .f-tel { background: var(--st-riser); color: var(--st-ink);
  border: 1px solid var(--st-line-2); }


/* ---- 3D on the product cards ---- */
.st-card .pic[data-m3d] { cursor: pointer; }
.st-card .pic[data-m3d]:hover { outline: 1px solid var(--st-line-2); outline-offset: -1px; }
.st-card .pic .chip3d {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; font-weight: 700;
  color: #fff; background: var(--st-ember); padding: 4px 8px; border-radius: 2px;
}
.st-card .pic { position: relative; }
.st-card .pic img.thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 2px; }

/* ---- the one live 3D modal ---- */
.st-modal { position: fixed; inset: 0; z-index: 120; }
.st-modal[hidden] { display: none; }
.st-modal-back { position: absolute; inset: 0; background: rgba(4,7,14,0.78);
  backdrop-filter: blur(4px); }
.st-modal-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(880px, 94vw); background: var(--st-void); border: 1px solid var(--st-line-2);
  border-radius: 3px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
.st-modal-panel header { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--st-line); }
.st-modal-panel header b { font-family: var(--font-display,"Sora",sans-serif);
  font-weight: 700; font-size: 16px; color: var(--st-ink); }
.st-modal-panel header button { background: transparent; border: 0; color: var(--st-ink-2);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 6px 8px; }
.st-modal-panel header button:hover { color: var(--st-ink); }
.st-modal-stage { position: relative;
  background:
    radial-gradient(85% 65% at 50% 24%, rgba(96,124,196,0.22), rgba(14,21,38,0) 70%),
    linear-gradient(180deg, var(--st-stage), var(--st-void)); }
.st-modal-stage canvas { display: block; width: 100%; height: min(58vh, 520px); cursor: grab; }
.st-modal-stage .st-stage-hint { left: 18px; bottom: 14px; }


/* ---- interactive schedule: search, chips, families ---- */
.sched-bar { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.sched-bar input[type="search"] {
  flex: 1; max-width: 480px; background: var(--st-stage); color: var(--st-ink);
  border: 1px solid var(--st-line-2); border-radius: 2px; padding: 12px 16px;
  font: inherit; font-size: 14px; outline: none;
}
.sched-bar input[type="search"]::placeholder { color: var(--st-ink-3); }
.sched-bar input[type="search"]:focus { border-color: var(--st-ember); }
.sched-count { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--st-ink-3); white-space: nowrap; }

.sched-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.sched-chips button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--st-ink-2); background: transparent; border: 1px solid var(--st-line);
  border-radius: 999px; padding: 7px 14px; transition: all .14s ease;
}
.sched-chips button i { font-style: normal; font-family: var(--mono); font-size: 10px;
  color: var(--st-ink-3); margin-left: 4px; }
.sched-chips button:hover { border-color: var(--st-line-2); color: var(--st-ink); }
.sched-chips button[aria-pressed="true"] {
  background: var(--st-ember); border-color: var(--st-ember); color: #fff; }
.sched-chips button[aria-pressed="true"] i { color: rgba(255,255,255,.75); }

.st-sched td.add { width: 1%; padding-right: 4px; }
.addq {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--st-line-2);
  background: transparent; color: var(--st-ink-2); font-size: 15px; line-height: 1;
  cursor: pointer; transition: all .13s ease;
}
.addq:hover { border-color: var(--st-ember); color: var(--st-ember-2); }
.addq.on { background: var(--st-ember); border-color: var(--st-ember); color: #fff; }

.st-sched tr.frow th { padding: 0; }
.fam-toggle {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--st-ink);
  padding: 12px 12px; letter-spacing: .02em;
}
.fam-toggle:hover { color: var(--st-ember-2); }
.fam-toggle .caret { display: inline-block; transition: transform .15s ease;
  margin-right: 6px; color: var(--st-ember-2); }
tr.frow[data-open="1"] .caret { transform: rotate(90deg); }
.fam-toggle em { font-style: normal; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--st-ink-3); margin-left: 10px; }
.st-sched tr.vrow th { padding-left: 34px; color: var(--st-ember-2); }

/* ---- the enquiry bar ---- */
.enq-bar {
  position: fixed; left: 50%; transform: translate(-50%, 140%); bottom: 16px; z-index: 110;
  display: flex; align-items: center; gap: 18px; max-width: min(860px, 94vw);
  background: var(--st-riser); border: 1px solid var(--st-line-2); border-radius: 3px;
  padding: 12px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transition: transform .22s ease;
}
.enq-bar.on { transform: translate(-50%, 0); }
.enq-info { min-width: 0; }
.enq-info b { display: block; font-size: 13.5px; color: var(--st-ink); }
.enq-info .enq-names { display: block; font-size: 11.5px; color: var(--st-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.enq-actions { display: flex; gap: 8px; flex: none; }
.enq-actions a, .enq-actions button {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none;
  border-radius: 2px; padding: 9px 14px; border: 1px solid transparent;
}
.enq-wa { background: linear-gradient(140deg, #2BD96C, #12A854); color: #fff; }
.enq-copy { background: transparent; border-color: var(--st-line-2) !important; color: var(--st-ink); }
.enq-copy:hover { border-color: var(--st-ink) !important; }
.enq-clear { background: transparent; color: var(--st-ink-3); border: 0; }
.enq-clear:hover { color: var(--st-ember-2); }
@media (max-width: 640px) {
  .enq-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .enq-info .enq-names { max-width: none; }
}

/* Header wordmark: full name stacked (matches works.css treatment). */
.st-nav .brand b.wm { display: flex; flex-direction: column; justify-content: center; line-height: 1; gap: 4px; }
.st-nav .brand b.wm span:first-child { font-size: 15px; letter-spacing: .16em; }
.st-nav .brand b.wm span:last-child {
  font-size: 8.5px; letter-spacing: .30em; font-weight: 600;
  text-transform: uppercase; color: var(--st-ink-2, rgba(255,255,255,.62)); }
@media (max-width: 420px) { .st-nav .brand b.wm span:last-child { display: none; } }