/* ==========================================================================
   JUST AI — Design System v3 "Editorial Monochrome"
   Growth agency for ambitious brands.

   Scope: new homepage (index.html) + shared header/footer.
   The legacy stylesheet (assets/styles.css) is untouched and still serves the
   older pages. Do not merge the two.

   Structure
     1. Tokens
     2. Reset & base
     3. Typography primitives
     4. Layout primitives
     5. Components
     6. Sections
     7. Motion
     8. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS — self-hosted (Satoshi, Indian Type Foundry free licence · JetBrains
   Mono, SIL OFL). Latin subset only.
   -------------------------------------------------------------------------- */
@font-face{font-family:Satoshi;src:url(fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrainsmono-400.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* -- Brand palette (single source of truth) -- */
  --carbon:#0A0A0A;
  --soft-white:#FAFAF7;
  --light-grey:#F1F1ED;
  --neutral-grey:#D8D8D2;
  --dark-grey:#686864;

  /* -- Accents. Flat only. Never gradients, never glows. -- */
  --signal-orange:#FF5733;
  --electric-blue:#3155FF;
  --bright-yellow:#FFD53D;
  --fresh-green:#39D98A;

  /* Accessible text-on-light variants of the accents (AA on --soft-white) */
  --orange-ink:#C2350F;
  --blue-ink:#2440CC;
  --yellow-ink:#7A5C00;
  --green-ink:#0E7A48;

  /* -- Semantic surface tokens. Overridden by .inverse for dark sections. -- */
  --bg:var(--soft-white);
  --surface:var(--light-grey);
  --fg:var(--carbon);
  --fg-muted:var(--dark-grey);
  --rule:var(--neutral-grey);
  --rule-soft:#E4E4DF;
  /* Borders of interactive controls. WCAG 1.4.11 wants 3:1, which --rule
     (a decorative divider) does not meet. */
  --control-bd:#8E8E88;
  --accent:var(--signal-orange);
  --accent-ink:var(--orange-ink);

  /* -- Typography -- */
  --font-sans:Satoshi,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-display:clamp(2.55rem,7.4vw,7rem);
  --fs-h2:clamp(2rem,4.6vw,3.9rem);
  --fs-h3:clamp(1.4rem,2.4vw,2rem);
  --fs-h4:clamp(1.125rem,1.4vw,1.3rem);
  --fs-lead:clamp(1.0625rem,1.45vw,1.375rem);
  --fs-body:1rem;          /* 16px floor — never smaller for body copy */
  --fs-small:0.9375rem;
  --fs-label:0.75rem;

  --lh-display:0.94;
  --lh-heading:1.06;
  --lh-body:1.62;
  --tr-display:-0.035em;
  --tr-label:0.16em;

  /* -- Spacing -- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;
  --section-y:clamp(72px,9vw,140px);
  --gutter:clamp(20px,4.4vw,56px);
  --container:1360px;
  --header-h:74px;

  /* -- Borders & radii (editorial = near-square) -- */
  --bw:1px;
  --r-0:0;
  --r-1:2px;

  /* -- Motion -- */
  --dur-1:150ms; --dur-2:250ms; --dur-3:400ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* -- Breakpoints (documentation; media queries must repeat the value) --
     --bp-xs:480px  --bp-sm:768px  --bp-md:1024px  --bp-lg:1280px  --bp-xl:1600px */
}

/* Dark inversion — applied per-section, not globally. */
.inverse{
  --bg:var(--carbon);
  --surface:#141412;
  --fg:var(--soft-white);
  --fg-muted:#A3A39D;
  --rule:#2A2A27;
  --rule-soft:#1E1E1C;
  --control-bd:#5E5E59;
  --accent-ink:var(--signal-orange);
  background:var(--bg);
  color:var(--fg);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--carbon);color:var(--soft-white)}
.inverse ::selection{background:var(--soft-white);color:var(--carbon)}

/* Focus — always visible, never removed. */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--signal-orange);
  outline-offset:3px;
  border-radius:var(--r-1);
}
.inverse :focus-visible{outline-color:var(--signal-orange)}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:200;
  background:var(--carbon);color:var(--soft-white);
  padding:var(--s-3) var(--s-5);font-weight:700;
  transition:top var(--dur-2) var(--ease);
}
.skip-link:focus-visible{top:var(--s-4)}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   3. TYPOGRAPHY PRIMITIVES
   ========================================================================== */
