/* ═══════════════════════════════════════════════════════════════════
   FINI — enterprise problems, finished differently.
   Warm paper, near-black ink, one violet, hairlines, and air.
   Two faces: Fraunces (variable — opsz/SOFT/WONK) and Martian Mono.

   VIOLET BUDGET — the accent appears in six places and nowhere else:
   the wordmark full stop · the box around "a category" · link + CTA text
   · :focus-visible · the separators in the outcomes line · ::selection.
   Never a fill, never a gradient, never on a headline.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  --ground:#FAFAF8;
  --ink:#0D0D0F;
  --ink-2:#3A3A40;
  --ink-3:#62626A;
  --hairline:#E2E2DE;
  --hairline-firm:#8A8A91;

  --accent:#4B2EA8;          /* 8.6:1 on --ground */
  --accent-deep:#351F7A;
  --accent-wash:#EDE9FA;
  --alert:#A3261A;

  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Instrument Sans",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;

  /* WONK releases Fraunces' quirky alternates, SOFT rounds the terminals —
     display sizes only, where there is room for them to read as intent. */
  --vf-display:"opsz" 144,"SOFT" 28,"WONK" 1;
  --vf-title:"opsz" 72,"SOFT" 24,"WONK" 1;
  --vf-lead:"opsz" 36,"SOFT" 12,"WONK" 0;
  --vf-text:"opsz" 14,"SOFT" 0,"WONK" 0;

  --track-display:-.030em; --track-title:-.022em;
  --track-sub:-.014em; --track-body:.002em; --track-label:.08em;

  --shell:1280px;
  --gutter:clamp(22px,4vw,64px);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-ui:cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-optical-sizing:auto; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--serif); font-size:1.0625rem; line-height:1.62;
  letter-spacing:var(--track-body); font-variation-settings:var(--vf-text);
  overflow-x:clip; hyphens:manual;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent-wash); color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.rule{ border:0; border-top:1px solid var(--hairline); margin:0; }

/* ── the small uppercase layer ─────────────────────────────────────── */
.lab{
  font-family:var(--mono); font-size:.625rem; font-weight:400;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--ink-3); line-height:1.3;  max-width:none;
}

/* ── type ──────────────────────────────────────────────────────────── */
h1,h2{ margin:0; font-weight:300; text-wrap:balance; }
h1{
  font-size:clamp(2.6rem,6.6vw + .25rem,6.75rem); line-height:.93;
  letter-spacing:var(--track-display); font-variation-settings:var(--vf-display);
  max-width:17ch;
}
h2{
  font-size:clamp(1.85rem,3vw + .8rem,3.4rem); line-height:1.02;
  letter-spacing:var(--track-title); font-variation-settings:var(--vf-title);
  max-width:20ch;
}
p{ margin:0; max-width:44ch; text-wrap:pretty; }
.lead{
  font-family:var(--sans); font-variation-settings:normal; font-weight:400;
  font-size:clamp(1.02rem,.44vw + .94rem,1.2rem); line-height:1.52;
  letter-spacing:-.016em; color:var(--ink-2); max-width:42ch;
}
.i2{ color:var(--ink-2); }

/* ── the one link mechanic ─────────────────────────────────────────── */
.cta,.ln{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:6px;
  display:inline-block; line-height:1;
  transition:color 160ms var(--ease-ui), border-bottom-width 160ms var(--ease-ui);
}
.cta .ar,.ln .ar{ display:inline-block; transition:transform 160ms var(--ease-ui); }
.cta:hover,.ln:hover{ color:var(--accent-deep); border-bottom-width:2px; }
.cta:hover .ar,.ln:hover .ar{ transform:translateX(3px); }
.cta{ padding-block:4px 6px; }

