:root{
  /* dark form controls, scrollbars and autofill instead of the browser default white */
  color-scheme:dark;

  --void:#0B0713;
  --night:#130B1F;
  --panel:#190F28;
  --line:#2E1E42;
  --line-soft:#241636;
  --mauve:#A695B6;
  /* only for non-essential text; anything smaller than this needs --mauve */
  --mauve-dim:#8875A0;
  --cream:#F3EBDD;
  --gold:#E9C782;
  --gold-hot:#FFF0C6;
  --gold-deep:#B8914D;
  /* royal purple + rose gold, taken from the logo and the jewelled study of it */
  --royal:#4B1D77;
  --rose:#E3AE9A;

  --display:"Cinzel", "Trajan Pro", Georgia, serif;
  --script:"Great Vibes", "Snell Roundhand", cursive;
  --body:"EB Garamond", "Georgia", "Times New Roman", serif;
  --ui:"Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --logo:url("/assets/logo.png");

  --gutter:clamp(1.25rem, 5vw, 3.5rem);
  --measure:66ch;
  --rhythm:clamp(4.5rem, 10vw, 8.5rem);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--cream);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1.18rem,1.08rem + 0.42vw,1.34rem);
  line-height:1.75;
  /* clip, not hidden: hidden would make body a scroll container and
     break position:sticky on the stage */
  overflow-x:clip;
}
::selection{background:rgba(233,199,130,.28); color:var(--gold-hot)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
/* every anchor target clears the fixed masthead */
section[id]{scroll-margin-top:5.5rem}

.skip{
  position:absolute; left:50%; top:0; transform:translate(-50%,-140%);
  z-index:60; padding:.7rem 1.2rem;
  background:var(--gold); color:var(--void);
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; border-radius:0 0 3px 3px;
  transition:transform .25s ease;
}
.skip:focus-visible{transform:translate(-50%,0)}

/* ---------- the cover ---------- */
.cover{
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(2.5rem,7vh,5rem) var(--gutter);
  background:
    radial-gradient(125% 85% at 50% 4%, rgba(75,29,119,.36), transparent 60%),
    radial-gradient(90% 55% at 50% 104%, rgba(233,199,130,.07), transparent 68%),
    var(--void);
}
.cover__inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:min(56rem, 100%);
}
.cover .orn--crest{width:clamp(76px,9vw,112px); margin:0 0 1.6rem}
.cover__name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3.8vw,2.6rem); letter-spacing:.09em; line-height:1.2;
  text-transform:uppercase; color:var(--cream);
}
.cover__rule{
  width:56px; height:1px; margin:1.5rem 0 0;
  background:linear-gradient(to right, transparent, var(--gold-deep), transparent);
}
.cover__q{margin-top:clamp(2.25rem,6vh,3.5rem)}
.cover__choices{
  display:grid; gap:clamp(1rem,2.5vw,1.75rem); width:100%;
  margin-top:1.6rem;
}
@media (min-width:760px){ .cover__choices{grid-template-columns:1fr 1fr} }

/* two doors. they are lit from under, and the light widens as you approach. */
.door{
  position:relative; overflow:hidden;
  font:inherit; color:var(--cream); cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.55rem;
  min-height:clamp(250px,33vh,330px);
  padding:clamp(1.5rem,2.8vw,2.1rem);
  border:1px solid var(--line);
  border-radius:clamp(70px,13vw,130px) clamp(70px,13vw,130px) 4px 4px;
  background:linear-gradient(180deg, rgba(30,18,48,.78), rgba(12,7,20,.86));
  transition:border-color .5s ease, transform .5s ease, box-shadow .5s ease;
}
.door:hover, .door:focus-visible{
  border-color:var(--gold-deep); transform:translateY(-4px);
  box-shadow:0 30px 70px -44px rgba(233,199,130,.9);
}
/* the light under the door */
.door::before{
  content:""; position:absolute; left:50%; bottom:0; z-index:1;
  width:58%; height:2px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.4;
  transition:opacity .5s ease, height .5s ease, width .5s ease, box-shadow .5s ease;
}
.door:hover::before, .door:focus-visible::before{
  opacity:1; height:3px; width:78%;
  box-shadow:0 0 38px 12px rgba(233,199,130,.32);
}
/* and the light spilling in as it opens */
.door::after{
  content:""; position:absolute; inset:auto 0 0 0; height:0; z-index:0;
  background:linear-gradient(to top, rgba(233,199,130,.20), transparent);
  transition:height .6s ease;
  pointer-events:none;
}
.door:hover::after, .door:focus-visible::after{height:72%}
.door > *{position:relative; z-index:2}
.door__t{font-family:var(--display); font-size:clamp(1.25rem,2vw,1.5rem); letter-spacing:.03em; color:var(--cream)}
.door__d{font-size:1.05rem; line-height:1.65; color:var(--mauve); max-width:34ch; margin-inline:auto}