.display{
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  font-weight:900;
  text-wrap:balance;
}
h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:-0.028em;font-weight:900;text-wrap:balance}
h3,.h3{font-size:var(--fs-h3);line-height:1.16;letter-spacing:-0.02em;font-weight:700}
h4,.h4{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-0.012em;font-weight:700}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--fg-muted);max-width:56ch;font-weight:400}
.muted{color:var(--fg-muted)}
.small{font-size:var(--fs-small)}

/* Mono label — the editorial "kicker" used throughout. */
.label{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--fg-muted);font-weight:500;
}
.label::before{
  content:"";flex:none;width:9px;height:9px;
  background:var(--accent);
}
.label--plain::before{display:none}

/* Section index, e.g. "01" — sits in the section header's right rail. */
.index{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--fg-muted);
}

/* `.ph` / `.ph-token` — the dashed "awaiting validation" markers — were
   removed on 2026-09-11. All four company metrics are now confirmed, so the
   homepage carries no unvalidated figure and nothing was left to mark.
   If a future claim needs flagging, reinstate a marker rather than publishing
   an un-signed-off number as if it were confirmed. */

/* Development-only banner. Every instance is a piece of content the site is
   waiting on. Deleting the element is the whole removal — no other rule
   depends on it. */
.dev-flag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:6px 10px;
  background:#FFEDE6;color:#8A3B12;
  border:1px dashed var(--signal-orange);
  font-family:var(--font-mono);font-size:0.6875rem;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.35;
  text-align:left;
}
.dev-flag::before{content:"";flex:none;width:7px;height:7px;background:var(--signal-orange)}
.inverse .dev-flag{background:#2B1710;color:#FFC7B4}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}
.section{
  position:relative;
  padding-block:var(--section-y);
  background:var(--bg);
  color:var(--fg);
}
.section--tight{padding-block:clamp(48px,5.5vw,84px)}
.section--surface{background:var(--surface)}
.section + .section:not(.inverse):not(.section--surface){border-top:var(--bw) solid var(--rule-soft)}
/* Consecutive dark bands would otherwise read as one very long section. */
.section.inverse + .section.inverse{border-top:var(--bw) solid var(--rule)}

/* Blueprint column rules — a print-style grid, drawn only on wide viewports.
   Purely decorative, hidden from assistive tech, no motion. */
.section--ruled::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  max-width:var(--container);margin-inline:auto;
  padding-inline:var(--gutter);
  background-image:repeating-linear-gradient(to right,var(--rule-soft) 0 1px,transparent 1px calc(100% / 6));
  background-clip:content-box;
  opacity:.7;
}
.section > .container{position:relative;z-index:1}
@media (max-width:1024px){.section--ruled::before{display:none}}

/* Section header: title left, index + optional note right. */
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--s-5);
  padding-bottom:clamp(36px,4.5vw,64px);
}
/* `ch` on the wrapper would resolve against the 16px inherited size, not the
   heading's, and crush every H2 into a ~220px column. Constrain the heading. */
.section-head__title{display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}
.section-head__title h2{max-width:14ch}
.section-head__aside{display:flex;flex-direction:column;gap:var(--s-4);align-self:end}
.section-head__aside p{color:var(--fg-muted);max-width:44ch}
@media (min-width:900px){
  .section-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-8);align-items:end}
  .section-head__aside{align-items:flex-start}
}

.rule{height:var(--bw);background:var(--rule);border:0}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* -------------------------------- Button -------------------------------- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--fg);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
  min-height:48px;padding:14px 26px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:var(--bw) solid var(--btn-bd);border-radius:var(--r-0);
  font-weight:700;font-size:var(--fs-small);letter-spacing:-0.01em;
  text-align:center;white-space:nowrap;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform var(--dur-2) var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn:active{transform:translateY(1px)}

/* Carbon on Signal Orange is 6.28:1. White would be 3.15:1 — below AA for
   this text size, so the label stays dark and the brand orange stays exact. */
.btn--primary{--btn-bg:var(--signal-orange);--btn-fg:var(--carbon);--btn-bd:var(--signal-orange)}
.btn--primary:hover{--btn-bg:#FF7455;--btn-bd:#FF7455}

.btn--secondary{--btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--control-bd)}
.btn--secondary:hover{--btn-bd:var(--fg);--btn-bg:var(--fg);--btn-fg:var(--bg)}

