/* ==========================================================================
   BookedFolio v2 — site.css
   Cinematic editorial. Five acts, one interaction.
   Palette locked to Brand Kit v2; distribution and scale are not.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand primitives — locked */
  --ivory:        #E9E0CF;
  --ivory-lift:   #F1EADC;
  --ivory-deep:   #DCD1BB;
  --forest:       #132B23;
  --forest-lift:  #1C3A30;
  --forest-deep:  #0B1712;
  --sage:         #5E775E;   /* hairlines, icons, borders only — 3.75:1 fails AA for text */
  --sage-text:    #4F664F;   /* v1's measured fix: 4.79:1 on ivory, 5.24:1 on raised */
  --gold:         #BA9B5F;
  --gold-deep:    #A6874C;
  --gold-light:   #D4B87A;   /* gold on forest only, for large display accents */

  /* Semantic */
  --bg:          var(--ivory);
  --text:        var(--forest);
  --muted:       var(--sage-text);
  --muted-dark:  #AFB9AD;    /* muted text inside forest bands */
  --line:        rgba(19, 43, 35, .15);
  --line-strong: rgba(19, 43, 35, .30);
  --line-dark:   rgba(233, 224, 207, .20);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* v2 opens the top end — the single biggest perceived-value lever at zero bytes */
  --t-cinema:  clamp(2.9rem, 8.4vw, 7rem);
  --t-act:     clamp(2.2rem, 5.4vw, 4.4rem);
  --t-h1:      clamp(2rem, 4.4vw, 3.2rem);
  --t-h2:      clamp(1.5rem, 3vw, 2.15rem);
  --t-h3:      1.125rem;
  --t-lede:    clamp(1.08rem, 1.7vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   0.9rem;
  --t-label:   0.75rem;

  --measure:      66ch;
  --measure-lede: 52ch;

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter: clamp(20px, 5vw, 48px);
  --container: 1240px;
  --container-narrow: 760px;
  --act-y: clamp(72px, 10vw, 148px);

  --radius: 2px;
  --radius-lg: 6px;

  /* Motion — state only, plus the one authored interaction */
  --t-state: 160ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(.22, .61, .30, 1);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 {
  font-size: var(--t-h3); font-family: var(--font-body);
  font-weight: 600; letter-spacing: 0; line-height: 1.35;
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
li { margin-bottom: var(--s-2); max-width: var(--measure); }
strong { font-weight: 600; }
a { color: inherit; }

::selection { background: var(--forest); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.act--dark :focus-visible,
.cinema :focus-visible,
.devices :focus-visible { outline-color: var(--gold); }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 300;
  background: var(--gold); color: var(--forest);
  padding: var(--s-3) var(--s-5); font-weight: 600; text-decoration: none;
  transition: top var(--t-state) var(--ease);
}
.skip:focus { top: var(--s-4); }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }
.wrap--wide { max-width: 1440px; }

.act { padding-block: var(--act-y); position: relative; }
.act--tight { padding-block: clamp(52px, 7vw, 92px); }

.act--lift { background: var(--ivory-lift); }
.act--dark { background: var(--forest); color: var(--ivory); }
.act--deep { background: var(--forest-deep); color: var(--ivory); }
.act--dark h1, .act--dark h2, .act--dark h3,
.act--deep h1, .act--deep h2, .act--deep h3 { color: var(--ivory); }
.act--dark .label, .act--deep .label { color: var(--gold); }
.act--dark .lede, .act--deep .lede { color: rgba(233, 224, 207, .85); }
.act--dark .muted, .act--deep .muted { color: var(--muted-dark); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.split { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.3fr; }
  .split--center { align-items: center; }
}
.split > * { min-width: 0; }

.cols {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.cols > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4. TYPE COMPONENTS
   -------------------------------------------------------------------------- */

.label {
  display: block; font-family: var(--font-body);
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-text); margin-bottom: var(--s-4);
}

/* Act numbering — the film-chapter device */
.act-mark {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-6);
  font-family: var(--font-body); font-size: var(--t-label);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-text);
}
.act-mark::after {
  content: ""; flex: 1; height: 1px; background: var(--line); max-width: 180px;
}
.act--dark .act-mark, .act--deep .act-mark { color: var(--gold); }
.act--dark .act-mark::after, .act--deep .act-mark::after { background: var(--line-dark); }
.act-mark__n { font-variant-numeric: tabular-nums; opacity: .55; }

