/* Grimm Concepts — built by apps/site/build.js. Edit the sources, not this. */
:root{
  /* Ink — primary dark */
  --ink-900:#1B1A1F;
  --ink-800:#25242B;
  --ink-700:#332F38;
  --ink-600:#423F4A;

  /* Slate — body text neutrals */
  --slate-700:#3A3E46;
  --slate-600:#4B4F58;
  --slate-500:#6B7079;
  --slate-400:#8C9199;
  --slate-300:#B4B8BE;

  /* Parchment — warm paper surfaces */
  --parchment-50:#FBF8F2;
  --parchment-100:#F5F0E6;
  --parchment-200:#EDE6D8;
  --parchment-300:#E0D6C3;
  --parchment-400:#C9BCA3;

  /* Ember — signature accent */
  --ember-50:#FDF0EA;
  --ember-100:#F9D9CC;
  --ember-300:#F09A79;
  --ember-500:#E8663D;
  --ember-600:#C9502C;
  --ember-700:#A03D20;

  /* Deep Teal — secondary */
  --teal-50:#E7F0EF;
  --teal-100:#C6DBD9;
  --teal-300:#6BA09D;
  --teal-500:#1F5C5A;
  --teal-600:#174847;
  --teal-700:#0F3433;

  /* Semantic hues */
  --green-500:#2F7A4F;
  --green-50:#E8F1EB;
  --amber-500:#C98A1E;
  --amber-50:#FAF0DC;
  --red-500:#B3392B;
  --red-50:#F8E8E5;

  --white:#FFFFFF;

  /* Named brand aliases (use these when talking to people) */
  --ink:var(--ink-900);
  --ember:var(--ember-500);
  --deep-teal:var(--teal-500);
  --parchment:var(--parchment-100);
  --slate:var(--slate-600);
}

/* Type: Archivo (variable grotesk, wdth + wght) for everything structural,
   Spline Sans Mono for labels, numbers and metadata — the "crew call sheet" layer.
   No serif in the system. Both families are free Google Fonts; no vendor
   binaries were supplied, so they are self-hosted from packages/brand/assets/fonts (no third-party requests). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/archivo-var.woff2") format("woff2-variations")}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/spline-sans-mono-var.woff2") format("woff2-variations")}

:root{
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Width/weight do the work a second family used to do */
  --font-display-settings:"wdth" 82,"wght" 700; /* @kind other */
  --font-display-settings-tight:"wdth" 92,"wght" 650; /* @kind other */
  --font-display-settings-poster:"wdth" 74,"wght" 780; /* @kind other */
  --font-body-settings:"wdth" 100,"wght" 400; /* @kind other */
}

:root{
  /* Display — Archivo, condensed + heavy, SET IN CAPS. Letterpress poster logic. */
  --text-display-xl:82px;   --lh-display-xl:0.9; /* @kind other */   --ls-display-xl:-0.025em; /* @kind other */
  --text-display-l:62px;    --lh-display-l:0.94; /* @kind other */   --ls-display-l:-0.022em; /* @kind other */
  --text-display-m:46px;    --lh-display-m:0.98; /* @kind other */   --ls-display-m:-0.02em; /* @kind other */

  /* Headings — same family at normal width, sentence case */
  --text-h1:34px;           --lh-h1:1.12; /* @kind other */          --ls-h1:-0.018em; /* @kind other */
  --text-h2:26px;           --lh-h2:1.2; /* @kind other */           --ls-h2:-0.014em; /* @kind other */
  --text-h3:20px;           --lh-h3:1.3; /* @kind other */           --ls-h3:-0.01em; /* @kind other */

  /* Body — Archivo at width 100 */
  --text-body-l:19px;       --lh-body-l:1.6; /* @kind other */
  --text-body:17px;         --lh-body:1.6; /* @kind other */
  --text-body-s:15px;       --lh-body-s:1.55; /* @kind other */
  --text-micro:12.5px;      --lh-micro:1.45; /* @kind other */

  /* Label / eyebrow / metadata — Spline Sans Mono, caps, wide */
  --text-label:12px;        --lh-label:1.2; /* @kind other */        --ls-label:0.14em; /* @kind other */
  --text-tag:11px;          --ls-tag:0.1em; /* @kind other */

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:700;

  --measure-prose:62ch; /* @kind other */
  --measure-narrow:44ch; /* @kind other */
  --measure-display:18ch; /* @kind other */
}

:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* Layout */
  --container-max:1200px;
  --container-prose:720px;
  --gutter:24px;
  --gutter-lg:48px;
  --section-y:96px;
  --section-y-tight:64px;
  --header-h:72px;
}