.btn--solid{--btn-bg:var(--fg);--btn-fg:var(--bg);--btn-bd:var(--fg)}
.btn--solid:hover{--btn-bg:transparent;--btn-fg:var(--fg)}

.btn--lg{min-height:56px;padding:17px 32px;font-size:1rem}
.btn--block{width:100%}

/* Text link with an animated underline. */
.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-weight:700;font-size:var(--fs-small);
  padding-block:9px;
  border-bottom:2px solid var(--fg);
  transition:gap var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.link-arrow:hover{gap:12px;border-color:var(--signal-orange);color:var(--accent-ink)}
.link-arrow svg{width:14px;height:14px}

/* -------------------------------- Header -------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--soft-white) 88%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:var(--bw) solid transparent;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.header.is-stuck{
  background:var(--soft-white);
  border-bottom-color:var(--rule);
}
.header__inner{
  display:flex;align-items:center;gap:var(--s-6);
  min-height:var(--header-h);
}
.brand{display:flex;align-items:center;flex:none;padding-block:6px;min-height:44px}
.brand img{width:104px;height:auto;aspect-ratio:520/159}
.brand__white{display:none}

.nav{display:none;margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav__link{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;min-width:44px;padding-inline:2px;
  font-size:var(--fs-small);font-weight:500;
  transition:color var(--dur-2) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;
  background:var(--carbon);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-2) var(--ease);
}
.nav__link:hover::after,.nav__link[aria-expanded=true]::after,.nav__link.is-current::after{transform:scaleX(1)}
.nav__link svg{width:12px;height:12px;transition:transform var(--dur-2) var(--ease)}
.nav__link[aria-expanded=true] svg{transform:rotate(180deg)}

.nav__actions{display:none;align-items:center;gap:var(--s-4);margin-left:var(--s-5)}
.nav__commerce{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);
  min-height:44px;
  transition:color var(--dur-2) var(--ease);
}
.nav__commerce:hover{color:var(--fg)}

/* Services dropdown */
.nav__item{position:relative}
.nav__panel{
  position:absolute;top:calc(100% + 6px);left:-20px;
  width:min(600px,90vw);
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--soft-white);
  border:var(--bw) solid var(--rule);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2);
}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel,.nav__panel.is-open{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav__panel a{
  display:flex;flex-direction:column;gap:4px;
  padding:var(--s-5);border-right:var(--bw) solid var(--rule-soft);border-bottom:var(--bw) solid var(--rule-soft);
  transition:background var(--dur-2) var(--ease);
}
.nav__panel a:nth-child(2n){border-right:0}
.nav__panel a:nth-last-child(-n+2){border-bottom:0}
.nav__panel a:hover{background:var(--light-grey)}
.nav__panel b{font-size:var(--fs-small);font-weight:700;display:flex;align-items:center;gap:8px}
.nav__panel b::before{content:"";width:8px;height:8px;flex:none;background:var(--dot,var(--signal-orange))}
.nav__panel span{font-size:0.8125rem;color:var(--fg-muted);line-height:1.45}

.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:auto;flex:none;
  border:var(--bw) solid var(--rule);
}
.menu-btn svg{width:20px;height:20px}

/* Mobile menu — full-screen panel, single level. */
.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:var(--soft-white);
  padding:calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-8);
  display:flex;flex-direction:column;gap:var(--s-5);
  overflow-y:auto;
  visibility:hidden;opacity:0;
  /* Visibility flips instantly on open so the panel is focusable straight
     away, and is delayed on close so the fade-out stays visible. */
  transition:opacity var(--dur-2) var(--ease),visibility 0s var(--dur-2);
}
.mobile-menu.is-open{visibility:visible;opacity:1;transition:opacity var(--dur-2) var(--ease),visibility 0s}
.mobile-menu a{font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;padding-block:10px;min-height:44px}
.mobile-menu .mm-sub{font-size:1.0625rem;font-weight:500;color:var(--fg-muted);padding-left:var(--s-5);position:relative}
.mobile-menu .mm-sub::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;background:var(--dot,var(--signal-orange))}
.mobile-menu .mm-group{display:flex;flex-direction:column;gap:2px;padding-block:var(--s-2)}
.mobile-menu hr{height:1px;background:var(--rule);border:0;margin-block:0}
.mobile-menu .btn{margin-top:var(--s-4)}

