/* Self-hosted fonts (latin subset) — no third-party request, preloaded from index.html */
@font-face { font-family: 'Archivo'; src: url(fonts/archivo-latin.woff2) format('woff2'); font-weight: 700 800; font-stretch: 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin.woff2) format('woff2'); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/jetbrains-mono-latin.woff2) format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }

/* ==========================================================================
   Blacksheep — styles.css
   Dark by default. Brand hexes live only in the token block below; the one
   other place a hex is allowed is the client-palette block (§WORK PREVIEWS),
   where the colours belong to those clients' brands, not to ours.
   ========================================================================== */

:root {
  /* brand constants */
  --ember:      #E85D3A;
  --ember-glow: #F2694D;
  --ink:        #1A1A1A;
  --bone:       #F6F2EC;

  /* the dark ground */
  --bg:         #0B0B0B;
  --surface:    #121212;
  --surface-2:  #181818;
  --fg:         #F6F2EC;
  --muted-fg:   #9C958C;
  --faint:      #857E75;   /* 4.6:1 on --bg — the mono labels are 10-11px */
  --border:     rgba(246, 242, 236, 0.13);
  --border-soft:rgba(246, 242, 236, 0.07);
  --primary:    #E85D3A;
  --ring:       #E85D3A;

  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* the one inverted block */
.on-light {
  --bg: var(--bone);
  --surface: #FFFFFF;
  --surface-2: #EDE9E2;
  --fg: var(--ink);
  --muted-fg: #5C5C5C;
  --faint: #6E6960;
  --border: rgba(26, 26, 26, 0.14);
  --border-soft: rgba(26, 26, 26, 0.07);
}

/* motion bus — scroll.js writes these and nothing else does */
:root { --mx: 0; --my: 0; --hero-y: 0px; --hero-op: 1; --type: 0; }

:root {
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --h1: clamp(2.3rem, min(5.7vw, 10.5vh), 5.4rem);
  --h2: clamp(1.9rem, 4.2vw, 3.6rem);
  --h3: clamp(1.2rem, 1.9vw, 1.55rem);

  --gutter: clamp(20px, 5vw, 84px);
  --maxw: 1560px;

  /* Custom curves — the built-in CSS easings are too weak to read as
     intentional. Never ease-in on UI: it delays the first frame, which is
     exactly the moment the user is watching. */
  --expo:  cubic-bezier(0.16, 1, 0.3, 1);      /* entrances */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* interactive feedback */
  --swift: cubic-bezier(0.22, 1, 0.36, 1);
  --inout: cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement */

  /* Interactive motion stays under 300ms. Only scroll entrances go longer. */
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-sweep: 260ms;
  --t-exit:  180ms;
  --t-enter: 820ms;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
html.reduced { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800; font-stretch: 125%;
  letter-spacing: -0.035em; line-height: 1.02;
  margin: 0; text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--ember); color: var(--bone); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 1px; }

.skip-link {
  position: fixed; left: -9999px; top: 0; z-index: 999;
  background: var(--ember); color: var(--bone);
  padding: 14px 22px; font-family: var(--mono); font-size: 12px;
}
.skip-link:focus { left: 0; }

.label {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); line-height: 1.4;
}
.label--ember { color: var(--ember); }
.dot { color: var(--ember); }

section { padding: clamp(88px, 12vh, 168px) var(--gutter); position: relative; }
.hero-pin, .work-pin, .marquee { padding-left: 0; padding-right: 0; }

.head { max-width: 1100px; margin: 0 auto clamp(46px, 7vh, 92px); width: 100%; }
.head .label { margin-bottom: 26px; }
.head__sub {
  margin-top: 30px; max-width: 56ch;
  color: var(--muted-fg); font-size: 17px; font-weight: 300; line-height: 1.62;
}
section > .head, section > .cards, section > .tiers,
.studio__grid, .contact__grid, .pricing__foot, .pillars {
  max-width: var(--maxw); margin-left: auto; margin-right: auto;
}

/* --- heading line masks --------------------------------------------------- */
.lines span { display: block; }
.js:not(.reduced) .lines span {
  clip-path: inset(0 0 105% 0); transform: translateY(0.22em);
  transition: clip-path 950ms var(--expo), transform 950ms var(--expo);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js:not(.reduced) .lines.is-in span { clip-path: inset(-25% -12% -20% -6%); transform: none; }
.lines span:nth-child(2) { --d: 1; }
.lines span:nth-child(3) { --d: 2; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 999px;
  padding: 15px 28px; font-size: 14px; font-weight: 500;
  cursor: pointer; overflow: hidden; isolation: isolate; background: transparent;
  /* Magnetic offset (set by ui.js) and press scale compose in one transform so
     they can't clobber each other. */
  --mag-x: 0px; --mag-y: 0px; --press: 1;
  transform: translate(var(--mag-x), var(--mag-y)) scale(var(--press));
  transition:
    color var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}
.btn > span { position: relative; z-index: 2; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  transform: translateY(101%);
  transition: transform var(--t-exit) var(--ease-out);   /* leaving: snappy */
}
/* Instant, physical acknowledgement that the interface heard the press. */
.btn:active { --press: 0.97; }

.btn--fill { background: var(--ember); color: var(--bone); }
.btn--fill::after { background: var(--fg); }
.btn--line { border-color: var(--border); color: var(--fg); }
.btn--line::after { background: var(--fg); }

.ul { position: relative; }
.ul::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-exit) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: translateY(0); transition-duration: var(--t-sweep); }
  .btn--fill:hover { color: var(--bg); }
  .btn--line:hover { color: var(--bg); border-color: var(--fg); }
  .ul:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--t-sweep); }
}

/* --- film grain over the whole dark ground -------------------------------- */
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.26; mix-blend-mode: screen; background-size: 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 20px var(--gutter);
  border-bottom: 1px solid transparent;
  transition: transform 280ms var(--ease-out), background var(--t-hover) ease, border-color var(--t-hover) ease;
}
.nav.is-solid {
  background: rgba(11, 11, 11, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-soft);
}
.nav.is-hidden { transform: translateY(-102%); }
.nav__mark {
  justify-self: start; font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: 19px; letter-spacing: -0.035em; color: var(--bone);
}
.nav__links { justify-self: center; display: flex; gap: 34px; }
.nav__links a { font-size: 14px; color: var(--muted-fg); transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--bone); } }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav__cta { padding: 11px 22px; font-size: 13px; }

.burger {
  display: none; width: 42px; height: 42px; background: transparent; border: 0;
  cursor: pointer; padding: 12px; flex-direction: column; justify-content: center; gap: 6px;
}
.burger { --press: 1; transform: scale(var(--press)); transition: transform var(--t-press) var(--ease-out); }
.burger:active { --press: 0.94; }
.burger span { display: block; height: 1.5px; background: var(--bone); transition: transform 240ms var(--swift); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .burger { display: flex; }
  .nav__cta { display: none; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: rgba(11, 11, 11, 0.97); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft); padding: 6px var(--gutter) 26px;
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 15px 0; border-bottom: 1px solid var(--border-soft); font-size: 17px; color: var(--bone); }
}

/* ==========================================================================
   HERO — the build types itself
   ========================================================================== */
.hero-pin { padding: 128px var(--gutter) 90px; }
.hero { max-width: var(--maxw); margin: 0 auto; }
.hero__scroll { display: none; }