/* a laptop in a dock is often shorter than it is tall-feeling; keep the
   whole entrance on one screen there too */
@media (max-height:760px){
  .cover{min-height:auto; padding-block:clamp(2rem,6vh,3rem)}
  .cover .orn--crest{width:clamp(58px,7vw,78px); margin-bottom:1rem}
  .cover__q{margin-top:1.6rem}
  .door{min-height:190px; border-radius:64px 64px 4px 4px; padding:1.25rem}
  .cover__foot{margin-top:1.5rem; font-size:.86rem}
}
.door__go{
  margin-top:.4rem; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); transition:color .5s ease;
}
.door:hover .door__go, .door:focus-visible .door__go{color:var(--gold)}

/* The moment of walking through. This is a full-screen overlay, so it is
   driven by a self-terminating animation and then taken out of the document
   entirely — never left to a transition that a throttled tab might not finish. */
.enter{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  display:none; opacity:0;
  background:radial-gradient(62% 58% at 50% 100%,
    rgba(255,243,214,.95), rgba(233,199,130,.55) 38%, rgba(11,7,19,0) 78%);
}
.enter[data-on="in"]{display:block; animation:doorFlash .82s ease forwards}
@keyframes doorFlash{
  0%{opacity:0}
  34%{opacity:1}
  100%{opacity:0}
}
.cover__foot{
  margin-top:clamp(2rem,5vh,3rem); max-width:46ch;
  font-size:1.05rem; line-height:1.7; color:var(--mauve);
}
.cover__foot b{font-weight:400; color:var(--gold)}

.wrap{width:min(1120px, 100% - var(--gutter)*2); margin-inline:auto}

.label{font-family:var(--ui); 
  font-family:var(--body); font-weight:500; font-size:.84rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mauve);
  margin:0;
}
.label--gold{color:var(--gold-deep)}

h1,h2,h3{font-family:var(--display); font-weight:400; text-wrap:balance; margin:0; line-height:1.12}
h1{font-size:clamp(2.2rem, 5.4vw, 3.9rem); letter-spacing:.015em}
h2{font-size:clamp(1.9rem, 3.6vw, 3rem); letter-spacing:.02em}
h3{font-size:clamp(1.3rem, 1.8vw, 1.55rem); letter-spacing:.04em}
p{margin:0}
.lede{font-size:clamp(1.28rem,1.16rem + 0.6vw,1.58rem); line-height:1.6; color:var(--cream)}
.muted{color:var(--mauve)}

/* ---------- masthead ---------- */
.masthead{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--gutter);
  background:linear-gradient(to bottom, rgba(11,7,19,.9), rgba(11,7,19,0));
}
/* the house mark, keyed off its purple field from the master artwork */
.orn{
  display:block; flex:none;
  aspect-ratio:328/384;
  background:var(--logo) center/contain no-repeat;
}
.orn--mini{width:29px}
.mark{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.mark span{
  font-family:var(--display); font-size:.88rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cream); white-space:nowrap;
}
.nav{display:flex; gap:1.6rem; align-items:center}
.nav a{font-family:var(--ui); 
  font-size:.88rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--mauve); transition:color .35s ease;
}
.nav a:hover{color:var(--gold)}
@media (max-width:760px){
  .nav a.is-secondary{display:none}
  .mark span{display:none}
}
.nav__cta{
  color:var(--gold-hot);
  border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem;
  transition:border-color .35s ease, background .35s ease, color .35s ease;
}
.nav__cta:hover{border-color:var(--gold-deep); background:rgba(233,199,130,.07)}