.cinema-type {
  font-family: var(--font-display); font-size: var(--t-cinema);
  line-height: .98; font-weight: 500; letter-spacing: -0.028em;
  margin: 0; text-wrap: balance;
}
.act-type {
  font-family: var(--font-display); font-size: var(--t-act);
  line-height: 1.05; font-weight: 500; letter-spacing: -0.022em;
  margin: 0; text-wrap: balance;
}

.lede { font-size: var(--t-lede); line-height: 1.55; max-width: var(--measure-lede); }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.22; font-weight: 500; max-width: 24ch; margin: 0;
  text-wrap: balance;
}

.textlink {
  color: var(--sage-text); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: color var(--t-state) var(--ease);
}
.textlink:hover { color: var(--forest); }
.act--dark .textlink, .act--deep .textlink, .cinema .textlink { color: var(--gold); }
.act--dark .textlink:hover, .act--deep .textlink:hover { color: var(--ivory); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 50px; padding: 15px 30px;
  font-family: var(--font-body); font-size: .975rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background var(--t-state) var(--ease), color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease), transform var(--t-state) var(--ease);
}
.btn--primary { background: var(--gold); color: var(--forest); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); }
.btn--primary:active { transform: none; }

.btn--outline { background: transparent; color: var(--forest); border-color: var(--line-strong); }
.btn--outline:hover { background: var(--forest); color: var(--ivory); border-color: var(--forest); }

.act--dark .btn--outline, .act--deep .btn--outline, .cinema .btn--outline {
  color: var(--ivory); border-color: rgba(233, 224, 207, .45);
}
.act--dark .btn--outline:hover, .act--deep .btn--outline:hover, .cinema .btn--outline:hover {
  background: var(--ivory); color: var(--forest); border-color: var(--ivory);
}

.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ivory) 90%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
@supports not (backdrop-filter: blur(12px)) { .header { background: var(--ivory); } }

/* Over the cinematic hero the header goes transparent and inverts */
.header[data-over-cinema="true"] {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
.header[data-over-cinema="true"] .brand__word,
.header[data-over-cinema="true"] .nav__link,
.header[data-over-cinema="true"] .nav__toggle { color: var(--ivory); }
.header[data-over-cinema="true"] .nav__toggle { border-color: rgba(233, 224, 207, .45); }
.header[data-over-cinema="true"] .brand__mark--dark { display: none; }
.header[data-over-cinema="true"] .brand__mark--light { display: block; }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 74px; padding-block: var(--s-3);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 34px; height: 34px; }
.brand__mark--light { display: none; }
.brand__word {
  font-family: var(--font-display); font-size: 1.26rem; font-weight: 600;
  letter-spacing: -0.012em; color: var(--forest);
  transition: color var(--t-slow) var(--ease);
}

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__list { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  display: inline-block; padding: 7px 0; font-size: .94rem; font-weight: 500;
  text-decoration: none; color: var(--forest);
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-state) var(--ease), color var(--t-slow) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--gold); }
.nav__cta { padding: 12px 22px; min-height: 46px; font-size: .92rem; }

.nav__toggle {
  display: none; align-items: center; gap: var(--s-2);
  min-height: 46px; padding: 9px 15px;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  color: var(--forest); cursor: pointer;
  transition: color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}

.nav__cta-short { display: none; }

@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .header__inner { position: relative; }
  .nav__list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--gutter) var(--s-5);
  }
  .nav__list[data-open="true"] { display: flex; }
  .nav__link {
    padding: 15px 0; font-size: 1.05rem; color: var(--forest) !important;
    border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--line); border-left-color: var(--gold); padding-left: var(--s-3); }
}
@media (max-width: 580px) {
  .header__inner { gap: var(--s-3); min-height: 66px; }
  .nav { gap: var(--s-3); }
  .brand { gap: var(--s-2); }
  .brand__mark { width: 30px; height: 30px; }
  .brand__word { font-size: 1.04rem; }
  .nav__toggle { padding: 9px 12px; }
  .nav__cta { padding: 12px 15px; font-size: .85rem; }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
}
@media (max-width: 380px) {
  .brand__word { font-size: .95rem; }
  .nav__cta { padding: 12px 12px; font-size: .82rem; }
}