.js:not(.reduced) .hero-pin { position: relative; height: calc(100vh + 2400px); padding: 0; }
.js:not(.reduced) .hero {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
  padding: 96px var(--gutter) 64px;
  max-width: none;
}
.js:not(.reduced) .hero__grid {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  transform: translateY(var(--hero-y)); opacity: var(--hero-op);
}
.js:not(.reduced) .hero__scroll { display: block; }

.hero__grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; position: relative; z-index: 2; }
@media (min-width: 1040px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }

.hero__copy .label { margin-bottom: 30px; }
#hero-title em { color: var(--ember); font-style: normal; }
.hero__sub {
  margin-top: clamp(26px, 3.4vh, 40px); max-width: 48ch;
  color: var(--muted-fg); font-size: 17px; font-weight: 300; line-height: 1.62;
}
.hero__ctas { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 30px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-fg); opacity: var(--hero-op);
}
.hero__scroll span { display: block; animation: nudge 2.4s var(--inout) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); opacity: .45 } 50% { transform: translateY(5px); opacity: 1 } }

/* --- the editor ----------------------------------------------------------- */
.build { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 620px) { .build { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }

.editor {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); min-width: 0;
}
.editor__bar {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
}
.editor__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.editor__bar u {
  margin-left: 12px; font-family: var(--mono); font-size: 10px;
  color: var(--faint); text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.editor__code {
  margin: 0; padding: 20px clamp(14px, 1.6vw, 24px);
  font-family: var(--mono); font-size: clamp(10.5px, 0.92vw, 13.5px);
  line-height: 1.85; white-space: pre-wrap; word-break: break-word;
  color: var(--fg); overflow: hidden;
}

/* syntax: brand palette only */
.tok { white-space: pre-wrap; }
.tok .b { visibility: hidden; }
.tok--tag .a { color: var(--ember); }
.tok--attr .a { color: var(--bone); opacity: 0.92; }
.tok--str .a { color: var(--muted-fg); }
.tok--punct .a { color: var(--faint); }
.tok--val .a { color: var(--ember-glow); }
.tok--text .a { color: var(--bone); opacity: 0.72; }

.caret {
  display: inline-block; width: 7px; height: 1.05em; vertical-align: text-bottom;
  background: var(--ember); margin: 0 1px -0.16em;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }
.reduced .caret { display: none; }

/* --- the output panel ------------------------------------------------------ */
.render { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.render__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint);
}
.render__frame {
  flex: 1; border: 1px solid var(--border); border-radius: 12px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    radial-gradient(120% 120% at 100% 0%, rgba(232, 93, 58, 0.16), transparent 55%) padding-box;
  padding: clamp(20px, 2.4vw, 34px);
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  min-height: 190px; position: relative; overflow: hidden;
}
.render__frame > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--expo), transform 420ms var(--expo);
}
.render__frame > .on { opacity: 1; transform: none; }
.r-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ember);
}
.r-head {
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.06;
}
.r-sub { font-size: 13px; color: var(--muted-fg); }
.r-cta {
  align-self: flex-start; margin-top: 6px; background: var(--ember); color: var(--bone);
  border-radius: 999px; padding: 9px 18px; font-size: 12px; font-weight: 500;
}

/* hero depth — the two panels tilt toward the pointer (values come from the
   smoothed --mx/--my that scroll.js already publishes) */
.js:not(.reduced) .build { perspective: 1600px; }
.js:not(.reduced) .editor { transform: rotateY(calc(var(--mx) * 5deg)) rotateX(calc(var(--my) * -4deg)); }
.js:not(.reduced) .render__frame { transform: rotateY(calc(var(--mx) * 8deg)) rotateX(calc(var(--my) * -6deg)); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee { overflow: hidden; border-block: 1px solid var(--border-soft); padding-block: clamp(22px, 3vh, 34px); }
.marquee__track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee__row {
  display: flex; align-items: center; gap: 28px; padding-right: 28px;
  font-family: var(--display); font-weight: 700; font-stretch: 125%;
  letter-spacing: -0.035em; font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  color: transparent; -webkit-text-stroke: 1px var(--border);
  white-space: nowrap;
}
.marquee__row .sep { color: var(--ember); -webkit-text-stroke: 0; font-size: 0.42em; }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.reduced .marquee__track { animation: none; }

/* ==========================================================================
   PILLARS — three short claims, each under its own hairline
   ========================================================================== */
.pillars { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar { border-top: 1px solid var(--border); padding-top: 26px; }
.pillar .label { margin-bottom: 18px; }
.pillar h2 { font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.06; }
.pillar p:last-child { margin-top: 18px; color: var(--muted-fg); font-weight: 300; line-height: 1.66; max-width: 40ch; }

/* ==========================================================================
   STATS — big numerals, only ever true ones
   ========================================================================== */
.stats { padding-block: clamp(70px, 10vh, 130px); }
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; max-width: var(--maxw); margin: 0 auto; }
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.stat { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); padding-top: 22px; }
.stat dt { order: 1; }
.stat__n {
  order: 2; margin: 0;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(3.2rem, 6.4vw, 5.6rem); line-height: 0.9; letter-spacing: -0.045em; color: var(--fg);
}
.stat__d { order: 3; margin: 0; color: var(--muted-fg); font-size: 14px; font-weight: 300; line-height: 1.55; max-width: 28ch; }

/* ==========================================================================
   WORK
   ========================================================================== */
.work-pin { position: relative; }
.work { padding: clamp(88px, 12vh, 150px) var(--gutter); max-width: var(--maxw); margin: 0 auto; }

.js:not(.reduced) .work-pin { height: calc(100vh + 1125px); }
.js:not(.reduced) .work {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(80px, 11vh, 108px) var(--gutter) clamp(20px, 3vh, 32px);
}
.work__head { margin-bottom: clamp(14px, 2.6vh, 40px); }
@media (max-height: 720px) and (min-width: 1000px) { .js:not(.reduced) .work__head h2 { display: none; } }

.work__ghost { display: none; }
.js:not(.reduced) .work__ghost {
  display: block; position: absolute; left: 50%; top: 54%;
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  letter-spacing: -0.05em; line-height: 0.86; white-space: nowrap;
  font-size: clamp(80px, 21vw, 300px);
  color: transparent; -webkit-text-stroke: 1px rgba(246, 242, 236, 0.07);
}

.work__layout { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0 clamp(24px, 4vw, 64px); }
@media (min-width: 1000px) { .work__layout { grid-template-columns: 200px minmax(0, 1fr); } }

.work__index { position: relative; z-index: 3; display: none; align-self: center; }
@media (min-width: 1000px) { .work__index { display: block; } }
.work__index li + li { margin-top: 2px; }
.work__index button {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  background: none; border: 0; padding: 9px 0; cursor: pointer; text-align: left;
  border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease-out);
}
.work__index i { font-family: var(--mono); font-size: 10px; font-style: normal; color: var(--faint); transition: color var(--t-hover) ease; }
.work__index b { font-size: 14px; font-weight: 400; color: var(--muted-fg); transition: color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out); }
.work__index button { --press: 1; }
.work__index button:active b { transform: translateX(3px) scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .work__index button:hover b { color: var(--bone); transform: translateX(3px); }
}
.work__index button.is-active { border-bottom-color: var(--border); }
.work__index button.is-active i { color: var(--ember); }
.work__index button.is-active b { color: var(--bone); font-weight: 500; }

