/* ============================================================
   MOTHERFORM STUDIO — design system · "Bone" (taste round 3)
   Ground is warm bone. Relief is the material: the wordmark is
   pressed into the paper and the spectrum lives only in the
   valley of the press, as foil catching light. Colour never
   becomes a surface. Zero border-radius. Grain on everything.
   Sources: logo handoff 2026-08-17 (approved 2a lockup), PRD v2
   copy/structure, docs/aesthetic-direction.md.
   ============================================================ */

@property --sheen{syntax:'<number>';inherits:true;initial-value:0}

@font-face{font-family:'Giaza';src:url('fonts/Giaza.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Hello Paris';src:url('fonts/HelloParisSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  /* grounds */
  --bone:#EDE9DF;
  --bone-2:#F0E8E7;      /* faint warm-pink cast — hero, softer pages */
  --paper:#FBF9F4;
  --ground:var(--bone);

  /* ink */
  --ink:#1A1714;
  --dim:#6B6258;
  --dimmer:#6F665B;
  --hair:rgba(26,23,20,.10);
  --hair-2:rgba(26,23,20,.16);

  /* earned colour — small text safe */
  --rust:#B53509;
  --teal-dk:#0B6F7C;

  /* the foil spectrum — relief facets, one hover, nothing else */
  --amber:#F0A820;--orange:#F0541A;--pink:#E03888;--violet:#8040F0;--blue:#2858E0;--teal:#10C8D8;
  --foil:linear-gradient(calc(118deg + var(--sheen) * 1deg),var(--amber),var(--orange),var(--pink),var(--violet),var(--blue),var(--teal));
  --foil-warm:linear-gradient(calc(118deg + var(--sheen) * .5deg),var(--amber),var(--orange) 55%,var(--pink));
  --foil-cool:linear-gradient(calc(118deg + var(--sheen) * .5deg),var(--violet),var(--pink) 50%,var(--teal));
  --foil-dusk:linear-gradient(calc(118deg + var(--sheen) * .5deg),#C9B4F2,#93CBE8 52%,var(--teal)); /* lilac → pale blue → teal: the foil for dark green grounds, no heat in it */
  --foil-moon:linear-gradient(calc(118deg + var(--sheen) * .5deg),#FBF7EE,#CFE2F0 45%,#D9CCF2); /* the lightest thing on a dark page: bone → pale blue → lilac, with a glow behind it */

  /* type */
  --wordmark:'Giaza','Fraunces',Georgia,serif;   /* logo lockup ONLY — never for headings */
  --wordmark-sans:'Hello Paris','Instrument Sans',sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Instrument Sans','Helvetica Neue',Arial,sans-serif;

  /* spacing */
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;--s7:168px;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);

  /* depth on paper */
  --shadow-card:0 1px 2px rgba(26,23,20,.06),0 6px 14px rgba(26,23,20,.07),0 22px 44px rgba(26,23,20,.08);
  --shadow-bloom:0 1px 2px rgba(26,23,20,.12),0 6px 14px rgba(26,23,20,.1),0 18px 40px rgba(224,56,136,.16),0 12px 30px rgba(128,64,240,.12);
}

/* ---------- reset & ground ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--serif);font-weight:300;font-optical-sizing:auto;
  font-size:1.05rem;line-height:1.75;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--rust);color:var(--bone)}
html{caret-color:var(--rust);scrollbar-color:rgba(26,23,20,.28) var(--bone)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bone)}
::-webkit-scrollbar-thumb{background:rgba(26,23,20,.22);border:2px solid var(--bone)}
::-webkit-scrollbar-thumb:hover{background:rgba(26,23,20,.38)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

.skip{position:absolute;top:-100px;left:12px;z-index:200;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-weight:500;font-size:.85rem;padding:.8em 1.2em}
.skip:focus{top:12px}

/* ---------- typography ---------- */
h1,h2{font-family:var(--serif);font-weight:450;font-variation-settings:"opsz" 144,"SOFT" 30;line-height:1;text-wrap:balance;letter-spacing:-.025em}
h1{font-size:clamp(3.4rem,7.6vw,8.6rem);line-height:.94}
h2{font-size:clamp(2.6rem,4.8vw,4.6rem)}
h3{font-family:var(--serif);font-weight:450;font-size:1.55rem;line-height:1.15;letter-spacing:-.01em}
.h2-mega{font-size:clamp(4.5rem,13vw,13rem);letter-spacing:-.04em;line-height:.9}
.h2-close{font-size:clamp(3rem,6.6vw,6.4rem)}
p{color:var(--dim);max-width:62ch}
strong{font-weight:500;color:var(--ink)}

/* accent word — Fraunces italic; colour only as a thin foil, never a fill */
.op{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:"SOFT" 48,"WONK" 1;
  display:inline-block;transform:rotate(-1.5deg);
  color:var(--ink);
  /* background-clip:text is clipped to the inline box — give descenders room, then take the space back */
  padding:.06em .06em .18em;margin:-.06em -.06em -.18em;
}
.op-foil{ /* the one foiled word per page */
  background:var(--foil-warm);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.op-foil.cool{background:var(--foil-cool);-webkit-background-clip:text;background-clip:text}
.op-foil.dusk{background:var(--foil-dusk);-webkit-background-clip:text;background-clip:text}
.op-foil.moon{background:var(--foil-moon);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 .14em rgba(207,226,240,.42))}

/* statement — quiet sans sentence carrying one italic serif phrase */
.statement{font-family:var(--sans);font-weight:400;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink);max-width:26em}
.statement em{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.08em;letter-spacing:0}

/* label voice — lowercase italic serif */
.marker{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.05rem;line-height:1.3;color:var(--dim);text-transform:lowercase}
.marker-rust{color:var(--rust)}
.marker-teal{color:var(--teal-dk)}

/* data voice — tiny sans, tabular */
.meta{font-family:var(--sans);font-weight:400;font-size:.78rem;letter-spacing:.02em;color:var(--dimmer);font-variant-numeric:tabular-nums}

/* ---------- THE MATERIAL: relief ----------
   Text pressed into the paper. Colour = the ground it sits on, drawn by a
   dark shadow above and a white one below. A blurred spectrum copy sits
   offset down-right beneath it, so the foil only shows where the stroke
   lifts off the card. All values in em so the press scales with the type. */
.relief{
  position:relative;isolation:isolate;display:inline-block;
  color:var(--ground);
  text-shadow:
    0 -.032em .022em rgba(26,23,20,.30),
    0 .032em .026em rgba(255,255,255,.98),
    0 .075em .115em rgba(26,23,20,.085);
}
.relief::before{
  content:attr(data-text);position:absolute;left:.013em;top:.013em;z-index:-1;
  background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:blur(.007em);opacity:.88;white-space:nowrap;pointer-events:none;
}
.relief.blind::before{display:none}                /* blind deboss — no foil */
.relief.faint{ /* a whisper of a press — ghost words behind copy */
  text-shadow:0 -.018em .018em rgba(26,23,20,.11),0 .018em .02em rgba(255,255,255,.75);
}
/* pressed into a surface that isn't paper — the wordmark over the film */
.relief.over{
  color:rgba(243,237,228,.62);   /* more body in the fill — the soft film no longer bleeds through the letters */
  text-shadow:0 -.016em .01em rgba(26,23,20,.46),0 .018em .01em rgba(255,255,255,.82),0 .07em .12em rgba(26,23,20,.16);
}
.relief.over::before{opacity:.55;mix-blend-mode:overlay;filter:none} /* crisp foil edge; the blur made the wordmark read soft */
.relief.warm::before{background:var(--foil-warm);-webkit-background-clip:text;background-clip:text}
.relief.cool::before{background:var(--foil-cool);-webkit-background-clip:text;background-clip:text}

/* the wordmark lockup — approved 2a */
.lockup{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.lockup .mother{font-family:var(--wordmark);font-size:var(--lockup,12rem);letter-spacing:-.107em;line-height:1.05}
.lockup .form{font-family:var(--wordmark-sans);font-size:calc(var(--lockup,12rem) * .75);letter-spacing:-.091em;line-height:.8;margin-top:-.34em;margin-left:.02em}

/* pressed rules */
.groove{height:2px;border:0;width:100%;
  background:linear-gradient(180deg,rgba(26,23,20,.14) 0 1px,rgba(255,255,255,.95) 1px 2px)}
.rule{height:1px;border:0;width:100%;background:var(--hair)}

/* ghost word — pressed, blind, one per page */
.ghost-word{position:absolute;z-index:0;pointer-events:none;font-family:var(--serif);font-weight:450;
  font-size:clamp(8rem,24vw,24rem);line-height:1;letter-spacing:-.06em;transform:rotate(-8deg)}

/* ---------- surfaces ---------- */
.pane{
  position:relative;background:var(--paper);border:1px solid rgba(26,23,20,.07);
  box-shadow:var(--shadow-card);
}
.pane-soft{background:var(--bone-2)}

/* aura — light behind the relief so the foil has something to catch; never a fill */
.aura{position:absolute;inset:-10%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55;
  background:
    radial-gradient(30% 34% at 30% 40%,rgba(240,168,32,.28),transparent 70%),
    radial-gradient(28% 32% at 70% 62%,rgba(128,64,240,.22),transparent 70%),
    radial-gradient(22% 26% at 58% 30%,rgba(16,200,216,.16),transparent 70%)}

/* ---------- the film — the one living thing on the page ---------- */
.film{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-card)}
.film video,.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* grain — the paper */
.grain{position:fixed;inset:0;z-index:149;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px}

/* colour as light — the one flood per site, used at the close */
.glow{position:absolute;left:50%;bottom:0;width:120%;height:105%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 60%,rgba(240,84,26,.5),rgba(240,168,32,.22) 40%,rgba(240,168,32,.06) 54%,transparent 64%);
  filter:blur(30px)}

/* ---------- components ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.9em;
  font-family:var(--sans);font-weight:500;font-size:.92rem;letter-spacing:.01em;
  color:var(--ink);padding:.95em 1.5em;border:1px solid var(--ink);background:transparent;
  cursor:pointer;isolation:isolate;overflow:hidden;
  transition:color .34s var(--ease),box-shadow .4s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateX(-101%);transition:transform .34s var(--ease)}
.btn .arr{font-family:var(--serif);transition:transform .34s var(--ease)}
.btn:hover,.btn:focus-visible{color:var(--bone);box-shadow:var(--shadow-bloom)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(5px)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink::before{background:var(--rust)}

/* work index row */
.work-row{
  position:relative;display:grid;grid-template-columns:4.5rem 1fr 1.4fr auto;
  align-items:baseline;gap:var(--s3);padding:var(--s3) var(--s2);
  isolation:isolate;overflow:hidden;
}
.work-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.work-row:hover::after,.work-row:focus-visible::after{transform:scaleX(1)}
.work-row .name{transition:color .3s var(--ease)}
.work-row:hover .name,.work-row:focus-visible .name{color:var(--rust)}
.work-row .num{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.05rem;color:var(--dimmer);font-variant-numeric:tabular-nums;align-self:baseline}
.work-row .name{font-family:var(--serif);font-weight:450;font-variation-settings:"opsz" 72;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.05;letter-spacing:-.02em}
.work-row .desc{font-size:.98rem;color:var(--dim);max-width:44ch}
.work-row .go{font-family:var(--serif);font-size:1.2rem;color:var(--dim);align-self:center;transition:color .3s var(--ease)}
.work-row:hover .go{color:var(--rust)}
.work-row.pending{opacity:.55}
.work-row.pending .name{font-family:var(--serif);font-style:italic;font-weight:400}
.work-row.pending:hover::after{transform:scaleX(0)}
.work-row.pending:hover .name{color:inherit}
@media(max-width:760px){
  .work-row{grid-template-columns:2.6rem 1fr auto}
  .work-row .desc{grid-column:2/-1;grid-row:2}
}


/* moon — a pressed disc; the lit part is the paper lifting */
.moon-svg{width:100%;height:auto;display:block;overflow:visible}
.moon-svg .disc{fill:#E3DED3;stroke:rgba(26,23,20,.12);stroke-width:.6}
.moon-svg .lit{fill:#FBF9F4;filter:drop-shadow(0 1.2px 1.6px rgba(26,23,20,.28))}

/* ---------- forms ---------- */
.field-row{display:flex;flex-direction:column;gap:10px}
.field-row label{font-family:var(--sans);font-weight:500;font-size:.85rem;color:var(--ink)}
.input{background:var(--paper);border:1px solid var(--hair-2);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.5;padding:.9em 1em;width:100%;outline:none;
  box-shadow:inset 0 1px 2px rgba(26,23,20,.08);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.input::placeholder{color:var(--dimmer)}
.input:focus{border-color:var(--ink);box-shadow:inset 0 1px 2px rgba(26,23,20,.08),0 0 0 3px rgba(181,53,9,.12)}
.input.error{border-color:var(--rust)}
.err-msg{font-family:var(--sans);font-size:.8rem;color:var(--rust)}
.choice{display:inline-flex;align-items:center;gap:.7em;cursor:pointer;color:var(--dim);font-family:var(--sans);font-size:.95rem}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice .box{width:16px;height:16px;flex:none;border:1px solid rgba(26,23,20,.35);background:var(--paper);transition:background .2s var(--ease),border-color .2s var(--ease)}
.choice input[type=radio]+.box{border-radius:50%}
.choice input:checked+.box{background:var(--ink);border-color:var(--ink)}
.choice input:focus-visible+.box{outline:2px solid var(--rust);outline-offset:3px}
.choice:hover .box{border-color:var(--ink)}
.choice input:checked~.txt{color:var(--ink)}

/* ---------- reveal system (see system.js) ---------- */
.js .rv,.js .rv-load{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv-load{transform:none;scale:1.015;transition:opacity .6s ease-out,scale .6s ease-out}
.js .rv.on,.js .rv-load.on{opacity:1;transform:none;scale:1}
.stag>.rv-load:nth-child(1){transition-delay:.05s}
.stag>.rv-load:nth-child(2){transition-delay:.12s}
.stag>.rv-load:nth-child(3){transition-delay:.18s}
.stag>.rv-load:nth-child(4){transition-delay:.22s}
.stag>.rv-load:nth-child(5){transition-delay:.3s}

/* ---------- nav & footer ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,4vw,48px);background:rgba(237,233,223,.86);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid rgba(26,23,20,.09)}
.wordmark{display:inline-flex;align-items:baseline;line-height:1;color:var(--ink)}
.wordmark .m{font-family:var(--wordmark);font-size:1.5rem;letter-spacing:-.09em}
.wordmark .f{font-family:var(--wordmark-sans);font-size:1.15rem;letter-spacing:-.06em;margin-left:.12em}
.nav-links{display:flex;gap:clamp(14px,2.4vw,30px);list-style:none}
.nav-links a{position:relative;font-family:var(--sans);font-weight:500;font-size:.85rem;color:var(--dim);padding:4px 0;transition:color .24s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
@media(max-width:960px){.nav-links .fold{display:none}}

.footer{padding:var(--s6) clamp(16px,4vw,48px) var(--s4);position:relative;z-index:5}
.footer .top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.footer .meta-row{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.sig{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--dimmer)}

/* ---------- layout ---------- */
.wrap{width:min(1240px,calc(100% - clamp(32px,8vw,96px)));margin-inline:auto}
.section{position:relative;padding-block:var(--s6)}
@media(min-width:961px){.section{padding-block:var(--s7)}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  :root{--sheen:142}
  .js .rv,.js .rv-load{opacity:1;transform:none;scale:1;transition:none}
}

/* ============================================================
   PHASE 3 — page components (Work, Services, Blueprint, About, Contact)
   ============================================================ */

/* page hero — one headline alone in the viewport */
.page-hero{position:relative;z-index:5;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px 0 var(--s6)}
.page-hero h1{max-width:11em}
.page-hero .sub{margin-top:var(--s4);max-width:56ch;font-size:1.15rem;line-height:1.6;color:var(--dim)}
.page-hero.short{min-height:62svh}

/* film hero — a page that opens on footage, the title held low in the veil (same press as the home wordmark) */
.page-hero.on-film{overflow:hidden;isolation:isolate;background:#2A2420;color:var(--bone)}
.page-hero.on-film .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero.on-film .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,23,20,.30),rgba(26,23,20,.04) 38%,rgba(26,23,20,.30) 68%,rgba(26,23,20,.78))}
.page-hero.on-film .wrap{position:relative;z-index:2}
.page-hero.on-film h1{color:var(--bone);text-shadow:0 2px 28px rgba(26,23,20,.35)}
.page-hero.on-film .op{color:var(--bone)}
.page-hero.on-film .op-foil{color:transparent} /* the foiled word keeps its foil */
.page-hero.on-film .sub{color:rgba(237,233,223,.80)}
.page-hero.on-film .marker{color:rgba(237,233,223,.82)}
.page-hero.on-film .marker-teal{color:var(--teal)}

/* pressed word — a client name or a phrase pressed into the paper, blind */
.pressed{font-family:var(--serif);font-weight:450;font-variation-settings:"opsz" 144,"SOFT" 30;font-size:clamp(3.2rem,11vw,11rem);line-height:.95;letter-spacing:-.035em}

/* editorial two-column: text left, sticky visual right */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:start}
.split .stick{position:sticky;top:120px}
@media(max-width:860px){.split{grid-template-columns:1fr}.split .stick{position:static}}

/* case study */
.case{padding-block:var(--s7)}
.case .head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.case .tags{display:flex;gap:10px;flex-wrap:wrap}
.tag{font-family:var(--sans);font-size:.78rem;font-weight:500;color:var(--ink);border:1px solid rgba(26,23,20,.3);padding:.35em .7em}
.block{padding:var(--s3) 0;border-top:1px solid var(--hair)}
.block:last-child{border-bottom:1px solid var(--hair)}
.block .lbl{display:block;margin-bottom:.6em}
.block p{max-width:54ch}
.pull{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.4;color:var(--ink);padding-left:1.2em;border-left:2px solid var(--rust);margin:var(--s4) 0;max-width:26em}
.pull.cool{border-color:var(--teal-dk)}
.frame{position:relative;background:var(--paper);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;overflow:hidden}
.frame+.frame{margin-top:18px}
.frame.r43{aspect-ratio:4/3}
.frame.r169{aspect-ratio:16/9;margin-top:18px}
.frame .marker{color:var(--dimmer);font-size:.95rem}
.frame img{width:100%;height:auto;display:block}
.cap{display:block;margin-top:10px}

/* service rows — the index, indented on alternates */
.srv{position:relative;display:grid;grid-template-columns:3rem minmax(0,5fr) minmax(0,6fr);gap:var(--s3);padding:var(--s4) var(--s2);align-items:baseline;border-top:1px solid var(--hair)}
.srv:last-child{border-bottom:1px solid var(--hair)}
.srv:nth-child(even){margin-left:clamp(0px,6vw,80px)}
.srv .num{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.05rem;color:var(--dimmer);font-variant-numeric:tabular-nums}
.srv h3{font-size:1.6rem;margin-bottom:.35em}
.srv .fit{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--dim);font-size:1.02rem}
.srv p{font-size:.98rem;max-width:48ch}
@media(max-width:760px){.srv{grid-template-columns:2.4rem 1fr}.srv p{grid-column:2}.srv:nth-child(even){margin-left:0}}

/* the signature pane — the only foil rim on a page */
.pane-rim{position:relative;isolation:isolate}
.pane-rim::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--foil-warm);opacity:.85;pointer-events:none}
.pane-rim.cool::before{background:var(--foil-cool)}
.pane-rim>.inner{background:var(--paper);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px)}
.pane-rim ul{list-style:none;display:flex;flex-direction:column;gap:1em}
.pane-rim li{display:flex;gap:.9em;align-items:baseline;color:var(--dim)}
.pane-rim li .tick{width:18px;height:2px;flex:none;align-self:center;background:var(--foil-warm)}
.pane-rim.cool li .tick{background:var(--foil-cool)}
@media(max-width:860px){.pane-rim>.inner{grid-template-columns:1fr}}