:root{
  /* Sharp-leaning: crafted, not bubbly */
  --radius-0:0px;
  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-xl:18px;
  --radius-pill:999px;

  --border-hairline:1px;
  --border-strong-w:2px;
  --border-rule-w:1px;
  --focus-ring-w:2px;
  --focus-ring-offset:2px;
}

:root{
  /* Shadows are warm (ink-tinted, never pure black) and short-throw */
  --shadow-hairline:0 1px 0 rgba(27,26,31,0.06);
  --shadow-sm:0 1px 2px rgba(27,26,31,0.07),0 1px 1px rgba(27,26,31,0.04);
  --shadow-md:0 2px 4px rgba(27,26,31,0.06),0 8px 18px -10px rgba(27,26,31,0.18);
  --shadow-lg:0 4px 8px rgba(27,26,31,0.07),0 20px 40px -18px rgba(27,26,31,0.22);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.5);
  --glow-ember:0 0 0 1px var(--ember-300),0 6px 20px -8px rgba(232,102,61,0.45);
  --ring-ember:0 0 0 var(--focus-ring-w) var(--ember-500);
  --scrim-ink:linear-gradient(180deg,rgba(27,26,31,0) 0%,rgba(27,26,31,0.72) 100%); /* @kind other */
  --texture-paper:radial-gradient(rgba(27,26,31,0.026) 1px,transparent 1px); /* @kind other */
  --texture-paper-size:4px 4px; /* @kind other */
}

:root{
  /* "On cue" — fast in, settled out. Nothing bounces except the spark. */
  --dur-instant:90ms; /* @kind other */
  --dur-fast:150ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:380ms; /* @kind other */
  --dur-draw:1200ms; /* @kind other */

  --ease-cue:cubic-bezier(0.2,0.8,0.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --ease-exit:cubic-bezier(0.4,0,1,1); /* @kind other */
  --ease-spark:cubic-bezier(0.34,1.3,0.64,1); /* @kind other */

  --lift-hover:-1px; /* @kind other */
  --press-scale:0.985; /* @kind other */
}

:root{
  /* Text */
  --text-heading:var(--ink-900);
  --text-body-color:var(--slate-600);
  --text-muted:var(--slate-500);
  --text-faint:var(--slate-400);
  --text-inverse:var(--parchment-50);
  --text-inverse-muted:rgba(245,240,230,0.72);
  --text-accent:var(--ember-700);
  --text-on-accent:#FFFFFF;

  /* Surfaces */
  --surface-page:var(--parchment-100);
  --surface-page-alt:var(--parchment-50);
  --surface-card:#FFFFFF;
  --surface-sunken:var(--parchment-200);
  --surface-ink:var(--ink-900);
  --surface-teal:var(--teal-500);
  --surface-accent:var(--ember-500);
  --surface-accent-soft:var(--ember-50);

  /* Borders */
  --border-subtle:var(--parchment-300);
  --border-subtle-on-ink:rgba(245,240,230,0.14);
  --border-strong:var(--ink-900);
  --border-input:var(--parchment-400);

  /* Interactive */
  --accent:var(--ember-500);
  --accent-hover:var(--ember-600);
  --accent-press:var(--ember-700);
  --focus-ring:var(--ember-500);
  --link:var(--ember-700);
  --link-hover:var(--ink-900);
  --disabled-fg:var(--slate-400);
  --disabled-bg:var(--parchment-200);

  /* Feedback */
  --success:var(--green-500); --success-soft:var(--green-50);
  --warning:var(--amber-500); --warning-soft:var(--amber-50);
  --danger:var(--red-500);    --danger-soft:var(--red-50);
  --info:var(--teal-500);     --info-soft:var(--teal-50);
}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body-color);font-family:var(--font-body);font-variation-settings:var(--font-body-settings);font-size:var(--text-body);line-height:var(--lh-body);font-weight:var(--weight-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-tight);font-weight:var(--weight-display);letter-spacing:-.015em;color:var(--text-heading);margin:0;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-cue)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:var(--focus-ring-w) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
::selection{background:var(--ember-100);color:var(--ink-900)}
button,input,select,textarea{font:inherit;color:inherit}
*,*::before,*::after{box-sizing:border-box}

/* Phone and small-tablet overrides. Everything in the system reads these
   tokens, so display type, section rhythm and gutters scale without any
   component knowing about breakpoints. */