.work__stage { position: relative; z-index: 2; min-height: 0; display: grid; gap: 20px; }
@media (min-width: 700px) { .work__stage { grid-template-columns: repeat(2, 1fr); } }

/* The neighbours peek in from either side, but stop at the stage edge instead of
   bleeding under the project index. Vertical overflow stays open for the shadow. */
.js:not(.reduced) .work__stage { display: block; clip-path: inset(-80px 0 -80px 0); }
.js:not(.reduced) .slide {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity 520ms var(--expo);
}
.js:not(.reduced) .slide .shot {
  height: 100%; width: auto; aspect-ratio: 16 / 10; max-width: 100%; max-height: 100%;
  transform: scale(0.8);
  transition: transform 620ms var(--expo), filter 520ms var(--expo);
  will-change: transform;
}
.js:not(.reduced) .slide[data-role="center"] { opacity: 1; z-index: 20; pointer-events: auto; }
.js:not(.reduced) .slide[data-role="center"] .shot {
  filter: none;
  transform: perspective(1500px) rotateY(calc(var(--tx, 0) * 3.4deg)) rotateX(calc(var(--ty, 0) * -2.6deg));
}
.js:not(.reduced) .slide[data-role="left"] { opacity: 0.2; z-index: 10; }
.js:not(.reduced) .slide[data-role="left"] .shot { filter: blur(2px); transform: scale(0.78) translateX(-74%); }
.js:not(.reduced) .slide[data-role="right"] { opacity: 0.2; z-index: 10; }
.js:not(.reduced) .slide[data-role="right"] .shot { filter: blur(2px); transform: scale(0.78) translateX(74%); }

.work__meta {
  grid-column: 1 / -1; position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--border-soft); padding-top: 20px; margin-top: 20px;
}
.work__meta dl { display: flex; gap: clamp(20px, 4vw, 64px); flex-wrap: wrap; }
.work__meta dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.work__meta dd { font-size: 14px; }
.work__nav { display: flex; align-items: center; gap: 16px; }
.round {
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--fg); display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.round { --press: 1; transform: scale(var(--press)); }
.round:active { --press: 0.93; }
@media (hover: hover) and (pointer: fine) {
  .round:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); --press: 1.06; }
  .round:hover:active { --press: 0.98; }
}
.counter { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--faint); min-width: 62px; text-align: center; }
.counter b { color: var(--bone); font-weight: 500; }
.counter s { text-decoration: none; opacity: .4; margin: 0 3px; }

/* ==========================================================================
   WORK PREVIEWS — hand-built miniatures of the real sites.
   Palettes below belong to those clients, not to Blacksheep.
   ========================================================================== */
.shot {
  position: relative;
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
}
.chrome {
  display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 32px; flex: 0 0 32px;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
}
.chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.chrome u { margin-left: 12px; font-family: var(--mono); font-size: 9px; color: var(--faint); text-decoration: none; }
.chrome u.pending { opacity: 0.45; font-style: italic; }

/* --- live site embed ------------------------------------------------------
   A slide carrying data-live gets the real site mounted in an iframe by ui.js,
   rendered at desktop width and scaled into the frame. The hand-built
   recreation stays underneath as the poster until the frame loads. */
a.shot { color: inherit; }
.live-mount { position: absolute; inset: 32px 0 0; z-index: 2; overflow: hidden; opacity: 0; transition: opacity 420ms var(--expo); }
.live-mount.is-ready { opacity: 1; }
.live-mount iframe {
  width: 1440px; height: 900px; border: 0; display: block;
  transform: scale(var(--live-scale, 0.6)); transform-origin: 0 0;
  pointer-events: none;                /* the card owns the click, not the page inside */
}
.shot.live-on .mini { visibility: hidden; }

.visit {
  position: absolute; right: 14px; bottom: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ember); color: var(--bone);
  border-radius: 999px; padding: 9px 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-sweep) var(--ease-out), transform var(--t-sweep) var(--ease-out);
}
.visit b { font-weight: 400; }
.slide[data-role="center"] .visit { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .slide[data-role="center"] .shot:hover .visit { background: var(--bone); color: var(--ink); }
}
a.shot:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.mini {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--p-bg); color: var(--p-fg); container-type: inline-size;
}
.mini__nav { display: flex; align-items: center; gap: 10px; padding: 3.4% 4.6%; flex: 0 0 auto; }
.mini__nav b { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 3.1cqw; letter-spacing: -0.02em; }
.mini__nav span { width: 3.6cqw; height: 1px; background: currentColor; opacity: 0.35; }
.mini__nav em.cta { margin-left: auto; width: 9cqw; height: 2.6cqw; border-radius: 999px; background: var(--p-accent); }
.mini__stagey { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; }
.mini__foot { display: flex; align-items: center; gap: 1.6cqw; padding: 3.4% 4.6%; }
.mini__foot em { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: currentColor; opacity: .25; }
.mini__foot em:first-child { background: var(--p-accent); opacity: 1; }
.mini__foot s { flex: 1; height: 1px; background: currentColor; opacity: .18; text-decoration: none; }
.mini__foot--split { gap: 3cqw; }
.mini__foot--split s.short { flex: 0 0 18%; }