/* --------------------------------------------------------------------------
   7. ACT I — THE CINEMATIC OPENER
   -------------------------------------------------------------------------- */

.cinema {
  position: relative;
  min-height: min(96svh, 900px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--ivory);
  margin-top: -75px;            /* slide under the transparent header */
  padding-top: 75px;
}
@media (max-width: 940px) { .cinema { margin-top: -66px; padding-top: 66px; } }

.cinema__media { position: absolute; inset: 0; z-index: 0; }
.cinema__media img,
.cinema__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
/* The video sits above the poster and fades in only once it can actually play */
.cinema__video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.cinema[data-video="playing"] .cinema__video { opacity: 1; }

/* Two-axis scrim. The print-room wall is bright, and the type is left-aligned,
   so a bottom-weighted gradient alone measured 1.6:1 on the headline. A second
   left-weighted gradient buys the contrast where the words actually are and
   leaves the right-hand side of the photograph legible. Verified by sampling
   the composited pixels, not by eye. */
.cinema__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right,
      rgba(11, 23, 18, .74) 0%,
      rgba(11, 23, 18, .55) 38%,
      rgba(11, 23, 18, .10) 78%,
      rgba(11, 23, 18, 0) 100%),
    linear-gradient(to top,
      rgba(11, 23, 18, .90) 0%,
      rgba(11, 23, 18, .74) 30%,
      rgba(11, 23, 18, .56) 62%,
      rgba(11, 23, 18, .50) 100%);
}

.cinema__inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(40px, 7vw, 84px);
}
.cinema__label {
  /* Gold measured 3.72:1 here. The top of the frame is deliberately the least
     scrimmed part of the image, so the label goes ivory and the gold accent
     lives on the call to action instead. */
  color: rgba(233, 224, 207, .84);
}
.cinema__title { max-width: 17ch; }
.cinema__lede {
  margin-top: var(--s-6); max-width: 46ch;
  color: rgba(233, 224, 207, .88); font-size: var(--t-lede); line-height: 1.55;
}
.cinema__actions { margin-top: var(--s-7); }
.cinema__note {
  margin-top: var(--s-5); font-size: var(--t-small);
  color: rgba(233, 224, 207, .68); max-width: 44ch;
}

/* Quiet scroll hint — a rule that breathes, not a bouncing arrow */
.cinema__hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 2; width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(233,224,207,0), var(--gold));
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  .cinema__hint { animation: hint 3.4s var(--ease) infinite; transform-origin: bottom; }
  @keyframes hint {
    0%, 100% { transform: translateX(-50%) scaleY(.45); opacity: .35; }
    50%      { transform: translateX(-50%) scaleY(1);   opacity: .85; }
  }
}
@media (max-width: 700px) { .cinema__hint { display: none; } }

/* --------------------------------------------------------------------------
   8. ACT II — THE GAP (the signature interaction)
   -------------------------------------------------------------------------- */

.gap { --split: 50%; }

.gap__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--forest);
  border-radius: var(--radius-lg);
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(19,43,35,.06);
}
@media (max-width: 760px) { .gap__stage { aspect-ratio: 3 / 4; } }

.gap__layer { position: absolute; inset: 0; overflow: hidden; }
/* "After" sits on top, clipped to the right of the handle */
.gap__layer--after { clip-path: inset(0 0 0 var(--split)); z-index: 2; }

.gap__tag {
  position: absolute; top: 3cqw; z-index: 4;
  font-family: var(--font-body); font-size: max(10px, 1.25cqw);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .7em 1.1em; border-radius: 2px; pointer-events: none;
  transition: opacity var(--t-state) var(--ease);
}
.gap__tag--before { left: 3cqw; background: rgba(19,43,35,.82); color: var(--ivory); }
.gap__tag--after  { right: 3cqw; background: var(--gold); color: var(--forest); }