@media (max-width:760px){
  :root{
    --text-display-xl:46px; --lh-display-xl:0.94; /* @kind other */ --ls-display-xl:-0.02em; /* @kind other */
    --text-display-l:38px;  --lh-display-l:0.98; /* @kind other */
    --text-display-m:30px;  --lh-display-m:1.02; /* @kind other */
    --text-h1:26px;
    --text-h2:22px;
    --text-h3:18px;
    --text-body-l:17px;
    --text-body:16px;
    --section-y:56px;
    --section-y-tight:40px;
    --gutter:16px;
    --gutter-lg:20px;
    --header-h:60px;
    --measure-prose:38ch; /* @kind other */
  }
}
@media (max-width:420px){
  :root{ --text-display-xl:38px; --text-display-m:26px; --gutter-lg:16px; }
}

/* Grimm Concepts — grimmconcepts.com.
   Built from packages/brand/ui_kits/website/. The prototype is inline-styled
   React; everything below is that same design expressed as classes. Tokens are
   prepended at build time from packages/brand/tokens/ — never hardcode a hex
   that has a token. */

/* The HTML `hidden` attribute is enforced by the UA stylesheet, which any author
   rule setting `display` silently beats. `.alert{display:flex}` did exactly that
   and put a red "That did not send." on the contact page for every visitor.
   This makes `hidden` win, whatever a component sets. */
[hidden]{display:none!important}

/* ---------- layout ---------- */
.wrap{max-width:var(--container-max);margin:0 auto}
.sec{padding:var(--section-y) var(--gutter-lg)}
.sec--tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
.sec--ink{background:var(--ink-900)}
.sec--teal{background:var(--teal-500)}
.sec--alt{background:var(--surface-page-alt)}
.sec--ink,.sec--teal,.hero{background-image:var(--texture-paper);background-size:var(--texture-paper-size)}
.rule-top{border-top:1px solid var(--border-subtle)}
.rule-bottom{border-bottom:1px solid var(--border-subtle)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ember-700);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-md) 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ---------- the three call-sheet devices ---------- */
.poster{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-weight:780;font-size:var(--fs,46px);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;margin:0;color:var(--ink-900)}
.poster--inv{color:var(--parchment-50)}
.mono{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase}

.spec{display:flex;flex-wrap:wrap;gap:8px 26px;padding:12px 0;border-top:1px dotted var(--parchment-400);border-bottom:1px dotted var(--parchment-400);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:11px;line-height:1.4;color:var(--slate-600);margin:0}
.spec>span{display:inline-flex;gap:26px;align-items:center}
/* Separator trails its item rather than leading the next one, so a wrapped
   strip never starts a line with a lone slash. Identical at full width. */
