/* ============================================================
   SAM Digital Marketing — "Studio Bright" design system
   Shared stylesheet. Tokens + base type + shell (nav, footer,
   CTA pill, sticky WhatsApp). No page-section styles yet.
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
  /* Colour */
  --paper:      #F4F3EF;                 /* bright bone white — page bg     */
  --white:      #FFFFFF;                 /* raised cards / video frames     */
  --ink:        #15130E;                 /* warm near-black — text          */
  --ink-soft:   rgba(21, 19, 14, .62);   /* secondary text                  */
  --faint:      rgba(21, 19, 14, .34);   /* labels, captions                */
  --brass:      #96742A;                 /* burnished gold accent           */
  --brass-soft: rgba(150, 116, 42, .12); /* tints / hover washes            */
  --line:       rgba(21, 19, 14, .12);   /* hairline borders                */

  /* Type families */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-accent:  "Instrument Serif", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (fluid) */
  --step--1: clamp(.82rem, .78rem + .2vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .25vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.8rem, 2rem + 4vw, 5.2rem);

  /* Rhythm */
  --measure: 66ch;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --nav-h:   64px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(21, 19, 14, .04),
               0 4px 16px rgba(21, 19, 14, .05);
  --shadow-md: 0 2px 6px rgba(21, 19, 14, .06),
               0 18px 48px rgba(21, 19, 14, .10);
}

/* ---- Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: inherit; text-decoration: none; }
a:not([class]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
}

strong { font-weight: 600; }

/* Editorial accent — one or two emphasis words */
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .01em;
}
.brass { color: var(--brass); }

/* Mono eyebrow / label / data */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Layout ----------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { flex: 1 0 auto; }

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

/* Skip link */
.skip-link {
  position: absolute; left: 8px; top: -60px;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; border-radius: 8px; z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 8px; }

/* ---- Focus visibility ------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Brand logo lockup  —  SAM Digital Marketing.
   Bold ink "SAM" + brass serif-italic "Digital Marketing" + brass "."
   ============================================================ */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: .34em;
  line-height: 1;
  white-space: nowrap;
  font-size: 1.25rem;
}
.logo__mark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
.logo__name {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
  letter-spacing: .01em;
}
.logo__dot {
  color: var(--brass);
  font-family: var(--font-accent);
  margin-left: -.34em;   /* cancel flex gap so the full-stop hugs "Marketing." */
}
.logo:hover .logo__mark { color: var(--ink); }

/* Optional mono tagline — footer only */
.logo-tagline {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: .6rem;
}

/* ============================================================
   CTA — official WhatsApp-green "Chat on WhatsApp" pill
   (ink text/icons for contrast). Locked by Sam 19/07/2026.
   ============================================================ */
:root { --wa-green: #25D366; --wa-green-deep: #1FBE5B; }
.btn {
  --btn-bg: var(--wa-green);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  padding: .95em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow: var(--shadow-sm);
  will-change: transform;
}
.btn:hover,
.btn:focus-visible {
  --btn-bg: var(--wa-green-deep);   /* colour-only change on hover/focus */
}
.btn:hover {
  transform: translateY(-2px);
  /* lift + brass underglow (shadow kept as-is) */
  box-shadow: 0 10px 30px rgba(21, 19, 14, .18),
              0 4px 18px rgba(150, 116, 42, .35);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--brass-soft);
  box-shadow: none;
  transform: translateY(-2px);
}

.btn__icon { width: 1.1em; height: 1.1em; }

/* ============================================================
   Sticky header / nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 243, 239, .97);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Phones: lighter wordmark + a touch more breathing room in the 64px bar */
@media (max-width: 480px) {
  .logo { font-size: 1.1rem; }
  .site-header__inner { gap: .75rem; }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .4rem 0;
  position: relative;
  transition: color .25s var(--ease);
  -webkit-font-smoothing: antialiased;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width .3s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }

.nav__cta { margin-left: .25rem; }
.nav__cta .btn { padding: .68em 1.15em; font-size: .92rem; }

/* Featured Services item — brass pill. CSS-only: the nav markup is targetable by href,
   so no per-page class is needed. Pill bg is #886A26 (a darkened brand brass): paper on
   --brass #96742A is 3.92:1 and fails WCAG AA; #886A26 lifts it to 4.57:1. */
.nav .nav__link[href="services.html"] {
  background: #886A26;
  color: var(--paper);
  padding: 9px 16px;
  border-radius: 99em;
  font-size: 14px;
  line-height: normal;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}
.nav .nav__link[href="services.html"]:hover,
.nav .nav__link[href="services.html"]:focus-visible {
  background: #7d5f22;   /* darker on hover — 5.36:1 */
  color: var(--paper);
}
/* The pill IS the current-page marker on the Services family — drop the underline so the
   aria-current service pages aren't double-marked. */
.nav .nav__link[href="services.html"]::after { display: none; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .5rem;
  color: var(--ink);
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 1.5rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    box-shadow: var(--shadow-md);
  }
  .nav[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link {
    display: block;                      /* real stacked rows — was inline, so vertical padding
                                            bled and the rows overlapped ("compressed") */
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
  }
  /* Featured pill in the drawer: hug content, drop the divider, and give it clear breathing
     room so it never crowds HOME above or ABOUT below. */
  .nav .nav__link[href="services.html"] {
    display: inline-block;
    border-bottom: 0;
    margin: 1rem 0;
    padding: .8rem 1.4rem;               /* comfortable tap target (~46px) */
  }
  .nav__cta { margin: 1.75rem 0 0; }     /* balanced gap between CONTACT and the WhatsApp pill */
  .nav__cta .btn { width: 100%; min-height: 44px; }   /* ≥44px touch target on mobile (desktop unaffected) */
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  flex-shrink: 0;
  margin-top: clamp(4rem, 10vw, 8rem);
  border-top: 1px solid var(--line);
  background: var(--white);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.site-footer h2 {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: var(--ink-soft); transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--ink); }