/* ------------------------------ Logo grid ------------------------------- */
.logo-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:var(--bw) solid var(--rule);border-left:var(--bw) solid var(--rule);
}
.logo-grid__cell{
  display:grid;place-items:center;
  padding:var(--s-5) var(--s-5);min-height:126px;
  border-right:var(--bw) solid var(--rule);border-bottom:var(--bw) solid var(--rule);
}
/* Thin-stroke marks (Callebaut, Avril) disappear below ~.75 once flattened to
   a single ink, so the resting opacity carries most of the weight. */
.logo-grid__cell img{
  max-height:var(--logo-h,46px);width:auto;max-width:100%;
  filter:grayscale(1) contrast(0) brightness(0);
  opacity:.78;
  transition:opacity var(--dur-3) var(--ease);
}
.inverse .logo-grid__cell img{filter:grayscale(1) contrast(0) brightness(0) invert(1);opacity:.68}
.logo-grid__cell:hover img{opacity:1}

/* ----------------------------- Service row ------------------------------ */
.services{border-top:var(--bw) solid var(--rule)}
.service{
  position:relative;display:block;
  border-bottom:var(--bw) solid var(--rule);
  transition:background var(--dur-3) var(--ease);
}
.service::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--svc,var(--signal-orange));
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--dur-3) var(--ease);
}
.service:hover,.service:focus-visible{background:var(--surface)}
.service:hover::before,.service:focus-visible::before{transform:scaleY(1)}
.service__inner{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);
  padding:clamp(30px,3.6vw,48px) 0 clamp(30px,3.6vw,48px) clamp(16px,2vw,28px);
}
.service__num{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);
  color:var(--fg-muted);display:flex;align-items:center;gap:10px;
}
.service__num::before{content:"";width:9px;height:9px;background:var(--svc,var(--signal-orange))}
.service__title{
  font-size:clamp(1.6rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-0.03em;font-weight:900;
}
.service__meta{display:flex;flex-direction:column;gap:var(--s-4)}
.service__desc{color:var(--fg-muted);max-width:46ch;line-height:1.6}
.service__tags{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-muted);
}
.service__go{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:var(--fs-small);
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color var(--dur-2) var(--ease);
}
.service__go svg{width:14px;height:14px;transition:transform var(--dur-2) var(--ease)}
.service:hover .service__go,.service:focus-visible .service__go{border-bottom-color:var(--svc,var(--fg))}
.service:hover .service__go svg{transform:translate(3px,-3px)}
@media (min-width:900px){
  .service__inner{
    grid-template-columns:78px minmax(0,1.1fr) minmax(0,1fr) auto;
    gap:var(--s-6);align-items:start;
  }
  /* Optical alignment: the mono number and the link sit on the title's first
     baseline rather than on its box top. */
  .service__num{padding-top:14px}
  .service__meta{padding-top:8px}
  .service__go{padding-top:12px;justify-self:end;align-self:start}
}

/* Removed 2026-09-11 together with the Featured Work section and the
   awaiting-validation proof panel:
     .case / .case__*        — case-study cards
     .work-grid              — their grid
     .proof-panel / .proof-figure / .ledger / .proof-note
                             — the single-figure + "awaiting validation" ledger,
                               replaced by the .metrics row further down
     .quote / .quote__*      — the old testimonial card, replaced by .tcard
   justai.css is loaded by index.html only (every other page uses
   assets/styles.css), so none of these had another consumer. */

/* ------------------------------ Proof list ------------------------------ */
.proofs{display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--bw) solid var(--rule)}
.proof{
  display:flex;gap:var(--s-5);align-items:flex-start;
  padding-block:clamp(22px,2.6vw,34px);
  border-bottom:var(--bw) solid var(--rule);
}
.proof__body{display:flex;flex-direction:column;gap:var(--s-3)}
.proof__num{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);
  color:var(--fg-muted);flex:none;padding-top:6px;width:34px;
}
.proof p{font-size:clamp(1.125rem,2.1vw,1.55rem);line-height:1.24;letter-spacing:-0.02em;font-weight:700;max-width:24ch}
.proof p.proof__sub{
  font-size:var(--fs-small);line-height:1.5;letter-spacing:0;font-weight:400;
  color:var(--fg-muted);max-width:42ch;
}

