/* ==========================================================================
   Mercy Maryanne — Strategic Management & Operations Consultant
   Register: working document / drawing sheet.
   Grotesque for structure, serif for reading, mono for labels and data.
   Single committed light palette — painted explicitly so it holds on any
   host ground.
   ========================================================================== */

:root{
  --paper:#F3F2EF;
  --paper-tint:#EBEAE5;
  --ink:#191D1A;
  --ink-2:#3D443E;
  --ink-3:#6B7269;
  --hair:#CBC9C3;
  --hair-soft:#DEDCD6;
  --green:#2E5A4C;
  --green-deep:#1E3B31;
  --red:#B0402A;

  --ff-struct:"Archivo",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ff-read:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --sheet:1180px;
  --pad:clamp(1.15rem,4.5vw,3.5rem);
  --e:cubic-bezier(.2,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-read);
  font-optical-sizing:auto;
  font-size:clamp(1rem,.965rem + .16vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,dt,table,caption{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
::selection{background:var(--green);color:var(--paper);}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.skip{
  position:fixed;top:-100px;left:1rem;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;transition:top .2s;
}
.skip:focus{top:1rem;}

.sheet{
  width:100%;max-width:var(--sheet);margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------- Shared type roles ---------- */
.mono-label{
  font-family:var(--ff-mono);
  font-size:.68rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}
.h2{
  font-family:var(--ff-struct);
  font-weight:600;
  font-size:clamp(1.5rem,1.1rem + 1.75vw,2.4rem);
  font-stretch:96%;
  line-height:1.14;letter-spacing:-.021em;
  max-width:26ch;text-wrap:balance;
  margin-top:1.1rem;
}
.h2--ink{color:var(--paper);}

.sec__intro{
  font-size:1.06rem;color:var(--ink-2);
  max-width:62ch;margin-top:1.1rem;
}
.sec__intro--ink{color:rgba(243,242,239,.72);}

/* Title block: mono tag + hairline running to the sheet edge */
.title-row{
  display:flex;align-items:center;gap:1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--ink);
}
.title-row__rule{flex:1;}
.title-row--ink{border-bottom-color:rgba(243,242,239,.42);}
.title-row--ink .mono-label{color:rgba(243,242,239,.7);}

/* ---------- Buttons: square, deliberate ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);
  font-size:.72rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  padding:.95rem 1.5rem;
  border:1px solid var(--ink);
  transition:background .28s var(--e),color .28s var(--e),
             border-color .28s var(--e);
}
.btn--solid{background:var(--ink);color:var(--paper);}
.btn--solid:hover{background:var(--green);border-color:var(--green);}
.btn--line{background:none;color:var(--ink);}
.btn--line:hover{background:var(--ink);color:var(--paper);}
.btn--wide{width:100%;}

/* ==========================================================================
   DOCUMENT HEADER
   ========================================================================== */
.doc-head{
  position:sticky;top:0;z-index:90;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.doc-head__bar{
  width:100%;max-width:var(--sheet);margin-inline:auto;
  padding:.85rem var(--pad);
  display:flex;align-items:center;gap:1.75rem;
}
.ident{margin-right:auto;display:flex;flex-direction:column;line-height:1.25;}
.ident__name{
  font-family:var(--ff-struct);
  font-weight:700;font-stretch:88%;
  font-size:1.02rem;letter-spacing:-.012em;
}
.ident__role{
  font-family:var(--ff-mono);
  font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
}

.doc-nav{display:flex;gap:1.4rem;}
.doc-nav a{
  font-family:var(--ff-mono);
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--e),border-color .25s var(--e);
}
.doc-nav a:hover{color:var(--ink);border-bottom-color:var(--ink);}
.doc-nav a.on{color:var(--red);border-bottom-color:var(--red);}

.doc-head__cta{
  font-family:var(--ff-mono);
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.55rem 1rem;
  border:1px solid var(--ink);
  transition:background .25s var(--e),color .25s var(--e);
}
.doc-head__cta:hover{background:var(--ink);color:var(--paper);}

/* Title-block strip */
.title-block{
  width:100%;max-width:var(--sheet);margin-inline:auto;
  padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair);
}
.title-block > div{
  padding:.5rem 0;
  border-left:1px solid var(--hair);
  padding-left:.85rem;
}
.title-block > div:first-child{border-left:0;padding-left:0;}
.title-block dt{
  font-family:var(--ff-mono);
  font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}
.title-block dd{
  font-family:var(--ff-mono);
  font-size:.7rem;color:var(--ink-2);
  margin-top:.1rem;
}
.title-block__status dd{color:var(--green);}
.title-block__status dd::before{
  content:"";display:inline-block;
  width:.42rem;height:.42rem;background:var(--green);
  margin-right:.42rem;vertical-align:middle;
}

.toggle{display:none;width:2.1rem;height:1.9rem;padding:0;}
.toggle span{
  display:block;height:1.5px;background:var(--ink);
  margin:.32rem 0;
  transition:transform .3s var(--e),opacity .2s;
}
.toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(.46rem) rotate(45deg);}
.toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-.46rem) rotate(-45deg);}