/* ── masthead ──────────────────────────────────────────────────────── */
.mast{ position:relative; z-index:10; }
.mast-in{ height:76px; display:flex; align-items:center; gap:22px; }
.wm{
  font-family:var(--serif); font-weight:500; font-size:1.3rem;
  letter-spacing:-.012em; font-variation-settings:"opsz" 22,"SOFT" 20,"WONK" 1;
  color:var(--ink);
}
/* the stop is the only colour the wordmark carries; at 21px a true period is
   barely two violet pixels, so it is set a shade larger and pulled back in. */
.wm i{ font-style:normal; color:var(--accent); font-size:1.18em; letter-spacing:-.02em; }
.mast .vr{ width:1px; height:13px; background:var(--hairline); flex:none; }
.mast .sp{ flex:1; }
.mast .ln{ padding-block:12px 6px; }
@media (max-width:719px){ .mast .strap,.mast .vr{ display:none; } }

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{ padding-block:clamp(56px,11vh,132px) clamp(44px,7vh,88px); }

/* "a category" set in a box it does not fit: the rule sits at the x-height,
   so every descender breaks straight through the bottom of it. */
.boxed{ position:relative; white-space:nowrap; }
.boxed::before{
  content:""; position:absolute; left:-.055em; right:-.055em;
  top:.30em; bottom:.34em; border:1px solid var(--accent); opacity:.5;
  pointer-events:none; transform:scaleX(1); transform-origin:left center;
}
.boxed .cat{
  position:absolute; left:calc(100% + 1.7em); top:50%; transform:translateY(-50%);
  font-size:.6rem; color:var(--accent); opacity:.72; white-space:nowrap; pointer-events:none;
}
@media (max-width:1023px){ .boxed .cat{ display:none; } }

.hero h1 .l2{ display:block; color:var(--ink-2); }
.hero-foot{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.74fr);
  gap:clamp(26px,4vw,80px); align-items:start;
  margin-top:clamp(34px,6vh,68px);
}
@media (max-width:899px){ .hero-foot{ grid-template-columns:1fr; gap:30px; } }
.pay{
  font-size:clamp(1.2rem,1vw + 1rem,1.6rem); line-height:1.25;
  letter-spacing:var(--track-sub); font-variation-settings:var(--vf-lead);
  color:var(--ink);
}
.pay + .cta{ margin-top:20px; }

/* ── strips ────────────────────────────────────────────────────────── */
.strip{ padding-block:clamp(24px,4vh,42px); }
.strip .lab{ display:block; margin-bottom:clamp(16px,2.4vh,24px); }

.logos{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(15px,2.2vw,30px); --lg:.6; }
.logos img{ height:calc(var(--h,22px) * var(--lg)); width:auto; filter:grayscale(1); opacity:.6; transition:opacity 220ms var(--ease-ui); }
.logos img:hover{ opacity:.92; }
@media (max-width:719px){ .logos{ gap:14px 20px; --lg:.5; } }

.outcomes{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em .62em;
  font-size:clamp(1.1rem,1.08vw + .72rem,1.6rem); line-height:1.3;
  letter-spacing:var(--track-title); font-variation-settings:var(--vf-title);
  font-weight:300;
}
.outcomes i{ font-style:normal; color:var(--accent); opacity:.55; }
/* bare text nodes cannot be stacked by grid — each outcome is its own span,
   so the row becomes a clean column once the middots are dropped */
@media (max-width:719px){
  .outcomes{ display:flex; flex-direction:column; align-items:flex-start; gap:.14em; }
  .outcomes i{ display:none; }
}

/* ── close ─────────────────────────────────────────────────────────── */
.close{ padding-block:clamp(56px,10vh,124px); }
.close .cta{ margin-top:clamp(22px,3vh,32px); font-size:.8rem; }

/* ── footer ────────────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--hairline); padding-block:22px 30px;
  display:flex; flex-wrap:wrap; gap:8px 40px; justify-content:space-between;
}
.foot span,.foot a{ font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; color:var(--ink-3); }
.foot a:hover{ color:var(--ink); }

/* ── contact page ──────────────────────────────────────────────────── */
.enq{ padding-block:clamp(48px,8vh,104px) clamp(48px,8vh,96px); }
.enq-grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,5vw,96px); align-items:start;
}
@media (max-width:899px){ .enq-grid{ grid-template-columns:1fr; gap:40px; } }