/* ------------------------------ Insight card ---------------------------- */
.insight{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding-top:var(--s-5);border-top:2px solid var(--fg);
  transition:opacity var(--dur-2) var(--ease);
}
.insight:hover{opacity:.62}
.insight__meta{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
.insight h3{font-size:clamp(1.15rem,1.8vw,1.45rem)}

/* --------------------------- Placeholder frame -------------------------- */
/* Used wherever real photography is still missing. Never dress a placeholder
   up as delivered client work. */
.frame{
  position:relative;display:block;
  background:var(--surface);
  border:var(--bw) solid var(--rule);
  overflow:hidden;
}
.frame img{width:100%;height:100%;object-fit:cover}
.frame__cap{
  position:absolute;left:0;bottom:0;
  padding:6px 10px;background:var(--carbon);color:var(--soft-white);
  font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;
}

/* ================================ Forms ================================= */
.form{display:grid;gap:var(--s-4)}
.form__row{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.form__row--2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:0.8125rem;font-weight:700;letter-spacing:-0.005em}
.field > span i{font-style:normal;font-weight:400;color:var(--fg-muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  background:var(--soft-white);color:var(--carbon);
  border:var(--bw) solid var(--control-bd);border-radius:var(--r-0);
  font-size:var(--fs-body);
  transition:border-color var(--dur-2) var(--ease);
}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--dark-grey)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--carbon)}
.field__error{
  display:none;font-size:0.8125rem;font-weight:700;color:var(--orange-ink);
}
.field__error::before{content:"✕ ";font-weight:700}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--orange-ink);border-width:2px}
.field.has-error .field__error{display:block}
.form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{
  padding:var(--s-4);border-left:4px solid var(--signal-orange);
  background:var(--surface);font-size:var(--fs-small);
}
.form__status[hidden]{display:none}
.form__legal{font-size:0.8125rem;color:var(--fg-muted)}

/* ================================ Modal ================================= */
.modal{position:fixed;inset:0;z-index:200;display:none}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.55)}
.modal__card{
  position:absolute;inset:auto 0 0 0;
  max-height:92vh;overflow-y:auto;
  background:var(--soft-white);
  border-top:3px solid var(--carbon);
  padding:var(--s-6) var(--gutter) var(--s-8);
}
@media (min-width:900px){
  .modal__card{
    inset:50% auto auto 50%;transform:translate(-50%,-50%);
    width:min(760px,92vw);max-height:88vh;
    border:var(--bw) solid var(--carbon);border-top-width:3px;
    padding:var(--s-7);
  }
}
.modal__close{
  position:absolute;top:14px;right:14px;
  width:44px;height:44px;display:grid;place-items:center;
  border:var(--bw) solid var(--rule);background:var(--soft-white);
}
.modal__close svg{width:18px;height:18px}
.modal__head{display:flex;flex-direction:column;gap:var(--s-3);padding-bottom:var(--s-5);padding-right:52px}

/* ================================ Footer ================================ */
/* Padding is ~30% below --section-y: the footer sits directly under a dark
   final-CTA band, and the rule is what separates them, not empty space. */
.footer{
  background:var(--carbon);color:var(--soft-white);
  border-top:var(--bw) solid #2A2A27;
  padding-block:clamp(52px,6vw,96px) var(--s-6);
}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
.footer__brand{display:flex;flex-direction:column;gap:var(--s-4);max-width:34ch}
.footer__brand img{width:124px}
.footer__desc{color:#A3A39D;font-size:var(--fs-small)}
.footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
/* Headings share one baseline across all four columns and the brand block. */
.footer__col{display:flex;flex-direction:column;gap:0;align-content:start}
.footer__col h2{
  margin-bottom:var(--s-2);min-height:22px;display:flex;align-items:center;
}
.footer__col h2{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:#7C7C76;font-weight:500;
}
.footer__col a{font-size:var(--fs-small);color:#D6D6D0;min-height:44px;display:inline-flex;align-items:center;transition:color var(--dur-2) var(--ease)}
.footer__col a:hover{color:var(--soft-white)}
.footer__social{display:flex;gap:var(--s-3)}
.footer__social a{
  width:44px;height:44px;display:grid;place-items:center;
  border:var(--bw) solid #2A2A27;transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.footer__social a:hover{border-color:var(--soft-white);background:#141412}
.footer__social svg{width:18px;height:18px}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);justify-content:space-between;align-items:center;
  margin-top:var(--s-6);padding-top:var(--s-3);border-top:var(--bw) solid #2A2A27;
  font-size:0.8125rem;color:#7C7C76;
}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
.footer__bottom a{display:inline-flex;align-items:center;min-height:44px}
.footer__bottom a:hover{color:var(--soft-white)}
@media (min-width:900px){
  .footer__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,2.15fr);gap:var(--s-8)}
  .footer__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* -------------------------------- Hero ---------------------------------- */