/* ---------- the stage ---------- */
.stage{position:relative; height:360vh}
.stage__pin{
  position:sticky; top:0;
  height:92svh; min-height:540px;
  overflow:hidden;
  display:grid; grid-template-rows:1fr auto;
}
#scene{position:absolute; inset:0; width:100%; height:100%; display:block}
.stage__veil{
  content:""; position:absolute; inset:auto 0 0 0; height:20vh; z-index:1;
  background:linear-gradient(to bottom, rgba(11,7,19,0), var(--void));
  pointer-events:none;
}
.stage__copy{
  position:relative; z-index:3;
  /* held in the upper sky so the golden figure owns the lower frame */
  align-self:start;
  padding:clamp(3rem,9vh,5.5rem) var(--gutter) 0;
  text-align:center;
  /* driven per scroll frame from JS — a transition here would lag it */
  will-change:opacity, transform;
}
.orn--crest{
  width:clamp(62px,8vw,96px);
  margin:0 auto 1.4rem;
  filter:drop-shadow(0 0 14px rgba(233,199,130,.4)) drop-shadow(0 0 54px rgba(107,42,148,.6));
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.88; transform:translateY(0) scale(1)}
  50%{opacity:1; transform:translateY(-3px) scale(1.015)}
}
.divider{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.divider::before,.divider::after{content:""; height:1px; flex:1; background:linear-gradient(to right,transparent,var(--line))}
.divider::after{background:linear-gradient(to left,transparent,var(--line))}
.orn--rule{width:36px; opacity:.7}

.stage__copy h1{color:var(--cream); text-shadow:0 2px 44px rgba(11,7,19,.9)}
.script{
  display:block; font-family:var(--script); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.25;
  color:var(--gold); margin-top:.5rem;
  text-shadow:0 2px 30px rgba(11,7,19,.95);
}
.stage__actions{
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  margin-top:2rem;
}

.stage__sub{font-family:var(--ui); 
  margin-top:1.4rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mauve);
  text-shadow:0 2px 24px rgba(11,7,19,.98);
}
/* in a short window the scene is compressed and the figures stand right where
   this line sits; the caption beats carry the same idea, so drop it */
@media (max-height:640px){ .stage__sub{display:none} }

/* the same decision, changeable at any point after it */
.modeswitch{
  display:inline-flex; padding:3px; gap:3px;
  border:1px solid var(--line); border-radius:999px; background:rgba(19,11,31,.75);
}
.modeswitch button{
  font:inherit; font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  border:0; cursor:pointer; background:transparent; color:var(--mauve);
  padding:.42rem .78rem; border-radius:999px;
  transition:color .35s ease, background .35s ease;
}
.modeswitch button:hover[aria-pressed="false"]{color:var(--cream)}
.modeswitch button[aria-pressed="true"]{background:var(--gold); color:var(--void)}
.btn{font-family:var(--ui); 
  display:inline-block; text-decoration:none;
  font-family:var(--body); font-size:.87rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.95rem 1.9rem; border-radius:999px;
  border:1px solid var(--gold-deep); color:var(--gold-hot);
  background:rgba(233,199,130,.06);
  cursor:pointer;
  transition:background .4s ease, border-color .4s ease, color .4s ease;
}
.btn:hover{background:rgba(233,199,130,.16); border-color:var(--gold)}
.btn--ghost{border-color:var(--line); color:var(--mauve); background:transparent}
.btn--ghost:hover{border-color:var(--mauve-dim); color:var(--cream); background:transparent}

.stage__floor{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  padding:0 var(--gutter) clamp(1.4rem,4vh,2.5rem);
}
.corner{font-family:var(--ui); 
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mauve-dim); max-width:14ch; line-height:1.7;
}
.corner--right{text-align:right}
@media (max-width:640px){ .corner{font-size:.6rem; max-width:11ch} }

.beats{
  position:absolute; z-index:4; left:0; right:0; bottom:clamp(5rem,13vh,8.5rem);
  display:grid; place-items:center; padding:0 var(--gutter);
  pointer-events:none;
}
.beat{
  position:relative;
  grid-area:1/1; text-align:center; max-width:34ch;
  will-change:opacity, transform;
}
/* a soft shadow of its own to sit on, so the caption still reads once the
   figures are at full brightness right behind it. It fades with the caption. */
.beat::before{
  content:""; position:absolute; inset:-1.6rem -2.75rem; z-index:-1;
  background:radial-gradient(58% 94% at 50% 50%, rgba(8,4,14,.72), rgba(8,4,14,0) 74%);
  pointer-events:none;
}
.beat__line{
  font-family:var(--display); font-size:clamp(1.1rem,2.1vw,1.7rem);
  line-height:1.35; color:var(--cream); letter-spacing:.03em;
}
.beat__sub{font-family:var(--ui); 
  margin-top:.55rem; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.cue{font-family:var(--ui); 
  position:absolute; z-index:4; left:50%; transform:translateX(-50%);
  bottom:clamp(1.2rem,3vh,2rem);
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--mauve);
  transition:opacity .4s ease;
}

/* Every word that sits over the scene gets a dark rim drawn behind the
   letterform — paint-order keeps the fill crisp instead of thickening it. */
