/* ==========================================================================
   Ummah Tech — still-page design system (the "stillness" beside the film).
   Apple.com layout rhythm, Ummah Tech carbon tokens (theme.css :root).
   Used by: the after-film sections on index, and every standalone page
   (store, software, ai, repair, networks, work, start).
   Namespace: .st-* inside a .site scope. Sharp-edge discipline: buttons 4px,
   cards 6px, tiles 10px — no pills (brand book).
   ========================================================================== */

html { scroll-padding-top:72px; }

.site { font-family:var(--font-body); color:var(--body-ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; line-height:1.6; }
.site *, .site *::before, .site *::after { box-sizing:border-box; }
.site img, .site video { max-width:100%; display:block; }
/* --dark-gold outline: >=3:1 on cream/mint/cream-soft AND both greens (WCAG 1.4.11) */
.site :focus-visible { outline:3px solid var(--dark-gold); outline-offset:2px; }

/* Still pages scroll normally under the fixed header. */
body.site { margin:0; padding:0; }
body.site main { display:block; }

.st-wrap { width:min(1120px, calc(100% - clamp(36px, 8vw, 96px))); margin-inline:auto; }
.st-wrap--wide { width:min(1320px, calc(100% - clamp(28px, 6vw, 72px))); margin-inline:auto; }

/* ---- skip link (matches index) ---- */
.st-skip { position:fixed; left:12px; top:-60px; z-index:9999; background:var(--gold); color:var(--deep-green);
  padding:10px 16px; font-family:var(--font-label); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.72rem; transition:top .18s; text-decoration:none; }
.st-skip:focus { top:12px; outline:2px solid var(--cream); outline-offset:2px; }

/* =====================================================================
   HEADER — the same dark-glass chrome as the film's topbar, persistent.
   ===================================================================== */
.st-header { position:fixed; top:0; left:0; right:0; z-index:50;
  background:color-mix(in srgb, var(--deep-green-deep) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--gold) 24%, transparent); }
.st-header__in { width:min(1320px, calc(100% - clamp(28px, 6vw, 72px))); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(14px, 2.4vw, 30px);
  padding:calc(10px + env(safe-area-inset-top, 0px)) 0 10px; min-height:54px; }