/* The handle */
.gap__handle {
  position: absolute; top: 0; bottom: 0; left: var(--split);
  width: 2px; background: var(--gold); z-index: 3;
  transform: translateX(-1px); pointer-events: none;
}
.gap__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: var(--forest);
  display: grid; place-items: center;
  box-shadow: 0 2px 14px rgba(11,23,18,.34);
}
.gap__grip svg { width: 22px; height: 22px; }

/* The real control: a range input laid over the stage, invisible but operable */
.gap__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  appearance: none; background: transparent; cursor: ew-resize;
}
.gap__range::-webkit-slider-thumb {
  appearance: none; width: 54px; height: 100%; background: transparent; cursor: ew-resize;
}
.gap__range::-moz-range-thumb {
  width: 54px; height: 100%; background: transparent; border: 0; cursor: ew-resize;
}
.gap__range:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.gap__caption {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  justify-content: space-between; align-items: baseline;
  margin-top: var(--s-4); font-size: var(--t-small); color: var(--sage-text);
}
.gap__caption p { margin: 0; max-width: 54ch; }

/* ---- The two mini-sites. Everything sized in cqw so they scale as one unit. */

.mini {
  position: absolute; inset: 0;
  font-family: var(--font-body);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- BEFORE: cramped, dated, no hierarchy, contact buried -- */
.mini--before { background: #fff; color: #333; }
.mini--before .mini__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6cqw 2.4cqw; border-bottom: 1px solid #ddd; background: #f4f4f4;
  flex-shrink: 0;
}
.mini--before .mini__logo {
  font-family: "Times New Roman", Times, serif; font-size: 2.5cqw;
  letter-spacing: .04em; color: #444;
}
.mini--before .mini__nav { display: flex; gap: 1.6cqw; font-size: 1.35cqw; color: #777; }
.mini--before .mini__body { padding: 2.4cqw; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mini--before .mini__welcome {
  text-align: center; font-size: 1.5cqw; color: #666; line-height: 1.5;
  margin-bottom: 2cqw; max-width: none;
}
.mini--before .mini__welcome b { display: block; font-size: 2.1cqw; color: #444; margin-bottom: .6cqw; }
.mini--before .mini__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .8cqw; flex: 1; min-height: 0;
}
.mini--before .mini__grid > * { aspect-ratio: 4/3; overflow: hidden; border: 1px solid #e2e2e2; }
.mini--before .mini__foot {
  margin-top: 2cqw; text-align: center; font-size: 1.2cqw; color: #999;
  border-top: 1px solid #eee; padding-top: 1.4cqw;
}

/* -- AFTER: the same photographs, given room and a job -- */
.mini--after { background: var(--ivory); color: var(--forest); }
.mini--after .mini__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2cqw 3cqw; flex-shrink: 0;
}
.mini--after .mini__logo {
  font-family: var(--font-display); font-size: 2.2cqw;
  letter-spacing: .2em; text-transform: uppercase; color: var(--forest);
}
.mini--after .mini__nav { display: flex; gap: 2.2cqw; font-size: 1.25cqw; color: var(--sage-text); align-items: center; }
.mini--after .mini__cta {
  background: var(--gold); color: var(--forest); padding: .9cqw 1.8cqw;
  font-weight: 600; font-size: 1.2cqw; border-radius: 1px;
}
.mini--after .mini__hero { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mini--after .mini__hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,23,18,.72), rgba(11,23,18,.05) 62%);
}
.mini--after .mini__over {
  position: absolute; left: 3cqw; right: 3cqw; bottom: 2.6cqw; z-index: 2; color: #fff;
}
.mini--after .mini__over h4 {
  font-family: var(--font-display); font-size: 3.4cqw; line-height: 1.08;
  font-weight: 500; margin: 0 0 1cqw; color: #fff; letter-spacing: -.02em;
}
.mini--after .mini__meta { display: flex; flex-wrap: wrap; gap: 1.8cqw; font-size: 1.3cqw; color: rgba(255,255,255,.9); }
.mini--after .mini__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7cqw; padding: .7cqw 3cqw 2.4cqw; flex-shrink: 0; }
.mini--after .mini__strip > * { aspect-ratio: 3/2; overflow: hidden; }

/* --------------------------------------------------------------------------
   9. ACT III — THE DEVICE WALL
   -------------------------------------------------------------------------- */