.footer-contact a { color: var(--ink); font-weight: 500; }

.site-footer__base {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--faint);
}
/* Company/legal line — full width above the base row; darker than --faint for AA (5.98:1 on --white) */
.site-footer__legal { flex-basis: 100%; margin: 0 0 .9rem; color: #6E6157; }

@media (max-width: 680px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ============================================================
   Sticky WhatsApp button (every page)
   ============================================================ */
.wa-sticky {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .8em 1.2em;
  min-height: 44px;            /* tap-target floor; only +4px over the old ~40px pill */
  min-width: 44px;             /* holds in icon-only mode (≤480px) */
  border-radius: 999px;
  background: var(--wa-green);
  color: var(--ink);           /* text + currentColor icon -> ink */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-sticky:hover,
.wa-sticky:focus-visible { background: var(--wa-green-deep); }
.wa-sticky:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(21, 19, 14, .22),
              0 4px 18px rgba(150, 116, 42, .35);
}
.wa-sticky__icon { width: 1.15em; height: 1.15em; }

@media (max-width: 480px) {
  .wa-sticky__label { display: none; }        /* icon-only pill on small screens */
  .wa-sticky { padding: .85em; }
}

/* ---- Second sticky pill: "Chat with our AI" (all pages, stacked above .wa-sticky) ---- */
.ai-sticky {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + 3.5rem);   /* clears the ~40px WhatsApp pill + a gap */
  z-index: 119;                                        /* one below .wa-sticky (120) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .8em 1.2em;
  min-height: 44px;            /* tap-target floor, matches .wa-sticky */
  min-width: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease);
}
.ai-sticky:hover { transform: translateY(-2px); background: #2a2620;
  box-shadow: 0 12px 34px rgba(21, 19, 14, .24); }
.ai-sticky:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.ai-sticky__icon { width: 1.15em; height: 1.15em; }
@media (max-width: 480px) {
  .ai-sticky__label { display: none; }        /* match .wa-sticky: icon-only on small screens */
  .ai-sticky { padding: .85em; }
}