.drawer{
  position:fixed;inset:0;z-index:85;
  background:var(--paper);
  padding:7rem var(--pad) 2rem;
  display:flex;flex-direction:column;justify-content:center;
  transform:translateY(-100%);
  transition:transform .5s var(--e);
}
.drawer.on{transform:none;}
.drawer nav{display:flex;flex-direction:column;}
.drawer nav a{
  font-family:var(--ff-struct);
  font-weight:600;font-stretch:92%;
  font-size:clamp(1.5rem,7vw,2.1rem);
  letter-spacing:-.02em;
  padding:.7rem 0;
  border-bottom:1px solid var(--hair);
}
.drawer nav a:hover{color:var(--green);}
.drawer__mail{
  font-family:var(--ff-mono);font-size:.8rem;
  margin-top:2rem;color:var(--ink-3);
}

/* ==========================================================================
   OPENING
   ========================================================================== */
.open{padding-block:clamp(2.25rem,5.5vw,4.25rem) clamp(2.5rem,6vw,4.5rem);}
.open__kicker{display:block;margin-bottom:1.5rem;}

.open__head{
  font-family:var(--ff-struct);
  font-weight:700;font-stretch:86%;
  font-size:clamp(2.1rem,1.05rem + 4.9vw,4.5rem);
  line-height:1.02;letter-spacing:-.035em;
  max-width:23ch;
  text-wrap:balance;
}
.open__head span{
  display:block;
  color:var(--ink-3);
  font-weight:400;
  font-stretch:104%;
}

.open__cols{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:end;
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  padding-top:clamp(1.25rem,3vw,1.75rem);
  border-top:1px solid var(--hair);
}
.open__lede p{max-width:58ch;color:var(--ink-2);}
.open__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem;}


/* Hero top row: the headline and the portrait share the opening, and her
   foot fade runs down into the rule that opens the next row. */
.open__top{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:clamp(1.5rem,4vw,3.25rem);
  align-items:end;
}
.plate--hero{margin:0;}
.plate--hero .plate__frame{aspect-ratio:4/4.2;}
.plate--hero .plate__frame img{object-position:50% 8%;}
.plate--hero .plate__fade--foot{height:30%;}

/* Hero right column: the field of work as a typographic index */
.open__index{border-top:1px solid var(--ink);padding-top:.75rem;}
.open__index .mono-label{display:block;margin-bottom:.4rem;}
.open__index li{
  font-family:var(--ff-mono);
  font-size:.78rem;line-height:1.35;
  color:var(--ink-2);
  padding:.5rem 0;
  border-bottom:1px solid var(--hair-soft);
}
.open__index li:last-child{border-bottom:0;}