.stage__copy h1,
.stage__copy .script,
.stage__sub,
.beat__line,
.beat__sub,
.corner,
.cue{
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(8,4,14,.9), 0 0 22px rgba(8,4,14,.8);
}
.stage__copy h1{-webkit-text-stroke:5px rgba(8,4,14,.62)}
.stage__copy .script{-webkit-text-stroke:4px rgba(8,4,14,.62)}
.beat__line{-webkit-text-stroke:4px rgba(8,4,14,.7)}
.stage__sub,
.beat__sub,
.corner,
.cue{-webkit-text-stroke:3px rgba(8,4,14,.72)}

/* ---------- sections ---------- */
.section{padding:var(--rhythm) 0; position:relative}
.section--hair{border-top:1px solid var(--line-soft)}
.head{display:flex; flex-direction:column; gap:1.1rem; margin-bottom:clamp(2.5rem,5vw,4rem)}
.head .lede{max-width:var(--measure)}

.ethos{display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr}
@media (min-width:900px){ .ethos{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start} }
.ethos__stmt{
  font-family:var(--display); font-size:clamp(1.55rem,2.9vw,2.4rem); line-height:1.28;
  letter-spacing:.015em; color:var(--cream);
}
.ethos__stmt em{font-style:normal; color:var(--gold)}
.ethos__body{display:flex; flex-direction:column; gap:1.4rem; max-width:var(--measure)}

/* ---------- switch + panel scene ---------- */
.switch{
  display:inline-flex; padding:4px; gap:4px;
  border:1px solid var(--line); border-radius:999px; background:var(--night);
}
.switch button{
  font-family:var(--body); font-size:.85rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--mauve); background:transparent; border:0; cursor:pointer;
  padding:.72rem 1.3rem; border-radius:999px;
  transition:color .4s ease, background .4s ease;
}
.switch button[aria-selected="true"]{color:var(--void); background:var(--gold)}
.switch button[aria-selected="false"]:hover{color:var(--cream)}

.split{display:grid; gap:clamp(1.75rem,3.5vw,3rem); grid-template-columns:1fr; margin-top:2.5rem}
@media (min-width:960px){ .split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center} }
.viewport{
  position:relative; border:1px solid var(--line-soft); border-radius:3px;
  overflow:hidden; background:var(--void); aspect-ratio:16/10;
}
#panelScene{position:absolute; inset:0; width:100%; height:100%; display:block}
.viewport__tag{
  position:absolute; z-index:2; left:1rem; bottom:.85rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mauve-dim);
}
.plan{display:flex; flex-direction:column; gap:1.4rem}
.plan__title{font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.2; color:var(--cream)}
.plan__title span{color:var(--gold)}
.plan__body{color:var(--mauve); max-width:52ch}
.plan__more{font-size:.9rem; color:var(--mauve-dim)}
.plan__more a{color:var(--gold); text-underline-offset:.25em}
.moves{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.moves li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid var(--line-soft);
}
.moves li:last-child{border-bottom:1px solid var(--line-soft)}
.moves b{
  font-family:var(--display); font-weight:400; font-size:.82rem;
  color:var(--gold-deep); letter-spacing:.1em; font-variant-numeric:tabular-nums;
}
.moves span{color:var(--cream); font-size:1.08rem; line-height:1.65}
.moves span i{font-style:normal; color:var(--mauve)}

/* ---------- business services ---------- */
.services{display:flex; flex-direction:column}
.service{
  display:grid; gap:.8rem 2.5rem; grid-template-columns:1fr;
  padding:clamp(1.6rem,3vw,2.4rem) 0;
  border-top:1px solid var(--line-soft);
}
.services .service:last-child{border-bottom:1px solid var(--line-soft)}
@media (min-width:860px){
  .service{grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}
  /* the indent is the hierarchy: these two sit inside workforce strategy */
  .service--nested .service__name{padding-left:1.6rem; border-left:1px solid var(--line)}
}
.service__name{display:flex; flex-direction:column; gap:.45rem}
.service__name h3{color:var(--cream)}
.service__body{display:flex; flex-direction:column; gap:1.1rem; max-width:62ch}
.service__body > p{color:var(--mauve); font-size:1.08rem}