/* ---- AI assistant chat panel (contact.html) ---- */
.ai-chat { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); }
.ai-chat .eyebrow { margin: 0 0 1rem; }
.ai-chat h2 { font-size: var(--step-2); margin: 0 0 .75rem; max-width: 18ch; }
.ai-chat__sub { color: var(--ink-soft); max-width: 54ch; margin: 0 0 clamp(1.5rem, 3vw, 2rem); }
.ai-chat__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  box-shadow: var(--shadow-sm);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 640px;
}
.ai-chat__log {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 160px;
  max-height: 42vh;
  overflow-y: auto;
  padding: .25rem;
  margin-bottom: .85rem;
}
.ai-msg {
  max-width: 82%;
  padding: .6em .85em;
  border-radius: 14px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink);
}
.ai-msg--bot  { align-self: flex-start; background: rgba(21, 19, 14, .06); border-bottom-left-radius: 4px; }
.ai-msg--user { align-self: flex-end;   background: var(--brass-soft);     border-bottom-right-radius: 4px; }
.ai-msg__wa { display: inline-block; margin-top: .3rem; color: var(--brass); font-weight: 700; }
.ai-chat__quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.ai-chat__chip {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  padding: .5em 1em;
  min-height: 44px;            /* tap-target floor */
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ai-chat__chip:hover,
.ai-chat__chip:focus-visible { background: var(--brass-soft); color: var(--ink); }
.ai-chat__chip:disabled { opacity: .5; cursor: default; }
.ai-chat__bar { display: flex; gap: .6rem; align-items: stretch; }
.ai-chat__input {
  flex: 1;
  min-width: 0;
  padding: .7em 1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
}
.ai-chat__input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.ai-chat__send { flex-shrink: 0; }
.ai-chat__note { color: #6E6157; font-size: .78rem; margin: .85rem 0 0; }   /* AA: 5.98:1 on white panel (was --faint 2.2:1) */

/* 📨 Send-this-chat-to-Sam button (chat footer) */
.ai-chat__foot { margin-top: .75rem; }
.ai-chat__tosam {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .55em .95em;
  min-height: 44px;            /* tap-target floor */
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ai-chat__tosam:hover,
.ai-chat__tosam:focus-visible { background: var(--brass-soft); border-color: var(--brass); }
.ai-chat__tosam:disabled { opacity: .55; cursor: default; }

/* Italic offline/fallback note appended inside a bot bubble */
.ai-msg__note { display: block; margin-top: .35rem; font-style: italic; font-size: .85em; color: var(--ink-soft); }

/* Typing indicator — three-dot pulse in SAMI's (bot) bubble style */
.ai-msg--typing { display: inline-flex; gap: .3em; align-items: center; }
.ai-msg--typing span {
  width: .5em; height: .5em; border-radius: 50%;
  background: var(--ink-soft);
  animation: aiTyping 1.1s infinite ease-in-out both;
}
.ai-msg--typing span:nth-child(2) { animation-delay: .18s; }
.ai-msg--typing span:nth-child(3) { animation-delay: .36s; }
@keyframes aiTyping { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-msg--typing span { animation: none; opacity: .5; } }

/* ============================================================
   HOME — Beat 0 · Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;    /* fallback: browsers without svh/dvh keep a full-viewport hero (no collapse) */
  min-height: 100svh;   /* small viewport height — no overflow when mobile toolbars are shown */
  min-height: 100dvh;   /* dynamic — the hero + full-bleed video stay filled as the toolbar shows/hides */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(5rem, 12vh, 8rem);
}

/* Full-bleed background: poster (instant) + clip (fades in) + scrim */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__poster {
  position: absolute;
  inset: 0;
  /* graded first frame shows instantly (poster-first LCP); --paper is the fallback */
  background: var(--paper) url("../assets/poster/hero-new.jpg") center / cover no-repeat;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                          /* clip fades in once loaded ([data-fade]) */
  transition: opacity 1s var(--ease);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  /* dark ink veil through the whole text zone; lightens to --paper only in the
     final ~12% for the transition into the page below (dark hero footage).
     Alphas strengthened from the .55/.45/.40 draft to .66/.60/.56 so ALL hero
     text clears WCAG 4.5:1 even over the poster's brightest hotspots
     (glowing monitor, lamp, window) — see contrast audit. */
  background: linear-gradient(180deg,
    rgba(21, 19, 14, .66) 0%,
    rgba(21, 19, 14, .60) 55%,
    rgba(21, 19, 14, .56) 88%,
    rgba(244, 243, 239, .92) 100%);
}

/* Hero text flipped for the dark footage — scoped to .hero--dark only, so no
   other section's type shifts. Brass accent word stays brass (reads on dark). */
.hero--dark .hero__eyebrow  { color: rgba(244, 243, 239, .70); }
.hero--dark .hero__headline { color: var(--paper); }
.hero--dark .hero__subline  { color: rgba(244, 243, 239, .85); }
.hero--dark .hero__risk     { color: rgba(244, 243, 239, .75); text-shadow: 0 0 6px rgba(21, 19, 14, .55); }

/* PART 2 — mobile hero reframe: shift the cover window left so the developer (not just the
   monitor) stays in frame on portrait phones. Desktop framing untouched. */
@media (max-width: 760px) {
  .hero__video  { object-position: 30% center; }
  .hero__poster { background-position: 30% center; }
}
/* PART 3 — phone hero spacing: tighten the stack + shrink the subline so the meta-line
   keeps clearance above the bottom edge. Desktop untouched. */
@media (max-width: 480px) {
  .hero { padding-block: clamp(3.75rem, 8vh, 4.75rem) clamp(3rem, 7vh, 3.75rem); }
  .hero__eyebrow  { margin-bottom: .9rem; }
  .hero__headline { margin: 0 0 .8rem; }
  .hero__subline  { font-size: var(--step-0); margin: 0 auto 1.35rem; }
  .hero__cta      { gap: .75rem; }
}

.hero__intro {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 62rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__eyebrow { margin-bottom: 1.4rem; }

.hero__headline {
  font-size: var(--step-4);
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 0 0 1.1rem;
  max-width: 16ch;
}
.hero__headline .accent { letter-spacing: 0; }
.hero__line { display: block; }   /* each headline line rises in sequence */

.hero__subline {
  font-size: var(--step-1);
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 54ch;
  margin: 0 auto 2rem;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.hero__cta .btn { padding: 1.05em 1.9em; }

.hero__risk {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  color: var(--faint);
  margin: 0;
}

/* Scroll cue — anchored to the bottom of the hero */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .25s var(--ease);
}
.hero__scroll:hover { color: var(--ink-soft); }
.hero__scroll svg { width: 16px; height: 22px; animation: scrollNudge 1.8s var(--ease) infinite; }

@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Instant orchestrated entrance — poster-backed, fires on load before the video.
   eyebrow -> headline lines (staggered) -> subline -> CTA, ~1s total.
   heroFade (opacity-only) is used where a transform would fight positioning. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__eyebrow              { animation: heroRise .7s var(--ease) 0s both; }
.hero__headline .hero__line { animation: heroRise .8s var(--ease) both; }
.hero__headline .hero__line:nth-child(1) { animation-delay: .12s; }
.hero__headline .hero__line:nth-child(2) { animation-delay: .22s; }
.hero__subline              { animation: heroRise .8s var(--ease) .34s both; }
.hero__cta                  { animation: heroRise .8s var(--ease) .44s both; }
.hero__scroll               { animation: heroFade .8s var(--ease) .7s both; }

/* ============================================================
   Scroll-reveal utility (JS toggles .is-visible)
   ============================================================ */
/* Hiding is progressive: only engages with JS (.has-js). Without JS every
   [data-reveal] element sits at its final, fully-visible state. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
              transform .9s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
/* Directional / scale variants (same specificity as base, declared after) */
.has-js [data-reveal="scale"] { transform: scale(.94); }
.has-js [data-reveal="left"]  { transform: translateX(-40px); }
.has-js [data-reveal="right"] { transform: translateX(40px); }
/* Revealed state (JS toggles .is-visible) — higher specificity, always wins */
.has-js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Staggered children (--i set inline) */
[data-reveal-item] { transition-delay: calc(var(--i, 0) * 110ms); }

/* Line-rise reveals for display headings.
   Text stays in the DOM (spans only) for SEO/AT; masking is progressive —
   without JS (.has-js absent) the lines simply show. */
.reveal-lines .rl { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.reveal-lines .rl__i { display: block; }
.has-js .reveal-lines .rl__i {
  transform: translateY(calc(110% + .14em));   /* +.14em compensates the .rl descender padding */
  transition: transform .85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--rl, 0) * 80ms);
  will-change: transform;
}
.has-js .reveal-lines.is-visible .rl__i { transform: translateY(0); }

/* ============================================================
   HOME — Beat 1 · Three Pillars
   ============================================================ */
.pillars {
  padding-top: clamp(2rem, 5vw, 3.5rem);      /* tighter after the hero scroll cue */
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
}
.pillars__head {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.pillars__eyebrow { margin: 0; }

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

.pillar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Hairline brass rule above the label */
.pillar__rule {
  width: 2.25rem;
  height: 1px;
  border: 0;
  margin: 0 0 1.1rem;
  background: var(--brass);
}

.pillar__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.4rem;
}

.pillar__heading {
  font-size: var(--step-2);
  margin: 0 0 .6rem;
}

.pillar__body {
  color: var(--ink-soft);
  margin: 0;
  max-width: 34ch;
}

@media (max-width: 760px) {
  .pillars__grid { grid-template-columns: 1fr; }
  .pillar__body { max-width: none; }
}

/* ============================================================
   HOME — Beat 2 · What We Build
   ============================================================ */
.build {
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.build__head {
  max-width: 40ch;
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}
.build__eyebrow { margin: 0 0 1rem; }
.build__heading { margin: 0; }

.build__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

/* Whole card is one link */
.build-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.build-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.build-card__index {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--faint);
  margin-bottom: 1.6rem;
}

.build-card__title {
  font-size: var(--step-2);
  margin: 0 0 .55rem;
}

.build-card__body {
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
  max-width: 36ch;
}

/* Push the affordance to the card's base for an even grid */
.build-card__more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}
.build-card__more span {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .25s var(--ease);
}
.build-card:hover .build-card__more span,
.build-card:focus-visible .build-card__more span {
  border-bottom-color: var(--brass);
}

@media (max-width: 760px) {
  .build__grid { grid-template-columns: 1fr; }
  .build-card__body { max-width: none; }
}

/* ============================================================
   HOME — Beat 3 · The Showcase (the finished app in a phone)
   A normal section that reveals on scroll; the clip plays in the
   phone frame, poster-first + lazy-loaded, sharp (no blur).
   ============================================================ */
.showcase {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.showcase__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(.75rem, 2.2vh, 1.5rem);
}
.showcase__eyebrow { margin: 0; }
.showcase__heading { margin: 0; font-size: var(--step-2); max-width: 18ch; }

.showcase__stage {
  position: relative;                 /* anchors the scroll cue below the phone */
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: clamp(1rem, 3vw, 2rem);
}

/* ---- Showcase scroll cue — mono "SCROLL" + chevron, centred just below the phone.
   Visible while the phone screen is still black; fades out (never snaps) the moment
   the demo powers on — keyed purely off the EXISTING .app-screen.is-live class via
   :has() (no JS). Browsers without :has() simply keep the cue visible — harmless. */
.showcase-cue {
  position: absolute;
  top: calc(100% + .6rem);            /* stage height == phone height -> just below the phone */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6E6157;
  pointer-events: none;
  opacity: 1;
  transition: opacity .6s var(--ease);
}
.showcase-cue__chev { display: block; color: var(--brass); animation: cueFloat 1.8s ease-in-out infinite; }
@keyframes cueFloat { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(3px); opacity: 1; } }
/* Hide (fade) as soon as the app screen blooms live */
.showcase__stage:has(.app-screen.is-live) .showcase-cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .showcase-cue__chev { animation: none; opacity: 1; } }