/* ==========================================================================
   PRINCIPAL + DUOTONE PLATE
   The photograph is printed in the document's own two inks — deep green for
   the shadows, paper for the highlights — with a fine line screen over it,
   so it sits inside the page instead of floating on top of it.
   ========================================================================== */
.sec--ruled{border-top:1px solid var(--hair);}

.principal{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(1.25rem,3.5vw,2.75rem);
  align-items:start;
  margin-top:clamp(1.75rem,4vw,2.5rem);
  position:relative;
}
/* the page's own rule runs on behind her, so she sits in the grid, not on it */
.principal::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--hair);
}

.plate{
  position:relative;
  /* pulled up so her head rises past the section rule, and nudged left so the
     dissolve overlaps the text column rather than butting against it */
  margin:-1.25rem 0 0;
}
.plate__frame{
  position:relative;
  isolation:isolate;              /* keep the duotone blending self-contained */
  aspect-ratio:4/5;
  overflow:hidden;                /* only to hold the object-fit crop */
}
.plate__frame img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 10%;        /* head and shoulders; drops the office */
  filter:grayscale(1) contrast(1.2) brightness(1.06);
  transition:filter .55s var(--e);
}
/* Duotone: shadows clamp up to the deep green, highlights clamp down to the
   page colour. Because the light end IS --paper, the bright background of the
   photograph becomes the page itself — there is no edge to hide. */
.plate__duo{position:absolute;inset:0;pointer-events:none;transition:opacity .55s var(--e);}
.plate__duo--shadow{background:var(--green-deep);mix-blend-mode:lighten;}
.plate__duo--light{background:var(--paper);mix-blend-mode:darken;}

/* Scrims in the page colour, feathering the two edges where she is darkest
   and would otherwise stop abruptly against the text column and the rule. */
.plate__fade{position:absolute;pointer-events:none;}
.plate__fade--left{
  inset:0 auto 0 0;width:38%;
  background:linear-gradient(to right,var(--paper) 0%,rgba(243,242,239,0) 100%);
}
.plate__fade--foot{
  inset:auto 0 0 0;height:34%;
  background:linear-gradient(to top,var(--paper) 0%,rgba(243,242,239,0) 100%);
}

/* she warms toward true colour on approach, without becoming a hard rectangle */
.plate__frame:hover img{filter:grayscale(.18) contrast(1.05) brightness(1);}
.plate__frame:hover .plate__duo{opacity:.2;}

.principal__lead{margin-top:0;}
.principal__body > p:first-child{margin-top:0;}
.principal__body p{color:var(--ink-2);max-width:62ch;margin-top:1.15rem;}

.sign{
  margin-top:1.9rem !important;
  padding-top:1rem;
  border-top:1px solid var(--hair);
  display:flex;flex-direction:column;
}
.sign__name{
  font-family:var(--ff-struct);
  font-weight:700;font-stretch:88%;
  font-size:1.18rem;letter-spacing:-.02em;
  color:var(--ink);
}
.sign__role{
  font-family:var(--ff-mono);
  font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
  margin-top:.2rem;
}

/* ==========================================================================
   PREMISE + BRIDGE DIAGRAM
   ========================================================================== */
.span-sec{
  padding-block:clamp(3rem,7vw,5.5rem);
  background:var(--paper-tint);
  border-block:1px solid var(--hair);
}
.span-sec__intro{
  margin-top:1.5rem;max-width:60ch;
  color:var(--ink-2);
}

.bridge{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,2.6fr) minmax(0,.9fr);
  align-items:stretch;
  margin-top:clamp(2.25rem,5vw,3.25rem);
}
.bridge__bank{
  border:1px solid var(--ink);
  background:var(--paper);
  padding:1.15rem 1.1rem 1.25rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:.55rem;
}
.bridge__bank p{
  font-family:var(--ff-struct);
  font-weight:600;font-stretch:92%;
  font-size:clamp(1.02rem,.9rem + .5vw,1.3rem);
  line-height:1.12;letter-spacing:-.018em;
}
.bridge__bank--to{background:var(--green);border-color:var(--green);color:var(--paper);}
.bridge__bank--to .mono-label{color:rgba(243,242,239,.7);}