.items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; counter-reset:step}
.items li{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:baseline;
  font-size:1.08rem; line-height:1.7; color:var(--mauve);
}
.items li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold-deep); transform:translateY(-2px);
}
.items--steps li{counter-increment:step}
.items--steps li::before{
  content:counter(step,decimal-leading-zero);
  width:auto; height:auto; border-radius:0; background:none; transform:none;
  font-family:var(--display); font-size:.92rem; letter-spacing:.08em;
  color:var(--gold-deep); font-variant-numeric:tabular-nums;
}
.items b{font-weight:500; color:var(--cream)}

.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{font-family:var(--ui); 
  font-size:.92rem; letter-spacing:.04em;
  padding:.45rem .85rem; border-radius:999px;
  border:1px solid var(--line); color:var(--cream); background:var(--night);
}
.services__note{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  color:var(--mauve); max-width:var(--measure); font-size:.97rem;
}
.services__note a{color:var(--gold); text-underline-offset:.25em}

/* ---------- sectors ---------- */
.sectors{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft)}
@media (min-width:700px){ .sectors{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .sectors{grid-template-columns:repeat(3,1fr)} }
.sector{
  position:relative; background:var(--void);
  padding:clamp(1.6rem,2.6vw,2.2rem);
  display:flex; flex-direction:column; gap:.7rem; min-height:200px;
  transition:background .5s ease;
}
.sector::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity:0; transition:opacity .5s ease;
}
.sector:hover, .sector:focus-within{background:var(--night)}
.sector:hover::before, .sector:focus-within::before{opacity:1}
.sector h3{color:var(--cream)}
.sector p:not(.label){color:var(--mauve); font-size:1.06rem; line-height:1.72}
.sector .label{margin-top:auto}

/* ---------- path finder ---------- */
.paths{display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width:800px){ .paths{grid-template-columns:repeat(3,1fr)} }
.path{
  text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:var(--night); border:1px solid var(--line);
  padding:1.4rem 1.5rem; border-radius:2px;
  display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .4s ease, background .4s ease, transform .4s ease;
}
.path:hover{border-color:var(--mauve-dim); transform:translateY(-2px)}
.path[aria-pressed="true"]{
  border-color:var(--gold-deep); background:var(--panel);
  box-shadow:0 0 0 1px rgba(233,199,130,.16), 0 18px 50px -30px rgba(233,199,130,.6);
}
.path strong{font-family:var(--display); font-weight:400; font-size:1.2rem; letter-spacing:.03em; color:var(--cream)}
.path em{font-style:normal; font-size:1.02rem; color:var(--mauve); line-height:1.6}
.result{
  margin-top:1.75rem; border:1px solid var(--line); background:var(--night);
  padding:clamp(1.5rem,3vw,2.25rem); border-radius:2px;
  display:grid; gap:1.25rem;
}
.result__head{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:baseline; justify-content:space-between}
.result__steps{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.result__steps li{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:baseline}
.result__steps b{
  font-family:var(--display); font-weight:400; color:var(--gold-deep);
  font-size:.92rem; letter-spacing:.08em; font-variant-numeric:tabular-nums;
}
.result__steps span{color:var(--cream); font-size:1.08rem; line-height:1.7}

/* ---------- contact ---------- */
.contact{display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr}
@media (min-width:900px){ .contact{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.form{display:grid; gap:1.1rem}
.row{display:grid; gap:1.1rem; grid-template-columns:1fr}
@media (min-width:560px){ .row{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:.45rem}
.field label{font-family:var(--ui); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mauve)}
.field input, .field textarea{
  font:inherit; color:var(--cream);
  background:var(--night); border:1px solid var(--line);
  border-radius:2px; padding:.8rem .9rem;
  transition:border-color .35s ease, background .35s ease;
}
.field input:hover, .field textarea:hover{border-color:var(--mauve-dim)}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--gold-deep); background:var(--panel)}
.field textarea{resize:vertical; min-height:120px; line-height:1.65}
.form__note{font-size:.96rem; color:var(--mauve-dim); line-height:1.7}
/* off-screen rather than display:none — bots skip hidden fields */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.outbox{
  display:none; border:1px solid var(--gold-deep); background:var(--panel);
  border-radius:2px; padding:1.25rem 1.4rem; gap:.9rem;
}
.outbox[data-open="true"]{display:grid}
.outbox pre{
  margin:0; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.8rem; line-height:1.7; color:var(--cream);
  white-space:pre-wrap; word-break:break-word;
  max-height:220px; overflow:auto;
}
.outbox__row{display:flex; flex-wrap:wrap; gap:.75rem}

#talk{padding-bottom:0}
.footer{
  border-top:1px solid var(--line-soft);
  margin-top:var(--rhythm);
  padding:2.5rem 0 3rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
}
.footer p{font-size:.92rem; color:var(--mauve-dim); letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ---------- questions and answers ---------- */
.qa{display:flex; flex-direction:column}
.qa__item{
  padding:clamp(1.5rem,3vw,2.2rem) 0;
  border-top:1px solid var(--line-soft);
  display:grid; gap:.75rem; grid-template-columns:1fr;
}
.qa__item:last-child{border-bottom:1px solid var(--line-soft)}
@media (min-width:900px){ .qa__item{grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:.75rem 3rem} }
.qa__item h3{color:var(--cream); text-wrap:balance}
.qa__item p{color:var(--mauve); max-width:62ch; line-height:1.78; font-size:1.08rem}

.switchnote{color:var(--mauve); font-size:1.08rem}
.switchnote a{color:var(--gold); text-underline-offset:.25em}

/* the mode switch is links between real pages now, not buttons */
.modeswitch a{font-family:var(--ui); 
  font:inherit; font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--mauve);
  padding:.42rem .78rem; border-radius:999px;
  transition:color .35s ease, background .35s ease;
}
.modeswitch a:hover{color:var(--cream)}
.modeswitch a[aria-current="page"]{background:var(--gold); color:var(--void)}

/* ---------- landing pages ---------- */
.lander{padding-top:calc(var(--rhythm) + 3rem)}
.lander h1{font-size:clamp(2rem,4.6vw,3.2rem); margin-top:.6rem}
.lander .lede{margin-top:1.2rem; max-width:62ch}
.crumbs{font-family:var(--ui); 
  font-size:.84rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mauve-dim); margin-bottom:1.75rem;
}
.crumbs a{color:var(--mauve); text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 .4rem}
.crumbs [aria-current]{color:var(--cream); margin:0}
.prose{display:flex; flex-direction:column; gap:1.2rem; margin-top:1.4rem; max-width:66ch}
.prose p{color:var(--mauve); line-height:1.8; font-size:1.08rem}
.prose .items{gap:.9rem}
.sector h3 a, .service__name h3 a{color:inherit; text-decoration:none}
.sector h3 a:hover, .service__name h3 a:hover{color:var(--gold)}