.devices { position: relative; }

.devices__tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  border-bottom: 1px solid var(--line); margin-bottom: var(--s-7);
}
.act--dark .devices__tabs { border-bottom-color: var(--line-dark); }

.devices__tab {
  appearance: none; background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 12px var(--s-5) 14px; min-height: 46px;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  color: var(--sage-text); cursor: pointer;
  transition: color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.devices__tab:hover { color: var(--forest); }
.devices__tab[aria-selected="true"] { color: var(--forest); border-bottom-color: var(--gold); }
.act--dark .devices__tab { color: var(--muted-dark); }
.act--dark .devices__tab:hover,
.act--dark .devices__tab[aria-selected="true"] { color: var(--ivory); }

.devices__stage {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 1000px) {
  .devices__stage { grid-template-columns: 1fr 268px; gap: var(--s-7); }
}

/* Laptop */
.laptop { position: relative; }
.laptop__screen {
  position: relative;
  background: var(--forest-deep);
  border: 1px solid rgba(19,43,35,.5);
  border-radius: 8px 8px 2px 2px;
  padding: 12px 12px 0;
}
.act--dark .laptop__screen { border-color: rgba(233,224,207,.22); }
.laptop__glass {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 2px; background: var(--ivory-lift);
}
.laptop__base {
  height: 12px; border-radius: 0 0 10px 10px;
  background: linear-gradient(to bottom, #2A3F36, #16241E);
  margin-inline: -14px;
  border: 1px solid rgba(19,43,35,.5); border-top: 0;
}
.act--dark .laptop__base { border-color: rgba(233,224,207,.22); }

/* Phone */
.phone { justify-self: center; width: 100%; max-width: 268px; }
.phone__shell {
  position: relative; padding: 10px;
  background: var(--forest-deep);
  border: 1px solid rgba(19,43,35,.5);
  border-radius: 30px;
}
.act--dark .phone__shell { border-color: rgba(233,224,207,.22); }
.phone__glass {
  position: relative; aspect-ratio: 9 / 17; overflow: hidden;
  border-radius: 20px; background: var(--ivory-lift);
}
.phone__notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 5px; border-radius: 3px;
  background: rgba(233,224,207,.28); z-index: 3;
}

/* Shared frame internals */
.frame-load {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: var(--s-5); text-align: center;
  font-size: var(--t-small); color: var(--sage-text);
  background: var(--ivory-lift);
  transition: opacity var(--t-slow) var(--ease);
}
[data-live="true"] .frame-load { opacity: 0; }

.frame-live {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
[data-live="true"] .frame-live { opacity: 1; }

/* Touch devices get a tap-to-open overlay instead of a nested scroll trap */
.frame-tap {
  position: absolute; inset: 0; z-index: 4; display: none;
  align-items: flex-end; justify-content: center; padding: var(--s-4);
  text-decoration: none;
}
.frame-tap span {
  background: var(--gold); color: var(--forest);
  font-size: .8rem; font-weight: 600; padding: 9px 16px; border-radius: var(--radius);
}
@media (hover: none) { .frame-tap { display: flex; } }

.devices__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  justify-content: space-between; align-items: baseline;
  margin-top: var(--s-5); font-size: var(--t-small); color: var(--sage-text);
}
.act--dark .devices__meta { color: var(--muted-dark); }
.devices__meta p { margin: 0; max-width: 52ch; }
.devices__meta a { display: inline-block; padding-block: 4px; }

.disclosure {
  font-size: var(--t-small); color: var(--sage-text);
  margin-top: var(--s-4); max-width: 66ch;
}
.act--dark .disclosure { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   10. EDITORIAL FIGURES
   -------------------------------------------------------------------------- */

.figure { margin: 0; position: relative; }
.figure img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.figure figcaption {
  font-size: var(--t-small); color: var(--sage-text); padding-top: var(--s-3);
}
.act--dark .figure figcaption { color: var(--muted-dark); }

/* A full-bleed plate that breaks the container */
.plate {
  position: relative; margin: 0;
  height: clamp(320px, 52vw, 620px); overflow: hidden;
}
.plate img, .plate video { width: 100%; height: 100%; object-fit: cover; }
.plate__over {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(to right, rgba(11,23,18,.86) 0%, rgba(11,23,18,.62) 42%, rgba(11,23,18,.18) 100%);
  color: var(--ivory);
}
.plate__over--right {
  background: linear-gradient(to left, rgba(11,23,18,.88) 0%, rgba(11,23,18,.60) 44%, rgba(11,23,18,.14) 100%);
  justify-content: flex-end;
}
.plate__box { max-width: 44ch; }

/* --------------------------------------------------------------------------
   11. LISTS, CARDS, RULES
   -------------------------------------------------------------------------- */

.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s-4);
  align-items: start; padding: var(--s-4) 0;
  border-top: 1px solid var(--line); margin: 0; max-width: none;
}
.rule-list li:last-child { border-bottom: 1px solid var(--line); }
.act--dark .rule-list li, .act--deep .rule-list li { border-color: var(--line-dark); }