.bridge__span{position:relative;padding-top:1.7rem;}
/* the deck: the line the loads carry */
.bridge__deck{
  position:absolute;left:0;right:0;top:1.7rem;
  height:1px;background:var(--ink);
}
.bridge__piers{
  display:grid;grid-template-columns:repeat(4,1fr);
  height:100%;
}
.bridge__piers li{
  position:relative;
  padding:1.15rem .85rem 1.25rem;
  border-right:1px dashed var(--hair);
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:.5rem;
}
.bridge__piers li:last-child{border-right:0;}
/* pier stem rising to the deck */
.bridge__piers li::before{
  content:"";position:absolute;left:50%;top:0;
  width:1px;height:1.15rem;
  background:var(--red);
  transform-origin:top;
}
.bridge__piers li::after{
  content:"";position:absolute;left:calc(50% - 2.5px);top:-2.5px;
  width:5px;height:5px;background:var(--red);
}
.bridge__piers p{
  font-family:var(--ff-struct);
  font-weight:500;font-stretch:98%;
  font-size:.95rem;line-height:1.22;letter-spacing:-.01em;
}
.bridge__piers .mono-label{font-size:.6rem;color:var(--red);}

/* One orchestrated load-in: the piers rise, then the deck draws across.
   The BASE state is the finished diagram — the .arm class is what collapses
   it. So if the script never runs, or the renderer is throttled, or the
   class is never removed, the drawing still reads complete and correct.
   Never hide content behind a trigger that might not fire. */
.bridge__deck{transform-origin:left;}
.bridge__piers li::before{transform-origin:top;}

@media (prefers-reduced-motion:no-preference){
  .bridge__deck{transition:transform .9s var(--e) .45s;}
  .bridge__piers li::before{transition:transform .45s var(--e);}
  .bridge__piers li::after{transition:opacity .3s var(--e) .3s;}
  .bridge__piers li:nth-child(1)::before{transition-delay:.05s;}
  .bridge__piers li:nth-child(2)::before{transition-delay:.15s;}
  .bridge__piers li:nth-child(3)::before{transition-delay:.25s;}
  .bridge__piers li:nth-child(4)::before{transition-delay:.35s;}

  .bridge.arm .bridge__deck{transform:scaleX(0);}
  .bridge.arm .bridge__piers li::before{transform:scaleY(0);}
  .bridge.arm .bridge__piers li::after{opacity:0;}
}

/* Her verbatim belief, with the red-pen mark */
.creed{
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:clamp(1.75rem,4vw,2.25rem);
  border-top:1px solid var(--hair);
  max-width:44ch;
}
.creed p{
  font-family:var(--ff-read);
  font-weight:300;
  font-size:clamp(1.3rem,1rem + 1.5vw,2rem);
  line-height:1.28;letter-spacing:-.014em;
}
.creed mark{
  background:none;color:var(--ink);
  border-bottom:2px solid var(--red);
  padding-bottom:1px;
}
.creed cite{
  display:block;margin-top:1.1rem;
  font-family:var(--ff-mono);font-style:normal;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding-block:clamp(3rem,7vw,5.5rem);}
.sec--tint{background:var(--paper-tint);border-block:1px solid var(--hair);}
.sec--ink{background:var(--ink);color:var(--paper);}