.mini--feral { --p-bg: #131313; --p-fg: #EFEBE5; --p-accent: #CE4A2E; }
.feral__arc { position: absolute; width: 42cqw; height: 42cqw; border-radius: 50%; border: 1px dashed currentColor; opacity: .16; }
.feral__shoe { position: relative; width: 26cqw; height: 15cqw; }
.feral__shoe i { position: absolute; inset: 0 0 22% 0; border-radius: 46% 60% 30% 22% / 70% 70% 34% 30%; background: linear-gradient(150deg, var(--p-accent), rgba(0,0,0,0.55)); }
.feral__shoe u { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; border-radius: 0 0 40% 14%; background: currentColor; opacity: .85; }
.feral__hint { position: absolute; bottom: 6%; font-family: var(--mono); font-size: 2.1cqw; letter-spacing: 0.18em; text-transform: uppercase; opacity: .45; }

.mini--seve { --p-bg: #EAEEEF; --p-fg: #2B3439; --p-accent: #8CA7AD; }
.seve__glow { position: absolute; width: 54cqw; height: 54cqw; border-radius: 50%; background: radial-gradient(circle, rgba(140,167,173,0.55), transparent 68%); filter: blur(6px); }
.seve__bottle {
  position: relative; width: 11cqw; height: 26cqw; border-radius: 18% 18% 12% 12%;
  background: linear-gradient(112deg, rgba(255,255,255,0.85), rgba(140,167,173,0.5) 42%, rgba(255,255,255,0.7));
  border: 1px solid rgba(255,255,255,0.85); box-shadow: inset 0 0 12px rgba(255,255,255,0.9);
}
.seve__bottle::before { content: ""; position: absolute; left: 36%; top: -14%; width: 28%; height: 16%; border-radius: 3px 3px 0 0; background: inherit; border: 1px solid rgba(255,255,255,0.8); }
.seve__bottle i { position: absolute; left: 18%; top: 12%; width: 12%; height: 62%; border-radius: 999px; background: rgba(255,255,255,0.9); }

.mini--mane { --p-bg: #EFE9E0; --p-fg: #3A3128; --p-accent: #9C7A4E; }
.mane__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 26%; }
.mane__view { display: grid; place-items: center; }
.mane__chair { position: relative; width: 20cqw; height: 20cqw; }
.mane__chair i { position: absolute; left: 16%; top: 0; width: 52%; height: 58%; border-radius: 22% 22% 4% 4%; background: var(--p-accent); }
.mane__chair u { position: absolute; left: 6%; top: 52%; width: 76%; height: 13%; border-radius: 6px; background: currentColor; opacity: .82; }
.mane__chair s { position: absolute; bottom: 0; left: 16%; width: 5%; height: 36%; background: currentColor; opacity: .55; text-decoration: none; }
.mane__chair s.r { left: auto; right: 16%; }
.mane__panel { border-left: 1px solid rgba(58,49,40,0.14); padding: 7% 8%; display: flex; flex-direction: column; align-items: flex-start; gap: 7%; }
.mane__panel em { flex: none; width: 58%; aspect-ratio: 1; border-radius: 50%; background: currentColor; opacity: .18; }
.mane__panel em.on { background: var(--p-accent); opacity: 1; box-shadow: 0 0 0 1.5px var(--p-bg), 0 0 0 3px var(--p-accent); }
.mane__panel s { flex: none; align-self: stretch; height: 1px; background: currentColor; opacity: .2; text-decoration: none; }
.mane__panel s.short { align-self: flex-start; width: 55%; }

/* Film Haus — Johannesburg photography studio. Warm off-white ground, bronze
   accent and Cormorant-style serif from their identity; Georgia stands in for
   Cormorant Garamond at thumbnail scale rather than loading a fourth webfont. */
.mini--fh { --p-bg: #F5F5F3; --p-fg: #0E0E0E; --p-accent: #9C7C54; --p-serif: Georgia, "Times New Roman", serif; }
/* Tighter than the shared nav: % padding resolves against width, which on a
   16:10 frame costs far more vertical room than it looks like it should. */
.mini--fh .mini__nav { gap: 1.4cqw; padding: 2% 4.6%; }
.fh__mark { width: 3.4cqw; height: 3.4cqw; color: var(--p-accent); flex: none; }
.mini--fh .mini__nav b { font-family: var(--p-serif); font-weight: 600; font-stretch: normal; font-size: 3cqw; letter-spacing: 0.02em; }
.mini--fh .mini__nav b em { font-style: italic; color: var(--p-accent); margin-left: 0.5cqw; }
.mini--fh .mini__nav span:last-of-type { margin-left: auto; }

.fh__hero { padding: 0 4.6% 2.2%; }
.fh__kicker {
  font-family: var(--mono); font-size: 1.65cqw; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--p-accent); margin-bottom: 1.2cqw;
}
.fh__head { font-family: var(--p-serif); font-size: 4.4cqw; line-height: 1.1; letter-spacing: -0.01em; }

.fh__grid {
  flex: 1; min-height: 0; display: grid; gap: 1.5cqw;
  grid-template-columns: 1.7fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  padding: 0 4.6% 3%;
}
.fh__grid i { border-radius: 2px; min-height: 0; }
/* photographs, suggested with warm tonal gradients rather than flat blocks */
.fh__grid .a { grid-row: 1 / 3; background: linear-gradient(155deg, #3A3833, #14130F 70%); }
.fh__grid .b { background: linear-gradient(150deg, #C9C3B8, #8F887C); }
.fh__grid .c { background: linear-gradient(150deg, #9C7C54, #5E4A31); }
.fh__grid .d { grid-column: 2 / 4; background: linear-gradient(120deg, #E4E2DC, #B9B4A8); }

.fh__ticker { border-top: 1px solid rgba(14,14,14,0.12); padding: 1.5% 4.6%; overflow: hidden; flex: none; }
.fh__ticker em {
  display: block; white-space: nowrap; font-style: normal;
  font-family: var(--mono); font-size: 1.8cqw; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--p-fg); opacity: 0.55;
}

.mini--m8 { --p-bg: #1B1B1B; --p-fg: #F1F1F1; --p-accent: #E3B505; }
.m8__hero { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; padding: 0 4.6%; }
.m8__big { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 9.4cqw; line-height: 0.84; letter-spacing: -0.04em; }
.m8__rig { position: absolute; right: 5%; bottom: 12%; width: 32cqw; height: 17cqw; }
.m8__rig i { position: absolute; right: 0; bottom: 22%; width: 44%; height: 46%; border-radius: 2px; background: var(--p-accent); }
.m8__rig u { position: absolute; right: 8%; bottom: 62%; width: 24%; height: 28%; border-radius: 2px 4px 0 0; background: var(--p-accent); opacity: .75; }
.m8__rig s { position: absolute; left: 4%; bottom: 44%; width: 56%; height: 8%; background: var(--p-accent); opacity: .55; transform: rotate(-16deg); transform-origin: right center; text-decoration: none; }
.m8__rig b { position: absolute; right: 0; bottom: 4%; width: 52%; height: 16%; border-radius: 999px; background: currentColor; opacity: .5; }
.m8__strip { display: flex; gap: 2.4cqw; padding: 0 4.6% 4.6%; }
.m8__strip em { flex: 1; height: 5cqw; border-top: 1px solid currentColor; opacity: .22; }
.m8__strip em:first-child { border-top-color: var(--p-accent); opacity: 1; }

.mini--bk { --p-bg: #F4F7FA; --p-fg: #16283C; --p-accent: #2E6DA4; --p-card: #FFFFFF; }
.bk__hero { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; padding: 0 4.6%; }
.bk__hero s { width: 62%; height: 2.6cqw; border-radius: 2px; background: currentColor; opacity: .82; text-decoration: none; }
.bk__hero s.short { width: 38%; opacity: .3; height: 1.8cqw; }
.bk__hero em { width: 16cqw; height: 3.6cqw; border-radius: 2px; background: var(--p-accent); margin-top: 1cqw; }
.bk__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; padding: 0 4.6% 4.6%; }
.bk__cols div { background: var(--p-card); border: 1px solid rgba(22,40,60,0.1); border-radius: 3px; padding: 1.8cqw; display: grid; gap: 1.2cqw; }
.bk__cols i { width: 3.2cqw; height: 3.2cqw; border-radius: 2px; background: var(--p-accent); opacity: .85; }
.bk__cols s { height: 1px; background: currentColor; opacity: .22; text-decoration: none; }

/* Ameen Nabi — SA financial adviser, dark & premium. Palette read off the
   live site: near-black navy ground, red as the only action colour, gold
   reserved for craft detail (eyebrow, hairline), white for headlines.
   Georgia stands in for Fraunces at thumbnail scale, same call as Film Haus. */
.mini--an { --p-bg: #04070F; --p-fg: #FFFFFF; --p-accent: #DE2329; --p-gold: #CDA349; --p-serif: Georgia, "Times New Roman", serif; }
.mini--an .mini__nav b.an__mark { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 3cqw; letter-spacing: 0.02em; }
.mini--an .mini__nav span { background: rgba(255,255,255,0.3); }
.mini--an .mini__nav em.cta { background: var(--p-accent); }

.an__hero { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqw; padding: 0 4.6%; }
.an__kicker {
  font-family: var(--mono); font-size: 1.6cqw; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--p-gold);
}
.an__head { font-family: var(--p-serif); font-size: 4.6cqw; line-height: 1.14; letter-spacing: -0.01em; color: var(--p-fg); }
.an__cta {
  align-self: flex-start; margin-top: 0.6cqw; background: var(--p-accent); color: #FFFFFF;
  border-radius: 999px; padding: 1.3cqw 2.8cqw; font-family: var(--mono); font-size: 1.7cqw; letter-spacing: 0.06em;
}
.an__rule { height: 1px; margin: 0 4.6%; background: var(--p-gold); opacity: 0.4; }
.an__foot { display: flex; align-items: center; gap: 3cqw; padding: 3% 4.6%; }
.an__foot s { flex: 1; height: 1px; background: currentColor; opacity: .18; text-decoration: none; }
.an__foot s.short { flex: 0 0 22%; opacity: .3; }

/* CentraPoint Solutions — Joburg digital marketing agency. Palette read off
   the real site tokens: white ground, navy for the monogram and headline,
   blue for the one accent. The monogram is a direct crop of their real
   logo mark (a C-arc fused with a P), not an invented shape. */
.mini--cp { --p-bg: #FFFFFF; --p-fg: #0A142A; --p-accent: #1E3A6E; --p-muted: #4C5568; }
.cp__mark { width: 3.6cqw; height: 5.2cqw; color: var(--p-fg); flex: none; }
.mini--cp .mini__nav b { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 3cqw; letter-spacing: -0.01em; }
.mini--cp .mini__nav span { background: rgba(10,20,42,0.18); margin-left: auto; }
.mini--cp .mini__nav em.cta { background: var(--p-accent); color: #FFFFFF; }

.cp__hero { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; padding: 0 4.6%; }
.cp__kicker {
  font-family: var(--mono); font-size: 1.6cqw; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--p-muted);
}
.cp__head { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 4.6cqw; line-height: 1.08; letter-spacing: -0.02em; color: var(--p-fg); }
.cp__head em { font-style: normal; color: var(--p-accent); }
.cp__cta {
  align-self: flex-start; margin-top: 0.8cqw; background: var(--p-accent); color: #FFFFFF;
  border-radius: 999px; padding: 1.3cqw 2.8cqw; font-family: var(--mono); font-size: 1.6cqw; letter-spacing: 0.05em;
}
.cp__rule { height: 1px; margin: 0 4.6%; background: var(--p-fg); opacity: 0.12; }
.cp__foot { display: flex; align-items: center; gap: 3cqw; padding: 3% 4.6%; }
.cp__foot s { flex: 1; height: 1px; background: currentColor; opacity: .16; text-decoration: none; }
.cp__foot s.short { flex: 0 0 22%; opacity: .28; }

/* ==========================================================================
   CARDS — services grid with a pointer-following spotlight
   ========================================================================== */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 250px;
  padding: 28px 28px 30px;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(246, 242, 236, 0.035), rgba(246, 242, 236, 0.008));
  transition: border-color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(340px circle at var(--sx, 50%) var(--sy, 0%), rgba(246, 242, 236, 0.09), transparent 62%);
  opacity: 0; transition: opacity var(--t-hover) ease;
}
.card__icon { width: 30px; height: 30px; margin-bottom: 44px; flex: none; color: var(--muted-fg); transition: color var(--t-hover) var(--ease-out); }
.card p { margin-top: 12px; max-width: 38ch; color: var(--muted-fg); font-size: 14.5px; font-weight: 300; line-height: 1.62; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: rgba(232, 93, 58, 0.34); transform: translateY(-3px); }
  .card:hover::before { opacity: 1; }
  .card:hover .card__icon { color: var(--ember); }
}

/* ==========================================================================
   FLOW — process as a split panel: an illustrative window beside the steps
   ========================================================================== */
.flow { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; max-width: var(--maxw); margin: 0 auto; }
@media (min-width: 960px) { .flow { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } }

.flow__stage { display: none; }
.js .flow__stage { display: block; }
@media (max-width: 959px) { .js .flow__stage { order: 2; } }

.win { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-lg); }
.win__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.win__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.win__bar u { margin-left: 12px; font-family: var(--mono); font-size: 10px; color: var(--faint); text-decoration: none; }
.win__bar em { margin-left: auto; font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.win__body { display: grid; min-height: 364px; padding: clamp(20px, 2.6vw, 34px); }
@media (max-width: 959px) { .win__body { min-height: 330px; } }

.pane {
  grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; gap: 18px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-sweep) var(--ease-out), transform var(--t-sweep) var(--ease-out), visibility 0s linear var(--t-sweep);
}
.pane.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pane__note {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}

/* 01 — audit checklist */
.checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.checks b { font-weight: 500; }
.checks em { font-family: var(--mono); font-size: 10px; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.tick { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); }
.is-done .tick { background: var(--bone); border-color: var(--bone); }
.is-done .tick::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 5px; height: 8px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
.is-run .tick { border-color: var(--ember); }
.is-run .tick::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ember); }
.is-run em { color: var(--ember); }

/* 02 — blueprint */
.wire { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.wire__nav { display: flex; align-items: center; gap: 10px; }
.wire__nav b { width: 26px; height: 8px; border-radius: 2px; background: var(--fg); opacity: 0.85; }
.wire__nav i { width: 22px; height: 2px; background: var(--fg); opacity: 0.25; }
.wire__nav em { margin-left: auto; width: 44px; height: 14px; border-radius: 999px; background: var(--ember); }
.wire__hero { display: grid; gap: 8px; padding: 12px 0; }
.wire__hero s { width: 70%; height: 12px; border-radius: 2px; background: var(--fg); opacity: 0.9; text-decoration: none; }
.wire__hero s.m { width: 46%; }
.wire__hero s.p { width: 58%; height: 5px; opacity: 0.25; }
.wire__hero em { width: 64px; height: 18px; margin-top: 4px; border-radius: 999px; background: var(--bone); opacity: 0.9; }
.wire__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wire__row i { height: 52px; border: 1px solid var(--border); border-radius: 5px; }
.kit { display: flex; align-items: center; gap: 10px; }
.kit__c { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); }
.kit__c.c1 { background: var(--ember); border-color: var(--ember); }
.kit__c.c2 { background: var(--bone); border-color: var(--bone); }
.kit__c.c3 { background: var(--ink); }
.kit__aa { margin-left: 10px; font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 26px; letter-spacing: -0.03em; }
.kit small { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* 03 — build */
.mcode { margin: 0; padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg); font: 400 12.5px/1.9 var(--mono); color: var(--faint); white-space: pre-wrap; }
.mcode .k { color: var(--ember); }
.mcode .a { color: var(--bone); }
.mcode .s { color: var(--muted-fg); }
.toggles li { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.sw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--border); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bone); }
.sw.is-on { background: var(--ember); }
.sw.is-on::after { transform: translateX(14px); }

/* 04 — grow */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .g { stroke: var(--border-soft); stroke-width: 1; }
.chart .ln { fill: none; stroke: var(--bone); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.chart .ring { fill: none; stroke: var(--ember); stroke-width: 1; opacity: 0.45; }
.chart .end { fill: var(--ember); }
.axis { display: flex; justify-content: space-between; margin-top: -6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--faint); }
.pane.is-on .ln { animation: draw-line 900ms var(--expo) both; }
@keyframes draw-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* the steps */
.steps { display: grid; gap: 8px; }
.step { border: 1px solid transparent; border-radius: 12px; transition: background var(--t-hover) ease, border-color var(--t-hover) ease; }
.js .step.is-on { background: var(--surface); border-color: var(--border); }
.step__h { margin: 0; font-size: inherit; line-height: 1; }
.step__head {
  display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 22px 24px;
  background: none; border: 0; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.step__head i { min-width: 30px; font-family: var(--mono); font-size: 11px; font-style: normal; letter-spacing: 0.14em; color: var(--faint); transition: color var(--t-hover) var(--ease-out); }
.step__head span {
  font-family: var(--display); font-weight: 700; font-stretch: 125%; font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -0.025em; line-height: 1.05; color: var(--muted-fg); transition: color var(--t-hover) var(--ease-out);
}
.step.is-on .step__head span { color: var(--fg); }
.step.is-on .step__head i { color: var(--ember); }
.step__body { display: grid; grid-template-rows: 1fr; padding: 0 24px; transition: grid-template-rows var(--t-sweep) var(--ease-out), opacity var(--t-sweep) var(--ease-out); }
.step__body > div { min-height: 0; overflow: hidden; }
.step__body p { padding: 0 0 24px 46px; max-width: 50ch; color: var(--muted-fg); font-weight: 300; line-height: 1.62; }
/* collapsed copy leaves the accessibility tree once it has finished closing */
.js .step:not(.is-on) .step__body {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--t-sweep) var(--ease-out), opacity var(--t-sweep) var(--ease-out), visibility 0s linear var(--t-sweep);
}
@media (hover: hover) and (pointer: fine) {
  .js .step:not(.is-on) .step__head:hover span { color: var(--fg); }
}

/* ==========================================================================
   AGENCY
   ========================================================================== */
.studio__grid { display: grid; gap: clamp(48px, 7vw, 96px); }
@media (min-width: 960px) { .studio__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.lede { font-size: clamp(1.22rem, 2vw, 1.65rem); line-height: 1.34; letter-spacing: -0.02em; margin-bottom: 28px; }
.studio__body p + p { margin-top: 20px; color: var(--muted-fg); font-weight: 300; line-height: 1.66; max-width: 54ch; }
.studio__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px !important; }

.people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 32px); }
.person__card {
  aspect-ratio: 3 / 4; border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; margin-bottom: 20px; overflow: hidden;
}
.person__card span {
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--border);
  transition: transform 420ms var(--ease-out), -webkit-text-stroke-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .person:hover .person__card span { transform: scale(1.08); -webkit-text-stroke-color: var(--ember); }
}
.person h3 { font-size: 1.12rem; }
.person .label { margin: 7px 0 12px; }
.person p:last-child { font-size: 14px; color: var(--muted-fg); font-weight: 300; line-height: 1.55; }