.hero{padding-top:clamp(28px,3.4vw,52px);padding-bottom:0;border-bottom:var(--bw) solid var(--rule)}
.hero__eyebrow{
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);
  align-items:center;justify-content:space-between;
  padding-bottom:clamp(24px,2.8vw,36px);
}
/* Capped below --fs-display: the headline now shares the row with the montage,
   so it is sized to the column rather than to the page. */
.hero__title{font-size:clamp(2.55rem,5.2vw,4.5rem);margin:0}
.hero__title .ln{display:block}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4.5vw,56px);padding-bottom:clamp(44px,5vw,72px)}
.hero__copy{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.hero__proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-muted);
}
.hero__proof .sep{width:4px;height:4px;background:var(--rule)}

/* Editorial montage — asymmetric, three frames, no motion. */
/* Below 640px the asymmetric grid would crop each frame hard on a narrow
   column, so the frames stack full-width and keep their natural proportions. */
.montage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.montage .frame{aspect-ratio:auto}
.montage .frame img{height:auto}

@media (min-width:640px){
  .montage{grid-template-columns:repeat(6,1fr)}
  .montage .frame img{height:100%}
  .montage .frame:nth-child(1){grid-column:1 / 5;aspect-ratio:4/3}
  .montage .frame:nth-child(2){grid-column:5 / 7;aspect-ratio:3/4;align-self:end}
  /* Matches the dashboard's own 1756x896 so no column is cropped away. */
  .montage .frame:nth-child(3){grid-column:2 / 7;aspect-ratio:439/224}
}

/* A storefront reads from the top down: keep the header and hero, let any
   overflow fall off the bottom rather than slicing through the masthead. */
.frame--site img{object-position:top center}
/* The dashboard is information, not texture — never crop it. */
.frame--dash img{object-fit:contain;background:var(--soft-white)}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:clamp(40px,4.5vw,72px)}
}

/* Marquee-free client strip lives in its own section (see .logo-grid) */