/* ---------- Capability matrix ---------- */
.matrix-scroll{
  overflow-x:auto;
  margin-top:clamp(1.75rem,4vw,2.5rem);
  -webkit-overflow-scrolling:touch;
}
.matrix{
  width:100%;min-width:680px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.matrix thead th{
  text-align:left;
  font-family:var(--ff-mono);font-weight:500;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
  padding:0 1.25rem .6rem 0;
  border-bottom:1px solid var(--ink);
}
.matrix tbody th{
  text-align:left;
  font-family:var(--ff-struct);
  font-weight:600;font-stretch:94%;
  font-size:1.02rem;line-height:1.25;letter-spacing:-.014em;
  width:28%;
  padding:1.15rem 1.25rem 1.15rem 0;
  vertical-align:top;
}
.matrix tbody td{
  font-size:.95rem;color:var(--ink-2);line-height:1.55;
  padding:1.15rem 1.25rem 1.15rem 0;
  vertical-align:top;
}
.matrix tbody td:last-child{
  font-family:var(--ff-mono);
  font-size:.72rem;line-height:1.75;
  color:var(--ink-3);
  width:26%;padding-right:0;
}
.matrix tbody tr{border-bottom:1px solid var(--hair-soft);}
.matrix tbody tr:last-child{border-bottom:1px solid var(--hair);}
.matrix tbody tr:hover th{color:var(--green);}

/* ---------- Sequence path ---------- */
.path{
  display:grid;grid-template-columns:repeat(5,1fr);
  margin-top:clamp(2rem,5vw,3rem);
  border-top:1px solid rgba(243,242,239,.42);
}
.path__stage{
  padding:1.4rem 1.1rem 1.6rem 0;
  border-right:1px solid rgba(243,242,239,.18);
  position:relative;
}
.path__stage:last-child{border-right:0;}
/* progress ticks along the top rule */
.path__stage::before{
  content:"";position:absolute;left:0;top:-1px;
  width:100%;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e);
}
.path__stage:hover::before{transform:scaleX(1);}
.path__no{
  font-family:var(--ff-mono);
  font-size:.7rem;letter-spacing:.1em;
  color:var(--red);
  display:block;margin-bottom:1.1rem;
}
.path__stage h3{
  font-family:var(--ff-struct);
  font-weight:600;font-stretch:94%;
  font-size:clamp(.98rem,.9rem + .35vw,1.15rem);
  line-height:1.18;letter-spacing:-.016em;
  margin-bottom:.55rem;
}
.path__stage p{
  font-size:.9rem;line-height:1.55;
  color:rgba(243,242,239,.66);
}


/* ==========================================================================
   DELIVERY ARC — a Gantt in the page's own hairline vocabulary.
   24 indicative weeks; overlap is the point being made.
   ========================================================================== */