/* ==========================================================================
   PRICING — three cards, the middle one inverted onto bone
   ========================================================================== */
.tiers { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 1000px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 30px 32px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.tier--pick {
  --fg: var(--ink); --muted-fg: #5C5C5C; --faint: #6E6960;
  --border: rgba(26, 26, 26, 0.14); --border-soft: rgba(26, 26, 26, 0.09);
  background: var(--bone); color: var(--ink); border-color: transparent;
}
.pick {
  position: absolute; top: 24px; right: 24px;
  background: var(--ember); color: var(--bone); border-radius: 999px; padding: 6px 13px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
.tier h3 { margin-top: 18px; font-size: clamp(1.85rem, 3vw, 2.5rem); }
.tier__line { margin-top: 8px; color: var(--muted-fg); font-size: 14px; }
.tier__price {
  margin-top: 28px; font-family: var(--display); font-weight: 800; font-stretch: 125%; letter-spacing: -0.04em;
  font-size: clamp(2.2rem, 3.2vw, 3rem); line-height: 1; color: var(--fg);
}
.tier__price s {
  display: block; margin-bottom: 10px; text-decoration: none;
  font-family: var(--mono); font-weight: 400; font-stretch: normal; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
}
.tier__price small {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-weight: 400; font-stretch: normal; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
.tier__cta { margin-top: 28px; width: 100%; }
.tier__copy { margin-top: 26px; color: var(--muted-fg); font-size: 14px; font-weight: 300; line-height: 1.6; }
.ticks { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-soft); display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; background: var(--ember);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .tier--pick .btn--fill:hover { color: var(--bone); }
  .tier--pick .btn--fill::after { background: var(--ink); }
}
.pricing__foot { margin-top: 48px; font-size: 15px; color: var(--muted-fg); }
.pricing__foot a { color: var(--bone); }

/* ==========================================================================
   CTA — closing panel, the mark in real depth
   ========================================================================== */
.cta { padding-block: clamp(30px, 5vh, 70px); }
.cta__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 28px; align-items: center; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(32px, 5vw, 72px);
  border: 1px solid var(--border); border-radius: 22px;
  background: radial-gradient(80% 130% at 100% 0%, rgba(246, 242, 236, 0.075), transparent 60%), var(--surface);
}
@media (min-width: 900px) { .cta__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.cta__copy h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.cta__copy .label { margin-bottom: 22px; }
.cta__copy .head__sub { margin-top: 24px; }
.cta__btns { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

.cta__stage { position: relative; height: clamp(230px, 30vw, 340px); display: grid; place-items: center; perspective: 1100px; }
.cta__flat { width: min(80%, 340px); height: auto; }
.cta__stage.is-3d .cta__flat { display: none; }
.cta__stage::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 8%; height: 26px; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); filter: blur(6px);
}

.cube__sway { transform-style: preserve-3d; animation: sway 9s ease-in-out infinite alternate; animation-play-state: paused; }
.cta__stage.is-live .cube__sway { animation-play-state: running; }
@keyframes sway { from { transform: rotateY(-7deg); } to { transform: rotateY(7deg); } }

.cube {
  --u: 3px; --d: calc(var(--u) * 8);
  position: relative; width: calc(var(--u) * 86); height: calc(var(--u) * 54);
  transform-style: preserve-3d;
  transform: rotateX(calc(-17deg + var(--cy, 0) * -9deg)) rotateY(calc(-27deg + var(--cx, 0) * 12deg));
}
@media (min-width: 900px) { .cube { --u: 4px; } }

.slab {
  --c1: var(--bone);
  --c2: color-mix(in srgb, var(--bone) 58%, black);
  --c3: color-mix(in srgb, var(--bone) 38%, black);
  --c4: color-mix(in srgb, var(--bone) 82%, black);
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--sz) * var(--u)); height: calc(var(--sz) * var(--u));
  transform-style: preserve-3d; transform: translateZ(calc(var(--z, 0) * var(--u)));
}
.slab--ember {
  --c1: var(--ember);
  --c2: color-mix(in srgb, var(--ember) 58%, black);
  --c3: color-mix(in srgb, var(--ember) 38%, black);
  --c4: color-mix(in srgb, var(--ember) 82%, black);
}
.fc { position: absolute; backface-visibility: hidden; }
.fc--f, .fc--b { inset: 0; }
.fc--f { transform: translateZ(calc(var(--d) / 2)); background: var(--c1); }
.fc--b { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: var(--c3); }
.fc--r, .fc--l { top: 0; bottom: 0; width: var(--d); left: calc(50% - var(--d) / 2); }
.fc--r { transform: rotateY(90deg) translateZ(calc(var(--sz) * var(--u) / 2)); background: var(--c2); }
.fc--l { transform: rotateY(-90deg) translateZ(calc(var(--sz) * var(--u) / 2)); background: var(--c2); }
.fc--t, .fc--u { left: 0; right: 0; height: var(--d); top: calc(50% - var(--d) / 2); }
.fc--t { transform: rotateX(90deg) translateZ(calc(var(--sz) * var(--u) / 2)); background: var(--c4); }
.fc--u { transform: rotateX(-90deg) translateZ(calc(var(--sz) * var(--u) / 2)); background: var(--c3); }