.spec>span:not(:last-child)::after{content:"/";color:var(--ember-700)}
.spec--inv{border-top:1px solid rgba(245,240,230,.2);border-bottom:1px solid rgba(245,240,230,.2);color:rgba(245,240,230,.78)}
.spec--inv>span:not(:last-child)::after{color:var(--ember-300)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 22px;font-family:var(--font-body);font-variation-settings:"wdth" 100,"wght" 600;font-size:15px;font-weight:600;line-height:1.1;letter-spacing:.005em;white-space:nowrap;text-decoration:none;border-radius:var(--radius-md);border:1px solid transparent;background:var(--ember-700);color:#fff;cursor:pointer;transition:background var(--dur-fast) var(--ease-cue),color var(--dur-fast) var(--ease-cue),box-shadow var(--dur-fast) var(--ease-cue),transform var(--dur-instant) var(--ease-cue)}
/* ember-700 is already the darkest ember token, so hover cannot step darker
   without inventing one. The glow ring and the 1px lift are the system's other
   two primary-hover signals; press keeps the fill and takes the dip. Every
   state stays at 6.6:1. */
.btn:hover{color:#fff;box-shadow:var(--glow-ember);transform:translateY(var(--lift-hover))}
.btn:active{box-shadow:none;transform:scale(var(--press-scale))}
.btn--sm{min-height:40px;padding:8px 14px;font-size:14px;gap:7px}
.btn--lg{min-height:48px;padding:15px 30px;font-size:17px;gap:10px}
.btn--full{display:flex;width:100%;white-space:normal}
.btn--secondary{background:transparent;color:var(--ink-900);border-color:var(--ink-900)}
.btn--secondary:hover{background:var(--ink-900);color:var(--parchment-50);box-shadow:none}
.btn--secondary:active{background:var(--ink-800)}
.btn--ghost{background:transparent;color:var(--ember-700);padding-left:10px;padding-right:10px}
.btn--ghost:hover{background:var(--ember-50);color:var(--ember-700);box-shadow:none}
.btn--ghost:active{background:var(--ember-100)}
.btn--ghost-inv{background:transparent;color:var(--ember-300);padding-left:10px;padding-right:10px}
.btn--ghost-inv:hover{background:rgba(245,240,230,.08);color:var(--ember-300);box-shadow:none}
.sec--teal .btn--ghost-inv,.sec--teal .btn--ghost-inv:hover{color:var(--parchment-50)}
.btn--teal{background:var(--teal-500);color:#fff}
.btn--teal:hover{background:var(--teal-600);color:#fff;box-shadow:var(--shadow-md)}
.btn--teal:active{background:var(--teal-700)}
.btn--ink{background:var(--ink-900);color:var(--parchment-50)}
.btn--ink:hover{background:var(--ink-800);color:var(--parchment-50);box-shadow:var(--shadow-md)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--disabled-bg);color:var(--disabled-fg);border-color:transparent;cursor:not-allowed;transform:none;box-shadow:none}
.ico{display:inline-block;flex:0 0 auto;vertical-align:middle}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btnstack{display:grid;gap:12px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:30;background:rgba(27,26,31,.94);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(245,240,230,.16)}
.hdr__in{max-width:calc(var(--container-max) + var(--gutter-lg)*2);margin:0 auto;padding:0 var(--gutter-lg);height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr__nav{display:flex;align-items:center;gap:28px}
.hdr__links{display:flex;align-items:center;gap:28px}
.hdr__links a{font-size:14.5px;font-weight:500;color:rgba(245,240,230,.78);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.hdr__links a:hover{color:var(--parchment-50)}
.hdr__links a[aria-current="page"]{font-weight:600;color:var(--parchment-50);border-bottom-color:var(--ember-500)}
.wordmark{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.wordmark__name{display:block;font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-size:22px;line-height:.95;letter-spacing:-.015em;text-transform:uppercase;color:var(--parchment-50);white-space:nowrap}
.wordmark__desc{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-300);margin-top:2px}
.wordmark svg{display:block;flex:0 0 auto}
.wordmark__mark{display:inline-flex;flex:0 0 auto}
.wordmark--sm .wordmark__name{font-size:20px}
/* The call button never leaves the header — it is the whole point on a phone.
   Below 760px the number collapses to "Call" so it still fits next to the
   wordmark and the menu. */
.hdr__phone-s{display:none}

/* mobile nav — a <details> so it still opens with JavaScript turned off */
.navm{display:none;position:static}
.navm>summary{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-md);border:1px solid rgba(245,240,230,.28);color:var(--parchment-50);cursor:pointer;list-style:none}
.navm>summary::-webkit-details-marker{display:none}
.navm>summary::marker{content:""}
.navm>summary:hover{background:rgba(245,240,230,.1)}
.navm__sheet{position:absolute;left:0;right:0;top:100%;background:var(--ink-800);border-bottom:1px solid rgba(245,240,230,.16);padding:8px var(--gutter-lg) 16px;display:grid}
.navm__sheet a{display:flex;align-items:center;min-height:48px;padding:12px 0;font-size:17px;font-weight:500;color:rgba(245,240,230,.78);text-decoration:none;border-bottom:1px solid rgba(245,240,230,.14)}
.navm__sheet a[aria-current="page"]{font-weight:600;color:var(--parchment-50)}
.navm[open]>summary .ico-menu{display:none}
.navm:not([open])>summary .ico-close{display:none}

/* ---------- footer ---------- */
.ftr{background:var(--ink-900);color:var(--text-inverse-muted);padding:64px var(--gutter-lg) 28px}
.ftr__cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px}
.ftr__brand{display:grid;gap:16px;align-content:start}
.ftr__brand p{font-size:14.5px;line-height:1.6;max-width:32ch}
.ftr__brand a:not(.btn){color:var(--text-inverse-muted);text-decoration:none}
.ftr__brand a:not(.btn):hover{color:var(--parchment-50)}
.ftr__col{display:grid;gap:8px;align-content:start}
.ftr__col h2{font-family:var(--font-mono);font-variation-settings:normal;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-300);margin:0 0 4px}
.ftr__col a,.ftr__col span{font-size:14.5px;color:var(--text-inverse-muted);text-decoration:none;display:flex;align-items:center;min-height:30px;line-height:1.4}
.ftr__col a:hover{color:var(--parchment-50)}
.ftr__legal{margin-top:48px;padding-top:20px;border-top:1px solid var(--border-subtle-on-ink);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12.5px;color:rgba(245,240,230,.82)}

/* ---------- stat table / numbered rows / three-up ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink-900);margin:0}
.stats>div{padding:20px 20px 24px 0;border-right:1px dotted var(--parchment-400)}
.stats>div:last-child{border-right:none}
.stats dt{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-weight:780;font-size:clamp(30px,3.6vw,48px);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;color:var(--ink-900)}
.stats dd{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;color:var(--slate-600);margin:12px 0 0;max-width:18ch;line-height:1.5}

.steps{list-style:none;margin:0;padding:0}
.steps>li{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr) minmax(0,1.5fr);gap:28px;align-items:start;padding:34px 0;border-bottom:1px dotted var(--parchment-400)}
.steps__n{font-family:var(--font-mono);font-size:clamp(30px,3.4vw,44px);line-height:.9;color:var(--ember-700)}
.steps h3{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-weight:780;font-size:clamp(24px,2.6vw,32px);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;color:var(--ink-900);margin:0}
.steps p{font-size:17px;line-height:1.6;margin:0;max-width:54ch}

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4px}
.three>div{padding:26px 28px 26px 0;border-right:1px dotted var(--parchment-400)}
.three>div:last-child{border-right:none}
.three h2,.three h3{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-weight:780;font-size:20px;line-height:.9;letter-spacing:-.015em;text-transform:uppercase;color:var(--ink-900);margin:0}
.three p{font-size:15px;line-height:1.55;margin:10px 0 0;max-width:34ch}

.headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---------- media plates ----------
   A plate renders a real photograph when one exists in apps/site/photos/,
   and a typographic panel when it does not. Nothing here is a grey box. */
.plate{position:relative;display:block;overflow:hidden;background-color:var(--ink-800);background-image:var(--texture-paper);background-size:var(--texture-paper-size);border-radius:var(--radius-lg);aspect-ratio:var(--ar,4/3)}
.plate--flat{border-radius:0}
.plate--teal{background-color:var(--teal-600)}
.plate--parchment{background-color:var(--parchment-200)}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate__type{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:24px}
.plate__type .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-300)}
.plate__type .t{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-size:clamp(22px,3.2vw,38px);line-height:.88;letter-spacing:-.03em;text-transform:uppercase;color:var(--parchment-50)}
.plate--parchment .plate__type .k{color:var(--ember-700)}
.plate--parchment .plate__type .t{color:var(--ink-900)}
.plate--poster .plate__type{justify-content:center;padding:clamp(24px,5vw,56px) var(--gutter-lg)}
.hero__media .plate__type,.hero__media .plate__cap{--bleed-inset:max(var(--gutter-lg),(100% - var(--container-max))/2)}
.hero__media .plate__type{padding-left:var(--bleed-inset);padding-right:var(--bleed-inset)}
.plate--poster .plate__type .t{font-size:clamp(30px,6vw,72px)}
.plate--poster .plate__type .k{margin-bottom:4px}
.plate__band{position:absolute;left:0;right:0;bottom:0;height:38%;background:var(--scrim-ink);pointer-events:none}
.plate__cap{position:absolute;left:var(--bleed-inset,var(--gutter-lg));bottom:18px;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:var(--parchment-50);pointer-events:none}