/* Portrait phone frame */
.phone {
  position: relative;
  aspect-ratio: 9 / 16;
  height: clamp(300px, 54svh, 500px);   /* scales down on short screens */
  max-width: 82vw;                       /* never overflow at 380px      */
  border: 1px solid var(--line);
  border-radius: clamp(18px, 3vw, 30px);
  box-shadow: var(--shadow-md);
  background: var(--paper);
  overflow: hidden;
}

/* ---- Showcase coded app screen ("Daybreak" demo) ---- */
.phone { container-type: size; }
.app-screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:#FCF8F2;color:#241C17;font-family:'Hanken Grotesk',sans-serif;font-size:5cqi;line-height:1.35;text-align:left}
.as-status{display:flex;align-items:center;justify-content:space-between;padding:.7em 1.3em .3em;font-size:.75em;font-weight:600}
.as-status__ic{display:flex;align-items:center;gap:.35em}.as-status__ic svg{display:block;height:.8em;width:auto}
.as-head{display:flex;align-items:center;justify-content:space-between;padding:.4em 1.2em .6em}
.as-greet{font-size:.72em;color:#6B5F55}
.as-brand{font-family:'Instrument Serif',serif;font-size:1.5em;line-height:1.05}
.as-brand span{color:#E8664E}
.as-loc{display:flex;align-items:center;gap:.35em;background:#fff;border:1px solid #EEE7DC;padding:.35em .7em;border-radius:99em;font-size:.68em;font-weight:600}
.as-loc i{width:.55em;height:.55em;border-radius:50%;background:#E8664E}
.as-body{flex:1;min-height:0;overflow:hidden;padding:0 1.2em;display:flex;flex-direction:column;gap:.7em}
.as-chips{display:flex;gap:.4em}
.as-chip{padding:.35em .7em;border-radius:99em;font-size:.68em;font-weight:600;white-space:nowrap}
.as-chip.is-on{background:#241C17;color:#fff}
.as-chip.c1{background:#FBE7D8;color:#B4471F}.as-chip.c2{background:#E6F1DA;color:#4E7A2E}.as-chip.c3{background:#F7E0EA;color:#A63661}
.as-promo{position:relative;overflow:hidden;border-radius:1em;padding:.9em 1em;flex-shrink:0;
  background:linear-gradient(120deg,#F4A24B 0%,#EC6D4C 55%,#E24E63 100%);color:#fff} /* flex-shrink:0 stops the column from squashing it (sub-line was clipped below) */
.as-promo__tag{font-family:'JetBrains Mono',monospace;font-size:.55em;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.as-promo__h{font-family:'Instrument Serif',serif;font-size:1.15em;margin:.15em 0 .1em}
.as-promo__p{font-size:.68em;opacity:.92}
.as-loyal{position:relative;overflow:hidden;border-radius:1em;padding:.85em 1em;color:#F7EFE3;
  background:linear-gradient(150deg,#2E241D 0%,#3C2E22 55%,#4A3826 100%)}
.as-loyal::after{content:"";position:absolute;right:-2.5em;top:-2.5em;width:8em;height:8em;border-radius:50%;
  background:radial-gradient(circle,rgba(229,169,60,.5),transparent 70%)}
.as-loyal__row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;
  padding-right:3.4em} /* reserve room for the absolutely-positioned badge */
.as-loyal__lbl{font-family:'JetBrains Mono',monospace;font-size:.55em;letter-spacing:.14em;text-transform:uppercase;color:#D8C2A4}
.as-loyal__count{font-family:'Instrument Serif',serif;font-size:1.4em;line-height:1.1}
.as-loyal__count small{font-size:.55em;color:#C9B79F}
.as-loyal__sub{font-size:.66em;color:#E4D6C3;margin-top:.2em}
.as-loyal__badge{width:2em;height:2em;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:absolute;right:1em;top:50%;transform:translateY(-50%);z-index:2; /* true card centre */
  background:linear-gradient(140deg,#E5A93C,#E8664E)}
.as-loyal__badge svg{width:1.1em;height:1.1em}
.as-dots{display:flex;gap:.28em;margin-top:.6em;position:relative;z-index:2}
.as-dots i{height:.32em;border-radius:.16em;background:rgba(255,255,255,.16);flex:1}
.as-dots i.on{background:linear-gradient(90deg,#E5A93C,#F6C874)}
.as-sec{display:flex;align-items:baseline;justify-content:space-between;font-weight:700;font-size:.82em}
.as-sec__a{font-size:.82em;font-weight:600;color:#E8664E}
.as-items{display:flex;flex-direction:column;gap:.55em}
.as-item{display:flex;align-items:center;gap:.65em;background:#fff;border:1px solid #EEE7DC;border-radius:.9em;padding:.5em .6em}
.as-item__img{width:3.1em;height:3.1em;border-radius:.7em;object-fit:cover;flex-shrink:0;display:block}
.as-item__meta{flex:1;min-width:0}
.as-item__name{font-size:.78em;font-weight:600}
.as-item__desc{font-size:.6em;color:#6B5F55}
.as-item__price{font-size:.78em;font-weight:700}
.as-item__add{width:1.5em;height:1.5em;border-radius:.45em;background:#241C17;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85em;line-height:1}
.as-tabs{display:flex;align-items:center;justify-content:space-around;padding:.55em .5em .8em;background:#fff;border-top:1px solid #EEE7DC}
.as-tab{display:flex;flex-direction:column;align-items:center;gap:.2em;color:#B3A695}
.as-tab svg{width:1.1em;height:1.1em}
.as-tab span{font-size:.55em;font-weight:600}
.as-tab.is-on{color:#241C17}.as-tab.is-on svg{color:#E8664E}
.as-book{display:flex;align-items:center;gap:.65em;border:1.5px dashed #D8C7B0;border-radius:.9em;
  padding:.6em .7em;background:rgba(200,134,58,.06);flex-shrink:0}
.as-book__cal{width:1.9em;height:1.9em;border-radius:.55em;background:#F3EADB;color:#B87A1E;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.as-book__cal svg{width:1em;height:1em}
.as-book__t{font-size:.78em;font-weight:700}
.as-book__s{font-size:.6em;color:#6B5F55}
.as-note{font-family:'JetBrains Mono',monospace;font-size:.55em;letter-spacing:.08em;color:#8A7E70;
  text-align:center;padding:.4em 0 1em;flex-shrink:0}

/* Screen starts off (dark) — JS + scroll powers it on */
/* Dark cover: SOLID BLACK until the phone locks upright (.is-live), then a single
   one-shot bloom of light explodes outward. Reversible — removing .is-live resets it. */
.has-js .showcase.is-tilt .app-screen::before{content:"";position:absolute;inset:0;z-index:5;
  background:radial-gradient(120% 90% at 50% 30%, #16120D 0%, #0C0A07 70%);
  opacity:1;}
.has-js .showcase.is-tilt .app-screen.is-live::before{
  animation: as-bloom .55s cubic-bezier(.25,.8,.3,1) .25s both;
}
@keyframes as-bloom{
  0%{ -webkit-mask-image:radial-gradient(circle at 50% 42%,transparent 0%,#000 12%);
      mask-image:radial-gradient(circle at 50% 42%,transparent 0%,#000 12%); opacity:1; }
  99%{ -webkit-mask-image:radial-gradient(circle at 50% 42%,transparent 130%,#000 145%);
      mask-image:radial-gradient(circle at 50% 42%,transparent 130%,#000 145%); opacity:1; }
  100%{ opacity:0; visibility:hidden; }
}
/* Fallback: no mask-image support -> simple quick fade, same trigger + timing */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  @keyframes as-bloom{ from{opacity:1} to{opacity:0; visibility:hidden} }
}
.has-js .app-screen::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;
  z-index:6;border-radius:2px;background:#FFF7E8;opacity:0;transform:scaleX(0);
  box-shadow:0 0 18px 4px rgba(255,240,210,.9);}
.has-js .app-screen.is-live::after{animation:as-power-line .6s cubic-bezier(.3,.8,.3,1) both;}
@keyframes as-power-line{
  0%{opacity:0;transform:scaleX(0)}
  40%{opacity:1;transform:scaleX(1)}
  75%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1) scaleY(30)}
}

/* Motion: only with JS, only once scrolled into view (.is-live). No-JS = static, fully visible. */
@keyframes as-rise{from{opacity:0;transform:translateY(.8em)}to{opacity:1;transform:none}}
@keyframes as-sheen{0%{transform:translateX(-130%)}100%{transform:translateX(240%)}}
@keyframes as-dot{from{opacity:.12;transform:scaleX(.15)}to{opacity:1;transform:none}}
.has-js .app-screen.is-live .as-chips,.has-js .app-screen.is-live .as-promo,
.has-js .app-screen.is-live .as-loyal,.has-js .app-screen.is-live .as-sec,
.has-js .app-screen.is-live .as-items{animation:as-rise .6s cubic-bezier(.2,.7,.2,1) both}
.has-js .app-screen.is-live .as-chips{animation-delay:.10s}
.has-js .app-screen.is-live .as-promo{animation-delay:.24s}
.has-js .app-screen.is-live .as-loyal{animation-delay:.40s}
.has-js .app-screen.is-live .as-sec{animation-delay:.56s}
.has-js .app-screen.is-live .as-items{animation-delay:.68s}
.has-js .app-screen.is-live .as-promo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.38) 50%,transparent 80%);
  transform:translateX(-130%);animation:as-sheen 2.8s ease-in-out 1.1s 2 both}
.has-js .app-screen.is-live .as-dots i.on{transform-origin:left center;animation:as-dot .5s ease both}
.has-js .app-screen.is-live .as-dots i.on:nth-child(1){animation-delay:.9s}
.has-js .app-screen.is-live .as-dots i.on:nth-child(2){animation-delay:1.0s}
.has-js .app-screen.is-live .as-dots i.on:nth-child(3){animation-delay:1.1s}
.has-js .app-screen.is-live .as-dots i.on:nth-child(4){animation-delay:1.2s}
.has-js .app-screen.is-live .as-dots i.on:nth-child(5){animation-delay:1.3s}
.has-js .app-screen.is-live .as-dots i.on:nth-child(6){animation-delay:1.4s}
@media (prefers-reduced-motion:reduce){
  .app-screen *{animation:none!important;opacity:1!important;transform:none!important}
  .as-promo::before{display:none!important}
  .app-screen::before,.app-screen::after{display:none!important;}
}

/* ============================================================
   HOME — Beat 4 · Proof & Promise
   ============================================================ */
.proof {
  background: var(--paper);
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.proof__head {
  max-width: 40ch;
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}
.proof__eyebrow { margin: 0 0 1rem; }
.proof__heading { margin: 0; }

.proof__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* Left — the one honest stat, as a sentence */
.proof__stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  max-width: 18ch;
  text-wrap: balance;
}
.proof__stat-num {
  color: var(--brass);
  font-size: var(--step-4);
  line-height: .9;
  letter-spacing: -.03em;
}
.proof__stat-note {
  color: var(--ink-soft);
  margin: 0;
  max-width: 34ch;
}

/* Right — the fixed-contract promise card */
.promise {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}
.promise__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.2rem;
}
.promise__heading {
  font-size: var(--step-1);
  margin: 0 0 .8rem;
  text-wrap: balance;   /* avoid the orphaned "in" */
}
.promise__body {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.promise__link {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .25s var(--ease);
}
.promise__link:hover,
.promise__link:focus-visible { border-bottom-color: var(--brass); }

@media (max-width: 760px) {
  .proof__grid { grid-template-columns: 1fr; }
  .proof__stat-note { max-width: none; }
}

/* ============================================================
   HOME — Beat 5 · The Close (final conversion band)
   Not the footer — the shared footer still renders below.
   ============================================================ */
.close {
  background: var(--paper);
  padding-block: clamp(4rem, 11vw, 8rem);
}
.close__inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.close__eyebrow { margin: 0; }
.close__heading {
  margin: 0;
  font-size: var(--step-3);
  max-width: 20ch;
  text-wrap: balance;
}
.close__subline {
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 46ch;
}
.close__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: .5rem;
}
.close__cta .btn { padding: 1.05em 1.9em; }
.close__risk {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  color: var(--faint);
  margin: 0;
}
.close__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
  margin: .5rem 0 0;
}
.close__contact a {
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.close__contact a:hover,
.close__contact a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* ============================================================
   Inner pages — compact page header (shared)
   ============================================================ */
.page-head {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
}
.page-head__eyebrow { margin: 0 0 1.1rem; }
.page-head__title {
  margin: 0 0 1rem;
  font-size: var(--step-3);
  max-width: 16ch;
  text-wrap: balance;
}
.page-head__sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step-1);
  max-width: 52ch;
}

/* Services overview — reuses the What-We-Build card pattern (.build-card) */
.services-list {
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* Services split hero — service list (left) + cinematic clip (right) */
.svc-split{padding-block:clamp(3rem,8vw,6rem)}
.svc-split__grid{display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
/* base h1 is --step-4 (up to 5.2rem) — too large for the split column, would
   overflow a .rl line under overflow:hidden. Match the page's prior h1 size. */
.svc-split__left h1{font-size:var(--step-3)}
.svc-split__intro{max-width:46ch}
.svc-list{display:flex;flex-direction:column;max-width:62ch}
.svc-row{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);
  padding:clamp(.9rem,2vw,1.25rem) .25rem;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background .25s ease}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-row__n{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--faint)}
.svc-row__nm{display:block;font-weight:700;font-size:clamp(1.05rem,1.8vw,1.35rem)}
.svc-row__d{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:.15rem}
.svc-row__inc{display:block;font-family:'JetBrains Mono',monospace;font-size:.68rem;
  letter-spacing:.06em;color:var(--brass);margin-top:.35rem;text-transform:lowercase}
.svc-row__meta{flex:1;min-width:0}
.svc-row__arrow{color:var(--brass);font-size:1.1rem;transition:transform .25s ease}
.svc-row:hover{background:rgba(150,116,42,.05)}
.svc-row:hover .svc-row__arrow{transform:translateX(6px)}
.svc-row:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.svc-split__frame{position:relative;aspect-ratio:16/9;border-radius:clamp(14px,2vw,24px);
  overflow:hidden;background:var(--white);box-shadow:var(--shadow-md)}
.svc-split__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.svc-split__frame{aspect-ratio:16/9}}

/* ============================================================
   Service (ad-landing) pages — apps / websites / ai / marketing
   ============================================================ */

/* 1 · Focused hero (compact, no big video) */
.svc-hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.svc-hero__inner { max-width: 48rem; }
.svc-hero__eyebrow { margin: 0 0 1.1rem; }
.svc-hero__title {
  margin: 0 0 1rem;
  font-size: var(--step-3);
  max-width: 17ch;
  text-wrap: balance;
}
.svc-hero__sub {
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  max-width: 50ch;
}
.svc-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.svc-hero__risk {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  color: var(--faint);
  margin: 0;
}

/* Generic content section */
.svc-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.svc-section__head { max-width: 48ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.svc-section__eyebrow { margin: 0 0 1rem; }
.svc-section__heading { margin: 0; }
.svc-lead { font-size: var(--step-1); color: var(--ink-soft); max-width: 54ch; margin: 0; }
.svc-prose p { color: var(--ink-soft); max-width: 60ch; }
.svc-prose p:last-child { margin-bottom: 0; }

/* 3 · Feature cards (non-link) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.feature__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--faint);
  margin-bottom: 1rem;
}
.feature__title { font-size: var(--step-1); margin: 0 0 .5rem; }
.feature__body { color: var(--ink-soft); margin: 0; }

@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   About — header with a tasteful ambient clip beside it
   ============================================================ */
.about-hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr;   /* single column — the media frame was removed */
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 60ch;              /* keep the text a readable measure */
}
.about-hero__eyebrow { margin: 0 0 1.1rem; }
.about-hero__title {
  margin: 0 0 1rem;
  font-size: var(--step-3);
  max-width: 15ch;
  text-wrap: balance;
}
.about-hero__sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step-1);
  max-width: 46ch;
}
.about-hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.about-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;              /* low-contrast / ambient */
  background: var(--paper);
}
@media (max-width: 760px) {
  .about-hero__grid { grid-template-columns: 1fr; }
}

/* Three-up feature grid (e.g. How we work) */
.feature-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .feature-grid--three { grid-template-columns: 1fr; }
}

/* ============================================================
   Contact — generous options, no form
   ============================================================ */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}
.contact-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.contact-card__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--faint);
  margin-bottom: 1rem;
}
.contact-card__note {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.contact-card__action { margin-top: auto; }
.contact-card__action .btn { width: 100%; }
.contact-card__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
  word-break: break-word;
}
.contact-card__link:hover,
.contact-card__link:focus-visible {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
@media (max-width: 760px) {
  .contact-methods { grid-template-columns: 1fr; }
}

/* ============================================================
   Legal / privacy — readable body column (not full-bleed)
   ============================================================ */
.legal { padding-block: clamp(2rem, 5vw, 3.5rem); }
.legal__body { max-width: 68ch; }
.legal__body h2 {
  font-size: var(--step-1);
  margin: 2.25rem 0 .6rem;
}
.legal__body p,
.legal__body li { color: var(--ink-soft); }
.legal__body ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal__body li { margin-bottom: .4rem; }
.legal__updated {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  color: var(--faint);
  margin-top: 2.5rem;
}

/* ============================================================
   CINEMATIC UPGRADE — homepage motion & bands
   ============================================================ */

/* ---- Services marquee (below hero) ---------------------- */
.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
  padding-block: clamp(.85rem, 2vw, 1.35rem);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeSlide 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-right: 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.marquee__sep { color: var(--brass); margin: 0 .85rem; }
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Studio-at-work cinematic band ---------------------- */
.studio-band {
  position: relative;
  width: 100%;
  height: clamp(320px, 70vh, 640px);   /* desktop: full-bleed cinematic section */
  overflow: hidden;
  background: var(--paper);
}
/* Video + overlay poster share identical framing so the poster→video handoff never jumps. */
.studio-band__video,
.studio-band__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--paper);
}
/* Overlay poster (empty café) sits ABOVE the video (z:1, under paper fades z:2 + caption z:3).
   JS fades it out on 'playing' and restores it on reset (leaving the viewport). */
.studio-band__poster {
  z-index: 1;
  opacity: 1;
  transition: opacity .6s ease;
}
.studio-band.is-playing .studio-band__poster { opacity: 0; }
/* MOBILE: the band itself becomes a full-width 16:9 frame so the café fills the width
   edge-to-edge (sharp on high-DPR phones) rather than a cropped strip of a 70vh band. */
@media (max-width: 760px) {
  .studio-band {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
.studio-band__fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 24%;
  z-index: 2;                          /* paper fades over the video, under the caption (z:3) */
  pointer-events: none;
}
.studio-band__fade--top    { top: 0;    background: linear-gradient(var(--paper), transparent); }
.studio-band__fade--bottom { bottom: 0; background: linear-gradient(transparent, var(--paper)); }

/* ---- Studio story captions (JS-driven; no-JS = display:none) ---- */
.studio-captions{display:none}
.has-js .studio-captions{display:block;position:absolute;left:clamp(1.25rem,5vw,4.5rem);top:12%;
  z-index:3;pointer-events:none;max-width:44ch}
.studio-cap{margin:0;position:absolute;left:0;top:0;width:max-content;opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease;
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(1.4rem,2.9vw,2.5rem);line-height:1.18;color:var(--ink);
  text-shadow:0 1px 0 rgba(244,243,239,.85),0 0 18px rgba(244,243,239,.9),
    0 0 2px rgba(244,243,239,.9)}
.studio-cap .cap-brand{font-style:italic;color:var(--brass)}
.studio-cap.is-on{opacity:1;transform:none}
/* Phone caption: sits TOP-RIGHT of the 16:9 video, right-ragged, so both <br>-split lines
   ("Never quiet —" / "with SAM Digital Marketing.") sit over the window/plants area to the
   right of the centred barista — never on his face/body. Deeper paper-glow for the bright glass. */
@media (max-width:760px){
  .has-js .studio-captions{left:0;right:0;top:4%;max-width:none;
    padding-right:clamp(0.7rem,3vw,1.25rem);text-align:right}
  .studio-cap{position:static;display:block;width:auto;max-width:none;margin-left:auto;
    white-space:nowrap;text-align:right;
    font-size:clamp(0.78rem,3.25vw,1.05rem);line-height:1.1;
    text-shadow:0 1px 2px rgba(244,243,239,.96),0 0 10px rgba(244,243,239,.98),
      0 0 22px rgba(244,243,239,.96),0 0 3px rgba(244,243,239,.92)}
}
/* Reduced motion: the caption still SHOWS (statically, with the final full-café frame —
   JS sets .is-on in its REDUCE path); only its rise/fade transition is removed. */
@media (prefers-reduced-motion:reduce){.studio-cap{transition:none!important;transform:none!important}}

/* ---- First-load ink veil (homepage; progressive, NOT a gate) ---- */
.veil{position:fixed;inset:0;z-index:200;background:var(--ink);display:none;
  flex-direction:column;align-items:center;justify-content:center}
.has-js .veil{display:flex}
.veil__logo{font-size:clamp(1.4rem,3.4vw,2.4rem);color:var(--paper);margin:0;opacity:0;
  animation:veil-logo .6s ease .15s both}
.veil__sam{font-weight:800}
.veil__dm{font-family:'Instrument Serif',serif;font-style:italic;color:#C9A85C}
.veil__dot{color:#C9A85C}
.veil__line{display:block;width:min(320px,40vw);height:2px;margin:1.1em auto 0;
  background:linear-gradient(90deg,#C9A85C,#96742A);transform:scaleX(0);
  transform-origin:left center;animation:veil-line .7s cubic-bezier(.4,0,.2,1) .75s both}
@keyframes veil-logo{to{opacity:1}}
@keyframes veil-line{to{transform:scaleX(1)}}
.veil.is-done{animation:veil-out .5s cubic-bezier(.6,.1,.3,1) both}
@keyframes veil-out{to{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){.veil{display:none!important}}

/* Contain horizontal-slide reveals so they never cause page overflow */
.proof { overflow-x: clip; }

/* ---- Hero parallax (transforms set by JS) --------------- */
.hero__video { will-change: transform, opacity; }
.hero__intro { will-change: transform; }

/* ---- Showcase signature straighten (scroll-linked) ------ */
/* Default = static final state (full size, no tilt). JS adds .is-tilt. */
.showcase.is-tilt { padding-block: 0; }
.showcase.is-tilt .showcase__track { height: 300vh; }
.showcase.is-tilt .showcase__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}
@media (max-width: 760px) {
  .showcase.is-tilt .showcase__track { height: 240vh; }
}

/* ============================================================
   Motion / reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Marquee: hold still rather than flicker */
  .marquee__track { animation: none !important; transform: none !important; }
}

/* ---- Ambient studio cat (JS-injected decoration) ---- */
.amb-cat{position:fixed;left:26px;bottom:0;width:74px;height:54px;z-index:119; /* one below the
  sticky WhatsApp button (.wa-sticky is z-index:120) */
  pointer-events:none;transform:translateX(0);transition:transform 7s linear}
.amb-cat__flip{position:absolute;left:0;top:0;width:74px;height:54px}
.amb-cat.is-flip .amb-cat__flip{transform:scaleX(-1)}
.amb-cat__bob{position:absolute;left:0;top:0;width:74px;height:54px}
.amb-cat svg{position:absolute;left:0;top:0;width:74px;height:54px;display:block}
.amb-cat .pose{opacity:0}
.amb-cat.is-idle .curl{opacity:1}
.amb-cat.is-entering .walkA{opacity:1}   /* falls in standing pose (legs down) */
.amb-cat.is-landing  .walkA{opacity:1}   /* stands on four feet for a beat */
.amb-cat.is-idle .breathe{animation:amb-breathe 3.2s ease-in-out infinite}
@keyframes amb-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035,1.06)}}
.amb-cat.is-idle .ear{transform-origin:52px 18px;animation:amb-ear 6.4s ease-in-out infinite}
@keyframes amb-ear{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-14deg)}96%{transform:rotate(4deg)}}
.amb-cat.is-idle .ttip{transform-origin:30px 44px;animation:amb-ttip 5.3s ease-in-out infinite}
@keyframes amb-ttip{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(9deg)}}
.amb-cat.is-walking .walkA{animation:amb-fA .44s steps(1) infinite}
.amb-cat.is-walking .walkB{animation:amb-fB .44s steps(1) infinite}
@keyframes amb-fA{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes amb-fB{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.amb-cat.is-walking .amb-cat__bob{animation:amb-bob .44s ease-in-out infinite alternate}
@keyframes amb-bob{from{transform:translateY(0)}to{transform:translateY(1.4px)}}
/* Hidden while the hero is in view; pounces in from top-left once scrolled past */
.amb-cat.is-offstage{visibility:hidden}
.amb-cat.is-entering{visibility:visible;
  animation:amb-pounce .9s cubic-bezier(.3,.6,.3,1) both}
@keyframes amb-pounce{
  0%{transform:translate(-60px,-70vh) rotate(-14deg)}
  55%{transform:translate(12px,-8vh) rotate(6deg)}
  78%{transform:translate(0,0) scale(1.04,.92)}   /* legs absorbing the landing */
  90%{transform:translate(0,0) scale(.99,1.01)}   /* small rebound */
  100%{transform:translate(0,0) scale(1,1)}
}
@media (max-width:560px){.amb-cat{display:none}} /* small screens: bottom edge is busy */
@media (prefers-reduced-motion:reduce){.amb-cat{display:none}}