/* ==========================================================================
   CONTACT — the one light block
   ========================================================================== */
.contact {
  --bg: var(--bone); --surface: #FFFFFF; --fg: var(--ink);
  --muted-fg: #5C5C5C; --faint: #6E6960;
  --border: rgba(26, 26, 26, 0.16); --border-soft: rgba(26, 26, 26, 0.09);
  background: var(--bone); color: var(--ink);
}
.contact .head .label--ember { color: var(--ember); }
.contact .head__sub { color: #5C5C5C; }
.contact__grid { display: grid; gap: clamp(52px, 7vw, 96px); }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.contact__list li { padding: 22px 0; border-top: 1px solid rgba(26,26,26,0.14); }
.contact__list li:last-child { border-bottom: 1px solid rgba(26,26,26,0.14); }
.contact__list .label { color: #6E6960; margin-bottom: 10px; }
.big-link {
  display: inline-block; overflow: hidden; position: relative; max-width: 100%;
  font-family: var(--display); font-weight: 700; font-stretch: 125%;
  font-size: clamp(1.05rem, 4.4vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.12;
  overflow-wrap: anywhere;
}
.big-link span { display: inline-block; transition: transform var(--t-sweep) var(--ease-out), color var(--t-hover) ease; }
.big-link:active span { transform: translateX(10px) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .big-link:hover span { transform: translateX(10px); color: var(--ember); }
}
.contact__where { margin-top: 28px; font-size: 13px; color: #6E6960; }

.field { display: grid; gap: 10px; margin-bottom: 22px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6E6960; }
.field input, .field textarea {
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid rgba(26,26,26,0.22);
  padding: 12px 0; width: 100%; resize: vertical; border-radius: 0;
  transition: border-color var(--t-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .field input:hover, .field textarea:hover { border-bottom-color: rgba(26,26,26,0.45); }
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ember); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin: 30px 0 10px; }
.consent input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--ember); }
.consent label { font-size: 13px; line-height: 1.55; color: #5C5C5C; }
.form__error { min-height: 20px; font-size: 13px; color: #B03A1E; margin: 10px 0; }
.form__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.contact .btn--line { border-color: rgba(26,26,26,0.28); color: var(--ink); }
.contact .btn--line::after { background: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .contact .btn--line:hover { color: var(--bone); border-color: var(--ink); }
  .contact .btn--fill:hover { color: var(--bone); }
}
.contact .btn--fill::after { background: var(--ink); }
.form__help { margin-top: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #6E6960; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--bg); color: var(--fg); padding: clamp(60px, 8vh, 100px) var(--gutter) 36px; border-top: 1px solid var(--border-soft); }
.footer__top, .footer__bar { max-width: var(--maxw); margin: 0 auto; }
.footer__top { display: grid; gap: 48px; padding-bottom: 56px; }
@media (min-width: 860px) { .footer__top { grid-template-columns: 1fr auto; gap: 80px; } }
.footer__mark { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.04em; line-height: 0.9; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (min-width: 620px) { .footer__cols { grid-template-columns: repeat(3, auto); gap: clamp(40px, 6vw, 96px); } }
.footer__cols .label { margin-bottom: 18px; }
.footer__cols ul { display: grid; gap: 12px; }
.footer__cols a { font-size: 14px; color: var(--muted-fg); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .footer__cols a:hover { color: var(--bone); } }
.footer__bar {
  border-top: 1px solid var(--border-soft); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}

/* the giant wordmark — outlined, cropped by the bottom edge */
.footer__giant {
  container-type: inline-size;
  max-width: var(--maxw); margin: clamp(28px, 4vw, 56px) auto 0;
  aspect-ratio: 100 / 12.6; overflow: hidden;
  user-select: none; pointer-events: none;
}
.footer__giant span {
  display: block; white-space: nowrap; text-align: center;
  /* 7.07em wide in this face, so 13.9cqw fills the container with a hair to spare */
  font-size: 11.4cqw; line-height: 0.8;
  font-family: var(--display); font-weight: 800; font-stretch: 125%; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--border);
}

/* ==========================================================================
   REVEALS
   ========================================================================== */
.js:not(.reduced) .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--t-enter) var(--expo), transform var(--t-enter) var(--expo);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js:not(.reduced) .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
/* Reduced motion means fewer and gentler animations, not none. Colour and
   opacity still carry meaning, so they stay — everything that moves goes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mx: 0; --my: 0;
    --t-press: 1ms; --t-hover: 120ms; --t-sweep: 120ms; --t-exit: 120ms; --t-enter: 200ms;
  }
  *, *::before, *::after { scroll-behavior: auto !important; }

  /* kill continuous and decorative motion outright */
  .marquee__track, .caret, .hero__scroll span, .cube__sway, .pane.is-on .ln { animation: none !important; }

  /* no movement: opacity and colour only */
  .btn, .round, .work__index button b, .big-link span, .card,
  .person__card span, .slide .shot, .reveal, .pane {
    transform: none !important;
    transition-property: opacity, color, background-color, border-color !important;
  }
  .btn::after, .ul::after { transition: opacity 120ms linear !important; }
  .lines span { clip-path: none !important; transform: none !important; }
  .tok .b { visibility: visible; }
}

/* ==========================================================================
   SMALL SCREENS
   ========================================================================== */
@media (max-width: 700px) {
  .work__meta { flex-direction: column; align-items: flex-start; }
  .people { grid-template-columns: 1fr; }
  .build { gap: 12px; }
  .render__frame { min-height: 150px; }
}

.nav__mark { display: inline-flex; align-items: center; gap: 12px; }
.nav__mark svg { height: 17px; width: auto; }

/* --- conversion: hero note, what-happens-next, floating WhatsApp --- */
.hero__note { margin-top: 22px; font-size: 14px; color: var(--muted-fg); font-weight: 300; }
.hero__note a { color: var(--fg); }
.next { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border-soft); max-width: 46ch; }
.next ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.next li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; font-size: 15px; line-height: 1.55; color: var(--muted-fg); font-weight: 300; }
.next b { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--ember); padding-top: 4px; }
.wa-float {
  position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px;
  border-radius: 999px; background: var(--ember); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out), visibility 0s var(--t-hover), background-color var(--t-hover) ease;
}
.wa-float svg { width: 22px; height: 22px; flex: none; }
.wa-float.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.wa-float:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { background: var(--ember-glow); } }
@media (max-width: 520px) { .wa-float span { display: none; } .wa-float { padding: 0; width: 52px; justify-content: center; } }