.arc{margin-top:clamp(1.75rem,4vw,2.5rem);}
.arc__rows{display:grid;gap:.5rem;}
.arc__row{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1.25rem;align-items:center;}
.arc__head{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;}
.arc__label{
  font-family:var(--ff-struct);
  font-weight:500;font-stretch:98%;
  font-size:.96rem;letter-spacing:-.012em;line-height:1.2;
}
.arc__weeks{
  font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:.05em;
  color:var(--ink-3);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.arc__track{
  display:grid;grid-template-columns:repeat(24,1fr);
  height:1.6rem;
  border-left:1px solid var(--hair);
  border-right:1px solid var(--hair);
  background-image:repeating-linear-gradient(
    90deg,var(--hair-soft) 0 1px,transparent 1px calc(100% / 6));
}
.arc__bar{
  grid-column:var(--s) / var(--e);
  align-self:center;
  height:.72rem;
  background:var(--green);
  border:1px solid var(--green-deep);
}
.arc__bar--key{background:var(--ink);border-color:var(--ink);height:.95rem;}
/* handover is deliberately open-ended, so the bar is drawn open */
.arc__bar--open{
  background:repeating-linear-gradient(
    135deg,var(--green) 0 3px,transparent 3px 6px);
  border:1px dashed var(--green);
}
.arc__ruler{
  position:relative;
  margin-left:16.25rem;
  height:1.5rem;
  border-top:1px solid var(--ink);
  margin-top:.5rem;
}
.arc__ruler span{
  position:absolute;top:.3rem;
  left:calc((var(--s) - 1) / 24 * 100%);
  transform:translateX(-50%);
  font-family:var(--ff-mono);
  font-size:.62rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.arc__ruler span::before{
  content:"";position:absolute;left:50%;top:-.55rem;
  width:1px;height:.35rem;background:var(--ink);
}
.arc__note{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-top:1.75rem;padding-top:1rem;
  border-top:1px solid var(--hair);
  font-size:.93rem;color:var(--ink-2);
  max-width:70ch;
}
.arc__note .mono-label{color:var(--red);flex:none;}

/* ==========================================================================
   SERVICE MAP — 2x2 positioning
   ========================================================================== */
.map{margin-top:clamp(1.75rem,4vw,2.5rem);}
.map__axis{
  font-family:var(--ff-mono);
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.map__axis--top{margin-bottom:.45rem;}
.map__axis--bottom{margin-top:.45rem;text-align:right;}

.map__grid{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--ink);
}
.map__q{
  padding:clamp(1.1rem,2.4vw,1.75rem);
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  transition:background .3s var(--e);
}
.map__q:nth-child(2n){border-right:0;}
.map__q:nth-child(n+3){border-bottom:0;}
.map__q:hover{background:var(--paper-tint);}
.sec--tint .map__q:hover{background:var(--paper);}
.map__q-name{
  display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--ff-struct);
  font-weight:600;font-stretch:94%;
  font-size:1.08rem;letter-spacing:-.016em;
  padding-bottom:.7rem;margin-bottom:.85rem;
  border-bottom:1px solid var(--hair);
}
.map__q-name .mono-label{color:var(--red);}
.map__q li{
  font-size:.94rem;color:var(--ink-2);line-height:1.5;
  padding:.32rem 0 .32rem .9rem;
  position:relative;
}
.map__q li::before{
  content:"";position:absolute;left:0;top:.72rem;
  width:.3rem;height:.3rem;background:var(--green);
}
.map__axis-x{
  display:flex;align-items:center;gap:.75rem;
  margin-top:.75rem;
  font-family:var(--ff-mono);
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.map__axis-x-rule{flex:1;height:1px;background:var(--hair);}

.schedule__lead{margin-top:clamp(2.25rem,5vw,3.25rem);}

/* ---------- Schedule of services ---------- */
.schedule{margin-top:clamp(1.75rem,4vw,2.5rem);}
.group + .group{margin-top:2.5rem;}
.group__head{
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  font-family:var(--ff-struct);
  font-weight:600;font-stretch:94%;
  font-size:1.15rem;letter-spacing:-.016em;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--hair);
}
.group__head .mono-label{color:var(--red);}
.group ul{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(1.5rem,3vw,2.5rem);
}
.group li{
  padding:1.15rem 0;
  border-bottom:1px solid var(--hair-soft);
}
.group li h4{
  font-family:var(--ff-struct);
  font-weight:500;font-stretch:98%;
  font-size:1.02rem;line-height:1.24;letter-spacing:-.012em;
  margin-bottom:.4rem;
  transition:color .25s var(--e);
}
.group li:hover h4{color:var(--green);}
.group li p{font-size:.93rem;color:var(--ink-2);line-height:1.55;}

/* ---------- Counterparts ---------- */
.counter{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
  margin-top:clamp(1.75rem,4vw,2.5rem);
}
.counter__head{margin-top:0;}
.counter__list{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--hair);
}
.counter__list li{
  font-family:var(--ff-struct);
  font-weight:500;font-stretch:98%;
  font-size:1.02rem;letter-spacing:-.012em;
  padding:.85rem .5rem .85rem 0;
  border-bottom:1px solid var(--hair);
  display:flex;align-items:baseline;gap:.6rem;
}
.counter__list li::before{
  content:"";width:.34rem;height:.34rem;
  background:var(--green);flex:none;
  transform:translateY(-.22rem);
}