.aperture {
  width: 13px; height: 13px; margin-top: 7px; flex-shrink: 0;
  border: 1px solid var(--gold); border-radius: 50%; position: relative;
}
.aperture::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--gold); border-radius: 50%;
}

.card {
  background: var(--ivory-lift); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-6);
}
.act--dark .card, .act--deep .card { background: var(--forest-lift); border-color: var(--line-dark); }
.card--feature { border-top: 3px solid var(--gold); }

/* The timeline — the process as a measured sequence */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; margin: 0; max-width: none;
  padding: 0 0 var(--s-7) var(--s-7);
  border-left: 1px solid var(--line);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.act--dark .timeline li { border-left-color: var(--line-dark); }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
}
.timeline__when {
  display: block; font-family: var(--font-body); font-size: var(--t-label);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage-text); margin-bottom: var(--s-2);
}
.act--dark .timeline__when { color: var(--gold); }
.timeline__what { font-family: var(--font-display); font-size: 1.32rem; line-height: 1.2; margin-bottom: var(--s-2); }

/* Facts */
.facts { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.facts > * { min-width: 0; }
.fact { border-top: 2px solid currentColor; padding-top: var(--s-4); }
.fact__n {
  font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1; margin-bottom: var(--s-3); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   12. PRICING
   -------------------------------------------------------------------------- */

.price {
  font-family: var(--font-display); font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1; font-variant-numeric: tabular-nums; display: inline-block;
  padding-bottom: var(--s-3); border-bottom: 2px solid var(--gold);
}
.price__note {
  display: block; margin-top: var(--s-3); font-family: var(--font-body);
  font-size: var(--t-small); color: var(--sage-text);
}
.act--dark .price__note, .act--deep .price__note { color: var(--muted-dark); }
.price-was { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .55; font-size: .52em; margin-right: .3em; }

/* --------------------------------------------------------------------------
   13. ACCORDION
   -------------------------------------------------------------------------- */

.qa { border-top: 1px solid var(--line); }
.qa:last-of-type { border-bottom: 1px solid var(--line); }
.act--dark .qa { border-color: var(--line-dark); }
.qa > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; min-height: 46px;
  font-family: var(--font-body); font-size: 1.06rem; font-weight: 600;
  cursor: pointer; list-style: none;
  transition: color var(--t-state) var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--sage-text); }
.qa > summary::after {
  content: "+"; font-family: var(--font-body); font-weight: 400;
  font-size: 1.45rem; line-height: 1; color: var(--gold); flex-shrink: 0;
}
.qa[open] > summary::after { content: "\2212"; }
.qa__body { padding: 0 0 var(--s-5); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--t-small); font-weight: 600; }
.field__hint { font-size: var(--t-small); color: var(--sage-text); margin: 0; }
.act--dark .field__hint { color: var(--muted-dark); }
.act--dark .field > label { color: var(--ivory); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 15px;
  font-family: var(--font-body); font-size: 1rem; line-height: 1.4;
  color: var(--forest); background: var(--ivory-lift);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-state) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--forest); }

.act--dark .field input, .act--dark .field select, .act--dark .field textarea,
.act--deep .field input, .act--deep .field select, .act--deep .field textarea {
  background: var(--forest-lift); color: var(--ivory); border-color: var(--line-dark);
}
.act--dark .field input:hover, .act--dark .field select:hover, .act--dark .field textarea:hover { border-color: var(--gold); }