/* ---------- subscription form ---------- */
.subform{display:flex; flex-direction:column; gap:clamp(2rem,4vw,3rem); max-width:52rem}
.block{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:.9rem}
.block__legend{
  font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,2vw,1.45rem);
  color:var(--cream); letter-spacing:.02em; padding:0; display:flex; gap:.9rem; align-items:baseline;
}
.block__n{
  font-size:.92rem; letter-spacing:.08em; color:var(--gold-deep);
  font-variant-numeric:tabular-nums;
}
.block__hint{font-family:var(--ui); color:var(--mauve); font-size:.94rem; line-height:1.7; max-width:60ch}

.picks{display:grid; gap:.7rem; grid-template-columns:1fr}
@media (min-width:860px){ .picks{grid-template-columns:1fr 1fr} }
.picks--tight{gap:.5rem}
@media (min-width:720px){ .picks--tight{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .picks--tight{grid-template-columns:repeat(3,1fr)} }
.picks--row{display:flex; flex-wrap:wrap; gap:.6rem}

.pick{
  display:flex; gap:.85rem; align-items:flex-start; cursor:pointer;
  padding:1.05rem 1.2rem; border:1px solid var(--line); border-radius:3px;
  background:var(--night);
  transition:border-color .35s ease, background .35s ease;
}
.pick:hover{border-color:var(--mauve-dim)}
.pick input{position:absolute; opacity:0; width:1px; height:1px}
.pick__box{
  flex:none; width:17px; height:17px; margin-top:.15rem;
  border:1px solid var(--mauve-dim); border-radius:2px;
  display:grid; place-items:center;
  transition:border-color .25s ease, background .25s ease;
}
.pick__box--round{border-radius:50%}
.pick__box::after{
  content:""; width:9px; height:9px; border-radius:1px;
  background:var(--void); transform:scale(0); transition:transform .18s ease;
}
.pick__box--round::after{border-radius:50%}
.pick input:checked + .pick__box{background:var(--gold); border-color:var(--gold)}
.pick input:checked + .pick__box::after{transform:scale(1)}
.pick input:focus-visible + .pick__box{outline:2px solid var(--gold); outline-offset:3px}
.pick:has(input:checked){border-color:var(--gold-deep); background:var(--panel)}
.pick__text{display:flex; flex-direction:column; gap:.35rem; line-height:1.4}
.pick__text b{font-family:var(--ui); font-weight:500; color:var(--cream); font-size:1.03rem; letter-spacing:.01em}
.pick__text em{font-style:normal; color:var(--mauve); font-size:.86rem; line-height:1.55; padding-left:.75rem; border-left:1px solid var(--line)}
.pick--inline{padding:.6rem .95rem}
.pick--wide{max-width:44rem}

.subform .row, .subform .field{margin:0}
.subform__go{display:flex; flex-direction:column; gap:.9rem; align-items:flex-start}

/* the doors are links now — they should not read as body-copy hyperlinks */
.door, .door:hover, .door:focus-visible{text-decoration:none}
.door__t, .door__d, .door__go{text-decoration:none}

/* ---------- on-page contents ----------
   A plain list of links, nothing more. No card, no numbering, no second
   column of notes: a reader hunting for one answer does not want a table,
   they want to see the words and click one. */
.toc{margin-top:2.5rem; padding:0; border:0; background:none}
.toc > .label{color:var(--gold-deep); opacity:.9}
.toc__list{list-style:none; margin:1rem 0 0; padding:0}
.toc__list li{margin:0}
.toc__list li + li{border-top:1px solid var(--line-soft)}
.toc__list a{
  display:block; padding:.7rem .1rem;
  text-decoration:none; color:var(--gold);
  font-size:1.12rem; line-height:1.45;
  transition:color .3s ease, padding-left .3s ease;
}
.toc__list a:hover, .toc__list a:focus-visible{color:var(--gold-hot); padding-left:.35rem}
.toc__list a.is-out::after{content:" \2197"; font-size:.82em}

/* On a wide screen it leaves the column and rides the right edge, staying put
   as the page moves. It holds off until the opening scene has played all the
   way out, then arrives from the right. */
@media (min-width:1700px){
  .toc{
    position:fixed; top:50%; right:clamp(1.5rem,2.2vw,3rem);
    transform:translateY(-50%) translateX(.7rem);
    width:16.5rem; margin:0; z-index:20;
    max-height:78vh; overflow-y:auto;
    scrollbar-width:none;
    opacity:0; pointer-events:none;
    transition:opacity .55s ease, transform .55s ease;
  }
  .toc.is-live{opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0)}
  .toc::-webkit-scrollbar{display:none}
}