/* ---------------------------- Belief statement --------------------------- */
.belief{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.belief__statement{
  font-size:clamp(1.35rem,3vw,2.5rem);line-height:1.22;letter-spacing:-0.028em;font-weight:500;
  max-width:26ch;
}
.belief__statement strong{font-weight:900;white-space:nowrap}
.belief__statement strong::before{
  content:"";display:inline-block;width:.42em;height:.42em;
  background:var(--kw,var(--signal-orange));margin-right:.28em;vertical-align:.06em;
}
@media (min-width:900px){
  .belief{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:var(--s-9)}
}

/* ------------------------------- Commerce -------------------------------- */
/* Two columns on desktop: the pitch on the left, the showcase image directly
   opposite it. Not stacked — the reader should never have to scroll past the
   copy to discover the image. */
.commerce{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:center}
.commerce__copy{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
/* The measure is capped on the prose only, so the capability list and the
   buttons below it can still use the full width of the column. */
.commerce__copy .lead{max-width:46ch}

/* The six things the Shopify practice actually does. auto-fit rather than a
   breakpoint: the list sits in a half-width column on desktop and a
   full-width one when stacked, so it has to react to its own container, not
   to the viewport. 260px is the width at which the longest label
   ("Checkout & payment setup") still holds one line. */
.commerce__capabilities{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;
  column-gap:var(--s-6);
  list-style:none;margin:0;padding:0;
  border-top:var(--bw) solid var(--rule);
}
.commerce__capabilities li{
  padding:var(--s-4) 0;
  border-bottom:var(--bw) solid var(--rule);
  font-size:1.0625rem;font-weight:500;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:var(--s-3);
}
.commerce__capabilities li::before{
  content:"";flex:none;width:7px;height:7px;background:var(--accent);
}
.commerce__actions{
  display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  margin-top:var(--s-3);
}

/* Showcase panel, right-hand column. `height:auto` with the artwork's own
   1586:992 ratio means it is scaled, never cropped and never squashed — the
   calm left side and the devices both stay in frame at any column width. */
.commerce__showcase{
  margin:0;
  border:var(--bw) solid var(--rule);
  background:var(--surface);
  overflow:hidden;
}
.commerce__showcase picture{display:block}
.commerce__showcase img{
  display:block;width:100%;height:auto;
  aspect-ratio:1586/992;object-fit:contain;
}
@media (min-width:1000px){
  /* Slightly wider image column: the artwork carries more detail than the
     copy carries width, and the two blocks end up the same visual height. */
  .commerce{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(40px,4.4vw,var(--s-8))}
}

/* -------------------------------- Metrics -------------------------------- */
/* Four confirmed figures. Plain text in the markup, no counter, so there is no
   frame in which a visitor sees a zero. */
.metrics{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin:0;
  border-top:var(--bw) solid var(--rule);
}
.metric{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:clamp(24px,3vw,40px) var(--s-5) clamp(24px,3vw,40px) 0;
  border-bottom:var(--bw) solid var(--rule);
}
.metric__figure{
  font-size:clamp(2.4rem,5.4vw,4rem);font-weight:900;
  letter-spacing:-0.04em;line-height:.94;
}
.metric__label{
  margin:0;font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--fg-muted);
}
.metric__support{
  margin:0;font-size:0.9375rem;line-height:1.45;color:var(--fg-muted);
}
@media (min-width:900px){
  .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .metric{border-bottom:0;border-right:var(--bw) solid var(--rule);padding-left:var(--s-5)}
  .metric:first-child{padding-left:0}
  .metric:last-child{border-right:0}
}

/* -------------------------------- Founder -------------------------------- */
.founder{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.founder__portrait{position:relative;max-width:420px}
/* 4:5 container. `center top` rather than centre: a portrait cropped from the
   middle loses the head first, and the head is the point. */
.founder__portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.founder__copy{display:flex;flex-direction:column;gap:var(--s-5)}
.founder__role{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--fg-muted);
}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:var(--s-9)}}

/* ----------------------------- Testimonials ------------------------------ *
 * One testimonial in view at a time, advanced only by the user.
 *
 * The horizontal scroller IS the carousel: scroll-snap gives native swipe on
 * touch and native keyboard scrolling on the focusable viewport, so the JS in
 * justai.js only has to call scrollTo() and relabel the status line. If that
 * script never runs, the section degrades to a plain scrollable row rather
 * than a dead widget. There is no autoplay and no timer anywhere.
 * -------------------------------------------------------------------------- */
.tslider{margin-top:clamp(28px,3.4vw,48px)}
.tslider__viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tslider__viewport::-webkit-scrollbar{display:none}
.tslider__viewport:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tslider__track{
  display:flex;gap:var(--s-5);
  margin:0;padding:0;list-style:none;
}
/* Each slide fills the viewport, so exactly one card is ever in view. The
   script marks it `.is-current` — a hook for later, not something the layout
   depends on, so the section is identical with the script removed. */
.tslide{flex:0 0 100%;min-width:0;scroll-snap-align:start}

/* ---- The card ---- *
 * Deliberately empty. No quotation, no author, no result: none has been
 * supplied. The card reserves the space those will occupy so that filling it
 * later is a content change, not a layout change.
 */
.tcard{
  display:flex;flex-direction:column;gap:var(--s-6);
  height:100%;margin:0;
  padding:clamp(28px,3.4vw,48px);
  border:var(--bw) solid var(--rule);background:var(--surface);
}
/* Reserved logo area — stays empty until the client approves logo usage. */
.tcard__logo{
  display:flex;align-items:center;
  min-height:44px;
}
/* No opacity here: fading muted grey on the light surface drops it under
   4.5:1. If this needs to read quieter, pick a lighter colour that still
   passes rather than reaching for opacity. */
.tcard__logo-note{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--fg-muted);
}
.tcard__pending{display:flex;flex-direction:column;gap:var(--s-5);flex:1 1 auto}
/* --accent-ink, not --accent: pure Signal Orange only reaches 2.78:1 on this
   light surface, which fails AA for 12px text. The ink token is the deeper
   orange on light fields and the pure accent on .inverse ones. */