/* ---------- cards ---------- */
.card{background:var(--surface-card);color:var(--text-body-color);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px}
.card--ink{background-color:var(--surface-ink);background-image:var(--texture-paper);background-size:var(--texture-paper-size);color:var(--text-inverse-muted);border-color:var(--border-subtle-on-ink)}
.card--lg{padding:32px}

.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.pkgs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pkg{display:flex;flex-direction:column;padding:28px;background:var(--surface-card);color:var(--text-body-color);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:box-shadow var(--dur-base) var(--ease-cue),transform var(--dur-base) var(--ease-cue)}
.pkg:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pkg--featured{background-color:var(--ink-900);background-image:var(--texture-paper);background-size:var(--texture-paper-size);color:var(--text-inverse-muted);border-color:var(--ink-900);box-shadow:var(--shadow-sm)}
.pkg__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.pkg h3{font-family:var(--font-display);font-variation-settings:var(--font-display-settings);font-weight:700;font-size:21px;line-height:1.1;letter-spacing:.005em;text-transform:uppercase;margin:0;color:var(--ink-900)}
.pkg--featured h3{color:var(--parchment-50)}
.pkg__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin-top:16px}
.pkg__price b{font-family:var(--font-display);font-variation-settings:var(--font-display-settings);font-weight:700;font-size:42px;line-height:1;letter-spacing:-.025em;color:var(--ink-900)}
.pkg--featured .pkg__price b{color:var(--ember-300)}
.pkg__price span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-600)}
.pkg--featured .pkg__price span{color:var(--text-inverse-muted)}
.pkg__mo{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;color:var(--ember-700);margin-top:8px}
.pkg--featured .pkg__mo{color:var(--ember-300)}
.pkg__who{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-600);margin-top:14px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.pkg--featured .pkg__who{color:var(--text-inverse-muted);border-top-color:var(--border-subtle-on-ink)}
.pkg__sum{font-size:15px;line-height:1.55;margin:14px 0 0}
.pkg ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.pkg li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.pkg li svg{color:var(--ember-600);flex:0 0 auto;margin-top:5px}
.pkg--featured li svg{color:var(--ember-300)}
.pkg__terms{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-600);margin-top:18px}
.pkg--featured .pkg__terms{color:var(--text-inverse-muted)}
.pkg__act{margin-top:auto;padding-top:20px}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--ember-50);color:var(--ember-700);border:1px solid var(--ember-100);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--slate-700);border:1px solid var(--border-subtle);border-radius:var(--radius-pill)}
.tags{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- lists, tables, prose ---------- */
.incl{border-top:2px solid var(--ink-900);list-style:none;margin:0;padding:0}
.incl li{display:flex;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px dotted var(--parchment-400)}
.incl b{font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-700);flex:0 0 auto}
.incl span{font-size:17px;color:var(--ink-900)}