.refs{margin-top:3.5rem;}
.refs__list{margin-top:1.5rem;display:grid;gap:1.75rem;}
.refs__list blockquote{
  font-family:var(--ff-read);font-size:1.15rem;
  line-height:1.45;max-width:52ch;
}
.refs__list cite{
  display:block;margin-top:.7rem;
  font-family:var(--ff-mono);font-style:normal;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ==========================================================================
   ENGAGE
   ========================================================================== */
.engage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
  margin-top:clamp(1.75rem,4vw,2.5rem);
}
.contact{margin-top:2.25rem;border-top:1px solid var(--hair);}
.contact > div{
  display:grid;grid-template-columns:7rem 1fr;
  gap:1rem;align-items:baseline;
  padding:.85rem 0;
  border-bottom:1px solid var(--hair);
}
.contact dt{
  font-family:var(--ff-mono);
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}
.contact dd{font-family:var(--ff-mono);font-size:.85rem;}
.contact dd a{border-bottom:1px solid var(--hair);transition:border-color .25s,color .25s;}
.contact dd a:hover{color:var(--green);border-bottom-color:var(--green);}

/* Intake form — reads as a form on a document, not a floating card */
.intake{
  border:1px solid var(--ink);
  padding:clamp(1.25rem,3vw,2rem);
  background:var(--paper);
}
.intake__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.7rem;margin-bottom:1.5rem;
  border-bottom:1px solid var(--ink);
}
.intake__ref{color:var(--red);}

.f{margin-bottom:1.15rem;}
.f label{
  display:block;
  font-family:var(--ff-mono);
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:.4rem;
}
.f input,.f select,.f textarea{
  width:100%;
  background:transparent;
  border:0;border-bottom:1px solid var(--hair);
  border-radius:0;
  padding:.55rem 0;
  font-family:var(--ff-read);font-size:1rem;
  transition:border-color .25s var(--e);
  -webkit-appearance:none;appearance:none;
}
.f textarea{resize:vertical;min-height:5.5rem;line-height:1.55;}
.f select{
  font-family:var(--ff-read);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px),calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:1.5rem;
}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-bottom-color:var(--ink);
}
.f__err{
  display:block;
  font-family:var(--ff-mono);font-size:.65rem;
  letter-spacing:.04em;color:var(--red);
  margin-top:.3rem;min-height:1em;
}
.f.bad input,.f.bad select,.f.bad textarea{border-bottom-color:var(--red);}