.tcard__status{
  margin:0;
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--accent-ink);
}
/* Decorative stand-in for the future quotation. Three bars, not lorem ipsum:
   nothing here can ever be mistaken for something a client said.
   aria-hidden in the markup, so screen readers hear only the status line. */
.tcard__lines{display:flex;flex-direction:column;gap:var(--s-3)}
.tcard__lines span{
  display:block;height:12px;border-radius:2px;
  background:var(--neutral-grey);opacity:.55;
}
.tcard__lines span:nth-child(1){width:100%}
.tcard__lines span:nth-child(2){width:92%}
.tcard__lines span:nth-child(3){width:64%}
.tcard__foot{
  padding-top:var(--s-5);border-top:var(--bw) solid var(--rule);
}
.tcard__company{
  font-size:1.0625rem;font-weight:700;letter-spacing:-0.01em;color:var(--fg);
}

/* ---- Controls ---- */
.tslider__controls{
  display:flex;align-items:center;gap:var(--s-4);
  margin-top:var(--s-5);
}
.tslider__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border:var(--bw) solid var(--rule);background:transparent;color:var(--fg);
  cursor:pointer;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.tslider__btn svg{width:18px;height:18px}
.tslider__btn:hover:not(:disabled){background:var(--fg);border-color:var(--fg);color:var(--bg)}
.tslider__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tslider__btn:disabled{opacity:.32;cursor:not-allowed}
.tslider__status{
  margin:0;
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--fg-muted);
}

/* ---- The published state ---- *
 * Written ahead of time so that filling a card is a CONTENT change and not a
 * design job. Nothing below matches anything on the page today: there is no
 * .tcard__quote, .tcard__name or .tcard__role in the markup, because there is
 * no approved quotation to put in one.
 *
 * When a quote arrives, swap that card's .tcard__pending block for:
 *   <blockquote class="tcard__quote">…</blockquote>
 * and add to .tcard__foot:
 *   <b class="tcard__name">…</b><span class="tcard__role">…</span>
 * The card keeps its height and rhythm — nothing else has to move.
 */
.tcard__quote{
  flex:1 1 auto;margin:0;
  font-size:clamp(1.0625rem,1.6vw,1.3rem);line-height:1.45;
  letter-spacing:-0.015em;font-weight:500;
}
.tcard__quote::before{content:"“"}
.tcard__quote::after{content:"”"}
.tcard__name{display:block;font-size:var(--fs-small);font-weight:700}
.tcard__role{display:block;font-size:0.8125rem;color:var(--fg-muted)}
/* Once a logo is approved it goes in .tcard__logo. Capped so a wide wordmark
   and a square mark occupy the same optical weight. */
.tcard__logo img{max-height:34px;max-width:150px;width:auto;height:auto;object-fit:contain}

@media (min-width:900px){
  /* One featured testimonial, centred and capped so a wide viewport does not
     stretch an empty card across 1400px. */
  .tslide{flex-basis:100%}
  .tcard{max-width:760px}
  .tcard__logo{min-height:56px}
  .tcard__logo img{max-height:40px;max-width:180px}
}
@media (prefers-reduced-motion:reduce){
  .tslider__viewport{scroll-behavior:auto}
}

/* ------------------------------- Final CTA -------------------------------- */
.final-cta{display:flex;flex-direction:column;gap:var(--s-6);align-items:flex-start;max-width:60ch}
.final-cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}

/* ---------------------------- Generic grids ------------------------------ */
.grid-3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media (min-width:768px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ==========================================================================
   7. MOTION
   Reveals are opt-in via the `js` class so that content is fully visible when
   JavaScript is unavailable or fails.
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:70ms}
.js .reveal[data-delay="2"]{transition-delay:140ms}
.js .reveal[data-delay="3"]{transition-delay:210ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   8. RESPONSIVE
   Verified at 360 / 390 / 768 / 1024 / 1440 / 1920.
   ========================================================================== */
@media (min-width:768px){
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .proofs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
  .proofs .proof:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:1024px){
  :root{--header-h:82px}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .menu-btn{display:none}
  .nav,.nav__actions{display:flex}
  .brand img{width:124px}
}
@media (min-width:1600px){
  :root{--container:1480px}
}

/* Dark-section swaps for the shared header/brand assets */
.inverse .brand__black{display:none}
.inverse .brand__white{display:block}