.st-brand { display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.st-brand img { width:30px; height:30px; }
.st-brand b { font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  letter-spacing:.03em; color:#f7f3ea; }
/* ONE header, everywhere: brand · SERVICES · one call to action
   (Ahmed, 2026-07-30). The four services live in a dropdown; the store, the
   work and the film stay reachable from its secondary row and the footer. */
.st-nav { display:flex; align-items:center; gap:clamp(10px, 1.6vw, 22px); }
.st-drop { position:relative; }
.st-drop__btn { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--font-label); font-weight:600; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:#d4e8e3; background:transparent; border:0;
  padding:9px 4px; border-radius:3px; }
.st-drop__btn:hover { color:#fff; }
.st-drop__btn i { font-style:normal; font-size:.6rem; transition:transform .2s ease; }
.st-drop__btn[aria-expanded="true"] { color:#D8BE84; }
.st-drop__btn[aria-expanded="true"] i { transform:rotate(180deg); }

/* Anchored to the button's right edge, never centred: the trigger sits near the
   viewport edge, so a centred panel pushed past it and forced a scrollbar. */
.st-drop__panel { position:absolute; top:calc(100% + 12px); right:0; left:auto;
  width:min(540px, 92vw); z-index:60; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  padding:10px; border-radius:6px;
  background:color-mix(in srgb, var(--deep-green-deep) 96%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(201,169,97,.4); box-shadow:0 30px 70px -26px rgba(0,0,0,.75); }
.st-drop__panel[hidden] { display:none; }
.st-drop__panel > a { display:block; padding:12px 14px; border-radius:4px; text-decoration:none; }
.st-drop__panel > a b { display:block; font-family:var(--font-label); font-weight:700;
  font-size:.92rem; color:#f7f3ea; }
.st-drop__panel > a span { display:block; margin-top:2px; font-size:.78rem;
  color:rgba(212,232,227,.78); }
.st-drop__panel > a:hover { background:rgba(201,169,97,.16); }
.st-drop__panel > a:hover b { color:var(--gold); }
.st-drop__panel > a[aria-current="page"] b { color:var(--gold); }
.st-drop__more { grid-column:1 / -1; display:flex; gap:18px; flex-wrap:wrap;
  margin-top:6px; padding:11px 14px 3px; border-top:1px solid rgba(201,169,97,.22); }
.st-drop__more a { font-family:var(--font-label); font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold); text-decoration:none; }
.st-drop__more a:hover { color:#f7f3ea; }
@media (max-width:560px){ .st-drop__panel { grid-template-columns:1fr; } }
.st-header__cta { font-family:var(--font-label); font-weight:700; font-size:.8rem; letter-spacing:.03em;
  background:var(--gold); color:#1c2622; text-decoration:none; padding:9px 16px; border-radius:4px; }
.st-header__cta:hover { background:#d8be84; }
.st-burger { display:none; }

@media (max-width:920px){
  .st-nav { display:none; }
  .st-burger { display:inline-grid; place-items:center; width:40px; height:40px;
    background:transparent; border:1px solid rgba(212,232,227,.4); border-radius:4px;
    color:#f7f3ea; cursor:pointer; }
  .st-burger svg { width:18px; height:18px; }
  .st-header__cta { font-size:.72rem; padding:8px 12px; }
}
/* Full-screen menu sheet (mobile) */
.st-menu { position:fixed; inset:0; z-index:70; background:var(--deep-green-deep);
  display:none; flex-direction:column; padding:calc(18px + env(safe-area-inset-top,0px)) 24px 32px; }
.st-menu.on { display:flex; }
.st-menu__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8vh; }
.st-menu__close { width:44px; height:44px; display:grid; place-items:center; background:transparent;
  border:1px solid rgba(212,232,227,.4); border-radius:4px; color:#f7f3ea; font-size:1.1rem; cursor:pointer; }
.st-menu nav { display:flex; flex-direction:column; gap:4px; }
.st-menu nav a { font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem, 8vw, 2.6rem);
  color:#f7f3ea; text-decoration:none; padding:10px 0; border-bottom:1px solid rgba(201,169,97,.18); }
.st-menu nav a:hover { color:var(--gold); }
.st-menu nav a[aria-current="page"] { color:var(--gold); }
.st-menu__more { display:flex; gap:20px; flex-wrap:wrap; margin-top:22px; }
.st-menu__more a { font-family:var(--font-label); font-weight:700; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold); text-decoration:none; }
.st-menu__cta { margin-top:auto; text-align:center; font-family:var(--font-label); font-weight:700;
  background:var(--gold); color:#1c2622; text-decoration:none; padding:15px 20px; border-radius:4px; }
body.st-menu-open { overflow:hidden; }

/* The film page wears the SAME header — the engine's own topbar stands down
   so there is exactly one header on the site. */
#world .sw-topbar { display:none; }

/* =====================================================================
   TYPE PATTERNS
   ===================================================================== */
/* #7E6836 (not --dark-gold #9E8345): 5.05:1 on cream — AA for 11.8px caps.
   Dark contexts (hero/tile/ctaband/seam) re-assert bright gold locally. */
.st-kicker { display:block; font-family:var(--font-label); font-weight:700; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:#7E6836; }
/* Section head — Apple's "Bold lead-in. Soft continuation." */
.st-head { font-family:var(--font-label); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.5rem, 2.7vw, 2.1rem); line-height:1.18; color:var(--deep-green); margin:0; }
.st-head span { color:var(--secondary); font-weight:600; }
.st-sub { margin:10px 0 0; color:var(--secondary); font-size:clamp(.95rem, 1.15vw, 1.05rem); max-width:62ch; }
.st-display { font-family:var(--font-display); font-weight:700; line-height:.98; letter-spacing:.005em;
  color:var(--deep-green); font-size:clamp(2.6rem, 6.4vw, 4.8rem); margin:0; }
/* hub scale: the store's opening moment — above the H2s, below the display splash */
.st-head--hub { font-size:clamp(2rem, 3.8vw, 3rem); }
.st-cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* =====================================================================
   BUTTONS + LINKS
   ===================================================================== */
.st-btn { display:inline-block; font-family:var(--font-label); font-weight:700; font-size:.88rem;
  letter-spacing:.02em; text-decoration:none; border-radius:4px; padding:13px 26px;
  border:1px solid transparent; cursor:pointer; text-align:center; }
.st-btn--gold { background:var(--gold); color:#1c2622; }
.st-btn--gold:hover { background:#d8be84; }
.st-btn--green { background:var(--deep-green); color:#fff; }
.st-btn--green:hover { background:var(--deep-green-deep); }
.st-btn--ghost { background:transparent; color:var(--deep-green); border-color:rgba(44,62,55,.4); }
.st-btn--ghost:hover { border-color:var(--deep-green); }
.st-btn--ghost-light { background:transparent; color:#f7f3ea; border-color:rgba(247,243,234,.5); }
.st-btn--ghost-light:hover { border-color:#f7f3ea; }
.st-link { font-family:var(--font-label); font-weight:600; font-size:.88rem; color:#7E6836;
  text-decoration:none; }
.st-link:hover { text-decoration:underline; }
.st-link i { font-style:normal; }

/* =====================================================================
   SECTIONS
   ===================================================================== */
.st-section { padding:clamp(56px, 9vh, 110px) 0; background:var(--cream); }
.st-section--tight { padding-top:clamp(24px, 4vh, 44px); }
.st-section--mint { background:var(--mint); }
.st-section--soft { background:var(--cream-soft); }
.st-section--dark { background:var(--deep-green-deep); color:#f7f3ea; }
.st-section--dark .st-head { color:#f7f3ea; }
.st-section--dark .st-head span { color:rgba(212,232,227,.75); }
.st-section--dark .st-sub { color:rgba(212,232,227,.8); }
.st-section__bar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:clamp(22px, 4vh, 40px); }

/* =====================================================================
   HERO — cinematic still (service pages): scene frame + scrim + centred copy.
   ===================================================================== */
.st-hero { position:relative; min-height:min(88vh, 820px); display:grid; place-items:center;
  text-align:center; padding:120px 24px 72px; background:#070c0a; overflow:hidden; }
/* Art is passed as --art (full) and --art-m (760px). Phones never download the
   1920px master — it renders at 375px there (mobile pass, 2026-07-31). */
.st-hero__bg { position:absolute; inset:0; background-image:var(--art);
  background-size:cover; background-position:center; }
@media (max-width:860px){ .st-hero__bg { background-image:var(--art-m, var(--art)); } }
/* Scrim floor for AA over bright frames — same discipline as the film. */
.st-hero__bg::after { content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 62%, rgba(7,12,10,.42), rgba(7,12,10,.78) 92%),
    linear-gradient(0deg, rgba(7,12,10,.85), rgba(7,12,10,.2) 40%, rgba(7,12,10,.35) 100%); }
.st-hero__in { position:relative; z-index:1; max-width:820px; }
.st-hero .st-kicker { color:var(--gold); }
.st-hero h1 { font-family:var(--font-display); font-weight:700; color:#f7f3ea; line-height:.98;
  font-size:clamp(2.8rem, 7.4vw, 5.4rem); margin:12px 0 0; text-shadow:0 2px 26px rgba(0,0,0,.6); }
.st-hero p { color:rgba(247,243,234,.9); font-size:clamp(1rem, 1.3vw, 1.14rem); max-width:56ch;
  margin:16px auto 0; text-shadow:0 1px 14px rgba(0,0,0,.55); }
.st-hero__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.st-hero__meta { margin-top:22px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  font-family:var(--font-label); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(212,232,227,.85); }
.st-hero__meta i { font-style:normal; }

/* Light hero (store / work / start) */
.st-hero--light { background:var(--cream); min-height:0; display:block; text-align:left;
  padding:calc(96px + env(safe-area-inset-top,0px)) 0 clamp(30px, 5vh, 56px); }
.st-hero--light .st-hero__in { max-width:none; }

/* =====================================================================
   SERVICE TILES — Apple home 2×2 tiles: copy up top, scene art below.
   ===================================================================== */
.st-tiles { display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(14px, 1.8vw, 24px); }
@media (max-width:760px){ .st-tiles { grid-template-columns:1fr; } }
.st-tile { position:relative; border-radius:10px; overflow:hidden; background:var(--deep-green-deep);
  min-height:clamp(380px, 46vw, 520px); display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:clamp(26px, 3.4vw, 44px) 22px 0; }
.st-tile__art { position:absolute; inset:0; background-image:var(--art);
  background-size:cover; background-position:center 68%; }
@media (max-width:860px){ .st-tile__art { background-image:var(--art-m, var(--art)); } }
.st-tile__art::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,12,10,.88) 26%, rgba(7,12,10,.42) 58%, rgba(7,12,10,.25)); }
/* :not() keeps the art layer out of the content lift — a bare `> *` would
   override its absolute positioning (same specificity, later in file). */
.st-tile > :not(.st-tile__art) { position:relative; z-index:1; }
.st-tile .st-kicker { color:var(--gold); }
.st-tile h3 { font-family:var(--font-display); font-weight:700; color:#f7f3ea; line-height:1;
  font-size:clamp(1.8rem, 3vw, 2.5rem); margin:8px 0 0; }
.st-tile p { color:rgba(247,243,234,.88); font-size:.95rem; max-width:40ch; margin:8px auto 0; }
.st-tile__links { display:flex; gap:20px; justify-content:center; margin:14px 0 0; padding-bottom:26px; }
.st-tile__links a { font-family:var(--font-label); font-weight:700; font-size:.86rem;
  color:var(--gold); text-decoration:none; }
.st-tile__links a:hover { text-decoration:underline; color:#d8be84; }

/* =====================================================================
   SERVICE CARDS — the section the film hands off to. Every card carries its
   own art, one promise, and its own actions; no card is a text box on a slab
   (Ahmed, 2026-07-31).
   ===================================================================== */
.st-svc { display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(14px, 1.8vw, 24px); }
@media (max-width:760px){ .st-svc { grid-template-columns:1fr; } }
.st-svccard { display:flex; flex-direction:column; background:var(--cream-soft);
  border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.st-svccard:hover { border-color:rgba(201,169,97,.7); transform:translateY(-3px);
  box-shadow:0 22px 44px -24px rgba(31,44,39,.42); }
.st-svccard__art { position:relative; aspect-ratio:16/7; background-image:var(--art);
  background-size:cover; background-position:center 66%; background-color:#0d1512; }
@media (max-width:860px){ .st-svccard__art { background-image:var(--art-m, var(--art)); } }
.st-svccard__art::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,12,10,.1), rgba(7,12,10,.62)); }
.st-svccard__art b { position:absolute; left:16px; bottom:12px; z-index:1;
  font-family:var(--font-label); font-weight:700; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); text-shadow:0 1px 10px rgba(0,0,0,.7); }
.st-svccard__in { display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.st-svccard h3 { font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(1.5rem, 2.4vw, 1.9rem); color:var(--deep-green); margin:0; }
.st-svccard p { margin:8px 0 0; font-size:.93rem; color:var(--secondary); }
.st-svccard__act { display:flex; align-items:center; gap:18px; margin-top:auto; padding-top:16px; }
.st-svccard__act .st-btn { padding:11px 20px; font-size:.84rem; }

/* Process + bands as one block instead of two rows of boxes */
.st-two { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px, 5vw, 64px);
  align-items:start; }
@media (max-width:860px){ .st-two { grid-template-columns:1fr; } }
.st-flow { counter-reset:stflow; list-style:none; margin:18px 0 0; padding:0; }
.st-flow li { display:grid; grid-template-columns:auto 1fr; gap:14px; padding:12px 0;
  border-top:1px solid var(--rule); }
.st-flow li:first-child { border-top:0; padding-top:0; }
.st-flow li::before { counter-increment:stflow; content:counter(stflow, decimal-leading-zero);
  font-family:ui-monospace, Menlo, monospace; font-size:.74rem; color:#7E6836; padding-top:3px; }
.st-flow b { display:block; font-family:var(--font-label); font-weight:700; font-size:.98rem;
  color:var(--deep-green); }
.st-flow span { display:block; margin-top:2px; font-size:.88rem; color:var(--secondary); }
/* Same rhythm as the numbered flow, without the numbers — for lists that are a
   set rather than a sequence. (Replaced the price table, 2026-07-31.) */
.st-flow--plain { list-style:none; }
.st-flow--plain li { grid-template-columns:1fr; }
.st-flow--plain li::before { content:none; }

/* =====================================================================
   CARD ROW — Apple "The latest": horizontal snap row of work cards.
   ===================================================================== */
.st-row { display:grid; grid-auto-flow:column; grid-auto-columns:min(320px, 78vw);
  gap:clamp(14px, 1.6vw, 22px); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding:4px 0 18px;
  scrollbar-width:thin; scrollbar-color:rgba(44,62,55,.3) transparent; }
.st-row > * { scroll-snap-align:start; }
.st-card { display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--cream-soft); border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.st-card:hover { transform:translateY(-4px); border-color:rgba(201,169,97,.7);
  box-shadow:0 22px 44px -22px rgba(31,44,39,.4); }
.st-card__shot { position:relative; aspect-ratio:16/10; background:#0b0f0e; }
.st-card__shot img, .st-card__shot video { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; }
.st-card__shot video { opacity:0; transition:opacity .3s ease; }
.st-card.is-playing .st-card__shot video { opacity:1; }
.st-card__body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:3px; }
.st-card__body b { font-family:var(--font-label); font-weight:700; font-size:.96rem; color:var(--deep-green); }
.st-card__body em { font-style:normal; font-size:.8rem; color:var(--secondary); }
.st-card__status { margin-top:8px; display:flex; align-items:center; gap:8px;
  font-family:var(--font-label); font-weight:600; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:#7E6836; }
.st-card__status::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); }
/* "See all" end-cap card */
.st-card--more { align-items:center; justify-content:center; text-align:center;
  background:var(--mint); border-style:dashed; min-height:260px; gap:8px;
  font-family:var(--font-label); font-weight:700; color:var(--deep-green); }
.st-card--more i { font-style:normal; font-size:1.6rem; color:var(--dark-gold); }

/* Browser-chrome variant (the proof language) for the work page */
.st-chrome { background:#fff; }
.st-chrome .st-card__bar { display:flex; align-items:center; gap:7px; height:26px; padding:0 10px;
  background:linear-gradient(#20302b,#182420); }
.st-chrome .st-card__bar i { width:7px; height:7px; border-radius:50%; background:rgba(247,243,234,.3); }
.st-chrome .st-card__bar i:first-child { background:#e0725f; }
.st-chrome .st-card__bar i:nth-child(2) { background:#dcb45c; }
.st-chrome .st-card__bar span { font-family:var(--font-label); font-size:.64rem;
  color:rgba(247,243,234,.8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Grid version of cards (work page: 3-up wrap, no snap row) */
.st-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 1.8vw, 24px); }
@media (max-width:960px){ .st-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .st-grid { grid-template-columns:1fr; } }

/* =====================================================================
   HELP CARDS — Apple "Help is here" text-led cards.
   ===================================================================== */
.st-help { display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(12px, 1.6vw, 20px);
  counter-reset:sthelp; }
.st-help--3 { grid-template-columns:repeat(3, 1fr); }
.st-help--2 { grid-template-columns:repeat(2, 1fr); }
@media (max-width:960px){ .st-help, .st-help--3 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .st-help, .st-help--3, .st-help--2 { grid-template-columns:1fr; } }
.st-help > div { background:var(--cream-soft); border:1px solid var(--rule); border-radius:6px;
  padding:22px 20px 24px; }
.st-help--steps > div::before { counter-increment:sthelp; content:counter(sthelp, decimal-leading-zero);
  display:block; font-family:ui-monospace, Menlo, monospace; font-size:.78rem; letter-spacing:.1em;
  color:#7E6836; margin-bottom:12px; }
.st-help h3 { font-family:var(--font-label); font-weight:700; font-size:1.02rem;
  color:var(--deep-green); margin:0; }
.st-help p { margin:8px 0 0; font-size:.9rem; color:var(--secondary); }
.st-help .st-link { display:inline-block; margin-top:12px; }

/* =====================================================================
   BAND CARDS — "Ways to start" (budget bands).
   ===================================================================== */
.st-bands { display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(12px, 1.6vw, 20px); }
@media (max-width:960px){ .st-bands { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .st-bands { grid-template-columns:1fr; } }
.st-band { background:var(--cream-soft); border:1px solid var(--rule); border-radius:6px;
  padding:22px 20px 24px; display:flex; flex-direction:column; gap:6px; }
.st-band b { font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--deep-green);
  line-height:1; }
.st-band i { font-style:normal; font-family:var(--font-label); font-weight:600; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; color:#7E6836; }
.st-band p { margin:2px 0 0; font-size:.88rem; color:var(--secondary); }

/* =====================================================================
   FEATURE ROWS + CHECK LISTS (service pages)
   ===================================================================== */
.st-feats { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px, 1.6vw, 20px); }
@media (max-width:860px){ .st-feats { grid-template-columns:1fr; } }
.st-feat { background:var(--cream-soft); border:1px solid var(--rule); border-radius:6px; padding:24px 22px; }
.st-feat h3 { font-family:var(--font-label); font-weight:700; font-size:1.05rem; color:var(--deep-green); margin:0; }
.st-feat p { margin:8px 0 0; font-size:.92rem; color:var(--secondary); }

.st-check { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.st-check li { position:relative; padding-left:30px; font-size:.96rem; color:var(--body-ink); }
.st-check li::before { content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px;
  display:grid; place-items:center; font-size:.72rem; font-weight:700; color:#1c2622;
  background:var(--gold); border-radius:3px; }
.st-check li b { color:var(--deep-green); }

/* =====================================================================
   BUY LAYOUT — content left, sticky buy card right (Apple product page).
   ===================================================================== */
.st-buy { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:start; }
@media (max-width:860px){ .st-buy { grid-template-columns:1fr; } }
.st-buycard { position:sticky; top:86px; background:var(--cream-soft); border:1px solid var(--rule);
  border-radius:6px; padding:26px 24px 28px; box-shadow:0 24px 54px -34px rgba(31,44,39,.45); }
@media (max-width:860px){ .st-buycard { position:static; } }
.st-buycard .st-kicker { margin-bottom:6px; }
.st-buycard h3 { font-family:var(--font-display); font-weight:700; font-size:1.9rem; line-height:1;
  color:var(--deep-green); margin:0; }
.st-buycard__price { margin:14px 0 4px; font-family:var(--font-label); font-weight:700;
  font-size:1.05rem; color:var(--deep-green); }
.st-buycard__note { margin:0 0 18px; font-size:.86rem; color:var(--secondary); }
.st-buycard .st-btn { display:block; width:100%; }
.st-buycard .st-btn + .st-btn { margin-top:10px; }
.st-buycard__foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--rule);
  font-size:.8rem; color:var(--secondary); }
.st-buycard__foot a { color:#7E6836; }

/* =====================================================================
   CTA BAND (pre-footer, dark)
   ===================================================================== */
.st-ctaband { background:var(--deep-green-deep); text-align:center;
  padding:clamp(64px, 11vh, 130px) 24px; }
.st-ctaband .st-kicker { color:var(--gold); }
.st-ctaband h2 { font-family:var(--font-display); font-weight:700; color:#f7f3ea; line-height:.98;
  font-size:clamp(2.4rem, 5.6vw, 4.2rem); margin:12px 0 0; }
.st-ctaband p { color:rgba(212,232,227,.85); max-width:56ch; margin:14px auto 0;
  font-size:clamp(.96rem, 1.2vw, 1.06rem); }
.st-ctaband__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

/* =====================================================================
   FOOTER — mega footer, deep green.
   ===================================================================== */
.st-footer { background:var(--deep-green); color:rgba(247,243,234,.82);
  font-family:var(--font-label); font-size:.84rem; }
.st-footer a { color:rgba(247,243,234,.82); text-decoration:none; }
.st-footer a:hover { color:#fff; text-decoration:underline; }
.st-footer__grid { display:grid; grid-template-columns:1.4fr repeat(3, 1fr);
  gap:clamp(24px, 4vw, 56px); padding:clamp(44px, 7vh, 72px) 0 36px; }
@media (max-width:860px){ .st-footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .st-footer__grid { grid-template-columns:1fr; } }
.st-footer__brand { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.st-footer__brand img { width:30px; height:30px; }
.st-footer__brand b { font-family:var(--font-display); font-size:1.1rem; color:#f7f3ea; letter-spacing:.03em; }
.st-footer__blurb { max-width:34ch; color:rgba(247,243,234,.68); }
.st-footer h4 { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 12px; font-weight:700; }
.st-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.st-footer__legal { border-top:1px solid rgba(247,243,234,.16); padding:18px 0 26px;
  display:flex; gap:8px 22px; flex-wrap:wrap; align-items:center;
  font-size:.76rem; color:rgba(247,243,234,.6); }
.st-footer__legal a { color:rgba(247,243,234,.72); }
.st-footer__legal .st-coord { margin-left:auto; font-family:ui-monospace, Menlo, monospace;
  letter-spacing:.04em; }
@media (max-width:560px){ .st-footer__legal .st-coord { margin-left:0; } }

/* =====================================================================
   START FLOW (the project checkout)
   ===================================================================== */
.st-steps { display:flex; flex-direction:column; gap:clamp(34px, 5vh, 56px); }
.st-step { border:0; margin:0; padding:0; min-width:0; }
.st-step h2, .st-step legend { display:flex; align-items:baseline; gap:14px; font-family:var(--font-label);
  font-weight:700; font-size:clamp(1.25rem, 2vw, 1.6rem); color:var(--deep-green); margin:0 0 4px;
  padding:0; }
.st-step h2 i, .st-step legend i { font-style:normal; font-family:ui-monospace, Menlo, monospace;
  font-weight:400; font-size:.8rem; letter-spacing:.1em; color:#7E6836; }
.st-step > p { margin:0 0 18px; color:var(--secondary); font-size:.92rem; }
/* legend doesn't participate in flex layouts consistently — give the intro
   paragraph its spacing directly after it */
.st-step legend + p { margin-top:6px; }

.st-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; }
.st-choice { position:relative; display:block; background:var(--cream-soft); border:1px solid var(--rule);
  border-radius:6px; padding:18px 18px 20px; cursor:pointer;
  transition:border-color .2s, box-shadow .2s, background .2s; }
.st-choice input { position:absolute; opacity:0; pointer-events:none; }
.st-choice b { display:block; font-family:var(--font-label); font-weight:700; font-size:.98rem;
  color:var(--deep-green); }
.st-choice span { display:block; margin-top:4px; font-size:.82rem; color:var(--secondary); }
.st-choice:hover { border-color:rgba(201,169,97,.6); }
.st-choice:has(input:checked) { border-color:var(--dark-gold); background:#fdf9ef;
  box-shadow:0 0 0 1px var(--dark-gold) inset; }
/* explicit selected glyph — state is never colour-of-border alone (WCAG 1.4.11).
   Badge renders ONLY on the selected card: empty boxes on every card read as
   checkboxes and mis-signal multi-select on these radio groups (UI review r2). */
.st-choice:has(input:checked)::after { content:'✓'; content:'✓' / ''; position:absolute; top:10px; right:10px;
  width:20px; height:20px; display:grid; place-items:center; font-size:.7rem; font-weight:700;
  border-radius:3px; color:#fff; background:#7E6836; border:1px solid #7E6836; }
.st-choice:has(input:focus-visible) { outline:3px solid var(--dark-gold); outline-offset:2px; }
/* the odd "Not sure yet" card closes the grid instead of orphaning beside a gap */
.st-choice--wide { grid-column:1 / -1; }

.st-field { display:block; margin-bottom:16px; }
.st-field span { display:block; font-family:var(--font-label); font-weight:600; font-size:.82rem;
  color:var(--deep-green); margin-bottom:6px; }
.st-field input, .st-field textarea, .st-field select { width:100%; font-family:var(--font-body);
  font-size:.95rem; color:var(--body-ink); background:var(--cream-soft);
  border:1px solid rgba(44,62,55,.55); border-radius:4px; padding:12px 14px; }
.st-field textarea { min-height:120px; resize:vertical; }
.st-field input:focus-visible, .st-field textarea:focus-visible, .st-field select:focus-visible {
  outline:3px solid var(--dark-gold); outline-offset:1px; border-color:var(--dark-gold); }
.st-field small { display:block; margin-top:5px; font-size:.76rem; color:var(--secondary); }
@media (max-width:560px){ .st-field input, .st-field textarea, .st-field select { font-size:16px; } }

.st-review { background:var(--cream-soft); border:1px solid var(--rule); border-radius:6px;
  padding:24px; box-shadow:0 24px 54px -34px rgba(31,44,39,.45); }
.st-review h3 { font-family:var(--font-display); font-weight:700; font-size:1.7rem; line-height:1;
  color:var(--deep-green); margin:0 0 14px; }
.st-review dl { margin:0 0 18px; display:grid; grid-template-columns:auto 1fr; gap:8px 18px;
  font-size:.9rem; }
.st-review dt { font-family:var(--font-label); font-weight:600; color:var(--secondary); }
.st-review dd { margin:0; color:var(--deep-green); }
.st-review .st-btn { width:100%; display:block; }
.st-review__foot { margin-top:12px; font-size:.8rem; color:var(--secondary); text-align:center; }

/* "You're all set" confirmation */
.st-done { text-align:center; padding:clamp(60px, 12vh, 140px) 24px; }
.st-done h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem, 6vw, 4.4rem);
  color:var(--deep-green); line-height:1; margin:0; }
.st-done p { color:var(--secondary); max-width:52ch; margin:16px auto 0; }

/* =====================================================================
   QUICK LINKS (Apple Store footer chips)
   ===================================================================== */
.st-quick { display:flex; flex-wrap:wrap; gap:10px; }
.st-quick a { font-family:var(--font-label); font-weight:600; font-size:.8rem; color:var(--deep-green);
  text-decoration:none; border:1px solid var(--rule-strong); border-radius:4px; padding:8px 14px; }
.st-quick a:hover { border-color:var(--deep-green); }

/* Chip row — Apple Store category strip. Each thumb is a PLATE in the film's
   rail-plate language: landscape 16:9 art in a dark-glass frame with a gold
   border (Ahmed, 2026-07-30 — was 84px squares). */
.st-chips { display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:clamp(14px, 2vw, 26px);
  overflow-x:auto; padding:6px 0 16px; scrollbar-width:none; }
.st-chips::-webkit-scrollbar { display:none; }
.st-chip { display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; }
.st-chip img { width:150px; height:88px; border-radius:6px; object-fit:cover;
  padding:3px; background:var(--deep-green-deep); border:1px solid rgba(201,169,97,.55);
  box-shadow:0 10px 24px -14px rgba(31,44,39,.5);
  transition:transform .2s ease, border-color .2s ease; }
.st-chip:hover img { transform:translateY(-3px); border-color:var(--gold); }
.st-chip span { font-family:var(--font-label); font-weight:600; font-size:.78rem; color:var(--deep-green);
  text-align:center; }

/* The film's § pill glass (.42 alpha) composites to ~2.7:1 over cream pages —
   raise the base on light surfaces (7.06:1); the film keeps its own look. */
body.site .swp-legal, body.film-done .swp-legal { background:rgba(7,12,10,.7); }

/* =====================================================================
   INDEX HANDOFF — the film releases its fixed chrome once the still world
   scrolls up. #after covers stage (z10) + copylayer (z20); topbar (z50)
   stays as the site header; rail/hint/scrollbar bow out.
   ===================================================================== */
#after { position:relative; z-index:21; background:var(--cream);
  /* Lazy images loading inside #after must not trigger scroll anchoring —
     an adjusted scrollY mid-film reads as a visible jerk in the scrub. */
  overflow-anchor:none; }
/* THE PLATE HANDOFF (Ahmed, 2026-07-31). The film no longer scrolls away and
   fades to black — the engine holds its final frame, and the still world rides
   up over it like a plate: rounded leading edge, a gold hairline catching the
   light, and a deep shadow cast onto the film underneath. overflow:hidden keeps
   the section backgrounds inside the radius. */
#after { border-radius:clamp(14px, 2vw, 26px) clamp(14px, 2vw, 26px) 0 0;
  overflow:hidden; border-top:1px solid rgba(201,169,97,.42);
  box-shadow:0 -34px 70px -18px rgba(0,0,0,.72), 0 -2px 0 rgba(247,243,234,.06); }
/* A short breath of cream above the first heading so the plate's edge reads as
   an edge, not as a crop through the content. */
#after::before { content:''; display:block; height:clamp(18px, 4vh, 54px); }
body.film-done .sw-route, body.film-done .sw-hint, body.film-done .sw-scrollbar {
  opacity:0 !important; pointer-events:none !important; transition:opacity .3s; }
/* The finale's headline dissolves as the plate begins to rise, rather than
   being sliced in half by its leading edge. */
.sw-copylayer { transition:opacity .4s ease; }
body.film-done .sw-copylayer { opacity:0; }
/* The engine topbar is a transparent flex strip — over the cream still world
   its cream brand text would wash out. Give it the st-header glass once the
   still world owns the viewport. */
body.film-done .sw-topbar { background:color-mix(in srgb, var(--deep-green-deep) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--gold) 24%, transparent); }
.sw-route, .sw-hint, .sw-scrollbar { transition:opacity .3s; }
/* Seam between the film's dark finale and the cream still world: open on dark. */
#after .st-seam { background:linear-gradient(180deg, #070c0a, #0d1512 46%, var(--deep-green-deep)); }
#after .st-seam .st-kicker { color:var(--gold); }
#after .st-seam .st-head { color:#f7f3ea; }
#after .st-seam .st-head span { color:rgba(212,232,227,.75); }
#after .st-seam .st-sub { color:rgba(212,232,227,.8); }

@media (prefers-reduced-motion: reduce){
  .st-card, .st-card:hover, .st-chip img, .st-chip:hover img { transition:none; transform:none; }
  .st-svccard, .st-svccard:hover { transition:none; transform:none; }
  .st-card__shot video { display:none; }
}

/* =====================================================================
   MOBILE PASS (Ahmed, 2026-07-31) — thumb-sized targets, tighter blocks,
   and art that suits a phone. Measured at 375 and 320.
   ===================================================================== */
@media (max-width:860px){
  /* Every control clears the 44px platform target. The header sat at 34-40. */
  .st-header__cta { padding:14px 16px; font-size:.76rem; }
  .st-brand { padding:9px 0; }
  .st-burger { width:44px; height:44px; }
  .st-menu__close { width:46px; height:46px; }
  .st-btn { padding:15px 24px; }
  .st-svccard__act .st-btn { padding:14px 20px; }
  /* Inline links were 18-22px tall: pad them out without moving the text. */
  .st-link, .st-tile__links a, .st-drop__more a, .st-menu__more a {
    display:inline-block; padding:11px 0; }
  .st-svccard__act { gap:20px; padding-top:12px; }
  .st-quick a { padding:12px 16px; }
  .st-footer ul { gap:2px; }
  .st-footer ul a { display:inline-block; padding:9px 0; }
  .st-footer__legal a { display:inline-block; padding:6px 0; }

  /* Four full-bleed tiles at 380px each is a long scroll on a phone; the art
     still reads at 300 and the copy sits closer to its own picture. */
  .st-tile { min-height:300px; padding-top:24px; }
  .st-tile__links { padding-bottom:20px; }

  /* Chips: three peek instead of two, so the row is visibly scrollable. */
  .st-chips { grid-auto-columns:124px; gap:14px; }
  .st-chip img { width:124px; height:74px; }

  /* The service card art is decoration under a headline — give the words more
     of the screen. */
  .st-svccard__art { aspect-ratio:16/6; }
  .st-svccard__in { padding:16px 18px 18px; }

  /* Section rhythm: the desktop 9vh top/bottom stacks up over a page of
     sections and pushes the CTA band far down the scroll. */
  .st-section { padding:clamp(44px, 6.5vh, 72px) 0; }
  .st-two { gap:34px; }
  .st-hero { min-height:auto; padding:104px 22px 56px; }
  .st-hero--light { padding-top:88px; }
}
@media (max-width:400px){
  /* 320-375: keep the header from crowding the brand out. */
  .st-brand b { font-size:1rem; }
  .st-brand img { width:26px; height:26px; }
  .st-header__cta { padding:12px 12px; font-size:.72rem; }
  .st-drop__btn { font-size:.72rem; }
}