/* --- touch targets: 44px hit areas on coarse pointers --- */
@media (pointer: coarse) {
  .nav__mark { min-height: 44px; }
  .big-link, .footer__cols a, .hero__note a, .pricing__foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .consent input { width: 24px; height: 24px; margin-top: 1px; }
}

/* --- FAQ --- */
.faq { padding: clamp(70px, 10vh, 130px) var(--gutter); }
.faq__list { max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; min-height: 44px; font-family: var(--display); font-weight: 700; font-stretch: 125%;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); letter-spacing: -0.025em; line-height: 1.2;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; flex: none; width: 12px; height: 12px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--t-hover) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 0 26px; max-width: 62ch; color: var(--muted-fg); font-weight: 300; line-height: 1.66; }
.faq__item summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }

/* --- hero: content is anchored below the nav; it can shrink but never slide under it --- */
.js:not(.reduced) .hero { align-items: flex-start; padding-top: 104px; padding-bottom: 40px; }
.js:not(.reduced) .hero__grid { margin: auto; }
.big-link--sub { margin-top: 6px; font-size: 0.62em; opacity: 0.75; }
@media (max-height: 820px) {
  .hero__note { display: none; }
  .hero__copy .label { margin-bottom: 18px; }
  .hero__sub { margin-top: 18px; }
  .hero__ctas { margin-top: 22px; }
  .js:not(.reduced) .hero { padding-bottom: 24px; }
}
@media (max-width: 1039px) {
  .js:not(.reduced) .hero__grid { gap: 22px; }
  .hero__sub { font-size: 16px; }
}
/* single-column phones: the output preview would fall below the fold and be clipped, so it steps aside */
@media (max-width: 619px) { .js:not(.reduced) .render { display: none; } }
/* stacked layouts on short screens: a compact editor so all six typed lines stay on screen */
@media (max-width: 1039px) and (max-height: 900px) {
  .js:not(.reduced) .hero .editor__code { padding: 14px 16px; line-height: 1.6; font-size: 11px; }
}
@media (max-width: 1039px) and (max-height: 820px) {
  .hero__sub { display: none; }
}