.addon-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:40px}
.who{border-top:2px solid var(--ink-900);list-style:none;margin:32px 0 0;padding:0}
.who li{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px;align-items:baseline;padding:20px 0;border-bottom:1px dotted var(--parchment-400)}
.who h3{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-weight:780;font-size:20px;line-height:.95;letter-spacing:-.015em;text-transform:uppercase;color:var(--ink-900);margin:0}
.who p{font-size:16px;line-height:1.55;margin:0;max-width:62ch}

.story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start;margin-top:32px}
.story>div{display:grid;gap:16px}
.story p{font-size:17px;line-height:1.65;margin:0;max-width:62ch}

.rows__head{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-600);padding-bottom:12px;border-bottom:2px solid var(--ink-900)}
.rows__r{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px dotted var(--parchment-400)}
.rows__r b{display:block;font-size:15.5px;font-weight:600;color:var(--ink-900)}
.rows__r small{display:block;font-size:13.5px;color:var(--slate-600);margin-top:3px}
.rows__p{font-family:var(--font-display);font-variation-settings:var(--font-display-settings);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--ember-700);white-space:nowrap}

.faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.faq h3{font-size:var(--text-h3);margin:0 0 10px}
.faq p{font-size:15px;line-height:1.6}

.legal__r{display:grid;grid-template-columns:minmax(0,64px) minmax(0,1fr);gap:28px;align-items:start;padding:32px 0;border-bottom:1px dotted var(--parchment-400)}
.legal__n{font-family:var(--font-mono);font-size:22px;line-height:1;color:var(--ember-700)}
.legal__r h2{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-weight:780;font-size:clamp(20px,2.2vw,26px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink-900);margin:0}
.legal__body{display:grid;gap:14px;margin-top:14px}
.legal__r p{font-size:17px;line-height:1.65;margin:0;max-width:68ch}