.intake__note{
  font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:.04em;
  color:var(--ink-3);
  margin-top:.9rem;
}
.intake__note.ok{color:var(--green);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  border-top:1px solid var(--ink);
  padding-block:clamp(2.25rem,5vw,3.25rem) 1.5rem;
}
.foot__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(1.75rem,4vw,3rem);
}
.foot__name{
  font-family:var(--ff-struct);
  font-weight:700;font-stretch:88%;
  font-size:1.3rem;letter-spacing:-.02em;
}
.foot__role{
  font-family:var(--ff-mono);
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
  margin-top:.35rem;
}
.foot__grid nav,.foot__grid > div:last-child{
  display:flex;flex-direction:column;gap:.42rem;
}
.foot__grid .mono-label{margin-bottom:.5rem;}
.foot__grid nav a,.foot__grid > div:last-child a{
  font-family:var(--ff-mono);font-size:.75rem;
  color:var(--ink-2);width:fit-content;
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.foot__grid nav a:hover,.foot__grid > div:last-child a:hover{
  color:var(--ink);border-bottom-color:var(--ink);
}
.foot__rule{
  margin-top:clamp(2rem,4vw,2.75rem);
  padding-top:1rem;
  border-top:1px solid var(--hair);
  font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:.08em;
  color:var(--ink-3);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .doc-nav{display:none;}
  .doc-head__cta{display:none;}
  .toggle{display:block;}
  .path{grid-template-columns:repeat(2,1fr);}
  .path__stage{
    padding-right:1rem;
    border-bottom:1px solid rgba(243,242,239,.18);
  }
  .path__stage:nth-child(2n){border-right:0;}
  .path__stage:last-child{border-bottom:0;}
}

@media (max-width:860px){
  .title-block{grid-template-columns:repeat(2,1fr);}
  .title-block > div:nth-child(3){border-left:0;padding-left:0;}
  .title-block > div:nth-child(n+3){border-top:1px solid var(--hair);}

  .open__cols{grid-template-columns:1fr;align-items:start;}


  /* bridge becomes a vertical run — the deck turns into a spine */
  .bridge{grid-template-columns:1fr;}
  .bridge__span{padding-top:0;padding-left:1.6rem;}
  .bridge__deck{
    left:0;right:auto;top:0;bottom:0;
    width:1px;height:auto;
  }
  .bridge__piers{grid-template-columns:1fr;}
  .bridge__piers li{
    border-right:0;
    border-bottom:1px dashed var(--hair);
    padding:1rem 0 1rem .35rem;
  }
  .bridge__piers li::before{
    left:-1.6rem;top:1.55rem;
    width:1.25rem;height:1px;
  }
  .bridge__piers li::after{left:calc(-1.6rem - 2px);top:calc(1.55rem - 2px);}
  .bridge__deck{transform-origin:top;}
  .bridge.arm .bridge__deck{transform:scaleY(0);}
  .bridge__piers li::before{transform-origin:left;}
  .bridge.arm .bridge__piers li::before{transform:scaleX(0);}
  .bridge__bank{border-left-width:1px;}


  /* arc: label above the bar */
  .arc__row{grid-template-columns:1fr;gap:.3rem;}
  .arc__ruler{margin-left:0;}
  .arc__note{flex-direction:column;gap:.35rem;}

  /* map: stack to a single column, axes read as labels */
  .map__grid{grid-template-columns:1fr;}
  .map__q{border-right:0;border-bottom:1px solid var(--hair);}
  .map__q:nth-child(2n){border-right:0;}
  .map__q:nth-child(n+3){border-bottom:1px solid var(--hair);}
  .map__q:last-child{border-bottom:0;}
  .map__axis--bottom{text-align:left;}

  .principal{grid-template-columns:1fr;gap:.75rem;}

  /* Hero stacks: she sits between the headline and the lede, sized so she
     does not push the call to action off the first screen. */
  .open__top{grid-template-columns:1fr;gap:1.5rem;align-items:start;}
  .plate--hero{max-width:300px;}
  .plate--hero .plate__frame{aspect-ratio:4/3.9;}
  /* single column: nothing sits to her left, so the side scrim would only
     eat into her face. Keep the foot fade so she still resolves downward. */
  .plate__fade--left{display:none;}
  .plate__fade--foot{height:26%;}
  .counter{grid-template-columns:1fr;}
  .engage{grid-template-columns:1fr;}
  .group ul{grid-template-columns:1fr;}
  .foot__grid{grid-template-columns:1fr 1fr;}
  .foot__grid > div:first-child{grid-column:1 / -1;}
}

@media (max-width:560px){
  .path{grid-template-columns:1fr;}
  .path__stage{border-right:0;}
  .counter__list{grid-template-columns:1fr;}
  .btn{width:100%;}
  .open__actions{flex-direction:column;}
  .contact > div{grid-template-columns:1fr;gap:.2rem;}
  .title-block{grid-template-columns:1fr;}
  .title-block > div{border-left:0;padding-left:0;}
  .title-block > div + div{border-top:1px solid var(--hair);}
}

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