/* stacked hero (tablet + phone): drop the extras that collide with the code panel */
@media (max-width: 1039px) {
  .hero__note { display: none; }
  .js:not(.reduced) .hero { padding-top: 98px; }
}
@media (max-width: 1039px) and (max-height: 900px) {
  .js:not(.reduced) .hero__scroll { display: none; }
  .hero__copy .label { margin-bottom: 14px; }
}
@media (max-width: 619px) and (max-height: 900px) {
  :root { --h1: clamp(2.05rem, min(9.6vw, 10.5vh), 5.4rem); }
  .js:not(.reduced) .hero .editor__code { padding: 10px 14px; font-size: 10.5px; line-height: 1.5; }
  .js:not(.reduced) .hero__grid { gap: 18px; }
  .hero__ctas { margin-top: 18px; }
}

@media (max-height: 700px) { .js:not(.reduced) .hero__scroll { display: none; } }

/* --- aurora bars: fixed page background (port of unlumen-ui AuroraBars, brand colours) --- */
.aurora {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 600ms var(--ease-out);
}
.aurora.is-ready { opacity: calc(0.12 + var(--hero-op, 1) * 0.38); }
.reduced .aurora.is-ready { opacity: 0.3; }
.aurora__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; filter: blur(2.5px); }
.aurora__col { flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 0 3px; }
.aurora__col i {
  display: block; width: 100%; height: 40%; opacity: 0.85; border-radius: 9999px 9999px 0 0;
  background: linear-gradient(to top, rgba(242, 105, 77, 0.8) 0%, rgba(232, 93, 58, 0.55) 30%, rgba(232, 93, 58, 0.2) 65%, rgba(232, 93, 58, 0) 100%);
}
.aurora::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11, 11, 11, 0.86) 0%, rgba(11, 11, 11, 0.6) 42%, transparent 74%),
    radial-gradient(ellipse 90% 80% at 50% 100%, transparent 35%, rgba(11, 11, 11, 0.85) 100%);
}
@media (max-width: 1039px) {
  .aurora::after {
    background:
      linear-gradient(to bottom, rgba(11, 11, 11, 0.55), rgba(11, 11, 11, 0.72)),
      radial-gradient(ellipse 90% 80% at 50% 100%, transparent 35%, rgba(11, 11, 11, 0.85) 100%);
  }
}

/* preview nav buttons that carry text ("Book a call"): size to their label instead of a fixed pill */
.mini__nav em.cta:not(:empty) {
  display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto;
  padding: 0.9cqw 2.2cqw; font-family: var(--body); font-style: normal; font-weight: 600;
  font-size: 1.9cqw; line-height: 1; white-space: nowrap; color: #fff;
}
/* --- logo intro (the brand animation, once per visit) ----------------------------- */
.loader { display: none; }
.is-loading { overflow: hidden; }
.is-loading .loader {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(22px, 4vh, 34px); background: #0B0B0B; cursor: pointer;
  transition: opacity 380ms var(--ease-out), visibility 0s 380ms;
}
.is-loading.is-leaving .loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark { width: clamp(132px, 22vw, 220px); height: auto; overflow: visible; }
.loader__word {
  margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 125%; letter-spacing: -0.03em;
  font-size: clamp(26px, 5.2vw, 52px); color: #F6F2EC; opacity: 0; transform: translateY(8px);
  animation: ld-rise 460ms var(--ease-out) 1240ms forwards;
}
.loader__word em { display: inline-block; font-style: normal; color: #E85D3A; opacity: 0; animation: ld-dot 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 1560ms forwards; }
.lq { transform-box: fill-box; transform-origin: center; }
.lq--form { opacity: 0; transform: translateY(7px) scale(0.85); animation: ld-form 400ms var(--ease-out) forwards; }
.lq--form:nth-of-type(1) { animation-delay: 120ms; }
.lq--form:nth-of-type(2) { animation-delay: 180ms; }
.lq--form:nth-of-type(3) { animation-delay: 240ms; }
.lq--form:nth-of-type(4) { animation-delay: 300ms; }
.lq--form:nth-of-type(5) { animation-delay: 360ms; }
.lq--outlier { transform: translate(-9px, 7px) scale(0.92); fill: #F6F2EC; animation: ld-outlier 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 720ms forwards; }
.lq--ring { opacity: 0; transform: scale(0.9); animation: ld-ring 520ms var(--ease-out) 1100ms forwards; }
@keyframes ld-form { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ld-outlier { 0% { transform: translate(-9px, 7px) scale(0.92); fill: #F6F2EC; } 55% { fill: #E85D3A; } 100% { transform: translate(0, 0) scale(1); fill: #E85D3A; } }
@keyframes ld-ring { from { opacity: 0.55; transform: scale(0.9); } to { opacity: 0; transform: scale(1.9); } }
@keyframes ld-rise { to { opacity: 1; transform: none; } }
@keyframes ld-dot { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* --- team photo inside the person card --- */
.person__card--photo { display: block; background: #0B0B0B; }
.person__card--photo picture, .person__card--photo img { display: block; width: 100%; height: 100%; }
.person__card--photo img { object-fit: cover; object-position: 50% 30%; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .person:hover .person__card--photo img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .person__card--photo img { transition: none !important; transform: none !important; } }

/* narrow phones: the stat figures (wide expanded type) must fit a half-width column */
@media (max-width: 400px) { .stat__n { font-size: 2.7rem; } }