/* ---------- forms ---------- */
.form{display:grid;gap:20px}
.field{display:grid;gap:7px}
.field>label{font-size:13.5px;font-weight:600;color:var(--ink-900);letter-spacing:.005em}
.field .req{color:var(--ember-700);margin-left:3px}
.field .hint{font-size:12.5px;color:var(--slate-600)}
.field .err{font-size:12.5px;color:var(--danger);font-weight:500}
.inp,.ta,.sel{width:100%;padding:12px 14px;font-family:var(--font-body);font-size:15px;line-height:1.4;color:var(--ink-900);background:var(--surface-card);border:1px solid var(--border-input);border-radius:var(--radius-md);outline:none;transition:border-color var(--dur-fast) var(--ease-cue),box-shadow var(--dur-fast) var(--ease-cue)}
.inp:focus,.ta:focus,.sel:focus{border-color:var(--ember-500);box-shadow:0 0 0 3px rgba(232,102,61,.18)}
.inp[aria-invalid="true"],.ta[aria-invalid="true"]{border-color:var(--danger)}
.ta{resize:vertical}
.sel{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234B4F58' stroke-width='1.6' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.inp-ico{position:relative;display:block}
.inp-ico>.ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--slate-600);pointer-events:none}
.inp-ico .inp{padding-left:40px}
.radios{display:grid;gap:12px}
.radios label{display:flex;gap:11px;align-items:center;cursor:pointer;font-size:15px;color:var(--ink-900);min-height:32px}
.radios input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--ember-500);cursor:pointer;margin:0}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--danger-soft);border:1px solid rgba(179,57,43,.28);border-radius:var(--radius-md)}
.alert .ico{color:var(--danger);margin-top:1px}
.alert b{display:block;font-size:14.5px;font-weight:600;color:var(--danger)}
.alert p{font-size:13.5px;color:var(--slate-600);margin-top:3px}
.alert a{color:var(--ink-900);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sending-note{font-size:13px;color:var(--slate-600)}

dialog.modal{max-width:440px;width:calc(100% - 32px);border:none;border-radius:var(--radius-xl);padding:28px;background:var(--surface-card);color:var(--text-body-color);box-shadow:var(--shadow-lg)}
dialog.modal::backdrop{background:rgba(27,26,31,.52)}
dialog.modal h2{font-size:var(--text-h3);margin:0}
dialog.modal p{font-size:15px;line-height:1.55;margin:10px 0 0}
dialog.modal .btnrow{margin-top:24px;justify-content:flex-end}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--gutter-lg);align-items:start}
.contact__side{display:grid;gap:var(--gutter)}
.chan{display:grid;gap:14px;margin:18px 0 0}
.chan a{display:flex;gap:11px;align-items:center;color:var(--parchment-50);font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;text-decoration:none;min-height:32px}
.chan a:hover{color:var(--ember-300)}
.chan .ico{color:var(--ember-300)}
.chan__phone{display:block}
.chan__reveal,.chan__num{display:inline-flex;gap:11px;align-items:center;min-height:32px;padding:0;background:none;border:none;font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;color:var(--text-inverse-muted);text-decoration:none;cursor:pointer;text-align:left}
.chan__reveal:hover,.chan__num:hover{color:var(--ember-300)}
.chan__num{color:var(--parchment-50)}
.chan__phone noscript a{display:flex;gap:11px;align-items:center;min-height:32px;font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;color:var(--text-inverse-muted);text-decoration:none}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-700)}
.kicker--inv{color:var(--ember-300)}
.lede{font-size:var(--text-body-l);line-height:1.6;margin:24px 0 0;max-width:58ch}
.lede--inv{color:var(--parchment-50);line-height:1.55}

/* ---------- care view ---------- */
.care{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.care__tier{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--border-subtle)}
.care__tier>.p{width:110px;flex:0 0 auto;display:flex;align-items:baseline;gap:4px}
.care__tier .p b{font-family:var(--font-display);font-variation-settings:var(--font-display-settings);font-weight:700;font-size:28px;letter-spacing:-.025em;color:var(--ink-900)}
.care__tier .p span{font-family:var(--font-mono);font-size:11px;color:var(--slate-600)}
.care__tier .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-700)}
.care__tier .d{font-size:15px;margin-top:5px}
.care__base{display:grid;gap:10px;padding-bottom:20px}
.care__base div{display:flex;gap:11px;align-items:center;font-size:15.5px;color:var(--ink-900)}
.care__base .ico{color:var(--teal-500)}
.care__foot{display:flex;gap:10px;align-items:center;padding-top:20px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-600)}
.care__foot .ico{color:var(--ember-600)}
.care__big{font-family:var(--font-display);font-variation-settings:var(--font-display-settings);font-weight:700;font-size:58px;line-height:.9;letter-spacing:-.03em;color:var(--parchment-50)}
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--surface-sunken);border-radius:var(--radius-pill)}
.tabs a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:var(--radius-pill);font-size:14.5px;font-weight:500;color:var(--slate-600);text-decoration:none}
.tabs a:hover{color:var(--ink-900)}
.tabs a[aria-current="page"]{background:var(--surface-card);font-weight:600;color:var(--ink-900);box-shadow:var(--shadow-sm)}

/* ---------- work ---------- */
.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:16px;border-bottom:2px solid var(--ink-900)}
.work__head h2{font-family:var(--font-display);font-variation-settings:var(--font-display-settings);font-weight:700;font-size:34px;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink-900);margin:10px 0 0}
.work__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-600)}
.work__cat{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-700);margin-top:10px}
/* The kit put the lead shot beside two stacked squares. That works for empty
   placeholders; with real screenshots the square column runs more than twice
   the height of a 16:9 lead shot and strands the left column. Lead shot full
   width, details two-up beneath it. */
.work__note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.work__note>p{font-size:17px;line-height:1.6;margin:0}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.facts li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink-900)}
.facts svg{color:var(--ember-600);flex:0 0 auto;margin-top:6px}
.work__shots{display:grid;gap:var(--gutter)}
.work__side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.work__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter-lg);margin-top:40px}
.work__card{text-decoration:none;display:block}
.work__card .meta{padding:18px 0 0;border-top:1px solid rgba(245,240,230,.2);margin-top:16px}
.work__card .name{font-family:var(--font-display);font-variation-settings:var(--font-display-settings-poster);font-size:22px;line-height:.9;letter-spacing:-.02em;text-transform:uppercase;color:var(--parchment-50)}
.work__card .cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-300);margin-top:10px;line-height:1.6}
.work__card:hover .name{color:var(--ember-300)}