/* numbered steps — a real sequence */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--hair);align-items:baseline}
.step:last-child{border-bottom:1px solid var(--hair)}
.step .n{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.6rem;color:var(--rust);line-height:1}
.step h3{font-size:1.45rem;margin-bottom:.35em}
.step p{max-width:52ch;font-size:1rem}

/* values — two columns, plain */
.values{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) clamp(28px,5vw,80px);margin-top:var(--s5)}
.values h3{font-size:1.45rem;margin-bottom:.4em}
.values p{font-size:1rem}
@media(max-width:700px){.values{grid-template-columns:1fr}}

/* included grid — six things */
.six{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) clamp(28px,5vw,80px);margin-top:var(--s5)}
.six .item{padding-top:var(--s3);border-top:1px solid var(--hair)}
.six .n{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--teal-dk);display:block;margin-bottom:.7em}
.six h3{font-size:1.35rem;margin-bottom:.35em}
.six p{font-size:.98rem}
@media(max-width:700px){.six{grid-template-columns:1fr}}

/* prose — long-form, no columns */
.prose{max-width:62ch}
.prose p+p{margin-top:1.4em}
.prose .opener{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.3;color:var(--ink);max-width:22em;margin-bottom:var(--s4)}
.prose .opener em{font-style:italic;font-variation-settings:"SOFT" 48}