.field [aria-invalid="true"] { border-color: #8C2F2F; border-width: 2px; }
.act--dark .field [aria-invalid="true"] { border-color: #E8A5A5; }
.field__error { font-size: var(--t-small); font-weight: 600; color: #8C2F2F; margin: 0; }
.act--dark .field__error, .act--deep .field__error { color: #E8A5A5; }
.field__error:empty { display: none; }

.form__status { margin: 0; font-size: var(--t-small); font-weight: 600; min-height: 1.2em; }
.form__status[data-state="error"] { color: #8C2F2F; }
.act--dark .form__status[data-state="error"] { color: #E8A5A5; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   15. TABLES
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 520px; }
th, td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); }
.act--dark th, .act--dark td { border-color: var(--line-dark); }
.act--dark th { color: var(--gold); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--forest-deep); color: var(--ivory);
  padding-block: clamp(56px, 7vw, 92px) var(--s-7);
  border-top: 3px solid var(--gold);
}
.footer a { color: rgba(233,224,207,.82); text-decoration: none; }
.footer a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.footer__grid { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr)); margin-bottom: var(--s-7); }
.footer__grid > * { min-width: 0; }
.footer__title { font-size: var(--t-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s-2); }
.footer li a { display: inline-block; padding-block: 6px; min-height: 24px; }
.footer__foot {
  border-top: 1px solid var(--line-dark); padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  justify-content: space-between; align-items: baseline;
  font-size: var(--t-small); color: rgba(233,224,207,.68);
}
.footer__foot a { display: inline-block; padding-block: 4px; min-height: 24px; }
.footer__slogan { font-family: var(--font-display); font-size: 1.08rem; color: var(--ivory); }

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */

.center { text-align: center; margin-inline: auto; }
.center p, .center .lede, .center .pull { margin-inline: auto; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-6 { margin-bottom: var(--s-6); }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   18. PHONE FRAME — render a real mobile viewport, then scale it down
   A 250px-wide iframe would trigger an ultra-narrow edge case no real phone
   has. Instead the iframe is laid out at 390px (a real iPhone width) and
   scaled to fit, so the frame shows the actual mobile design.
   390 x 0.641 = 250   ·   736 x 0.641 = 472
   -------------------------------------------------------------------------- */

.phone { width: 270px; max-width: 270px; }
.phone__glass { width: 250px; height: 472px; aspect-ratio: auto; margin-inline: auto; }
.phone__glass .frame-live {
  /* max-width:100% from the base reset clamps this to the 250px frame and the
     iframe then renders a 250px viewport - an ultra-narrow width no real phone
     has. Explicitly opt out so it lays out at 390px and is scaled down. */
  width: 390px; height: 736px; max-width: none;
  transform: scale(0.641); transform-origin: top left;
}
@media (max-width: 999px) {
  .devices__stage { justify-items: center; }
  .phone { display: none; }   /* on a phone, the visitor already has the phone view */
}

/* --------------------------------------------------------------------------
   19. DEEP BAND INHERITS EVERY DARK TREATMENT
   `.act--deep` is the darkest band and is used for the closing form. Several
   dark-context rules above were written only for `.act--dark`, which left form
   hints at 2.92:1 on the home page. Everything dark applies to both.
   -------------------------------------------------------------------------- */

.act--deep .field__hint,
.act--deep .devices__meta,
.act--deep .disclosure,
.act--deep .figure figcaption { color: var(--muted-dark); }

.act--deep .field > label { color: var(--ivory); }

.act--deep .field input,
.act--deep .field select,
.act--deep .field textarea { background: var(--forest-lift); color: var(--ivory); border-color: var(--line-dark); }
.act--deep .field input:hover,
.act--deep .field select:hover,
.act--deep .field textarea:hover { border-color: var(--gold); }

.act--deep .card { background: var(--forest-lift); border-color: var(--line-dark); }
.act--deep .qa { border-color: var(--line-dark); }
.act--deep .timeline li { border-left-color: var(--line-dark); }
.act--deep .timeline__when { color: var(--gold); }
.act--deep th, .act--deep td { border-color: var(--line-dark); }
.act--deep th { color: var(--gold); }