/* ---------- hero + the one signature move ---------- */
.hero{background-color:var(--ink-900);padding:40px 0 0}
.hero__in{max-width:calc(var(--container-max) + var(--gutter-lg)*2);margin:0 auto;padding:0 var(--gutter-lg)}
.hero__split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:end;padding:34px 0 48px}
.hero__media{position:relative;height:clamp(240px,42vw,520px)}
.hero__media--type{height:clamp(190px,25vw,300px)}
.hero__media .plate{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.sig{display:flex;align-items:center;gap:14px;margin:28px 0 0}
.sig__rule{flex:1;height:2px;background:linear-gradient(90deg,rgba(232,102,61,0),var(--ember-500));transform-origin:left;animation:sig-draw var(--dur-draw) var(--ease-cue) 120ms both}
.sig__spark{width:9px;height:9px;border-radius:999px;background:var(--ember-500);box-shadow:0 0 16px rgba(232,102,61,.9);animation:sig-light 520ms var(--ease-spark) 1180ms both,sig-pulse 3.2s var(--ease-in-out) 1700ms infinite}
@keyframes sig-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sig-light{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes sig-pulse{0%,100%{box-shadow:0 0 16px rgba(232,102,61,.9)}50%{box-shadow:0 0 5px rgba(232,102,61,.45)}}

.toast{position:fixed;right:24px;bottom:24px;z-index:200;display:flex;gap:12px;align-items:flex-start;max-width:340px;padding:14px 16px;background:var(--ink-900);color:var(--parchment-50);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.toast .ico{color:var(--green-500);margin-top:2px}
.toast__x{background:transparent;border:none;color:var(--text-inverse-muted);cursor:pointer;font-size:19px;line-height:1;padding:0 2px;align-self:flex-start}
.toast__x:hover{color:var(--parchment-50)}
.toast b{display:block;font-size:14.5px}
.toast p{font-size:13px;color:var(--text-inverse-muted);margin-top:2px}

/* ---------- responsive — the prototype's breakpoints ---------- */
@media (max-width:1040px){
  .pkgs,.pkgs--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .spec{gap:4px 14px;font-size:10.5px}
  .spec>span{gap:14px}
  .hdr__links{display:none}
  .navm{display:block}
  .hdr__nav{gap:10px}
  .hdr__phone-l{display:none}
  .hdr__phone-s{display:inline}
  /* the arrow costs ~23px the wordmark needs at 375 */
  .hdr__phone .ico{display:none}
  .hdr__phone{padding-left:12px;padding-right:12px}
  .wordmark__name{font-size:19px}
  .wordmark__desc{font-size:8.5px;letter-spacing:.13em}
  .hdr__in{gap:12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>div{border-bottom:1px dotted var(--parchment-400);padding-right:16px}
  .stats>div:nth-child(2n){border-right:none}
  .steps>li,.legal__r{grid-template-columns:minmax(0,1fr);gap:14px}
  .who li{grid-template-columns:minmax(0,1fr);gap:8px}
  .work__note{grid-template-columns:minmax(0,1fr);gap:20px}
  .story{grid-template-columns:minmax(0,1fr);gap:20px}
  .three,.faq,.contact,.care,.work__side,.work__grid,.hero__split,.addon-cols,.grid2{grid-template-columns:minmax(0,1fr)}
  .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .ftr__brand{grid-column:1 / -1}
  .ftr__col{gap:10px}
  .ftr__col h2{margin-bottom:2px}
  .ftr__col a,.ftr__col span{min-height:36px}
  .ftr{padding-top:48px}
  .three>div{border-right:none;border-bottom:1px dotted var(--parchment-400);padding-right:0}
  .three>div:last-child{border-bottom:none}
  .care,.contact,.addon-cols{gap:32px}
  .work__grid{gap:32px}
  .hero__media{height:auto;aspect-ratio:4/3;margin-top:8px}
  .hero__split{gap:24px}
  .toast{right:12px;left:12px;bottom:12px;max-width:none}
}
@media (max-width:480px){
  .wordmark__desc{display:none}
  .wordmark svg{height:42px}
  .wordmark{gap:9px}
  .pkgs,.pkgs--4,.stats,.faq{grid-template-columns:minmax(0,1fr)}
  .stats>div{border-right:none}
  .tabs{display:grid;border-radius:var(--radius-lg)}
  .tabs a{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .sig__rule{transform:none}
  .sig__spark{opacity:1}
}