/* quiet closing — a pane, not a flood */
.close-quiet{position:relative;z-index:5;padding:var(--s7) 0}
.close-quiet .pane{padding:clamp(32px,5vw,72px);text-align:center}
.close-quiet h2{max-width:12em;margin-inline:auto}
.close-quiet p{margin:var(--s3) auto 0;max-width:36em}

/* contact form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3);margin-top:var(--s5)}
.form .full{grid-column:1/-1}
.form fieldset{border:0;padding:0;margin:0;min-width:0}
.form legend{font-family:var(--sans);font-weight:500;font-size:.85rem;color:var(--ink);margin-bottom:12px}
.form .choices{display:flex;flex-wrap:wrap;gap:12px 22px}
.input{width:100%;padding:.9em 1em;line-height:1.45}
textarea.input{min-height:7.5em;resize:vertical}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.input[aria-invalid=true]{border-color:var(--rust)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .actions{grid-column:1/-1;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.sent{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.2rem;color:var(--ink);max-width:32em}
@media(max-width:700px){.form{grid-template-columns:1fr}}
.next-steps{margin-top:var(--s6);max-width:40em}
.next-steps p+p{margin-top:1em}

/* Blueprint — the cool-weighted page */
.cool-page .marker-rust{color:var(--teal-dk)}
.cool-page .glow{background:radial-gradient(50% 50% at 50% 60%,rgba(16,200,216,.36),rgba(128,64,240,.19) 40%,rgba(128,64,240,.05) 54%,transparent 64%)}
.cool-page .pull{border-color:var(--teal-dk)}