/* the job board deserves to be shouted about, not buried */
.jobcta{
  display:grid; gap:1.4rem; align-items:center; grid-template-columns:1fr;
  border:1px solid var(--gold-deep); border-radius:3px;
  background:linear-gradient(180deg, rgba(42,18,80,.55), rgba(13,8,22,.7));
  padding:clamp(1.75rem,3.5vw,2.6rem);
  box-shadow:0 26px 70px -50px rgba(233,199,130,.8);
}
@media (min-width:820px){ .jobcta{grid-template-columns:minmax(0,1fr) auto} }
.jobcta h2{color:var(--cream); margin:0}
.jobcta p{color:var(--mauve); margin-top:.7rem; max-width:56ch; line-height:1.7; font-size:1.08rem}
.jobcta .btn{white-space:nowrap}
.nav a.is-job{color:var(--gold)}
.nav a.is-job:hover{color:var(--gold-hot)}

/* the footer now carries the real business identity — address and phone are
   local-search signals, not decoration */
.footer{flex-direction:column; align-items:flex-start; gap:.5rem}
.footer__biz{font-size:1rem; color:var(--cream); letter-spacing:.04em}
.footer__meta{font-family:var(--ui); font-size:.98rem; color:var(--mauve); letter-spacing:.03em; line-height:1.9}
.footer__meta a{color:var(--mauve); text-decoration:none; text-underline-offset:.25em}
.footer__meta a:hover{color:var(--gold); text-decoration:underline}
.footer__meta span{margin:0 .35rem; color:var(--mauve-dim)}
.footer__legal{font-family:var(--ui); font-size:.88rem; color:var(--mauve-dim); letter-spacing:.05em}
.cover__addr{
  margin-top:2.25rem; font-size:.95rem; line-height:1.9;
  color:var(--mauve-dim); letter-spacing:.04em;
}
.cover__addr a{color:var(--mauve); text-decoration:none}
.cover__addr a:hover{color:var(--gold)}