.form{ display:grid; gap:0; border-top:1px solid var(--hairline); }
.f{ border-bottom:1px solid var(--hairline); padding-block:18px 14px; display:grid; gap:7px; }
.f label{ display:block; }
.f input,.f textarea{
  width:100%; background:transparent; border:0; padding:0; outline:0;
  /* what a visitor types is text, not a statement — same voice as the lead */
  font-family:var(--sans); font-size:clamp(1rem,.44vw + .92rem,1.12rem);
  font-weight:400; letter-spacing:-.014em; color:var(--ink);
  font-variation-settings:normal; caret-color:var(--accent); line-height:1.55;
}
.f textarea{ resize:vertical; min-height:4.4em; }
.f input::placeholder,.f textarea::placeholder{ color:var(--ink-3); opacity:.55; }
.f.bad{ border-bottom-color:var(--alert); }
.f .msg{ color:var(--alert); font-size:.86rem; min-height:0; }
.f .msg:empty{ display:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.submit{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:26px; }
.submit button{
  background:transparent; border:0; border-bottom:1px solid currentColor;
  padding:4px 0 6px; cursor:pointer; color:var(--accent);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  transition:color 160ms var(--ease-ui), border-bottom-width 160ms var(--ease-ui);
}
.submit button:hover:not(:disabled){ color:var(--accent-deep); border-bottom-width:2px; }
.submit button:disabled{ color:var(--ink-3); cursor:default; }
.formnote{ color:var(--ink-3); font-size:.86rem; max-width:34ch; }

.sent{ display:none; }
.is-sent .form,.is-sent .submit,.is-sent .enq-intro{ display:none; }
.is-sent .sent{ display:block; }
.sent .dot{ color:var(--accent); }

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

/* ── motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  html.js .pre{ opacity:0; transform:translateY(12px); }
  html.js .in{
    opacity:1; transform:none;
    transition:opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
    transition-delay:var(--d,0ms);
  }
  html.js .boxed::before{ transform:scaleX(0); transition:transform 820ms var(--ease-out) 380ms; }
  html.js .boxed .cat{ opacity:0; transition:opacity 480ms var(--ease-out) 1080ms; }
  html.js.lit .boxed::before{ transform:scaleX(1); }
  html.js.lit .boxed .cat{ opacity:.72; }
  html.js h1{ font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0; }
  html.js.lit h1{
    font-variation-settings:var(--vf-display);
    transition:font-variation-settings 1200ms var(--ease-out) 200ms;
  }
}
@media (prefers-reduced-motion:reduce){
  .pre{ opacity:1!important; transform:none!important; }
  .boxed::before{ transform:scaleX(1)!important; }
  .boxed .cat{ opacity:.72!important; }
  *,*::before,*::after{ animation-duration:1ms!important; transition-duration:1ms!important; }
}

/* ── what we actually sell: not a product ──────────────────────────── */
.say{
  padding-block:clamp(38px,6.5vh,82px);
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(24px,4vw,76px); align-items:start;
}
@media (max-width:899px){ .say{ grid-template-columns:1fr; gap:22px; } }
.say h2{ max-width:15ch; }
.say .lead + .lead{ margin-top:16px; }

/* figures: a ledger, one hairline per column, never a card */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,40px);
}
.stats div{ border-left:1px solid var(--hairline); padding-left:clamp(13px,1.3vw,20px); }
.stats b{
  display:block; font-weight:300; font-size:clamp(1.9rem,2.9vw,2.9rem); line-height:1;
  letter-spacing:-.022em; font-variation-settings:var(--vf-title); color:var(--ink);
}
.stats b i{ font-style:normal; color:var(--accent); }
.stats span{
  display:block; margin-top:clamp(9px,1.2vh,13px); font-family:var(--mono);
  font-size:.58rem; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}
@media (max-width:719px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
}