/* service areas — plain, scannable, and real text for search engines */
.areas{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.55rem; grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){ .areas{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){ .areas{grid-template-columns:repeat(4,1fr)} }
.areas li{
  color:var(--cream); font-size:1.04rem; padding:.55rem .8rem;
  border:1px solid var(--line-soft); border-radius:2px; background:var(--night);
}
.areas__note{margin-top:1.4rem; color:var(--mauve); font-size:1.04rem; max-width:60ch}

/* ---------- the reading surface ----------
   A customer said the site was too dark to read and too small to scan, and
   they were right. The film keeps its dark, because a glowing figure has
   nothing to glow against on white. Everything a person actually reads now
   sits on warm paper in near black ink.

   Each content section simply redefines the palette variables, so every rule
   written above this point follows along without being touched. */
.section{
  --void:#F6F0E4;
  --night:#FFFCF4;
  --panel:#FFFDF8;
  --line:#CDBFA4;
  --line-soft:#E3D9C5;
  --cream:#170E1F;
  --mauve:#3A2F45;
  --mauve-dim:#574863;
  --gold:#7A5512;
  --gold-hot:#5B3E08;
  --gold-deep:#87621E;
  background:#F6F0E4;
  color:#170E1F;
}
.section a{color:#7A5512}
.section .btn{background:#7A5512; border-color:#7A5512; color:#FFF9EC}
.section .btn:hover{background:#5B3E08; border-color:#5B3E08}
.section .btn--ghost{background:transparent; color:#3A2F45; border-color:#B6A784}
.section .btn--ghost:hover{background:transparent; color:#170E1F; border-color:#7A5512}
.section .field input, .section .field textarea{color:#170E1F; background:#FFFDF8; border-color:#CDBFA4}
.section .field input:focus, .section .field textarea:focus{border-color:#7A5512; background:#FFFDF8}
.section .sector{background:#FFFCF4; border:1px solid #E3D9C5}
.section .sector:hover, .section .sector:focus-within{background:#FFFDF8}
.section .path{background:#FFFCF4}
.section .path[aria-pressed="true"]{box-shadow:0 0 0 1px rgba(122,85,18,.28), 0 14px 34px -26px rgba(23,14,31,.55)}
.section .jobcta{
  background:linear-gradient(180deg, #FFF6E2, #FBEFD8);
  box-shadow:0 20px 50px -42px rgba(23,14,31,.65);
}
.section .stage__actions .btn--ghost{border-color:#B6A784}
.section ::selection{background:rgba(122,85,18,.22); color:#170E1F}

/* the film hands the page over: dark at the seam, paper by the first heading */
/* The seam is a dark veil that fades out over the first 60px, laid on top of
   a real paper background colour. Keeping the colour (rather than a gradient
   that ends in paper) means the section is never transparent, so text can
   never land on a half dark ground while the gradient is still resolving. */
#approach{
  background-color:#F6F0E4;
  background-image:linear-gradient(to bottom, #0B0713 0, rgba(11,7,19,0) 60px);
}

/* a solid bar reads over both the scene and the paper */
.masthead{
  background:rgba(11,7,19,.94);
  border-bottom:1px solid rgba(46,30,66,.85);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* ---------- section headers ride the left margin ----------
   The mirror of the contents rail: that one is pinned to the far right, this
   one to the far left, and the reading column runs between them. Each header
   sticks for the length of its own section, so at any point on the page the
   left edge tells you where you are and the right edge tells you where else
   you could go. Nothing sits in the reading column except the reading.

   It needs the same room the contents rail needs, so it starts at the same
   width. Below that the header goes back into the flow above its section,
   left aligned, which is where it has always been. */
@media (min-width:1700px){
  .section > .wrap{
    width:calc(100vw - 2 * clamp(1.5rem,2.2vw,3rem));
    max-width:none;
    display:grid;
    /* the third column is empty on purpose: it is the space the contents
       rail is fixed over, and reserving it keeps text from running under it */
    grid-template-columns:21rem minmax(0,58rem) 16.5rem;
    justify-content:space-between;
    column-gap:clamp(2rem,2.6vw,3.5rem);
    align-items:start;
  }
  .section > .wrap > *{grid-column:2}

  .section > .wrap > .head,
  .section > .wrap > h2{
    grid-column:1;
    grid-row:1 / span 30;
    position:sticky; top:6.5rem;
    align-self:start;
    text-align:left;
    margin-bottom:0;
  }
  .section > .wrap > .head{align-items:flex-start; gap:.8rem}
  .section > .wrap > .head h2,
  .section > .wrap > h2{font-size:clamp(1.65rem,1.85vw,2.15rem); line-height:1.18}
  .section > .wrap > .head .lede{font-size:1.06rem; line-height:1.62; text-align:left}

  /* a landing page header has no h2 to send to the rail, so it simply keeps
     to the reading column and lines up with the prose underneath it */
}