:root{
  --amber:#E8A547;
  --amber-dk:#B87C2C;
  --amber-lt:#F5D29A;
  --gold:#D4925B;
  --coral:#FF8C69;
  --cream:#FBF8F3;
  --cream-2:#F6F0E5;
  --earth:#3A2F1E;
  --earth-soft:#5F4F35;
  --storm-1:#241D12;
  --storm-2:#2E2617;
  --storm-3:#3B3120;

  --font-h:'Unna',Georgia,serif;
  --font-b:'Lato',-apple-system,'Helvetica Neue',sans-serif;
  --fs-base:18px;

  --sec-y:clamp(50px,6.6vw,68px);
  --max:1140px;
  --hdr-h:88px;
  --rain:repeating-linear-gradient(101deg,rgba(255,242,222,.055) 0 1px,transparent 1px 8px);
}
@media (max-width:768px){ :root{--hdr-h:74px} }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding-bottom:0;
  background:var(--cream);color:var(--earth);
  font-family:var(--font-b);font-size:var(--fs-base);line-height:1.72;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:400;line-height:1.14;text-wrap:balance;margin:0 0 .5em;letter-spacing:-.002em}
p{text-wrap:pretty;margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,5vw,34px)}

/* canopy-shaped buttons, no hover hop */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--font-b);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:15px 30px;border-radius:24px 24px 5px 5px;
  transition:background-color .38s cubic-bezier(.22,.9,.3,1),color .38s,box-shadow .38s}
.btn-p{background:var(--amber);color:#2B2213;box-shadow:0 10px 26px -14px rgba(120,78,20,.6)}
.btn-p:hover,.btn-p:focus-visible{background:var(--coral);color:#2B2213;box-shadow:0 14px 32px -14px rgba(170,80,45,.6)}
.btn-l{background:transparent;color:var(--amber-lt);box-shadow:inset 0 0 0 1.5px rgba(245,210,154,.42)}
.btn-l:hover,.btn-l:focus-visible{background:var(--amber);color:#2B2213;box-shadow:inset 0 0 0 1.5px var(--amber)}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px}

/* ---------- nav ---------- */
/* The header rides over the photograph at rest and turns to cream on scroll,
   so the hero image runs full-bleed to the top edge of the page. */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,248,243,0);
  transition:background-color .4s,box-shadow .4s}
/* fully opaque: the header now scrolls over near-black storm sections, and any
   alpha lets their text ghost through it */
.hdr.solid{background:var(--cream);box-shadow:0 1px 0 rgba(58,47,30,.10),0 8px 22px -20px rgba(36,29,18,.7)}
.hdr-in{display:flex;align-items:center;gap:22px;min-height:var(--hdr-h)}
/* The hero is a high-key frame, so the header keeps its dark ink at every
   scroll position - the photograph is lightened beneath it rather than dimmed. */
.hdr .brand b,.hdr .nav-l>li>a,.hdr .hdr-tel{color:var(--earth)}
.hdr .brand span{color:var(--earth);opacity:.66}
.hdr .burger i{background:var(--earth)}
.brand{text-decoration:none;flex:0 1 auto;min-width:0;line-height:1.1}
.brand b{display:block;font-family:var(--font-h);font-size:1.22rem;font-weight:400;letter-spacing:0}
.brand span{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;opacity:.6;font-weight:700;margin-top:2px}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav-l{display:flex;align-items:center;gap:23px;list-style:none;margin:0;padding:0}
.nav-l>li{position:relative}
.nav-l>li>a{text-decoration:none;font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:9px 0;display:inline-block;position:relative}
.nav-l>li>a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;background:var(--amber);transition:right .38s cubic-bezier(.22,.9,.3,1)}
.nav-l>li>a:hover::after,.nav-l>li:focus-within>a::after{right:0}
.has-d>a::before{content:"";display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:7px;vertical-align:2px;opacity:.48}
.dd{position:absolute;top:calc(100% + 6px);left:-16px;min-width:240px;background:var(--cream);border-radius:16px 16px 8px 8px;box-shadow:0 22px 46px -22px rgba(58,47,30,.4),0 0 0 1px rgba(58,47,30,.07);padding:9px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .26s,transform .26s,visibility .26s}
.has-d:hover .dd,.has-d:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;text-decoration:none;font-size:.88rem;padding:9px 13px;border-radius:9px;transition:background-color .24s,color .24s}
.dd a:hover,.dd a:focus-visible{background:var(--cream-2);color:var(--amber-dk)}
.hdr-tel{font-size:.85rem;font-weight:700;text-decoration:none;white-space:nowrap}
.hdr-tel:hover{color:var(--amber-dk)}
.hdr-cta{padding:11px 18px;font-size:.78rem}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px;margin-left:auto}
.burger i{display:block;height:1.8px;background:var(--earth);margin:5px 0;transition:transform .34s,opacity .28s}
.burger.on i:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ---------- arcs ---------- */
.arc{display:block;width:100%;height:clamp(34px,4.6vw,62px);position:relative;z-index:2;margin-bottom:-1px}
.arc.up{height:clamp(52px,7.4vw,104px)}

/* ---------- HERO : the photograph is the ground, type set into it ---------- */
.hero{position:relative;overflow:hidden;background:var(--storm-3);
  margin-top:calc(-1 * var(--hdr-h));
  min-height:clamp(600px,80vh,760px);
  display:grid;align-items:center;
  padding:calc(var(--hdr-h) + clamp(58px,6vw,78px)) 0 clamp(88px,10vw,122px)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture{display:block;width:100%;height:100%}
/* Dim + grade on the IMAGE, not with a flat wash. brightness() scales all three
   channels uniformly, so HSV saturation ((max-min)/max) is untouched – the photo
   darkens without going grey. saturate() then pushes the coral / teal / gold
   bokeh that the old flat scrim was flattening into one brown. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:saturate(1.24) contrast(1.02) brightness(1.03)}
/* This frame is HIGH-KEY: the type zone (52-88% across) measures a mean 247/255
   with a 5th-percentile floor of 217. So the copy is set in dark ink and the
   photograph is LIGHTENED where glyphs fall - never dimmed. Nothing here darkens
   the image at all, which is why it reads as daylight rather than dusk. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(101deg,
      rgba(254,250,243,0) 0%,
      rgba(254,250,243,0) 41%,
      rgba(254,250,243,.26) 47%,
      rgba(253,248,240,.50) 53%,
      rgba(253,248,240,.58) 62%,
      rgba(253,248,240,.57) 84%,
      rgba(253,248,240,.44) 100%),
    linear-gradient(180deg,rgba(253,248,240,.66) 0%,rgba(253,248,240,.50) 8%,rgba(253,248,240,.22) 16%,rgba(253,248,240,.05) 25%,rgba(253,248,240,0) 34%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero-tx{margin-left:auto;max-width:31.5rem;text-align:left}
.hero h1{font-size:clamp(2.28rem,5.1vw,3.78rem);margin-bottom:.36em;letter-spacing:-.012em;color:var(--earth);
  text-shadow:0 1px 18px rgba(255,252,246,.8)}
.hero h1 em{font-style:italic;color:#96601C}
.hero-sub{font-family:var(--font-h);font-style:italic;font-size:clamp(1.18rem,2.25vw,1.62rem);line-height:1.32;margin:0 0 16px;max-width:26ch;color:#5A4A31;
  text-shadow:0 1px 14px rgba(255,252,246,.85)}
.hero-geo{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:#8A5A18;margin:0 0 1.9em;
  text-shadow:0 1px 10px rgba(255,252,246,.9)}
.hero .btn{padding:17px 36px;font-size:1rem;box-shadow:0 12px 30px -12px rgba(120,78,20,.55),0 0 0 1px rgba(150,96,28,.32)}
/* single-line geo only where there is room for it */
@media (min-width:901px){ .hero-geo{white-space:nowrap} }
/* the photograph's own bottom edge hangs down as the first canopy */
.hero-arc{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(46px,6.2vw,92px);display:block;z-index:3;pointer-events:none}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amber);color:#2B2213;
  font-weight:700;font-size:.9rem;padding:11px 18px;border-radius:0 0 12px 12px;text-decoration:none;
  transition:top .24s cubic-bezier(.22,.9,.3,1)}
.skip:focus{top:0}

/* ---------- STORM SEQUENCE ---------- */
.storm{position:relative;color:#E9DFCD}
.storm::before{content:"";position:absolute;inset:0;background:var(--rain);pointer-events:none}
.storm h2{color:#FBF2E1;font-size:clamp(1.86rem,4.1vw,2.86rem)}
.storm p{color:#DBCFBA}
.s-in{position:relative;margin-inline:auto;padding-block:var(--sec-y)}

.s1{background:var(--storm-3)}
.s1 .s-in{max-width:630px}
.s2{background:var(--storm-2)}
.s3{background:var(--storm-2)}
.s4{background:var(--storm-1)}

/* s2 : the sunrise pierces the canopy */
.s2 .s-in{max-width:980px}
.s2-fig{position:relative;margin:0 0 clamp(26px,3.6vw,40px)}
.s2-fig img{width:100%;height:clamp(230px,30vw,346px);object-fit:cover;border-radius:50% 50% 14px 14px / 34% 34% 14px 14px;box-shadow:0 30px 62px -28px rgba(0,0,0,.8)}
.s2-fig::after{content:"";position:absolute;inset:-14px -14px auto -14px;height:calc(100% + 14px);border-radius:50% 50% 18px 18px / 34% 34% 18px 18px;border:1.5px solid rgba(232,165,71,.34);border-bottom:0;pointer-events:none}
.s2-tx{max-width:640px;margin-inline:auto}
.s2 .lead{font-family:var(--font-h);font-size:clamp(1.3rem,2.5vw,1.72rem);line-height:1.28;color:var(--amber-lt);margin-bottom:.7em}

/* s3 : fog – arcs dissolve */
.s3{position:relative;overflow:hidden}
.s3 .s-in{max-width:600px;text-align:center}
.s3::after{content:"";position:absolute;left:50%;top:-30%;transform:translateX(-50%);
  width:min(1000px,120vw);height:150%;filter:blur(58px);pointer-events:none;
  background:radial-gradient(50% 40% at 50% 40%,rgba(214,202,180,.3),transparent 68%),
             radial-gradient(60% 30% at 50% 74%,rgba(180,168,146,.24),transparent 70%)}
.s3 h2,.s3 p{position:relative;z-index:1}
.s3 p:nth-of-type(2){opacity:.9}
.s3 p:nth-of-type(3){opacity:.88}
.s3 .fogline{display:block;height:1px;max-width:220px;margin:26px auto 0;background:linear-gradient(90deg,transparent,rgba(232,220,198,.4),transparent);filter:blur(1px)}

/* s4 : inheritance – three nested arcs, tightening */
.s4{position:relative;overflow:hidden}
.s4 .s-in{max-width:590px;padding-top:calc(var(--sec-y) + 18px)}
.s4-echo{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:min(940px,112vw);height:340px;pointer-events:none}
.s4-echo span{position:absolute;left:50%;transform:translateX(-50%);border:1.5px solid rgba(232,165,71,.4);border-bottom:0;border-radius:50% 50% 0 0 / 100% 100% 0 0}
.s4-echo span:nth-child(1){width:100%;height:300px;top:0;opacity:.24}
.s4-echo span:nth-child(2){width:70%;height:216px;top:52px;opacity:.4}
.s4-echo span:nth-child(3){width:42%;height:138px;top:104px;opacity:.62}
.s4 .brave{font-family:var(--font-h);font-size:clamp(1.2rem,2.3vw,1.52rem);line-height:1.36;color:var(--amber-lt)}

/* ---------- BRIDGE : THE INVERSION ---------- */
.bridge{background:linear-gradient(178deg,#FDF7EB 0%,#FAF2E2 44%,#FBF8F3 100%);position:relative;overflow:hidden}
.bridge::before{content:"";position:absolute;left:50%;top:-16%;transform:translateX(-50%);
  width:min(1360px,140vw);height:74%;pointer-events:none;
  background:radial-gradient(50% 76% at 50% 8%,rgba(232,165,71,.32),transparent 70%)}
.br-in{position:relative;padding:clamp(14px,2.4vw,26px) 0 var(--sec-y)}
.br-fig{margin:0 0 clamp(30px,4vw,46px);position:relative}
.br-fig img{width:100%;height:clamp(258px,33vw,406px);object-fit:cover;object-position:center 40%;
  border-radius:14px 14px 50% 50% / 14px 14px 30% 30%;
  box-shadow:0 34px 70px -32px rgba(96,60,18,.5)}
.br-fig::after{content:"";position:absolute;inset:auto -14px -14px -14px;height:calc(100% + 14px);
  border-radius:18px 18px 50% 50% / 18px 18px 30% 30%;border:1.5px solid rgba(212,146,91,.4);border-top:0;pointer-events:none}
.br-tx{max-width:680px;margin-inline:auto;text-align:center}
.br-tx h2{font-size:clamp(2rem,4.4vw,3.05rem)}
.br-tx .kick{font-family:var(--font-h);font-size:clamp(1.24rem,2.4vw,1.62rem);line-height:1.3;margin-bottom:.72em}
.br-tx .beside{font-family:var(--font-h);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.78rem);line-height:1.3;color:var(--amber-dk);margin-top:.9em}
.br-how{max-width:720px;margin:clamp(34px,4.4vw,50px) auto 0;text-align:center;padding-top:clamp(26px,3.4vw,36px);position:relative}
.br-how::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(340px,72%);height:1px;background:linear-gradient(90deg,transparent,rgba(212,146,91,.55),transparent)}
.br-how h3{font-size:clamp(1.5rem,2.9vw,2rem)}
.br-cred{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:1.15em 0 1.35em;padding:0;list-style:none}
.br-cred li{font-size:.77rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 15px;border-radius:999px;background:rgba(232,165,71,.2);color:var(--earth-soft)}
.br-ask{font-family:var(--font-h);font-style:italic;font-size:clamp(1.2rem,2.3vw,1.5rem);color:var(--amber-dk);margin-bottom:1.1em}
.btn-o{background:transparent;color:var(--earth);box-shadow:inset 0 0 0 1.5px rgba(58,47,30,.32)}
.btn-o:hover,.btn-o:focus-visible{background:var(--earth);color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--earth)}

/* ---------- OUTCOMES : widening arcs ---------- */
.out{background:var(--cream);text-align:center;position:relative;overflow:hidden}
.out h2{font-size:clamp(1.94rem,4vw,2.78rem)}
.out .o-lead{font-family:var(--font-h);font-size:clamp(1.28rem,2.5vw,1.68rem);line-height:1.3;color:var(--amber-dk);margin-bottom:.44em}
.out .o-sub{color:var(--earth-soft);margin-bottom:2em}
.o-stack{list-style:none;margin:0 auto 2.1em;padding:0;display:grid;gap:12px;max-width:900px}
.o-stack li{
  margin-inline:auto;padding:19px clamp(20px,3vw,34px);
  font-size:1.005rem;line-height:1.56;color:var(--earth);
  border-radius:40% 40% 12px 12px / 30px 30px 12px 12px;
  transition:background-color .4s}
.o-stack li:nth-child(1){width:min(100%,540px);background:rgba(232,165,71,.11)}
.o-stack li:nth-child(2){width:min(100%,650px);background:rgba(232,165,71,.16)}
.o-stack li:nth-child(3){width:min(100%,760px);background:rgba(232,165,71,.22)}
.o-stack li:nth-child(4){width:min(100%,870px);background:rgba(232,165,71,.3);font-weight:600}
.o-stack li:hover{background:rgba(255,140,105,.22)}
.out .o-close{max-width:640px;margin-inline:auto;color:var(--earth-soft)}

/* ---------- BIO : letter with inset portrait ---------- */
.bio{background:var(--cream-2)}
.bio-in{max-width:840px;margin-inline:auto}
.bio h2{font-size:clamp(2rem,4.2vw,2.86rem);font-style:italic;margin-bottom:.42em}
/* Rachelle's headshot, pre-cropped square and set into the text column. Never
   graded or duotoned – the natural skin tone is the human moment on the page. */
.ph{
  float:left;width:clamp(158px,22vw,218px);height:auto;aspect-ratio:1;object-fit:cover;
  margin:6px 32px 18px 0;
  shape-outside:circle(50%);shape-margin:15px;border-radius:50%;
  box-shadow:0 22px 46px -24px rgba(96,62,18,.5),0 0 0 9px rgba(232,165,71,.14)}
.bio .pull{
  clear:left;font-family:var(--font-h);font-size:clamp(1.7rem,4.1vw,2.66rem);line-height:1.12;
  color:var(--amber-dk);margin:.7em 0;letter-spacing:-.012em}
.bio-cred{clear:both;margin:1.6em 0 0;padding:1.3em 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(58,47,30,.13)}
.bio-cred li{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--earth-soft);background:rgba(232,165,71,.17);padding:6px 13px;border-radius:999px}

/* ---------- SERVICES : overlapping canopy panels ---------- */
.svc{background:var(--cream);overflow:hidden}
.svc h2{font-size:clamp(1.94rem,4vw,2.78rem);text-align:center;margin-bottom:1em}
.svc-row{display:flex;justify-content:center;align-items:flex-end;max-width:960px;margin-inline:auto}
.svc-i{
  flex:1 1 0;min-width:0;text-decoration:none;position:relative;
  padding:clamp(30px,4vw,44px) clamp(16px,2vw,26px) clamp(24px,3vw,34px);
  border-radius:50% 50% 14px 14px / 78px 78px 14px 14px;
  text-align:center;
  transition:background-color .45s cubic-bezier(.22,.9,.3,1),box-shadow .45s,z-index 0s}
.svc-i:nth-child(1){background:#F3E3C6;margin-right:-28px;padding-bottom:clamp(34px,4.4vw,48px);z-index:1}
.svc-i:nth-child(2){background:#EBD0A2;z-index:3;transform:translateY(-22px);padding-bottom:clamp(46px,5.4vw,62px);box-shadow:0 22px 46px -26px rgba(120,78,20,.5)}
.svc-i:nth-child(3){background:#E3BE84;margin-left:-28px;padding-bottom:clamp(34px,4.4vw,48px);z-index:2}
.svc-i:hover,.svc-i:focus-visible{z-index:5}
.svc-i:nth-child(1):hover,.svc-i:nth-child(1):focus-visible{background:#F7EAD3}
.svc-i:nth-child(2):hover,.svc-i:nth-child(2):focus-visible{background:#F2DDB8}
.svc-i:nth-child(3):hover,.svc-i:nth-child(3):focus-visible{background:#EACD9C}
.svc-i svg{width:44px;height:44px;margin:0 auto 14px;stroke:#6E5326;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.svc-i h3{font-size:clamp(1.1rem,2.1vw,1.36rem);color:var(--earth);margin-bottom:.3em;line-height:1.14}
.svc-more{font-size:.73rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#7A5A26;display:inline-flex;align-items:center;gap:7px}
.svc-more::after{content:"";width:14px;height:1.5px;background:currentColor;transition:width .38s cubic-bezier(.22,.9,.3,1)}
.svc-i:hover .svc-more::after,.svc-i:focus-visible .svc-more::after{width:26px}

/* ---------- FINAL CTA : form under the last canopy ---------- */
.fin{position:relative;color:#FFF6E8;overflow:hidden;padding:clamp(56px,7.4vw,84px) 0 clamp(52px,7vw,76px)}
.fin-bg{position:absolute;inset:0;z-index:0}
.fin-bg img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
.fin-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(178deg,rgba(40,26,8,.80) 0%,rgba(52,32,10,.58) 40%,rgba(70,42,12,.32) 72%,rgba(34,21,6,.74) 100%)}
.fin-in{position:relative;z-index:1;text-align:center}
.fin h2{color:#FFF7E9;font-size:clamp(2.1rem,4.6vw,3.15rem)}
.fin-tx{max-width:640px;margin:0 auto clamp(32px,4vw,44px)}
.fin-tx p{color:#F2E5D1}
.fin-panel{
  max-width:560px;margin-inline:auto;
  background:rgba(30,19,6,.62);
  border-radius:50% 50% 18px 18px / 96px 96px 18px 18px;
  padding:clamp(46px,5.6vw,64px) clamp(22px,3.2vw,34px) clamp(26px,3.4vw,34px);
  box-shadow:0 0 0 1px rgba(255,232,196,.22),0 34px 68px -32px rgba(0,0,0,.66);
  text-align:left}
.fin-panel h3{font-size:clamp(1.34rem,2.5vw,1.68rem);color:#FFF7E9;text-align:center;margin-bottom:.7em}
.fg{margin-bottom:12px}
.fg label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#E6D2B1;margin-bottom:6px}
.fg input,.fg textarea{
  width:100%;font-family:var(--font-b);font-size:.96rem;color:#FFF7E9;
  background:rgba(255,246,232,.08);border:1px solid rgba(255,232,196,.28);
  border-radius:11px;padding:12px 14px;transition:border-color .3s,background-color .3s}
.fg textarea{min-height:94px;resize:vertical}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,240,218,.4)}
.fg input:focus,.fg textarea:focus{outline:none;border-color:var(--amber);background:rgba(255,246,232,.13)}
.fin-panel .btn{width:100%;margin-top:7px}
.fin-reach{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin-top:clamp(26px,3.4vw,34px)}
.fin-reach a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#FFF4E1;font-weight:700;font-size:1.03rem;transition:color .3s}
.fin-reach a:hover{color:var(--amber-lt)}
.fin-reach svg{width:17px;height:17px;stroke:var(--amber);fill:none;stroke-width:1.7;flex:0 0 auto}

/* ---------- footer ---------- */
.ft{background:var(--storm-1);color:#D6CBB6;padding:42px 0 24px}
.ft-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.ft-brand{font-family:var(--font-h);font-size:1.24rem;color:#F7EFE1}
.ft-soc{display:flex;gap:11px}
.ft-soc a{width:34px;height:34px;border-radius:50%;display:grid;place-content:center;background:rgba(247,239,225,.09);transition:background-color .3s}
.ft-soc a:hover{background:var(--amber)}
.ft-soc svg{width:16px;height:16px;fill:#F1E8D8;transition:fill .3s}
.ft-soc a:hover svg{fill:#241D12}
.ft-legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:9px 20px;align-items:center}
.ft-legal a{font-size:.79rem;text-decoration:none;opacity:.76;transition:opacity .3s}
.ft-legal a:hover{opacity:1;text-decoration:underline}
.ft-cr{width:100%;font-size:.77rem;opacity:.6;padding-top:17px;margin-top:3px;border-top:1px solid rgba(247,239,225,.12)}

/* ---------- reveal (3 max) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.22,.9,.3,1),transform 1s cubic-bezier(.22,.9,.3,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

.anno{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(36,29,18,.94);color:#F0E5D2;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:7px 16px;display:flex;justify-content:space-between;gap:14px;backdrop-filter:blur(6px);overflow:hidden}
.anno span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  :root{--fs-base:17.5px}
  .nav-l{gap:17px}
  .nav{gap:15px}
  .nav-l>li>a{font-size:.76rem}
  .svc-row{max-width:720px}
  .svc-i:nth-child(1){margin-right:-18px}
  .svc-i:nth-child(3){margin-left:-18px}
  .hero{min-height:clamp(512px,72vh,628px)}
  .hero-tx{max-width:30rem}
}
/* below ~900px she sits centre-frame, so the type centres over her and the
   scrim turns vertical instead of side-to-side */
@media (max-width:900px){
  /* she gets the top of the frame; the type sits in the dark lower half so it
     never lands on her face */
  .hero{align-items:end;min-height:clamp(596px,86vh,716px);
        padding:calc(var(--hdr-h) + clamp(130px,32vw,216px)) 0 clamp(60px,7.5vw,84px)}
  .hero-bg img{object-position:center 18%;filter:saturate(1.28) contrast(1.06) brightness(1)}
  /* vertical scrim on phones: she keeps the top of the frame at full colour,
     the type sits in the deep band below her */
  .hero-bg::after{background:
    linear-gradient(180deg,
      rgba(253,248,240,.70) 0%,
      rgba(253,248,240,.52) 8%,
      rgba(253,248,240,.16) 16%,
      rgba(253,248,240,.02) 26%,
      rgba(253,248,240,.10) 33%,
      rgba(253,248,240,.52) 41%,
      rgba(253,248,240,.74) 49%,
      rgba(253,248,240,.78) 60%,
      rgba(253,248,240,.76) 100%)}
  .hero-tx{margin-inline:auto;text-align:center;max-width:32rem}
  .hero-sub{margin-inline:auto}
  .hero h1{font-size:clamp(2.16rem,7.2vw,3rem)}
}
@media (max-width:768px){
  .burger{display:block}
  .nav{
    position:fixed;inset:66px 0 0 auto;width:min(340px,88vw);
    background:var(--cream);flex-direction:column;align-items:stretch;gap:0;
    padding:20px clamp(20px,5vw,26px) 34px;overflow-y:auto;
    transform:translateX(105%);transition:transform .42s cubic-bezier(.22,.9,.3,1);
    box-shadow:-16px 0 44px -22px rgba(58,47,30,.5);margin-left:0}
  .nav.open{transform:none}
  .nav-l{flex-direction:column;align-items:stretch;gap:0;width:100%}
  /* the drawer is cream, so drawer links must stay dark even while the header
     itself is still in its light-on-photo state */
  .hdr .nav .nav-l>li>a,.hdr .nav .hdr-tel,.hdr.solid .nav .nav-l>li>a{color:var(--earth)}
  .nav-l>li>a{display:block;padding:13px 0;font-size:.92rem;min-height:46px;
    display:flex;align-items:center;border-bottom:1px solid rgba(58,47,30,.09)}
  .dd a{min-height:44px;display:flex;align-items:center}
  .nav-l>li>a::after{display:none}
  /* the link is a flex row here, so floats are ignored – push the chevron to
     the trailing edge with auto margin instead */
  .has-d>a::before{float:none;order:2;margin:0 2px 0 auto}
  .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:var(--cream-2);border-radius:10px;margin:7px 0 9px;padding:5px}
  .hdr-tel{margin-top:18px;font-size:1rem}
  .hdr-cta{margin-top:12px;width:100%}
  /* header stays transparent over the photo at rest here too – it only turns
     cream once .solid is set on scroll (see base rule) */
  /* canopy panels stack */
  .svc-row{flex-direction:column;align-items:stretch;gap:16px;max-width:440px}
  .svc-i:nth-child(1),.svc-i:nth-child(2),.svc-i:nth-child(3){margin:0;transform:none;padding-bottom:clamp(24px,3vw,32px)}
  .ph{float:none;margin:0 auto 22px;shape-outside:none;width:clamp(168px,46vw,212px)}
  .bio-in{text-align:center}
  .bio-cred{justify-content:center}
  .fin-bg::after{background:linear-gradient(180deg,rgba(40,26,8,.82) 0%,rgba(52,32,10,.8) 56%,rgba(70,42,12,.8) 100%)}
}
@media (max-width:400px){
  /* the touch-a11y floor pushes the tagline to 14px, so the lockup has to be
     allowed to shrink and wrap or it shoves the burger off-screen at 320px */
  .brand b{font-size:1.04rem}
  .hdr-in{gap:10px}
}
@media (max-width:480px){
  :root{--sec-y:44px}
  .btn{padding:14px 22px;width:100%}
  .hero .btn{padding:15px 22px;font-size:.94rem}
  .hero-geo{letter-spacing:.14em;font-size:.75rem}
  .o-stack li{border-radius:26px 26px 12px 12px}
  .fin-panel{border-radius:38px 38px 16px 16px;padding-top:34px}
  .ft-legal{margin-left:0;width:100%}
}
/* touch a11y */
@media (hover:none) and (pointer:coarse){
  .hero,.fin{background-attachment:scroll}
  .brand span,.svc-more,.fg label,.ft-legal a,.ft-cr,.bio-cred li,.br-cred li,.hero-geo,.ph em{font-size:.88rem!important;letter-spacing:.09em}
  .anno{font-size:.62rem!important}
  .ft-cr{font-size:.88rem!important}
}

/* ================= FULL-VIBRANCE HERO RESET =================
   The photograph is served exactly as shot: no filter, no overlay of any kind.
   The header is its own cream bar above it rather than riding over it, and each
   variant below solves legibility with structure instead of by dimming pixels. */
.hdr{background:var(--cream);box-shadow:0 1px 0 rgba(58,47,30,.09)}
.hdr .brand b,.hdr .nav-l>li>a,.hdr .hdr-tel{color:var(--earth)}
.hdr .brand span{color:var(--earth);opacity:.66}
.hdr .burger i{background:var(--earth)}
.hero{margin-top:0}
.hero-bg img{filter:none}
.hero-bg::after{content:none;background:none}
@media (max-width:900px){ .hero-bg::after{content:none;background:none} }

/* ---- V1 "Glass canopy": the copy sits on a frosted cream card shaped like the
   canopy. Everything outside the card is the untouched photograph. ---- */
.hero{position:relative;overflow:hidden;background:var(--storm-3);
  min-height:clamp(600px,82vh,780px);display:grid;align-items:center;
  padding:clamp(52px,6vw,74px) 0 clamp(84px,9vw,116px)}
.hero-bg img{object-position:center 30%}
.hero-in{position:relative;z-index:2;width:100%}
.hero-tx{margin-left:auto;max-width:34rem;text-align:left;
  background:rgba(253,249,242,.80);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08);
  border-radius:88px 88px 20px 20px / 54px 54px 20px 20px;
  padding:clamp(34px,4vw,50px) clamp(28px,3.4vw,44px) clamp(30px,3.4vw,42px);
  box-shadow:0 30px 70px -30px rgba(76,46,12,.5),0 0 0 1px rgba(255,255,255,.5) inset}
.hero h1{color:var(--earth);text-shadow:none;font-size:clamp(2.1rem,4.4vw,3.3rem)}
.hero h1 em{color:#8E5A17}
.hero-sub{color:#5A4A31;text-shadow:none}
.hero-geo{color:#7E5216;text-shadow:none}
@media (max-width:900px){
  /* card drops to the lower half so her face stays clear above it */
  .hero{align-items:end;min-height:clamp(654px,94vh,812px);
        padding:clamp(148px,33vw,214px) 0 clamp(48px,6vw,66px)}
  .hero-bg img{object-position:center 14%}
  .hero-tx{margin-inline:auto;text-align:center;max-width:32rem;
    border-radius:64px 64px 18px 18px / 40px 40px 18px 18px;
    padding:clamp(26px,4vw,36px) clamp(20px,4vw,30px) clamp(24px,3.4vw,32px)}
  .hero-sub{margin-inline:auto}
}


/* ---------- brand lockup (supplied artwork) ---------- */
.brand{display:flex;align-items:center;flex:0 1 auto;min-width:0;text-decoration:none}
/* Brand guidance: size the lockup by WIDTH, not height, and use the header file
   (credential line removed) on headers taller than ~64px. */
.brand img{display:block;width:clamp(206px,20vw,288px);height:auto;max-width:100%}
.ft-logo{display:block;width:clamp(210px,19vw,268px);height:auto;flex:0 0 auto}

/* ---------- header fit: the wider lockup needs more room for the nav ---------- */
.hdr .container{max-width:1320px}
.hdr-in{gap:18px;flex-wrap:nowrap}
.nav{gap:18px}
.nav-l{gap:19px}
.nav-l>li>a{font-size:.78rem;letter-spacing:.065em;white-space:nowrap}
.hdr-tel,.hdr-cta{white-space:nowrap}
.hdr-cta{padding:11px 17px}
@media (max-width:1120px){
  .nav-l{gap:15px}
  .nav-l>li>a{font-size:.74rem;letter-spacing:.05em}
  .brand img{width:clamp(206px,18vw,244px)}
}
@media (max-width:768px){ .hdr .container{max-width:var(--max)} .hdr-in{flex-wrap:wrap} }

/* ---------- curved spacers now carry the rain ----------
   Previously each spacer was a flat two-colour SVG, so where it met a storm
   section the background jumped from "colour + rain lines" to "colour, no
   lines". The spacer is now a masked div: both of its colour regions paint the
   same --rain texture as the sections they join, so the texture is continuous
   across the curve. */
.arc{position:relative;display:block;width:100%;height:clamp(34px,4.6vw,62px);
  z-index:2;margin-bottom:-1px;overflow:hidden;
  background-color:var(--arc-lo);background-image:var(--arc-lo-tex,none)}
.arc::before{content:"";position:absolute;inset:0;
  background-color:var(--arc-up);background-image:var(--arc-up-tex,none);
  -webkit-mask-image:var(--arc-mask);mask-image:var(--arc-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.arc.up{height:clamp(52px,7.4vw,104px)}
/* the hero's own canopy edge: dark shape over the photograph, textured to match s1 */
.hero-arc{position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:clamp(46px,6.2vw,92px);z-index:3;pointer-events:none;background:none}
.hero-arc::before{content:"";position:absolute;inset:0;
  background-color:#3B3120;background-image:var(--rain);
  -webkit-mask-image:var(--arc-mask);mask-image:var(--arc-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.arc-a::before{-webkit-mask-image:url('../images/arc-mask-1.svg');mask-image:url('../images/arc-mask-1.svg')}
.arc-b::before{-webkit-mask-image:url('../images/arc-mask-2.svg');mask-image:url('../images/arc-mask-2.svg')}
.arc-c::before{-webkit-mask-image:url('../images/arc-mask-3.svg');mask-image:url('../images/arc-mask-3.svg')}
.arc-u::before{-webkit-mask-image:url('../images/arc-mask-4.svg');mask-image:url('../images/arc-mask-4.svg')}
.hero-arc::before{-webkit-mask-image:url('../images/arc-mask-5.svg');mask-image:url('../images/arc-mask-5.svg')}

/* new sun-led lockup: ratio 5.05, min 180px wide, sized by width per brand notes */
.brand img{width:clamp(214px,21vw,300px)}
.ft-logo{width:clamp(216px,20vw,286px)}

/* refined lockup: ratio 5.50 (was 5.05), so nudge the width up to keep the same
   optical weight in the 88px header band */
.brand img{width:clamp(216px,22vw,312px)}
.ft-logo{width:clamp(220px,21vw,296px)}

/* Card grows to the RIGHT: the hero's container is widened so the card's right
   edge moves out toward the viewport edge, and the card's max-width grows by the
   same amount so its left edge stays put and never creeps back over her. */
.hero .container{max-width:1400px}
.hero-tx{max-width:min(42rem,100%)}
@media (max-width:1360px){ .hero-tx{max-width:min(38rem,100%)} }
@media (max-width:900px){ .hero .container{max-width:var(--max)} .hero-tx{max-width:32rem} }

/* ============ HERO: image fills the fold exactly ============
   The hero is sized to the measured viewport budget, and the canopy arc is moved
   BELOW the fold (top:100%) instead of sitting over the image's bottom 89px. The
   photograph is extended down behind the arc so the dome still composites over
   it. Net effect: ~130px more clean image, and the brown storm band no longer
   appears above the fold at all. */
:root{--arc-h:clamp(46px,6.2vw,92px)}
.hero{height:calc(100vh - var(--fold-off, 121px));
      height:calc(100svh - var(--fold-off, 121px));
      min-height:0;overflow:visible}
.hero-bg{position:absolute;top:0;left:0;right:0;bottom:calc(-1 * var(--arc-h));
      z-index:0;overflow:hidden}
.hero-arc{top:100%;bottom:auto;height:var(--arc-h)}

/* ============ CARD: pushed right, tighter right padding ============ */
.hero .container{max-width:1464px;padding-inline:24px}
.hero-tx{max-width:min(35rem,100%);
      padding:clamp(32px,3.6vw,46px) clamp(22px,2.4vw,32px) clamp(28px,3.2vw,40px) clamp(28px,3.4vw,44px)}
@media (max-width:1360px){ .hero-tx{max-width:min(33rem,100%)} }
@media (max-width:900px){
  .hero .container{max-width:var(--max);padding-inline:clamp(20px,5vw,34px)}
  .hero-tx{max-width:32rem}
}

/* ============ HEADER: nav links centred in the bar ============
   Three-column grid so the links sit dead centre regardless of how wide the
   lockup or the action group happen to be. */
@media (min-width:769px){
  .hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
  .nav{display:contents}
  .nav-l{justify-self:center}
  .hdr-act{display:flex;align-items:center;gap:16px;justify-self:end}
}
@media (max-width:768px){
  .hdr-in{display:flex}
  .hdr-act{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%}
}

/* ============ HEADER ACTIONS: one joined "call or book" control ============
   The phone and the CTA were reading as two unrelated items sharing a corner.
   They are now a single segmented object: an outlined call segment fused flush
   to the filled amber booking segment, both sharing the canopy corner radius,
   divided by a hairline. Hovering warms only the half you are on. The divider is
   an inset shadow on the call segment's trailing edge - not a border-left. */
@media (min-width:769px){
  .hdr-act{display:flex;align-items:stretch;gap:0;
    border-radius:24px 24px 5px 5px;overflow:hidden;isolation:isolate}
  .hdr-act .hdr-tel{display:flex;align-items:center;gap:9px;
    padding:0 17px 0 15px;margin:0;white-space:nowrap;
    font-size:.83rem;font-weight:700;letter-spacing:.005em;color:var(--earth);
    border-radius:24px 0 0 5px;
    box-shadow:inset 0 0 0 1.5px rgba(58,47,30,.20);
    transition:background-color .34s cubic-bezier(.22,.9,.3,1),box-shadow .34s,color .34s}
  .hdr-act .hdr-tel svg{width:15px;height:15px;flex:0 0 auto;
    fill:none;stroke:var(--amber-dk);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
    transition:stroke .34s}
  .hdr-act .hdr-tel:hover,.hdr-act .hdr-tel:focus-visible{
    background:rgba(232,165,71,.16);color:var(--earth);
    box-shadow:inset 0 0 0 1.5px rgba(184,124,44,.42)}
  .hdr-act .hdr-tel:hover svg{stroke:#96601C}
  .hdr-act .hdr-cta{border-radius:0 24px 5px 0;box-shadow:none;padding:12px 19px}
  .hdr-act .hdr-cta:hover,.hdr-act .hdr-cta:focus-visible{box-shadow:none}
}
/* stacked and separate inside the mobile drawer */
@media (max-width:768px){
  .hdr-act .hdr-tel{display:inline-flex;align-items:center;gap:9px}
  .hdr-act .hdr-tel svg{width:16px;height:16px;fill:none;stroke:var(--amber-dk);stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
}

/* ============ HERO CARD TYPOGRAPHY AUDIT ============
   Findings and fixes:

   1. SCALE WAS INCOHERENT. Measured 52.8 / 25.9 / 16 / 12.2px - ratios of
      2.04, 1.62, 1.31. No shared step. Rebuilt on a 1.333 (perfect fourth)
      scale anchored to the headline so every size is a real interval of the
      one below: 52.8 / 29.7 / 16.5 / 12.5. The subhead gains 15%, which is the
      brand promise line and was reading undersized against the headline.

   2. RHYTHM WAS FLAT. Gaps measured 19.0 / 21.3 / 23.1px - near-uniform, so the
      four blocks read as a list instead of a hierarchy. They are actually three
      groups: headline, [subhead + geography], action. Gaps now 16 / 11 / 30 so
      the qualifier binds to the subhead and the CTA separates.

   3. PHANTOM LEADING. The geography line and the button both inherited the 1.72
      body line-height, adding ~9px of dead space above and below a single line
      of tracked caps and inflating the button. Both set to 1.25.

   4. OPTICAL PADDING WAS INVERTED. 46px top vs 40px bottom - but the headline's
      half-leading and cap-height add ~11px of visual air at the top, while the
      button is a hard-edged block flush to the bottom. Perceived 57 vs 40.
      Now 36 top / 48 bottom, which reads even.

   5. TWO NEAR-IDENTICAL AMBERS. The italic accent (#8E5A17) and the geography
      line (#7E5216) were different by a hair, reading as an error rather than a
      step. Now a deliberate two-step relationship. The geography line stays
      darker than the brand's #A86B2E on purpose: at 12.5px bold on this
      translucent card, #A86B2E measures ~3.8:1 and fails AA. */
.hero-tx{padding:clamp(26px,3vw,36px) clamp(24px,2.6vw,34px) clamp(34px,3.6vw,48px) clamp(28px,3.4vw,42px)}
.hero h1{margin-bottom:clamp(12px,1.2vw,16px)}
.hero h1 em{color:#9A6318}
.hero-sub{font-size:clamp(1.22rem,2.55vw,1.855rem);line-height:1.28;letter-spacing:-.004em;
  margin:0 0 clamp(8px,.85vw,11px);max-width:24ch}
.hero-geo{font-size:clamp(.74rem,.9vw,.78rem);line-height:1.25;letter-spacing:.115em;
  color:#7E5216;margin:0 0 clamp(22px,2.2vw,30px)}
.hero .btn{font-size:clamp(.95rem,1.2vw,1.042rem);line-height:1.25;padding:16px 30px}

/* One fluid base, every other size derived from it, so the 1.333 intervals hold
   at ALL widths instead of only at the top of each clamp. Independent clamps
   drifted to 1.78 / 1.93 / 1.30 by 1280px. Steps used: geo(0) cta(1) sub(3) h1(5). */
@media (min-width:901px){
  .hero-tx{--t:clamp(.72rem,.867vw,.78rem)}
  .hero-geo{font-size:var(--t)}
  .hero .btn{font-size:calc(var(--t) * 1.333)}
  .hero-sub{font-size:calc(var(--t) * 2.371)}
  .hero h1{font-size:calc(var(--t) * 4.214)}
}
/* Below 901 the touch-accessibility floor lifts the geography line to 14.08px,
   which compresses the top of the scale - display type has to shed intervals on
   a phone anyway. Kept monotonic rather than pretending the chain still holds. */
@media (max-width:900px){
  .hero .btn{font-size:clamp(1.06rem,4.2vw,1.12rem)}
  .hero-sub{font-size:clamp(1.28rem,5vw,1.42rem)}
}

/* ============ HEADER: fixed bar + constant spacer ============
   A sticky header that shrinks also shrinks its slot in normal flow, so every
   pixel it loses yanks the rest of the page upward mid-scroll. The bar is now
   fixed and a constant-height spacer holds its place, so compressing it has zero
   layout consequence and the fold budget never moves. */
.hdr{position:fixed;top:0;left:0;right:0}
.hdr-spacer{height:var(--hdr-h);flex:none}

/* Warm ground rather than a flat cream slab: a dawn wash that lifts toward the
   top, plus a soft sun-bloom sitting under the lockup so the bar reads as lit by
   the mark itself. The rule beneath is amber, not neutral grey. */
.hdr{
  background:
    radial-gradient(56% 150% at 7% 46%, rgba(232,165,71,.15), rgba(232,165,71,0) 62%),
    linear-gradient(180deg,#FDFBF7 0%,#FBF8F3 58%,#F8F2E7 100%);
  box-shadow:0 1px 0 rgba(184,124,44,.16);
  transition:box-shadow .42s cubic-bezier(.22,.9,.3,1), background-size .42s cubic-bezier(.22,.9,.3,1);
  will-change:box-shadow}
.hdr.solid{
  background:
    radial-gradient(46% 130% at 6% 46%, rgba(232,165,71,.11), rgba(232,165,71,0) 62%),
    linear-gradient(180deg,#FCF9F4 0%,#FAF6EF 100%);
  box-shadow:0 1px 0 rgba(184,124,44,.26), 0 10px 26px -18px rgba(76,48,14,.42)}

/* ---- compression ---- */
:root{--hdr-h-sm:60px}
@media (max-width:768px){ :root{--hdr-h-sm:56px} }
.hdr-in{min-height:var(--hdr-h);
  transition:min-height .42s cubic-bezier(.22,.9,.3,1)}
.hdr.solid .hdr-in{min-height:var(--hdr-h-sm)}
.brand img{transition:width .42s cubic-bezier(.22,.9,.3,1)}
.hdr.solid .brand img{width:clamp(178px,17vw,232px)}
.hdr-act .hdr-tel,.hdr-act .hdr-cta{
  transition:background-color .34s cubic-bezier(.22,.9,.3,1),box-shadow .34s,color .34s,
             padding .42s cubic-bezier(.22,.9,.3,1),font-size .42s cubic-bezier(.22,.9,.3,1)}
@media (min-width:769px){
  .hdr.solid .hdr-act .hdr-tel{padding:0 14px 0 12px;font-size:.79rem}
  .hdr.solid .hdr-act .hdr-cta{padding:10px 16px;font-size:.75rem}
  .nav-l>li>a{transition:color .38s,font-size .42s cubic-bezier(.22,.9,.3,1)}
  .hdr.solid .nav-l>li>a{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .hdr,.hdr-in,.brand img,.hdr-act .hdr-tel,.hdr-act .hdr-cta,.nav-l>li>a{transition:none}
}
/* the drawer must start below the bar at whatever height it currently is */
@media (max-width:768px){ .nav{top:var(--hdr-h);inset-block-start:var(--hdr-h)} }

/* Lift her in the frame. With plain cover there were only 65px of vertical
   travel left in the file, so the image is also scaled ~16% wider than the band
   to create room to move within. Net: her eyes rise from 37% of the hero to
   ~15%, her crown clears the top edge by ~30px, and she reads as standing and
   looking back rather than sitting low under a lot of umbrella. */
@media (min-width:901px){
  /* max-width:none is required: the global img{max-width:100%} was capping the
     zoom back to the container width, so only the negative margin took effect
     and left a bare strip down the right edge. */
  .hero-bg img{width:116%;max-width:none;margin-left:-8%;object-position:center 55%}
}

/* 320px: the headline wraps to more lines there, pushing the card to 482px
   against 399px of room. Trim the display size and the hero's top padding so
   the card still clears. */
@media (max-width:400px){
  .hero{padding-top:clamp(104px,30vw,148px)}
  .hero h1{font-size:clamp(1.82rem,7.6vw,2.16rem)}
}

/* ---- header seam ----------------------------------------------------------
   The spacer holding the fixed bar's place was transparent, so while the bar
   expanded 60 -> 88px a band of plain body cream showed beneath it against the
   header's warmer ground. The spacer now paints the identical ground, and BOTH
   are locked to a --hdr-h tall box anchored top-left, so the two gradients form
   one continuous field at every frame. The scrolled state no longer swaps the
   background image either - an image swap cannot tween, so it popped. */
:root{--hdr-ground:
  radial-gradient(56% 150% at 7% 46%, rgba(232,165,71,.15), rgba(232,165,71,0) 62%),
  linear-gradient(180deg,#FDFBF7 0%,#FBF8F3 58%,#F8F2E7 100%)}
.hdr,.hdr-spacer{
  background-image:var(--hdr-ground);
  background-size:100% var(--hdr-h),100% var(--hdr-h);
  background-position:top left,top left;
  background-repeat:no-repeat,no-repeat;
  background-color:#FBF8F3}
.hdr.solid{background-image:var(--hdr-ground)}

/* ---- first storm headline --------------------------------------------------
   The canopy arc hangs below the hero (absolute; top:100%) and overlays the top
   ~79px of the section beneath. That section's padding was only 68px, so the
   dome was covering the first line of the headline. */
.s1 .s-in{padding-top:calc(var(--sec-y) + var(--arc-h))}

/* ---- footer: LinkedIn grouped with the legal links ---- */
.ft-meta{margin-left:auto;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.ft-legal{margin-left:0}
@media (max-width:768px){ .ft-meta{margin-left:0;width:100%} }

/* ================= FINAL CTA - REBUILT =================
   1. THE PHOTOGRAPH WAS BEING THROWN AWAY. A flat four-stop brown wash at up to
      .80 opacity covered the whole frame. Measured ungraded, this image is
      already dark exactly where copy belongs - lower field mean 65/255, left
      third mean 89 - while the sun band runs 193. The wash was destroying the
      sunbeams and the red umbrella to solve a problem that barely existed.
      Removed; the image now takes a positive grade and only the copy column
      gets a directional scrim.
   2. EVERYTHING WAS CENTRED AND STACKED, so the eye ran down the middle and the
      form read as an afterthought below the pitch. Now two columns, left-
      aligned, with the form as a card on the right - the same canopy card that
      opens the page, bookending it rather than adding a generic panel.
   3. THE FORM WAS DARK-ON-DARK over a photograph. A cream card gives the fields
      a guaranteed ground and means the image never has to be dimmed for them. */
.fin-bg img{filter:saturate(1.18) contrast(1.03) brightness(1.1)}
.fin-bg::after{
  background:
    linear-gradient(97deg,
      rgba(26,15,4,.72) 0%,
      rgba(26,15,4,.60) 26%,
      rgba(28,16,5,.34) 44%,
      rgba(30,18,6,.12) 58%,
      rgba(30,18,6,.06) 100%),
    linear-gradient(180deg,rgba(26,15,4,.30) 0%,rgba(26,15,4,0) 26%)}
.fin-in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,64px);
  align-items:center;text-align:left}
.fin-copy{min-width:0}
.fin h2{text-align:left;margin-bottom:.5em}
.fin-tx{max-width:34rem;margin:0 0 clamp(22px,2.6vw,30px)}
.fin-reach{justify-content:flex-start;gap:10px 26px;margin-top:0}
.fin-panel{
  max-width:none;margin:0 0 0 auto;width:min(100%,30rem);
  background:rgba(253,249,242,.93);
  -webkit-backdrop-filter:blur(14px) saturate(1.06);backdrop-filter:blur(14px) saturate(1.06);
  border-radius:88px 88px 20px 20px / 54px 54px 20px 20px;
  padding:clamp(30px,3.4vw,44px) clamp(24px,2.6vw,34px) clamp(26px,3vw,36px);
  box-shadow:0 30px 70px -30px rgba(50,30,8,.55),0 0 0 1px rgba(255,255,255,.45) inset;
  text-align:left}
.fin-panel h3{color:var(--earth);text-align:left;font-size:clamp(1.28rem,2.2vw,1.55rem);margin-bottom:.72em}
.fin-panel .fg label{color:var(--earth-soft);font-size:.72rem}
.fin-panel .fg input,.fin-panel .fg textarea{
  color:var(--earth);background:rgba(58,47,30,.05);border:1px solid rgba(58,47,30,.20)}
.fin-panel .fg input::placeholder,.fin-panel .fg textarea::placeholder{color:rgba(58,47,30,.44)}
.fin-panel .fg input:focus,.fin-panel .fg textarea:focus{
  border-color:var(--amber);background:rgba(232,165,71,.10)}
@media (max-width:900px){
  .fin-in{grid-template-columns:1fr;gap:30px}
  .fin-panel{margin:0;width:100%;border-radius:60px 60px 18px 18px / 38px 38px 18px 18px}
  .fin-bg::after{background:
    linear-gradient(180deg,rgba(26,15,4,.42) 0%,rgba(26,15,4,.30) 30%,rgba(26,15,4,.52) 70%,rgba(26,15,4,.62) 100%)}
}

/* The red umbrella - the image's subject and the copy's resolution ("you don't
   have to carry the heavy stuff anymore") - sits at 55-65% of the frame, which
   is exactly where the form card was landing. Rather than shove the photograph
   sideways, the section gets a wider container and the card is sized as a
   fraction of it, so the card's left edge always falls past 65% and the umbrella
   stays in clear space between the two columns at every width. */
.fin .container{max-width:1400px;padding-inline:clamp(30px,3.2vw,48px)}
.fin-in{grid-template-columns:minmax(0,1.9fr) minmax(320px,1fr)}
.fin-panel{width:100%;max-width:none}
.fin-tx{max-width:32rem}
@media (max-width:900px){
  .fin .container{max-width:var(--max);padding-inline:clamp(20px,5vw,34px)}
  .fin-in{grid-template-columns:1fr}
  .fin-tx{max-width:none}
}

/* Measured: the copy was failing at 2.76:1 because the sun glow bleeds further
   left than the raw band averages suggested. The darkening is now a pool over
   the copy column only - the umbrella, the field and the sunbeams keep the
   positive grade. Needed ~31% more attenuation to clear 4.5:1; delivered via a
   radial pool rather than a wider linear ramp so the bright half is untouched. */
.fin-bg img{filter:saturate(1.2) contrast(1.03) brightness(1.06)}
.fin-bg::after{
  background:
    radial-gradient(78% 96% at 14% 50%,
      rgba(22,12,3,.90) 0%, rgba(22,12,3,.86) 34%, rgba(22,12,3,.62) 56%,
      rgba(24,13,4,.24) 76%, rgba(24,13,4,0) 92%),
    linear-gradient(97deg, rgba(24,13,3,.44) 0%, rgba(24,13,3,.30) 32%,
      rgba(26,15,4,.10) 52%, rgba(26,15,4,.04) 100%),
    linear-gradient(180deg, rgba(24,13,3,.26) 0%, rgba(24,13,3,0) 24%)}
@media (max-width:900px){
  .fin-bg::after{background:
    linear-gradient(180deg, rgba(22,12,3,.72) 0%, rgba(22,12,3,.62) 26%,
      rgba(22,12,3,.58) 52%, rgba(22,12,3,.72) 78%, rgba(22,12,3,.80) 100%)}
}

/* ---- restore the photograph curving into the storm section ----
   When the canopy arc moved below the fold, the hero's background was left at
   z-index 0. .storm.s1 is position:relative with an opaque #3B3120 background
   and comes later in the DOM, so it painted straight over the 89px of
   photograph that extends beneath the hero. The arc's dome then drew #3B3120
   on top of an identical #3B3120 and vanished, leaving a flat horizontal cut.
   Lifting the hero background above the section restores the photo in that
   band, so the dome once again reads as the image's own curved bottom edge. */
.hero-bg{z-index:1}

/* ---- seamless hand-off into the storm section ----
   Two problems remained: the dome's mask edge was a hard cut, and at the far
   left/right the curve drops to within a few px of the section, so the photo
   met flat colour with no transition at all. Now (a) the mask is feathered with
   a vertical-only Gaussian so the curve dissolves rather than slices, and (b)
   the photograph itself fades to exactly the section colour across its last
   ~230px, so wherever the dome is thin the image has already resolved to
   #3B3120 and there is nothing left to form an edge. */
.hero-bg::before{content:"";position:absolute;left:0;right:0;bottom:0;height:230px;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(59,49,32,0) 0%,
    rgba(59,49,32,.10) 38%,
    rgba(59,49,32,.34) 62%,
    rgba(59,49,32,.72) 84%,
    rgba(59,49,32,.94) 95%,
    rgba(59,49,32,1) 100%)}
.hero-arc::before{-webkit-mask-image:url('../images/arc-mask-6.svg');mask-image:url('../images/arc-mask-6.svg')}

/* ================= B1: PALETTE GROUNDS =================
   The four narrative sections up to the bridge now sit on the brand primary and
   secondary instead of storm browns. Alternating P / S / S / P keeps the
   existing rhythm (s2 and s3 already shared a ground, so no divider sits
   between them).

   Everything that was tuned for light-on-dark has to invert:
   copy flips to Earth Shadow, the rain texture becomes dark lines rather than
   light ones, the fog haze becomes cream instead of grey, the echo arcs and
   image borders darken, and the hero's bottom fade has to resolve to the new
   s1 colour or the seamless hand-off reopens as a seam. */
:root{--rain:repeating-linear-gradient(101deg,rgba(58,47,30,.055) 0 1px,transparent 1px 8px)}
.s1{background:#E8A547}
.s2,.s3{background:#D4925B}
.s4{background:#E8A547}
.storm{color:#3A2F1E}
.storm h2{color:#2E2417}
.storm p{color:#3A2F1E}
.s2 .lead,.s4 .brave{color:#6B3A0E}
/* the warm ground carries less fade than the dark one did before the copy
   drops under 4.5:1, so the fog is expressed with a shallower ramp */
.s3 p:nth-of-type(2){opacity:.93}
.s3 p:nth-of-type(3){opacity:.94}

/* fog reads as light haze on a warm ground, not grey on brown */
.s3::after{background:
  radial-gradient(50% 40% at 50% 40%,rgba(255,251,243,.42),transparent 68%),
  radial-gradient(60% 30% at 50% 74%,rgba(255,248,236,.32),transparent 70%)}
.s3 .fogline{background:linear-gradient(90deg,transparent,rgba(58,47,30,.30),transparent)}

/* echo arcs + the sunrise frame need dark strokes now */
.s4-echo span{border-color:rgba(58,47,30,.26)}
.s2-fig::after{border-color:rgba(58,47,30,.28)}
.s2-fig img{box-shadow:0 30px 62px -28px rgba(70,40,10,.45)}

/* the hero's bottom fade must resolve to the new first-section colour, or the
   seamless hand-off built above reopens as a hard line */
.hero-bg::before{background:linear-gradient(180deg,
  rgba(232,165,71,0) 0%, rgba(232,165,71,.10) 38%, rgba(232,165,71,.34) 62%,
  rgba(232,165,71,.72) 84%, rgba(232,165,71,.94) 95%, rgba(232,165,71,1) 100%)}
.hero-arc::before{background-color:#E8A547}

/* ================= CONTINUOUS FIELD =================
   The four sections no longer each carry a flat colour. They are wrapped in one
   element that holds a single gradient running Secondary -> Primary across the
   whole run, and the sections themselves are transparent - so there is no band
   edge anywhere, just one slow warm shift from #D4925B to #E8A547 over roughly
   2,400px of scroll.

   That removes the arcs' original job (they were colour hand-offs, and a colour
   hand-off is invisible inside a continuous field). Rather than delete the
   canopy motif, each arc keeps its curve but expresses it as a soft shadow that
   fades out downward - the shape still reads, the field stays unbroken. */
.storm-run{background:linear-gradient(180deg,#D4925B 0%,#DC9C51 34%,#E29F4C 68%,#E8A547 100%)}
.storm-run .storm{background:transparent}
.storm-run .arc{background-color:transparent;background-image:none}
.storm-run .arc::before{
  background-color:transparent;
  background-image:linear-gradient(180deg,rgba(58,47,30,.13) 0%,rgba(58,47,30,.05) 46%,rgba(58,47,30,0) 100%);
  -webkit-mask-image:url('../images/arc-mask-7.svg');mask-image:url('../images/arc-mask-7.svg')}

/* the hero now hands off to the run's STARTING colour, not its end */
.hero-bg::before{background:linear-gradient(180deg,
  rgba(212,146,91,0) 0%, rgba(212,146,91,.10) 38%, rgba(212,146,91,.34) 62%,
  rgba(212,146,91,.72) 84%, rgba(212,146,91,.94) 95%, rgba(212,146,91,1) 100%)}
.hero-arc::before{background-color:#D4925B}

/* s4 sits at the bright end of the ramp and its body copy measured 4.43:1.
   Deepening the copy rather than pulling back the palette endpoint. */
.storm-run .storm p{color:#342A16}

/* ================= BODY RUN: CLEANED UP =================
   Diagnosed four separate causes of the mess, not one:

   1. THE TEXTURE WAS THE SEAM. .storm::before painted the line pattern per
      SECTION with inset:0, so the repeating gradient's phase restarted at every
      section boundary, and the 62px arcs between sections carried no texture at
      all. Textured band / bare gap / textured band at a different phase, three
      times over. Removed outright - it was also simply too strong.

   2. THE FOG WAS A 58px GAUSSIAN. .s3::after was a blurred radial overlay, which
      is what read as "blurry" and sat badly against the seams. Removed; the fog
      is now carried entirely by the copy's progressive opacity, which is subtler
      and cannot interact with section edges.

   3. THE ARC DOMES DENTED THE GRADIENT. Inside a continuous field their only
      effect was a dark dip every few hundred pixels. Removed from the run; the
      canopy still frames the run at its entry (hero) and exit (bridge), which
      are the boundaries that mean something.

   4. THE RHYTHM WAS UNEVEN. Gaps between copy blocks measured 198 / 136 / 216px
      because two of the three joins carried a 62px arc and s4 had an extra 18px.
      Now a uniform 136px everywhere. */
.storm-run .storm::before{content:none;background:none}
.s3::after{content:none;background:none;filter:none}
.storm-run .arc{display:none}
.s4 .s-in{padding-top:var(--sec-y)}

/* a single clean two-stop ramp - no intermediate stops to drift off-line */
.storm-run{background:linear-gradient(180deg,#D4925B 0%,#E8A547 100%)}

/* crisper hand-off from the photograph: the 230px fade read as blur, so it is
   now ~130px with a steeper tail, and the canopy edge is feathered half as much */
.hero-bg::before{height:132px;background:linear-gradient(180deg,
  rgba(212,146,91,0) 0%, rgba(212,146,91,.16) 34%, rgba(212,146,91,.52) 64%,
  rgba(212,146,91,.86) 86%, rgba(212,146,91,1) 100%)}
.hero-arc::before{-webkit-mask-image:url('../images/arc-mask-8.svg');mask-image:url('../images/arc-mask-8.svg')}

/* 5. THE COPY WOBBLED. Measured left edges of 439 / 400 / 454 / 459 - four
      different measures, all centred, so every section started at a slightly
      different x. Invisible under the texture, obvious on a clean field. One
      shared 640px measure puts every block on the same left edge (400px), and
      s2 keeps its wider container for the image while its text still lands on
      that line.
   6. s3 WAS CENTRED while its neighbours were not - a leftover from the fog
      treatment that is now gone, and against the stated preference anyway. */
.s1 .s-in,.s3 .s-in,.s4 .s-in{max-width:708px}  /* 640 measure + the container's 2x34px padding */
.s2 .s2-tx{max-width:640px}
.s3 .s-in{text-align:left}
.s3 .fogline{margin-left:0;margin-right:auto}
/* the sunrise frame was the loudest object left on a now-quiet field */
.s2-fig::after{border-color:rgba(58,47,30,.16)}
.s2-fig img{box-shadow:0 22px 48px -26px rgba(70,40,10,.34)}

/* 7. The fogline hairline was the last blurred object in the run and, with the
      fog treatment gone, an orphaned decoration. Removed. */
.s3 .fogline{display:none}

/* The two arcs that bracket the run - the hero's canopy edge coming in, and the
   inversion arc going out to the bridge - were still painting the rain texture
   after it was stripped from the sections between them, so they were the only
   patterned surfaces left. Cleared. (The outgoing arc carries its texture via an
   inline custom property, so it needs the background-image set directly rather
   than the variable overridden.) */
.hero-arc::before{background-image:none}
.arc.up::before{background-image:none}

/* Crisp bottom edge. Both softeners removed: the 132px fade that dissolved the
   photograph into the section colour, and the feathered mask on the canopy.
   The image now ends on a clean curve straight into the body colour. */
.hero-bg::before{content:none;background:none}
.hero-arc::before{-webkit-mask-image:url('../images/arc-mask-9.svg');mask-image:url('../images/arc-mask-9.svg')}

/* s1's top padding was --sec-y + --arc-h, but --arc-h is not breathing room:
   it is the height of the hero's canopy, which overlays s1's first 89px and
   would clip the headline (the dome is now the same colour as the section top,
   so it hides text without looking like anything). Halving the TYPOGRAPHIC half
   only - the clear space below the curve goes 68px -> 34px while the headline
   still clears the arc. */
.s1 .s-in{padding-top:calc(var(--arc-h) + var(--sec-y) / 2)}

/* ============ BRIDGE: full-bleed plate, copy set ON it ============
   Was a centred figure with centred copy beneath. Now an Anel-style plate: the
   photograph runs edge to edge with convex arc lids top and bottom, and the
   copy sits on it in a left-aligned column. Nothing centred. */
.bridge{padding:0 0 var(--sec-y)}
.br-plate{position:relative;width:100%;overflow:hidden;isolation:isolate;
  min-height:clamp(470px,50vw,650px);display:grid;align-items:center;
  padding:clamp(74px,7.4vw,104px) 0}
.br-plate-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.br-plate-bg img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
.br-plate-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(74% 104% at 15% 50%, rgba(18,10,2,.88) 0%, rgba(18,10,2,.78) 38%,
      rgba(18,10,2,.42) 64%, rgba(20,11,3,0) 88%),
    linear-gradient(100deg, rgba(18,10,2,.52) 0%, rgba(18,10,2,.26) 46%, rgba(20,11,3,.05) 72%)}
.br-plate-in{position:relative;z-index:2;width:100%}
.br-tx{max-width:34rem;text-align:left;margin:0}
.bridge h2{color:#FFF8EC;text-align:left;font-size:clamp(1.96rem,4vw,3rem);margin-bottom:.42em}
.br-tx .kick{font-family:var(--font-h);font-size:clamp(1.16rem,2.1vw,1.5rem);line-height:1.34;
  color:#F7D9A4;margin:0 0 .72em}
.br-tx p{color:#F0E3D0}
.br-tx .beside{font-family:var(--font-h);font-style:italic;font-size:clamp(1.14rem,2vw,1.44rem);
  line-height:1.36;color:#F7D9A4;margin-top:.85em}
/* convex lids: both curve up in the middle, one continuous sweep */
.br-arc-top,.br-arc-bot{position:absolute;left:0;right:0;z-index:3;pointer-events:none;
  background:#FDF7EB;height:clamp(32px,4.2vw,58px);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.br-arc-top{top:0;-webkit-mask-image:url('../images/arc-mask-10.svg');mask-image:url('../images/arc-mask-10.svg')}
.br-arc-bot{bottom:0;background:#FBF8F3;-webkit-mask-image:url('../images/arc-mask-11.svg');mask-image:url('../images/arc-mask-11.svg')}

/* "How we'll weather it" - two columns, left-aligned, no centred prose */
.br-how{display:grid;grid-template-columns:1.45fr .85fr;gap:clamp(26px,4vw,64px);
  align-items:start;max-width:var(--max);margin:0 auto;text-align:left;
  padding-top:clamp(40px,4.8vw,66px)}
.br-how::before{content:none}
.br-how h3{text-align:left;font-size:clamp(1.46rem,2.8vw,1.95rem);margin-bottom:.55em}
.br-how-tx{max-width:40rem;min-width:0}
.br-side{min-width:0}
.br-cred{justify-content:flex-start;margin:0 0 1.15em;padding:0}
.br-ask{text-align:left;font-size:clamp(1.1rem,2vw,1.34rem);margin-bottom:1.05em}
@media (max-width:860px){ .br-how{grid-template-columns:1fr;gap:26px} }

/* ============ OUTCOMES: two columns, staggered reveal ============ */
.out{background:var(--cream-2);padding:var(--sec-y) 0;text-align:left}
.out-in{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(28px,4.6vw,72px);
  align-items:start;text-align:left;max-width:var(--max);margin:0 auto}
.out h2{text-align:left;margin-bottom:.42em}
.out .o-lead{text-align:left;margin-bottom:.8em}
.out .o-close{max-width:none;margin:0;text-align:left}
.out .o-sub{text-align:left;margin-bottom:1.1em}
.o-stack{display:grid;gap:12px;max-width:none;margin:0;opacity:1;transform:none;transition:none}
.o-stack li{width:auto;margin:0;border-radius:26px 26px 10px 10px / 18px 18px 10px 10px;
  padding:16px clamp(18px,2.2vw,26px);text-align:left;
  opacity:0;transform:translateY(14px);
  transition:opacity .72s cubic-bezier(.22,.9,.3,1),transform .72s cubic-bezier(.22,.9,.3,1),background-color .4s}
.o-stack.in li{opacity:1;transform:none}
.o-stack.in li:nth-child(1){transition-delay:.04s}
.o-stack.in li:nth-child(2){transition-delay:.17s}
.o-stack.in li:nth-child(3){transition-delay:.30s}
.o-stack.in li:nth-child(4){transition-delay:.43s}
@media (prefers-reduced-motion:reduce){
  .o-stack li{opacity:1;transform:none;transition:none}
}
@media (max-width:860px){ .out-in{grid-template-columns:1fr;gap:26px} }

/* ===== B3: CANOPY ARCH + PULL-QUOTE BAND =====
   Her portrait takes the canopy arch that runs through the whole page, set large
   beside the opening of the letter. Her signature line then breaks out of the
   column entirely as a full-width amber band with the same convex lids as the
   bridge plate, and the letter resumes underneath. The quote stops being a
   paragraph and becomes a section. */
.bio-arch{background:var(--cream-2);padding:var(--sec-y) 0 0}
.bio-arch-in{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4.4vw,68px);
  align-items:center;text-align:left}
.bio-arch-fig{margin:0;position:relative}
.bio-arch-fig img{width:100%;height:auto;display:block;
  border-radius:50% 50% 22px 22px / 38% 38% 22px 22px;
  box-shadow:0 30px 62px -30px rgba(96,62,18,.5)}
.bio-arch-fig::after{content:"";position:absolute;left:-13px;right:-13px;top:-13px;bottom:26px;
  border-radius:50% 50% 22px 22px / 38% 38% 22px 22px;
  border:1.5px solid rgba(212,146,91,.42);pointer-events:none}
.bio-arch-fig figcaption{margin-top:16px;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--earth-soft)}
.bio-arch-fig figcaption span{color:var(--amber-dk)}
.bio-arch h2{font-size:clamp(1.96rem,4vw,2.8rem);font-style:italic;margin-bottom:.44em;text-align:left}
.bio-arch-tx{min-width:0}
.bio-quote{position:relative;margin-top:clamp(40px,5vw,72px);
  background:linear-gradient(178deg,#E8A547 0%,#DE9A4E 100%);
  padding:clamp(64px,7vw,104px) 0}
.bio-quote-arc-top,.bio-quote-arc-bot{position:absolute;left:0;right:0;z-index:2;pointer-events:none;
  background:var(--cream-2);height:clamp(30px,4vw,54px);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.bio-quote-arc-top{top:0;-webkit-mask-image:url('../images/arc-mask-10.svg');mask-image:url('../images/arc-mask-10.svg')}
.bio-quote-arc-bot{bottom:0;-webkit-mask-image:url('../images/arc-mask-11.svg');mask-image:url('../images/arc-mask-11.svg')}
.bio-quote p{font-family:var(--font-h);font-size:clamp(1.9rem,4.6vw,3.35rem);line-height:1.12;
  letter-spacing:-.014em;color:#2E2417;max-width:20ch;margin:0;text-align:left}
.bio-arch-foot{padding-block:clamp(38px,4.4vw,60px) var(--sec-y);text-align:left}
.bio-arch-foot p{max-width:44rem;margin:0 0 1.4em}
.bio-arch-foot .bio-cred{margin:0;padding:1.2em 0 0;border-top:1px solid rgba(58,47,30,.14)}
@media (max-width:900px){
  .bio-arch-in{grid-template-columns:1fr;gap:26px}
  .bio-arch-fig{max-width:330px}
  .bio-quote p{max-width:none}
}

/* Footer: LinkedIn centred in the bar, legal links stay right. */
.ft-in{position:relative}
.ft-meta{margin-left:auto;gap:0}
.ft-meta .ft-soc{position:absolute;left:50%;top:calc(50% - 14px);transform:translate(-50%,-50%);margin:0}
@media (max-width:768px){
  .ft-meta{margin-left:0;width:100%;flex-direction:column;align-items:flex-start;gap:14px}
  .ft-meta .ft-soc{position:static;transform:none;top:auto;left:auto}
}

/* ===== B3 DIALLED IN =====
   It read as three blocks because it WAS three: the portrait column, the quote
   band and the closing each began at a different x (portrait-col left, text-col
   left, container left). Four changes make it one thing:

   1. ONE LEFT EDGE. The portrait moves to the right, so the headline, the intro,
      the quote and the closing all start on the container's left edge - a single
      unbroken column of copy the eye can follow straight down.
   2. ONE FIELD. The whole section is a single warm tint and the band's arc lids
      are that exact colour, so the amber reads as a swell in a continuous field
      rather than a stripe laid across three separate pieces.
   3. THE PORTRAIT BRIDGES THE JOIN. Its arch now hangs over the band's top edge,
      physically stitching the first two blocks together.
   4. TIGHTER. Gaps were 72 / 104 / 60px; now 22 / 66 / 32. */
.bio-arch{background:#F5E9D6;padding:var(--sec-y) 0 0}
.bio-arch-in{grid-template-columns:1.18fr .82fr;align-items:start;
  gap:clamp(26px,3.6vw,56px)}
.bio-arch-tx{padding-top:clamp(4px,1vw,14px)}
.bio-arch-fig{position:relative;z-index:3;justify-self:end;width:min(100%,23rem);
  margin-bottom:clamp(-96px,-7vw,-52px)}
.bio-arch-fig img{border-radius:50% 50% 20px 20px / 40% 40% 20px 20px}
.bio-arch-fig::after{border-radius:50% 50% 20px 20px / 40% 40% 20px 20px;bottom:32px}
.bio-arch-fig figcaption{margin-top:14px}
.bio-quote{margin-top:clamp(16px,2.2vw,26px);padding:clamp(52px,5.6vw,72px) 0}
.bio-quote-arc-top,.bio-quote-arc-bot{background:#F5E9D6}
.bio-quote p{max-width:22ch}
/* padding-BLOCK, not the shorthand: padding:x 0 y wipes .container's
   padding-inline and drops this block 34px left of the column above it */
.bio-arch-foot{padding-block:clamp(24px,3vw,36px) var(--sec-y)}
.bio-arch-foot p{max-width:44rem;margin:0 0 1.15em}
.bio-arch-foot .bio-cred{padding-top:1.05em}
@media (max-width:900px){
  .bio-arch-in{grid-template-columns:1fr;gap:22px}
  .bio-arch-fig{justify-self:start;width:min(100%,300px);margin-bottom:clamp(-64px,-9vw,-36px)}
  .bio-quote p{max-width:none}
}

/* The portrait now hangs over the band, which carries its caption onto amber.
   The old colours were tuned for the cream field and measured 2.93:1 and
   1.33:1 there (the LCSW span was amber-on-amber). Retuned for the new ground. */
.bio-arch-fig figcaption{color:#3A2F1E}
.bio-arch-fig figcaption span{color:#4E2A08}

/* The band sat 179px below the copy (412 on mobile) because the grid row was
   sized by the PORTRAIT, not the text - so all that emptiness opened up under
   the left column while we waited for the photograph to finish. On desktop the
   portrait now comes out of flow entirely: the row is sized by the copy, the
   band follows it immediately, and the photograph hangs down over the amber
   instead of holding the layout open. */
@media (min-width:901px){
  .bio-arch-in{position:relative}
  /* right: the container's own inline padding, not 0 - the figure's decorative
     outline extends 13px past its box and was pushing the page 13px wide at
     1024 and 901 when pinned to the padding edge. */
  .bio-arch-fig{position:absolute;top:0;right:clamp(20px,5vw,34px);margin:0;
    width:min(36%,21.5rem);justify-self:auto}
}
@media (max-width:900px){
  /* stacked: just tighten the overlap so the band still tucks under her */
  .bio-arch-fig{margin-bottom:clamp(-104px,-16vw,-56px)}
}

/* No frame behind the portrait - the arch shape of the photograph itself is
   already the motif; outlining it just added a second, weaker edge. */
.bio-arch-fig::after{content:none}

/* Tighter between the three beats. Gaps were 26 / 72 / 36; now 14 / 50 / 24,
   which closes ~46px without letting the portrait outrun the band it sits in. */
.bio-quote{margin-top:clamp(10px,1.2vw,14px);padding:clamp(38px,4vw,50px) 0}
.bio-arch-foot{padding-block:clamp(18px,2vw,24px) var(--sec-y)}
.bio-arch-fig figcaption{margin-top:11px}

/* The band shrinks with the viewport (vw padding) but the portrait was pinned
   near 21.5rem, so between ~950 and ~1024 the caption dropped out of the amber
   onto the cream below. Both now scale together, with a floor on the band. */
@media (min-width:901px){ .bio-arch-fig{width:min(31%,21.5rem)} }
.bio-quote{min-height:clamp(180px,19vw,240px);display:flex;align-items:center}

/* ===== BALANCE PASS =====
   Measured at 1440: the caption ran 509-531 while the amber under that column
   ended at 535 - it was sitting ON the colour boundary with 4px to spare, and
   it was left-aligned at 12.5px, reading as a stray label rather than a credit.
   The portrait also started 14px BELOW the headline's cap line, so it hung low
   against the copy it was meant to sit beside. */

/* 1. portrait rises, taking the caption up off the boundary with it */
@media (min-width:901px){
  .bio-arch-fig{top:clamp(-40px,-2.6vw,-24px)}
}
/* 2. the credit is centred under her and set as two registers - her name in the
      display face, the credential tracked beneath it - so it reads as a caption
      rather than a leftover line of body text */
.bio-arch-fig figcaption{text-align:center;font-family:var(--font-h);font-style:italic;
  font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.24;letter-spacing:0;
  text-transform:none;font-weight:400;color:#3A2F1E;margin-top:14px}
.bio-arch-fig figcaption span{display:block;margin-top:5px;
  font-family:var(--font-b);font-style:normal;font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#4E2A08}

/* 3. the lower right was empty while the upper right carried the portrait, so
      the section bottom-weighted to the left. The credentials move opposite the
      closing paragraph to carry that corner, with the hairline spanning both. */
.bio-arch-foot{display:grid;grid-template-columns:1.42fr .78fr;
  gap:clamp(20px,3vw,52px);align-items:start;
  border-top:0;margin-top:0}
.bio-arch-foot p{margin:0;padding-top:0}
.bio-arch-foot .bio-cred{margin:0;padding-top:0;border-top:0;
  justify-content:flex-start;align-content:flex-start}
@media (max-width:900px){
  .bio-arch-foot{grid-template-columns:1fr;gap:0}
  .bio-arch-foot .bio-cred{padding-top:14px}
  .bio-arch-fig figcaption{text-align:left}
}
/* 4. even the two joins: they were 14 above the band and 24 below */
.bio-quote{margin-top:clamp(12px,1.5vw,18px)}
/* the hairline read as a third divider in a section meant to feel like one
   piece, and the closing paragraph sat a full rule-plus-gap away from the
   band. Border gone; the copy comes up under the arc instead. The lid is
   cream and ~54px deep at its thickest, so the box-bottom gap here is not
   the gap you see - measure to the visible amber, not to the band box. */
.bio-arch-foot{padding-block:clamp(14px,1.3vw,19px) var(--sec-y)}

/* the bottom arc rides higher toward the right edge, where the portrait sits,
   so the caption had ~14px of amber beneath it at the far side - lift a little
   further and tighten the gap under the photograph to open that up */
@media (min-width:901px){ .bio-arch-fig{top:clamp(-54px,-3.4vw,-32px)} }
.bio-arch-fig figcaption{margin-top:11px}

/* The quote was centred on the band BOX, but the band box is not the shape you
   see: the convex lids take ~8px off the top and ~54px off the bottom, so the
   visible amber centres about 16px higher than the box does. Measured across
   the quote column the amber runs to a centre of ~437 while the quote centred
   at 453. Flex centring includes margins, so a bottom margin of twice the
   error lifts it exactly onto the optical centre. */
.bio-quote > .container{margin-bottom:clamp(24px,2.4vw,34px)}

/* Below 901 the figure returns to flow directly above the band, and the 12px
   join that reads well on desktop drops the caption straight onto the colour
   boundary - the name lands on cream and LCSW on amber. The top lid is only
   ~28px deep at the far left where the caption sits, so the band has to come
   down far enough for both registers to clear it. */
@media (max-width:900px){
  /* the -16vw tuck was written for a figure that ended at the photograph.
     With the caption below her, any overlap drags the caption onto the band -
     and stacked in one column there is nothing beside the photo for the band
     to tuck under anyway, so the overlap buys nothing here. */
  .bio-arch-fig{margin-bottom:0}
  .bio-quote{margin-top:clamp(24px,6vw,40px)}
  .bio-arch-fig figcaption{margin-top:9px}
}

/* one line, name and credential together: "Rachelle Baerman-Skief, LCSW".
   The credential no longer breaks to its own tracked-caps register, so the
   span only carries a slightly deeper ink to keep the two readable as name
   + credential rather than one run-on phrase. */
.bio-arch-fig figcaption span{display:inline;margin-top:0;
  font-family:inherit;font-style:inherit;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;text-transform:none;color:#4E2A08}

/* ── Outcomes: the "racing thoughts" device from Renata's homepage ────────
   Renata's .knot chips are hand-laid rather than stacked - each one indented
   further than the last, each tilted a fraction off true, with a tail corner,
   a hairline and a low soft shadow - and they animate ONCE when the group is
   properly in view, staggered child by child, reduced-motion guarded.

   Two deliberate departures, both because the content means the opposite:

   1. Her chips are intrusive anxious thoughts, so chipShake wobbles them.
      These four are the sky clearing. A wobble on "you protect your peace"
      would fight the sentence, so the motion is a settle - each card rises
      the last few pixels and comes to rest.
   2. Her indent grows downward (thoughts spiralling further off). Here it
      resolves toward the margin, so the last and most emphatic card lands
      flush with the column - things coming back into alignment. */
.o-stack li{
  border-radius:26px 26px 10px 6px / 18px 18px 10px 6px;
  border:1px solid color-mix(in srgb,var(--earth) 11%,transparent);
  box-shadow:0 16px 30px -24px rgba(58,47,30,.5);
  /* base state is VISIBLE - the animation supplies the motion, so a failed
     observer or a blocked script can never leave the copy invisible */
  opacity:1;transform:none;transition:background-color .4s}
.o-stack li:nth-child(1){margin-left:clamp(0px,2.6vw,34px);rotate:-.5deg;width:auto}
.o-stack li:nth-child(2){margin-left:clamp(0px,1.7vw,23px);rotate:.38deg;width:auto}
.o-stack li:nth-child(3){margin-left:clamp(0px,.85vw,12px);rotate:-.26deg;width:auto}
.o-stack li:nth-child(4){margin-left:0;rotate:0deg;width:auto}

/* rotate: is its own transform property, so the resting tilt above and the
   transform: in the keyframes compose instead of overwriting each other */
@keyframes chipSettle{
  0%{opacity:0;transform:translateY(20px) scale(.986)}
  55%{opacity:1}
  100%{opacity:1;transform:none}
}
.o-stack.shown li{animation:chipSettle .86s cubic-bezier(.22,.9,.3,1) both;will-change:transform}
.o-stack.shown li:nth-child(2){animation-delay:.14s}
.o-stack.shown li:nth-child(3){animation-delay:.28s}
.o-stack.shown li:nth-child(4){animation-delay:.42s}
@media (prefers-reduced-motion:reduce){.o-stack.shown li{animation:none}}
@media (max-width:860px){
  /* stacked in one column the tilt reads as a rendering fault and the indent
     eats line length - same call Renata's client.css makes at 720 */
  .o-stack li{margin-left:0!important;rotate:0deg!important}
}

/* Headshot arch matched to the contact panel's. .fin-panel is
   88px 88px 20px 20px / 54px 54px 20px 20px - a shallow ellipse, not a dome.
   The portrait is narrower than the panel, so holding the same absolute radii
   keeps the two curves visually equal instead of scaling the arch up on the
   smaller element. */
.bio-arch-fig img{border-radius:88px 88px 20px 20px / 54px 54px 20px 20px}
.bio-arch-fig::after{border-radius:88px 88px 20px 20px / 54px 54px 20px 20px}
@media (max-width:768px){
  /* the panel flattens further on small screens - follow it */
  .bio-arch-fig img,.bio-arch-fig::after{border-radius:38px 38px 16px 16px}
}

/* Outcomes chips, pass 2 - more jiggle, slower, and no orphan on the last card.
   The resting tilt lives on the `rotate:` property, so rotation inside the
   keyframes composes with it instead of fighting it - that is what lets the
   card wobble around its own resting angle rather than snapping to zero. */
@keyframes chipSettle{
  0%  {opacity:0;transform:translateY(24px) rotate(-1.15deg) scale(.982)}
  38% {opacity:1;transform:translateY(-5px) rotate(.72deg) scale(1.004)}
  58% {transform:translateY(2.5px) rotate(-.46deg)}
  74% {transform:translateY(-1.4px) rotate(.26deg)}
  87% {transform:translateY(.6px) rotate(-.12deg)}
  100%{opacity:1;transform:none}
}
.o-stack.shown li{animation-duration:1.24s}
.o-stack.shown li:nth-child(2){animation-delay:.19s}
.o-stack.shown li:nth-child(3){animation-delay:.38s}
.o-stack.shown li:nth-child(4){animation-delay:.57s}

/* "...standing in the warmth of the sun" dropped "sun" onto a line of its own
   from 1100 up. The card is the flush one, so it is already the widest in the
   column and there is nothing to widen - the wrap is what has to change. */
.o-stack li{text-wrap:pretty}

/* Accent rules top and bottom of the bio section (palette accent #FF8C69) */
.bio-arch{border-top:2px solid #FF8C69;border-bottom:2px solid #FF8C69}

/* Caption set larger and heavier. Unna ships 400 and 700 only, so 800
   resolves to the 700 cut - the heaviest real weight available - rather than
   a synthesised smear. */
.bio-arch-fig figcaption{font-size:1.25rem;font-weight:800}




/* the sky itself. Vertical for depth, horizontal for the dawn-to-sun read,

/* hero sub gap - an existing rule further down was resetting this to 11px */
.hero-sub{margin-bottom:16px}

/* ══ COLONNADE ════════════════════════════════════════════════════════════
   The one dark section on the page, sitting immediately before "Step Into the
   Light". Three bays divided by fine gold rules running the full height.

   Each bay now carries its own photograph, pushed almost to grayscale and
   held well down in value. Three reasons that treatment is the right one and
   not just a mood: on a near-black ground a full-colour photo would fight the
   type; desaturating keeps the section reading as one dark plate rather than
   three postcards; and these are watermarked comps, so muting them buries the
   tiling that would otherwise be the first thing you see.

   Hovering restores some colour and light - the bay you are considering wakes
   up. That is the same "storm clearing" move the rest of the page makes,
   without another arch. */
.svc-cl{padding:0;background:#211A11}
.cl{position:relative;background:#211A11;
  padding-block:calc(var(--sec-y) + clamp(8px,1.4vw,20px)) calc(var(--sec-y) + clamp(8px,1.4vw,20px))}
.cl-head{margin-bottom:clamp(26px,3.6vw,50px)}
.svc-cl h2{text-align:left;margin:0;color:#F8EFDD}

.bays{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(240,201,138,.3);
  border-bottom:1px solid rgba(240,201,138,.3)}
.bay2{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:inherit;
  min-height:clamp(210px,25vw,330px);
  padding:clamp(26px,3.4vw,44px) clamp(18px,2.2vw,32px)}
.bay2:first-child{padding-left:max(calc((100vw - var(--max)) / 2),clamp(18px,4vw,32px))}
.bay2:last-child{padding-right:max(calc((100vw - var(--max)) / 2),clamp(18px,4vw,32px))}
.bay2 + .bay2{border-left:1px solid rgba(240,201,138,.3)}

.bay2-ph{position:absolute;z-index:0;inset:0;pointer-events:none}
.bay2-ph img{width:100%;height:100%;object-fit:cover;display:block;
  /* grayscale + value, never a flat rgba wash - a wash would drain what
     little colour survives the hover */
  filter:grayscale(.88) brightness(.44) contrast(1.06);
  transform:scale(1.04);
  transition:filter .7s cubic-bezier(.22,.9,.3,1),transform .9s cubic-bezier(.22,.9,.3,1)}
/* directional scrim: dark where the words are, so the frame keeps its top */
.bay2-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,15,9,.9) 0%,rgba(20,15,9,.6) 38%,rgba(20,15,9,.3) 70%,rgba(20,15,9,.22) 100%)}
.bay2:hover .bay2-ph img,.bay2:focus-visible .bay2-ph img{
  filter:grayscale(.42) brightness(.62) contrast(1.04);transform:scale(1.09)}

.bay2-tx{position:relative;z-index:2;display:block;text-align:left}
.svc-cl .bay2 h3{font-family:var(--font-h);font-weight:400;color:#FBF4E7;
  font-size:clamp(1.32rem,2.8vw,2.08rem);line-height:1.1;letter-spacing:-.012em;
  margin:0 0 .52em;text-wrap:pretty;
  transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.bay2:hover h3,.bay2:focus-visible h3{transform:translateY(-4px)}
.svc-cl .svc-more{color:#EFC98A}
.svc-cl .svc-more::after{background:#EFC98A}

@media (prefers-reduced-motion:reduce){.bay2-ph img,.bay2 h3{transition:none}}
@media (max-width:860px){
  .bays{grid-template-columns:1fr}
  .bay2{min-height:clamp(150px,32vw,210px);
    padding:clamp(22px,4.4vw,30px) max(calc((100vw - var(--max)) / 2),clamp(18px,4vw,32px))}
  .bay2 + .bay2{border-left:0;border-top:1px solid rgba(240,201,138,.3)}
}


/* The Somatic hero is a macro of a wet stem; at bay size, desaturated and
   held down in value, it collapsed into a dark smear with nothing to read.
   The body frame - a seated figure - survives the treatment and actually
   says what the service is. */

/* ══════════════════════════════════════════════════════════════════════════
   BODY BATCH
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 ─ The white strip above the bridge photograph.
   It was not a gap. A 103px transition arc sits between the amber run and the
   bridge, and its lower half was set to #FDF7EB - so the page painted a band
   of near-white across the join. Both halves are amber now, and the arc that
   curves over the photograph itself is amber too, so the run reads as one
   continuous colour that bends down onto the picture. */
.br-arc-top{background:#E8A547 !important}
.bridge{background:linear-gradient(178deg,#F9EEDC 0%,#F7EBD6 52%,#F8EFE1 100%)}
.br-arc-bot{background:#F9EEDC !important}

/* 2 ─ The first body image, full width and part of the section rather than a
   divider across it. It stops being a framed panel and becomes a layer of the
   sky the section already sits on: full bleed, held well back in opacity,
   multiplied into the amber, and feathered top and bottom so it has no edges
   at all. It overlaps the copy and the section above it, which is what keeps
   it from reading as a band wedged between two things. */
.s2{position:relative;isolation:isolate}
.s2-fig{position:absolute;z-index:0;left:0;right:0;margin:0;pointer-events:none;
  top:calc(-1 * clamp(60px,8vw,130px));
  height:clamp(300px,38vw,540px);
  opacity:.52;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 62%,transparent 100%)}
.s2-fig img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:0;box-shadow:none;
  filter:saturate(1.02)}
.s2-fig::after{content:none}
.s2 .s-in{position:relative;z-index:1}
.s2-tx{position:relative;z-index:1}

/* 3 ─ One rhythm for the four narrative sections. They were already 68px top
   and bottom, but s2's figure carried its own margins on top of that, so the
   run measured even in the CSS and uneven on screen. With the figure lifted
   out of flow the four gaps are identical by construction. */
.storm .s-in{padding-block:var(--sec-y)}
.s1 .s-in{padding-top:calc(var(--sec-y) * 1.8)}

/* 4 ─ "How We'll Weather It Together".
   The right column was three unrelated objects stacked up: grey-amber chips,
   a floating italic line, and a hollow outline button. Now it is one card -
   the credentials as a ruled list rather than pills, the ask and the button
   bound together on a warm ground with a single accent edge. It reads as the
   practice's details, which is what earns the click. */
.br-how{align-items:start}
.br-how h3{color:var(--earth)}
.br-side{background:#FFFDF8;
  border:1px solid rgba(184,124,44,.22);
  border-top:3px solid var(--amber);
  border-radius:4px 4px 14px 14px;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.1vw,26px);
  box-shadow:0 22px 44px -34px rgba(120,78,20,.5)}

/* credentials as a ruled list - a pill says "tag", a ruled line says "record" */
.br-cred{display:block;margin:0 0 clamp(18px,2.2vw,26px);padding:0;list-style:none}
.br-cred li{display:flex;align-items:center;gap:10px;
  font-family:var(--font-b);font-size:.84rem;font-weight:600;
  letter-spacing:.02em;text-transform:none;color:var(--earth);
  background:none;border-radius:0;padding:9px 0;
  border-bottom:1px solid rgba(58,47,30,.1)}
.br-cred li:last-child{border-bottom:0}
.br-cred li::before{content:"";flex:0 0 auto;width:7px;height:7px;
  background:var(--amber);transform:rotate(45deg)}

.br-ask-block{border-top:1px solid rgba(58,47,30,.12);
  padding-top:clamp(16px,2vw,22px)}
.br-ask{font-family:var(--font-h);font-style:italic;
  font-size:clamp(1.04rem,1.7vw,1.22rem);line-height:1.34;
  color:var(--earth-soft);margin:0 0 clamp(14px,1.7vw,18px);text-align:left}
.br-cta{display:block;width:100%;text-align:center;
  font-size:clamp(.82rem,1.1vw,.9rem);line-height:1.25;
  padding-block:clamp(13px,1.5vw,16px)}

@media (max-width:860px){
  .br-side{margin-top:4px}
  .s2-fig{height:clamp(240px,52vw,340px);top:calc(-1 * clamp(40px,9vw,90px))}
}


/* The figure was absolute against .s-in, which is position:relative and only
   container-wide - so "full bleed" came out container-width. The section has
   to be the containing block; .s-in goes static and the copy carries its own
   stacking context instead. */
.s2 .s-in{position:static}
.s2-tx,.s2 .s-in > *:not(.s2-fig){position:relative;z-index:1}

/* The headline was sitting across the left-hand woman. object-position could
   not help: the plate is far wider than it is tall, so cover crops this frame
   vertically only and the horizontal alignment has no slack to give. Widening
   the image past the plate and anchoring it left is what actually moves the
   subjects right, out from under the copy. */
.br-plate-bg img{width:116%;max-width:none;height:100%;object-fit:cover;object-position:left center}
@media (max-width:860px){.br-plate-bg img{width:100%;object-position:60% center}}

/* ══ COLONNADE, bright ════════════════════════════════════════════════════
   The dark ground was the palette's TEXT colour doing a job it was never
   meant to do. This is a sunshine brand; the section now sits on the primary
   amber and the photographs are tuned to that ground instead of fighting it -
   pushed to monochrome and multiplied into the amber, which reads as a warm
   duotone rather than grey pasted on orange. Hovering lets the colour and the
   density come back up, so the bay you are considering clears. */
.svc-cl{background:#E8A547}
.cl{background:linear-gradient(178deg,#EBAB50 0%,#E8A547 46%,#DF9C4C 100%)}
.svc-cl h2{color:#2B2116}

.bays{border-top:1px solid rgba(58,38,10,.34);border-bottom:1px solid rgba(58,38,10,.34)}
.bay2 + .bay2{border-left:1px solid rgba(58,38,10,.34)}

.bay2-ph img{filter:grayscale(1) contrast(1.04) brightness(1.06);
  mix-blend-mode:multiply;opacity:.34}
.bay2-ph::after{background:linear-gradient(to top,rgba(232,165,71,.52) 0%,rgba(232,165,71,.16) 46%,rgba(232,165,71,0) 100%)}
.bay2:hover .bay2-ph img,.bay2:focus-visible .bay2-ph img{
  filter:grayscale(.28) contrast(1.02) brightness(1.02);opacity:.52}
.bay2:hover,.bay2:focus-visible{background:rgba(255,246,225,.16)}

.svc-cl .bay2 h3{color:#241705}
.svc-cl .svc-more{color:#4A2905}
.svc-cl .svc-more::after{background:#4A2905}

/* 3.84:1 against the darkest bay, where the photograph multiplies down into
   the amber. Deepened with margin to spare, because hovering raises the image
   opacity and takes that ground darker still. */
.svc-cl .svc-more{color:#2A1401}
.svc-cl .svc-more::after{background:#2A1401}

/* Hover raises the photograph's density, which took the ground under the link
   from 5.16:1 down to 4.23:1 - the interaction was quietly breaking contrast.
   The bottom scrim strengthens on hover to compensate, so the colour still
   blooms through the upper two-thirds while the text keeps its footing. */
.bay2:hover .bay2-ph::after,.bay2:focus-visible .bay2-ph::after{
  background:linear-gradient(to top,rgba(240,182,100,.78) 0%,rgba(240,182,100,.26) 44%,rgba(240,182,100,0) 100%)}

/* 1 ─ "You Inherited a Storm That Was Never Yours": the three concentric arc
   strokes behind the copy (.s4-echo) read as stray lines rather than as an
   echo, especially now the section sits on flat amber instead of the dark
   ground they were drawn for. */
.s4-echo{display:none}

/* 2 ─ "How We'll Weather It Together" takes the same setting as "Find Your
   Sunshine After the Rain" - it was an h3 at clamp(1.46rem,2.8vw,1.95rem)
   while the outcomes h2 runs clamp(1.94rem,4vw,2.78rem), so the two section
   headings were a third apart in size. The ratio-derived line-height and
   margin come with it so they match at every width, not just at 1440. */
.br-how h3{font-size:clamp(1.94rem,4vw,2.78rem);line-height:1.14;
  letter-spacing:-.002em;margin-bottom:.42em}

/* 3 ─ The bio section opened tight against its accent rule, and the portrait
   is lifted above the grid on desktop, which ate the little headroom it had. */
.bio-arch{padding-top:calc(var(--sec-y) + clamp(20px,3vw,46px))}

/* ── A ─ the credential card, unboxed ─────────────────────────────────────
   The card was a widget bolted onto the side of a piece of writing, and its
   four facts restate the paragraph immediately to their left - "I'm a
   Medicare-approved provider licensed in both Michigan and Florida, so we can
   meet virtually from anywhere in either state." A boxed panel is a strong
   frame to put around a sentence the reader just read.

   So the box goes. The section becomes one column of prose that closes the
   way an article closes: a rule, the facts as a quiet inline row, then the
   ask and the button. Same content, no furniture. */
.br-how{grid-template-columns:1fr;gap:0}
.br-how-tx{max-width:46rem}
.br-side{background:none;border:0;border-top:1px solid rgba(58,47,30,.18);
  border-radius:0;box-shadow:none;padding:0;
  margin-top:clamp(24px,3vw,38px);padding-top:clamp(20px,2.4vw,30px);
  max-width:46rem}

/* the facts, inline and understated - a row of markers, not a list of claims */
.br-cred{display:flex;flex-wrap:wrap;gap:6px clamp(16px,2.2vw,30px);
  margin:0 0 clamp(18px,2.2vw,26px);padding:0}
.br-cred li{border-bottom:0;padding:0;gap:8px;
  font-size:.82rem;font-weight:600;color:var(--earth-soft)}
.br-cred li::before{width:6px;height:6px}

.br-ask-block{border-top:0;padding-top:0}
.br-ask{font-size:clamp(1.14rem,2vw,1.42rem);color:var(--earth);
  max-width:34ch;margin:0 0 clamp(16px,2vw,22px)}
.br-cta{display:inline-block;width:auto;
  font-size:clamp(.84rem,1.1vw,.92rem);
  padding-inline:clamp(22px,2.6vw,34px)}

/* ── B ─ soften the sun's entrance ────────────────────────────────────────
   The straight-line mask still had a visible start: it ramped in over 26% and
   held a hard plateau, so the eye caught the moment the photograph arrived.
   A radial falloff has no plateau at all - it eases in from every direction
   at once, which also feathers the left and right edges the linear mask left
   sharp. Peak opacity comes down and the element grows, so the same amount of
   picture is spread over a much longer fade. */
.s2-fig{
  height:clamp(380px,48vw,680px);
  top:calc(-1 * clamp(90px,12vw,200px));
  opacity:.44;
  -webkit-mask-image:radial-gradient(118% 86% at 50% 44%,
    #000 0%,#000 22%,rgba(0,0,0,.86) 40%,rgba(0,0,0,.58) 58%,
    rgba(0,0,0,.28) 74%,rgba(0,0,0,.08) 87%,transparent 100%);
  mask-image:radial-gradient(118% 86% at 50% 44%,
    #000 0%,#000 22%,rgba(0,0,0,.86) 40%,rgba(0,0,0,.58) 58%,
    rgba(0,0,0,.28) 74%,rgba(0,0,0,.08) 87%,transparent 100%)}

@media (max-width:860px){
  .s2-fig{height:clamp(300px,64vw,420px);top:calc(-1 * clamp(60px,13vw,120px))}
  .br-ask-block{display:block}
}


/* ══ SERVICES · TRAVELLING TILES ══════════════════════════════════════════
   A fixed label with the work moving past it. The heading anchors the left
   edge and the tiles travel right to left behind it, looping on a duplicated
   set so the seam never lands in view.

   The photographs are photographs again. They were grayscale multiplied into
   the amber, which is a reliable way to make every image the colour of the
   background - hence the yellow cast. Now: normal blend, light desaturation
   only, so three unrelated stock frames still read as a set. */
.svc-mk{padding:0;background:#E8A547;overflow:hidden}
.mk{position:relative;
  background:linear-gradient(178deg,#EBAB50 0%,#E8A547 48%,#DF9C4C 100%);
  padding-block:clamp(34px,4.6vw,64px);
  display:grid;grid-template-columns:minmax(230px,26%) 1fr;
  align-items:center;gap:clamp(20px,3vw,46px)}

.mk-label{padding-left:max(calc((100vw - var(--max)) / 2),clamp(18px,4vw,32px))}
.svc-mk h2{text-align:left;margin:0;color:#2B2116;
  font-size:clamp(1.94rem,4vw,2.78rem);line-height:1.1}

/* the viewport the track runs through - bleeds off the right edge on purpose,
   so the row reads as continuing rather than as a boxed carousel */
.mk-view{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 34px,#000 100%)}
.mk-track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;
  animation:mkRun 46s linear infinite;will-change:transform}
/* the second set is an exact copy, so -50% lands on an identical frame */
@keyframes mkRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mk-view:hover .mk-track,.mk-track:focus-within{animation-play-state:paused}

.tile{position:relative;flex:0 0 auto;
  width:clamp(228px,25vw,340px);height:clamp(200px,22vw,290px);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;border-radius:3px;text-decoration:none;color:inherit;
  padding:clamp(16px,1.8vw,24px)}
.tile-ph{position:absolute;inset:0;z-index:0;pointer-events:none}
.tile-ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.02);
  transform:scale(1.03);
  transition:transform .9s cubic-bezier(.22,.9,.3,1),filter .6s}
/* directional scrim - dark only where the words are, so the frame keeps its sky */
.tile-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,16,7,.88) 0%,rgba(24,16,7,.52) 34%,rgba(24,16,7,.12) 64%,rgba(24,16,7,0) 100%)}
.tile:hover .tile-ph img,.tile:focus-visible .tile-ph img{
  transform:scale(1.08);filter:saturate(1) contrast(1.02)}

.tile-tx{position:relative;z-index:2;display:block;text-align:left}
.svc-mk .tile h3{font-family:var(--font-h);font-weight:400;color:#FCF6EA;
  font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.12;letter-spacing:-.01em;
  margin:0 0 .46em;text-wrap:pretty}
.svc-mk .svc-more{color:#F4D6A2}
.svc-mk .svc-more::after{background:#F4D6A2}

@media (prefers-reduced-motion:reduce){
  /* no autoplay at all - the row becomes something you scroll yourself */
  .mk-track{animation:none;width:auto}
  .mk-view{overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-mask-image:none;mask-image:none;
    padding-right:clamp(18px,4vw,32px)}
  .tile{scroll-snap-align:start}
  .tile-ph img{transition:none}
}

@media (max-width:860px){
  /* the label cannot hold a column of its own this narrow */
  .mk{grid-template-columns:1fr;gap:clamp(16px,3.4vw,24px);
    padding-block:clamp(28px,5vw,40px)}
  .mk-label{padding-right:max(calc((100vw - var(--max)) / 2),clamp(18px,4vw,32px))}
  .mk-view{-webkit-mask-image:none;mask-image:none}
  .tile{width:clamp(210px,62vw,270px);height:clamp(178px,44vw,230px)}
}


/* A 34px fade is shorter than a tile's own padding, so a tile leaving the
   view had its words cut rather than faded. A longer ramp lets each tile
   dissolve back into the amber instead of hitting an edge. */
.mk-view{-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 46px,#000 118px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 46px,#000 118px,#000 100%)}
@media (max-width:860px){.mk-view{-webkit-mask-image:none;mask-image:none}}

/* A mask fade was the wrong tool. It fades the tile's scrim and its words
   together toward the same amber, so text inside the ramp measured 2.36:1 -
   the exit animation was quietly making the links unreadable. Widening it
   only widened the unreadable zone.

   The label becomes an opaque column instead and the tiles travel behind it.
   Nothing fades, nothing clips mid-glyph, and the edge is a deliberate one -
   type sliding under a masthead. */
.mk{display:block;position:relative;
  padding-left:0}
.mk-view{overflow:hidden;-webkit-mask-image:none;mask-image:none}
.mk-label{position:absolute;z-index:3;left:0;top:0;bottom:0;
  display:flex;align-items:center;
  width:min(34%,clamp(240px,30vw,420px));
  background:linear-gradient(178deg,#EBAB50 0%,#E8A547 48%,#DF9C4C 100%);
  border-right:1px solid rgba(58,38,10,.22);
  padding-right:clamp(20px,2.4vw,38px)}

@media (max-width:860px){
  /* stacked, there is no column to hide behind - the label sits above and the
     row simply runs edge to edge */
  .mk{display:grid;grid-template-columns:1fr}
  .mk-label{position:static;width:auto;border-right:0;background:none;
    padding-right:max(calc((100vw - var(--max)) / 2),clamp(18px,4vw,32px))}
}

/* The opaque-label patch re-declared .mk-view{overflow:hidden} after the
   reduced-motion block, so it won the cascade and froze the row with its
   tiles unreachable - the accessibility fallback was silently disabled by a
   later fix. Restated last so it actually applies. */
@media (prefers-reduced-motion:reduce){
  .mk-track{animation:none;width:auto}
  .mk-view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    padding-right:clamp(18px,4vw,32px)}
  .tile{scroll-snap-align:start}
  /* the duplicate set is decorative padding for the loop - with no loop it is
     just three unreachable repeats sitting after the real ones */
  .tile[aria-hidden="true"]{display:none}
}

/* ── s2 sun: less of it, and no edge anywhere ─────────────────────────────
   Two things were making seams rather than one. The opacity was high enough
   that the photograph read as a tonal slab against flat amber - and the
   radial mask was 118% x 86%, so horizontally it never finished fading
   before the viewport edge and vertically it finished abruptly, which is the
   50-point step measured along the bottom.

   So: opacity well down, and an ellipse that reaches fully transparent
   comfortably inside the element on every side, with a long tail of small
   steps rather than a few big ones. */
.s2-fig{
  opacity:.26;
  -webkit-mask-image:radial-gradient(88% 62% at 50% 46%,
    #000 0%,rgba(0,0,0,.94) 12%,rgba(0,0,0,.82) 26%,rgba(0,0,0,.64) 40%,
    rgba(0,0,0,.44) 53%,rgba(0,0,0,.27) 65%,rgba(0,0,0,.14) 76%,
    rgba(0,0,0,.06) 86%,rgba(0,0,0,.02) 94%,transparent 100%);
  mask-image:radial-gradient(88% 62% at 50% 46%,
    #000 0%,rgba(0,0,0,.94) 12%,rgba(0,0,0,.82) 26%,rgba(0,0,0,.64) 40%,
    rgba(0,0,0,.44) 53%,rgba(0,0,0,.27) 65%,rgba(0,0,0,.14) 76%,
    rgba(0,0,0,.06) 86%,rgba(0,0,0,.02) 94%,transparent 100%)}

/* The last step left is the photograph's own horizon line - a hard edge that
   runs the full width of the frame, so it survives any amount of masking at
   the element's border. Only softening the content itself removes it, and a
   little blur is the right treatment for a layer that is meant to read as
   haze rather than as a picture. */
.s2-fig img{filter:saturate(1.02) blur(2.5px);transform:scale(1.03)}

/* ── The ask and its button ───────────────────────────────────────────────
   The measure was letting the line break mid-sentence ("...on your face
   again? Reach / out for your free consultation."), which is the worst place
   to break a two-sentence run - it reads as a wrap, not as a decision. The
   measure is now set so the break lands on the sentence boundary.
   The button was also under-weighted next to a 22px display line: it gets a
   real 52px height, a proper label size, and tracking so a long label still
   reads as a button rather than as a sentence in a box. */
.br-ask{max-width:27ch;font-size:clamp(1.16rem,2vw,1.46rem);line-height:1.32;
  margin:0 0 clamp(20px,2.4vw,28px)}
.br-cta{font-size:clamp(.88rem,1.05vw,.95rem);font-weight:700;
  letter-spacing:.03em;line-height:1.2;
  min-height:52px;display:inline-flex;align-items:center;justify-content:center;
  padding:14px clamp(26px,3vw,40px)}

/* ══ COLONNADE, scrolling ═════════════════════════════════════════════════
   Back to the layout that worked: "How I Help" above the band where it was,
   three bays at their original width, gold rules top and bottom. The change
   is that the bays now travel - three visible at a time, looping on a
   duplicated set so the seam never lands in view.

   And the yellow-orange sheen is gone for good. It came from grayscaling the
   photographs and then multiplying them into the amber ground, which is the
   most direct way to make every image the colour of the background. Normal
   blend, full opacity, only a light desaturation so three unrelated stock
   frames still read as a set. */
.svc-cl{padding:0;background:#E8A547;overflow:hidden}
.cl{position:relative;
  background:linear-gradient(178deg,#EBAB50 0%,#E8A547 46%,#DF9C4C 100%);
  padding-block:calc(var(--sec-y) + clamp(8px,1.4vw,20px)) calc(var(--sec-y) + clamp(8px,1.4vw,20px))}
.cl-head{margin-bottom:clamp(26px,3.6vw,50px)}
.svc-cl h2{text-align:left;margin:0;color:#2B2116}

.bays-view{overflow:hidden;
  border-top:1px solid rgba(58,38,10,.34);
  border-bottom:1px solid rgba(58,38,10,.34)}
.bays{display:flex;width:max-content;gap:0;
  animation:bayRun 58s linear infinite;will-change:transform}
@keyframes bayRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bays-view:hover .bays,.bays:focus-within{animation-play-state:paused}

.bay2{position:relative;isolation:isolate;overflow:hidden;
  flex:0 0 calc(100vw / 3);
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:inherit;
  min-height:clamp(210px,25vw,330px);
  padding:clamp(26px,3.4vw,44px) clamp(24px,2.8vw,40px);
  border-left:1px solid rgba(58,38,10,.34)}
.bay2:first-child{border-left:0}

.bay2-ph{position:absolute;z-index:0;inset:0;pointer-events:none}
/* everything the tint was made of, undone explicitly - the earlier rules are
   still in the sheet and would otherwise win on source order */
.bay2-ph img{width:100%;height:100%;object-fit:cover;display:block;
  mix-blend-mode:normal;opacity:1;
  filter:saturate(.9) contrast(1.02);
  transform:scale(1.03);
  transition:transform .9s cubic-bezier(.22,.9,.3,1),filter .6s}
.bay2-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(22,15,6,.9) 0%,rgba(22,15,6,.56) 34%,rgba(22,15,6,.14) 66%,rgba(22,15,6,0) 100%)}
.bay2:hover .bay2-ph img,.bay2:focus-visible .bay2-ph img{
  transform:scale(1.08);filter:saturate(1.06) contrast(1.02)}
.bay2:hover .bay2-ph::after,.bay2:focus-visible .bay2-ph::after{
  background:linear-gradient(to top,rgba(22,15,6,.9) 0%,rgba(22,15,6,.56) 34%,rgba(22,15,6,.14) 66%,rgba(22,15,6,0) 100%)}
.bay2:hover,.bay2:focus-visible{background:none}

.bay2-tx{position:relative;z-index:2;display:block;text-align:left}
.svc-cl .bay2 h3{font-family:var(--font-h);font-weight:400;color:#FCF6EA;
  font-size:clamp(1.32rem,2.8vw,2.08rem);line-height:1.1;letter-spacing:-.012em;
  margin:0 0 .5em;text-wrap:pretty;
  transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.bay2:hover h3,.bay2:focus-visible h3{transform:translateY(-4px)}
.svc-cl .svc-more{color:#F4D6A2}
.svc-cl .svc-more::after{background:#F4D6A2}

@media (prefers-reduced-motion:reduce){
  .bays{animation:none;width:auto}
  .bays-view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
  .bay2{scroll-snap-align:start}
  .bay2[aria-hidden="true"]{display:none}
  .bay2-ph img,.bay2 h3{transition:none}
}
@media (max-width:860px){
  .bay2{flex-basis:min(78vw,340px);min-height:clamp(170px,42vw,230px);
    padding:clamp(22px,4.4vw,30px) clamp(20px,4vw,28px)}
}


/* 27ch was a guess and it was wrong - it broke the run three ways. Solved by
   measurement instead: at 31ch the line ends on "again?" and the second
   sentence takes the second line. The measure is in ch and the size is a
   clamp, so both scale together and the break holds down the range. */
.br-ask{max-width:31ch}

/* scale(1.03) on a full-bleed layer with nothing clipping it pushed the page
   22px wider than the viewport at every width. It was only there to keep the
   blur off the element's edges, and the radial mask already fades to fully
   transparent well inside them - so the scale was buying nothing and costing
   a horizontal scrollbar. */
.s2-fig img{transform:none}
.s2-fig{overflow:hidden}

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT RESPONSE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CORAL, finally in the build ──────────────────────────────────────────
   #FF8C69 was one of five brand colours doing nothing but drawing two 2px
   rules. Every primary button is coral now, plus the accents that carry the
   eye: the "Learn more" rules, the credential marks, and the form's focus
   ring. Coral against the amber ground is close in hue, so the buttons carry
   deep ink rather than white - that keeps them reading as objects rather
   than as a lighter patch of background. */
.btn-p,.hdr-cta,.br-cta,.fg button,.fin button[type=submit],button[type=submit]{
  background:var(--coral) !important;color:#2A1206 !important;border-color:var(--coral) !important}
.btn-p:hover,.hdr-cta:hover,.br-cta:hover,button[type=submit]:hover{
  background:#FF7A52 !important;border-color:#FF7A52 !important;color:#2A1206 !important}
.br-cred li::before{background:var(--coral)}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  outline:2px solid var(--coral);outline-offset:2px;border-color:var(--coral)}

/* ── Service cards carry a line of their own copy ─────────────────────────
   Hover would have hidden it from every touch device and from anyone who
   never lands on a moving tile - and letting a visitor self-select is the
   whole point of the sentence. So it is always on. */
.bay2-blurb{font-family:var(--font-b);color:#F0E4D2;
  font-size:clamp(.86rem,1.05vw,.96rem);line-height:1.42;
  margin:0 0 .8em;max-width:34ch;text-wrap:pretty}
.svc-cl .bay2 h3{margin-bottom:.34em}
.bay2{min-height:clamp(250px,29vw,384px)}
.bay2-ph::after{background:linear-gradient(to top,rgba(22,15,6,.94) 0%,rgba(22,15,6,.76) 36%,rgba(22,15,6,.3) 68%,rgba(22,15,6,.05) 100%)}
/* the loop copies are spans, so give them the heading's appearance back */
.bay2-h{display:block;font-family:var(--font-h);font-weight:400;color:#FCF6EA;
  font-size:clamp(1.32rem,2.8vw,2.08rem);line-height:1.1;letter-spacing:-.012em;
  margin:0 0 .34em}

/* ── Mid-page conversion: give the one that exists real weight ────────────
   It is in the right place - the story is meant to be read first - it just
   did not look like the moment it is. */
.br-ask{font-size:clamp(1.24rem,2.2vw,1.62rem);color:var(--earth)}
.br-cta{font-size:clamp(.92rem,1.15vw,1.02rem);min-height:60px;
  padding:16px clamp(30px,3.4vw,46px);
  box-shadow:0 16px 34px -18px rgba(255,140,105,.85)}
.br-side{border-top-width:2px;border-top-color:rgba(255,140,105,.55)}

/* ── Hero secondary path ──────────────────────────────────────────────────
   One primary action stays one primary action; this is a text link, not a
   competing button. */
.hero-acts{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap}
.hero-alt{font-family:var(--font-b);font-size:.94rem;font-weight:700;
  letter-spacing:.02em;color:#6B3A0E;text-decoration:none;
  border-bottom:2px solid rgba(255,140,105,.6);padding-bottom:3px;
  transition:border-color .35s,color .35s}
.hero-alt:hover,.hero-alt:focus-visible{color:#4A2905;border-bottom-color:var(--coral)}

/* ── Mobile: the 14px floor and the 44px floor ────────────────────────────
   The (hover:none) block already bumped a list of small items but never
   covered the nav itself, the header CTA, or the footer legal links. */
@media (hover:none) and (pointer:coarse){
  .nav a{font-size:.95rem !important;letter-spacing:.04em}
  .hdr-cta{font-size:.88rem !important}
  .ft-legal a{font-size:.88rem !important}
}
@media (max-width:768px){
  .nav-l > li > a,.dd a{min-height:46px;display:flex;align-items:center}
  .hdr-cta{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  /* phone / email / legal links get a real target without moving their text */
  .ph a,.ft a[href^="tel:"],.ft a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:46px}
  .ft-legal a{display:inline-flex;align-items:center;min-height:46px}
  .ft-social a,.ft a[aria-label]{min-width:46px;min-height:46px;
    display:inline-flex;align-items:center;justify-content:center}
}


/* the arcs between sections have to carry the new colours either side */
.storm-run .arc{background:none}

/* The last five sub-44px targets, named rather than guessed at:
   the brand lockup, the drawer's phone link (.hdr-tel, not .ph a as I had
   assumed), the new "Meet Rachelle" link, and the two contact links in the
   Final CTA (.fin-reach - the footer selectors never reached them). */
@media (hover:none) and (pointer:coarse){
  .brand{min-height:46px;display:inline-flex;align-items:center}
  .hdr-tel{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .hero-alt{min-height:46px;display:inline-flex;align-items:center}
  .fin-reach a{min-height:46px;display:inline-flex;align-items:center}
  /* the service sentence sat at 13.76px - just under the floor */
  .bay2-blurb{font-size:.92rem}
}

/* Coral hairline under the header.
   Drawn as a 1px box-shadow rather than a border-bottom on purpose: the header
   is 88px at rest and shrinks to 60px on scroll, while the spacer behind it
   stays a constant 88px so the page never yanks. A real border adds a pixel to
   the header box and breaks that match; a shadow paints the same line and
   occupies no space at all. */
.hdr{box-shadow:0 1px 0 rgba(255,140,105,.7)}
.hdr.solid{box-shadow:0 1px 0 var(--coral),0 8px 22px -20px rgba(36,29,18,.7)}

/* ══════════════════════════════════════════════════════════════════════════
   BODY REPAIR
   ══════════════════════════════════════════════════════════════════════════ */

/* the hopeful turn at the end of the fog section earns a different weight */
.s3 .turn{font-family:var(--font-h);font-style:italic;
  font-size:clamp(1.1rem,1.9vw,1.34rem);line-height:1.42;color:#6B4A1E;
  padding-top:.5em;border-top:1px solid rgba(255,140,105,.45);margin-top:1.3em}
@media (max-width:860px){
  .storm-run .storm .s-in.split{grid-template-columns:1fr;gap:clamp(12px,3vw,20px)}
}

/* 4 ─ Hero: two real buttons, side by side. */
.hero-acts{gap:clamp(10px,1.2vw,16px)}
.hero .btn-ghost{background:transparent !important;color:#5A3208 !important;
  border:2px solid rgba(255,140,105,.85) !important;
  font-weight:700;letter-spacing:.02em}
.hero .btn-ghost:hover,.hero .btn-ghost:focus-visible{
  background:var(--coral) !important;color:#2A1206 !important;border-color:var(--coral) !important}

/* 5 ─ Button hover, unmistakable.
   No lift - a hover hop is a tell. The button inverts instead: deep ink
   ground, warm coral type, and a coral halo. You cannot miss it and nothing
   moves. */
/* Hover: coral -> primary amber, coral border kept. */
.btn-p:hover,.btn-p:focus-visible,.hdr-cta:hover,.hdr-cta:focus-visible,
.br-cta:hover,.br-cta:focus-visible,button[type=submit]:hover,button[type=submit]:focus-visible{
  background:var(--amber) !important;color:#2A1206 !important;
  border-color:var(--cream) !important;
  /* the ring is drawn INSIDE the fill as well as on the border, so the bright
     edge still reads where the button sits on a cream ground - in the header,
     a cream border alone would vanish into the header itself */
  box-shadow:inset 0 0 0 2px var(--cream),0 0 0 1px rgba(255,140,105,.5),
             0 16px 32px -18px rgba(232,165,71,.85) !important}
.btn-p,.hdr-cta,.br-cta,button[type=submit]{
  transition:background-color .28s ease,color .28s ease,box-shadow .28s ease,border-color .28s ease}

/* 6 ─ The section close reads as one object instead of three stacked orphans:
   the ask and its button share a baseline row inside the same measure the
   prose uses. */
.br-ask-block{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,40px);flex-wrap:wrap}
.br-ask{margin:0;flex:1 1 22ch}
.br-cta{flex:0 0 auto}
@media (max-width:720px){
  .br-ask-block{flex-direction:column;align-items:flex-start;gap:18px}
  .br-cta{width:100%;text-align:center;justify-content:center}
}


/* The close: the ask still carried a 31ch cap from when it sat on its own
   line, so putting it in a row with the button squeezed it to three lines in
   a narrow column. It gets a basis wide enough for its two natural lines, the
   button holds its size, and the two sit on one centred row - a deliberate
   end to the section rather than two objects that happen to be near each
   other. */
.br-ask{max-width:none;flex:0 1 34ch;margin:0}
.br-cta{flex:0 0 auto}
.br-ask-block{align-items:center;gap:clamp(24px,3.2vw,44px)}

/* At 474px the ask broke mid-sentence again ("...again? Reach / out for your
   free consultation.") and the button wrapped below anyway, so the row was
   buying nothing. Back to a stack, with the measure set where the line breaks
   on the sentence, and the button sized and coloured enough to close the
   section on its own. */
.br-ask-block{display:block}
.br-ask{max-width:31ch;flex:none;margin:0 0 clamp(18px,2.2vw,26px)}

/* ── The run: background colour at the top, primary at the end ────────────
   Structure is back to what it was - one continuous run, one measure, no
   splits, no per-section grounds. Only the ramp changes: it now opens on the
   page's own background #FBF8F3 and warms all the way to primary #E8A547 by
   the time it reaches the bridge. Same architecture, but the wall of warmth
   becomes a sunrise, which is what the section is about.

   Stops are eased rather than linear - a straight interpolation between a
   near-white and a saturated amber banks up too much change in the middle
   and you see the transition happening. */
.storm-run{background:linear-gradient(180deg,
  #FBF8F3 0%,#FAF2E6 12%,#F8EAD5 26%,#F5DEBB 42%,#F2D2A2 58%,#EEC183 74%,#EBB463 88%,#E8A547 100%)}

/* the hero hands off to the run's new starting colour */
.hero-arc::before{background-color:#FBF8F3}
.hero-bg::before{background:linear-gradient(180deg,
  rgba(251,248,243,0) 0%,rgba(251,248,243,.10) 38%,rgba(251,248,243,.34) 62%,
  rgba(251,248,243,.72) 84%,rgba(251,248,243,.94) 95%,rgba(251,248,243,1) 100%)}

/* ── The sunset haze, on a much lighter ground ────────────────────────────
   At 26% over amber it was subtle; over near-cream the same layer reads far
   stronger and its edges come back. Lower opacity, more blur, and the radial
   falloff kept - the photograph is atmosphere here, not a picture. */
.s2-fig{opacity:.19}
.s2-fig img{filter:saturate(1.04) blur(4px)}

/* ── s2 haze: make it actually present ───────────────────────────────────
   At .19 with 4px of blur it was so faint it may as well not have been
   there. Up to .44 and the blur back to 2.5px so the sunrise reads as an
   image. The radial mask still carries the edges and the blur still kills
   the photograph's own horizon line, which is what let the opacity come up
   without the seams coming back. */
.s2-fig{opacity:.44}
.s2-fig img{filter:saturate(1.1) contrast(1.03) blur(2.5px)}

/* ── "How I Help" on its own card, centred ───────────────────────────────
   A cream plate on the amber ground, so the label reads as a marker over the
   strip rather than a heading floating on colour. */
.cl-head{display:flex;justify-content:center;margin-bottom:clamp(24px,3.2vw,42px)}
.svc-cl h2{background:var(--cream);color:#2B2116;
  border:1px solid rgba(255,140,105,.55);
  border-radius:6px 6px 16px 16px;
  padding:clamp(12px,1.5vw,18px) clamp(26px,3.4vw,52px);
  font-size:clamp(1.62rem,3.2vw,2.28rem);line-height:1.1;text-align:center;
  box-shadow:0 18px 38px -26px rgba(120,78,20,.55)}
@media (max-width:860px){
  .cl-head{padding-inline:max(calc((100vw - var(--max)) / 2),clamp(18px,4vw,32px))}
  .svc-cl h2{width:100%}
}

/* The placard was upside down: 6px on top and 16px on the bottom, when every
   shape on this page - headshot, contact panel, hero card - carries the
   canopy arch the other way up, generous over the top and tight underneath.

   And floating it above the strip was the reason it read as a stray pill. It
   now sits ON the strip: arched top, square bottom, its base overlapping the
   bays' top rule by a pixel so it reads as a placard mounted on the section
   rather than an object hovering near it. */
.cl-head{margin-bottom:0;position:relative;z-index:3}
.svc-cl h2{
  border-radius:clamp(30px,4.4vw,58px) clamp(30px,4.4vw,58px) 0 0
             / clamp(20px,2.6vw,34px) clamp(20px,2.6vw,34px) 0 0;
  border:1px solid rgba(255,140,105,.55);border-bottom:0;
  margin-bottom:-1px;
  padding:clamp(14px,1.7vw,20px) clamp(30px,3.8vw,58px) clamp(12px,1.5vw,17px);
  box-shadow:0 -12px 30px -20px rgba(120,78,20,.5)}
@media (max-width:860px){.svc-cl h2{width:auto}}

/* "15-Minute" was breaking at its hyphen across two lines. */
.nb{white-space:nowrap}

/* ══ Opening and closing beats ════════════════════════════════════════════
   The bridge already worked this way - a heavier line in, three plain
   paragraphs, a heavier line out - and it is the most readable section on the
   page for exactly that reason. The same shape now runs through the four
   narrative sections wherever the copy already has an opening frame and a
   closing punch. Applied four times across four sections, never to a middle
   paragraph, so the rhythm stays a rhythm and does not become a texture.

   Weight and ink only - no second typeface, no rules, no decoration. */
.storm .kick,.storm .beside{
  font-family:var(--font-b);font-weight:700;color:#5A3208;
  font-size:clamp(1.02rem,1.35vw,1.14rem);line-height:1.5}
.storm .kick{margin-bottom:1.15em}
.storm .beside{margin-top:1.15em}

/* One promoted line - the turn in the fog section, the only place in the four
   where the copy looks forward. Set at display size it becomes the pull quote
   the run was missing, without repeating a line that is already on the page. */
.storm .beside.pull{
  font-family:var(--font-h);font-weight:400;font-style:normal;
  font-size:clamp(1.32rem,2.5vw,1.78rem);line-height:1.32;
  color:#6B3A0E;max-width:26ch;margin-top:1.3em}

/* the closing line of the bridge: bold, not italic */
.br-tx .beside{font-family:var(--font-b) !important;font-style:normal !important;
  font-weight:700 !important;color:#5A3208 !important;
  font-size:clamp(1.06rem,1.5vw,1.24rem) !important;line-height:1.5 !important}


/* The bridge sits on a dark photograph, so its closing line needs the light
   ink the rest of that block uses - the #5A3208 built for the cream and amber
   sections measured 1.67:1 there. Bold and upright as asked, just not dark. */
.br-tx .beside{color:#F7DCAC !important}

/* 26ch chopped the promoted line into four short ones. */
.storm .beside.pull{max-width:34ch}


/* ══════════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════════

   INNER PAGES

   Everything below this line is new for the WordPress build. The mockup was
   a homepage only, so the inner-page system is written here in the same
   vocabulary the homepage established:

     · the canopy arc        (mask-image, same SVG masks as the storm run)
     · the umbrella blob     (border-radius 50% 50% 14px 14px / 34% …)
     · amber ground, coral accent, Unna headings on a cream page
     · the 24px 24px 5px 5px button corner

   ══════════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════════ */

/* html needs the clip too – body alone still lets iOS rubber-band sideways
   when a full-bleed child overhangs. `clip` not `hidden`: hidden on either
   element silently kills position:sticky on the header. */
/* ── Coral, dark enough to sit on a light ground ──────────────────────────
   The brand coral (#FF8C69) is a FILL colour. Measured against the cream
   page it is 2.15:1 – it fails the 4.5:1 text floor and the 3:1 non-text
   floor both, so it can carry a button's background but never its own
   weight as ink or as a UI mark on cream. This is the same hue pushed dark
   enough to pass both (4.89:1 on --cream, 4.57:1 on --cream-2).

   Coral itself is untouched everywhere the mockup uses it – on dark grounds
   and behind text it is exactly as approved. */
:root { --coral-ink: #C2410C; }

html { overflow-x: clip; }


/* ── Drawer close button ──────────────────────────────────────────────────
   Once the drawer is open and the page is scrolled, the burger is off
   screen. Without this there is no way back out. Sits inside .nav, so it
   only ever renders where the drawer exists. */
.nav-close {
  display: none;
  position: absolute; top: 8px; right: 10px;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: transparent;
  cursor: pointer; color: var(--earth);
  align-items: center; justify-content: center;
  transition: transform .25s ease;
}
.nav-close:hover { transform: rotate(90deg); }
.nav-close svg { width: 21px; height: 21px; display: block; }
@media (max-width: 768px) {
  .nav-close { display: flex; }
  /* clear the close button so the first nav row does not sit under it */
  .nav .nav-l { margin-top: 34px; }
}


/* ══════════════ INNER HERO ══════════════
   height: clamp() rather than aspect-ratio + max-height. The latter has a
   WebKit bug where the box's WIDTH collapses to preserve the ratio once
   max-height clamps, leaving a gap beside the hero. clamp() keeps width at
   100% and lets the binding dimension switch across breakpoints on its own.
   32vw ⇒ ~3.1:1 through the middle band. */
.inner-hero {
  position: relative;
  height: clamp(280px, 32vw, 400px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--storm-2);
  margin-top: 0;
}
.inner-hero-bg { position: absolute; inset: 0; z-index: 0; }
.inner-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  /* Dim with brightness(), never a flat scrim – a wash desaturates the whole
     frame to brown and throws away the warm light the photography carries. */
  filter: saturate(1.14) brightness(.62);
}
.inner-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
      rgba(36,29,18,.30) 0%,
      rgba(36,29,18,.14) 42%,
      rgba(36,29,18,.72) 100%);
}
.inner-hero-content {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: clamp(46px, 6vw, 78px);
}
.inner-hero h1,
.inner-page-title {
  color: #FFF6E7;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  margin: 0;
  text-shadow: 0 2px 26px rgba(24,16,6,.55);
  max-width: 20ch;
}
/* the canopy edge, same mask the homepage hero uses */
.inner-hero .hero-arc { z-index: 3; }
.inner-hero .hero-arc::before { background-color: var(--cream); background-image: none; }


/* ══════════════ INNER BODY ══════════════ */
.inner-content { background: var(--cream); padding: clamp(52px, 6.4vw, 80px) 0 clamp(64px, 7.4vw, 96px); }

.service-body { max-width: var(--service-body-max); margin: 0 auto; }

/* ── Uniform section rhythm ───────────────────────────────────────────────
   ONE top margin on every top-level section and zero bottom margins, so
   grid boxes and block boxes can never produce mismatched or doubled gaps.
   Without this the full-width h2 sections jam against their neighbours
   while the image sections keep generous space. */

/* ── First subheadline ────────────────────────────────────────────────────
   LEFT-aligned and styled identically to every other body h2. It is the
   page's first line of copy, not a decorative lead-in – a centred italic
   treatment here is the single most-repeated defect in this pipeline. */
.inner-lead { margin: 0; text-align: left; }
.inner-lead h2,
.service-body h2,
.svc-text-col h2 {
  font-family: var(--font-h);
  font-style: normal;
  font-weight: 400;
  color: var(--earth);
  font-size: clamp(1.62rem, 3vw, 2.16rem);
  line-height: 1.16;
  /* margin-BOTTOM only, never the shorthand. `.service-body h2` and
     `.service-body > h2` are both (0,1,1); this rule comes later, so a
     `margin: 0 0 .55em` here silently zeroes the section top-margin set
     below and every full-width text section collapses against the one
     above it. */
  margin-bottom: .55em;
}
.service-body h3,
.svc-text-col h3 {
  font-family: var(--font-h);
  font-weight: 700;
  color: var(--earth);
  font-size: clamp(1.24rem, 2.1vw, 1.5rem);
  line-height: 1.22;
  margin-top: 1.6em;
  margin-bottom: .5em;
}
.service-body p { margin: 0 0 1.05em; color: var(--earth); }
.service-body p:last-child { margin-bottom: 0; }
.service-body strong { font-weight: 700; color: #2E2417; }
.service-body em { font-style: italic; }
.service-body a { color: #A85B22; text-decoration: underline; text-underline-offset: 3px; }
.service-body a:hover { color: var(--coral-ink); }

/* A standalone emphatic line: plain bold at body size. The oversized italic
   display treatment reads as shouting on these pages. */
.service-body .it-strong { font-weight: 700; font-style: normal; }

/* ── Image beside text ────────────────────────────────────────────────────
   The h2 lives INSIDE .svc-text-col. If it sits above the grid instead,
   align-items:stretch has only the paragraphs to match and the image ends
   up short. One heading per text column, so the image never stretches to an
   absurd oval. */
.svc-img-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.4vw, 44px);
  align-items: stretch;
  margin: 0;
}
.svc-img-section--reverse .svc-text-col { order: 2; }
.svc-img-section--reverse .svc-img-col  { order: 1; }
.svc-text-col { display: flex; flex-direction: column; justify-content: center; }
.svc-img-col  { position: relative; min-height: 100%; }
.svc-img-col img {
  width: 100%; height: 100%;
  min-height: clamp(230px, 26vw, 340px);
  object-fit: cover;
  /* the umbrella canopy, same geometry as the homepage's .s2-fig */
  border-radius: 50% 50% 14px 14px / 34% 34% 14px 14px;
  box-shadow: 0 30px 62px -30px rgba(70,40,10,.5);
}
/* the amber hairline that traces the canopy */
.svc-img-col::after {
  content: ""; position: absolute;
  inset: -13px -13px auto -13px; height: calc(100% + 13px);
  border-radius: 50% 50% 18px 18px / 34% 34% 18px 18px;
  border: 1.5px solid rgba(232,165,71,.34); border-bottom: 0;
  pointer-events: none;
}

/* ── Closing block ────────────────────────────────────────────────────────
   The page's last beat, lifted onto the warm second cream so it reads as a
   resolution rather than one more paragraph. */
.svc-closing {
  background: var(--cream-2);
  border-radius: 34px 34px 12px 12px / 46px 46px 12px 12px;
  padding: clamp(30px, 4vw, 46px) clamp(24px, 3.6vw, 42px);
  box-shadow: inset 0 0 0 1.5px rgba(232,165,71,.28);
}
.svc-closing h2 { margin-top: 0; }

@media (max-width: 768px) {
  .svc-img-section { grid-template-columns: 1fr; }
  /* on one column the image always follows its copy, whichever way the
     desktop grid was ordered */
  .svc-img-section--reverse .svc-text-col,
  .svc-img-section--reverse .svc-img-col { order: 0; }
  .svc-img-col img { min-height: clamp(210px, 54vw, 300px); }
  .inner-hero-content { padding-bottom: clamp(34px, 7vw, 52px); }
}


/* ── Section rhythm ───────────────────────────────────────────────────────
   ONE top margin on every top-level section, zero bottom margins, so grid
   boxes and block boxes can never produce doubled or mismatched gaps.
   Declared AFTER the heading typography above: both selectors are (0,1,1),
   so order decides, and this must win. */
.service-body > h2,
.service-body > .svc-img-section,
.service-body > .svc-text-block,
.service-body > .svc-closing,
.service-body > .about-meet { margin-top: clamp(46px, 7vw, 84px); }
.service-body > .inner-lead { margin-top: 0; }
.service-body > * + p { margin-top: 0; }


/* ══════════════ ABOUT – the "meet me" band ══════════════
   The bio is the one place a visitor decides whether they want to sit with
   this person, so it gets its own ground rather than being one more run of
   h2 + p. Full-bleed out of the 1080px measure onto warm sand, prose on a
   card, portrait travelling with the reader.

   margin-inline: calc(50% - 50vw) is safe because html/body are overflow-x:
   clip – verify no horizontal scroll after any change here. */
.about-meet {
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  padding: clamp(56px, 7vw, 92px) 0 clamp(58px, 7.4vw, 96px);
  background: var(--cream-2);
}
.about-meet::before,
.about-meet::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: clamp(30px, 4vw, 54px);
  background-color: var(--cream);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  pointer-events: none;
}
.about-meet::before {
  top: 0;
  -webkit-mask-image: url('../images/arc-mask-2.svg');
  mask-image: url('../images/arc-mask-2.svg');
}
.about-meet::after {
  bottom: 0; transform: scaleY(-1);
  -webkit-mask-image: url('../images/arc-mask-2.svg');
  mask-image: url('../images/arc-mask-2.svg');
}
.about-meet-in {
  position: relative; z-index: 1;
  max-width: var(--service-body-max);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}
.about-meet-tx {
  background: rgba(253,249,242,.86);
  border-radius: 30px 30px 12px 12px / 42px 42px 12px 12px;
  padding: clamp(28px, 3.6vw, 44px) clamp(24px, 3.2vw, 40px);
  box-shadow: 0 30px 62px -34px rgba(70,40,10,.4), inset 0 0 0 1.5px rgba(232,165,71,.26);
}
.about-meet-tx > h2:first-child { margin-top: 0; }
/* The docs deliver these sub-labels as <p><strong>. They are headings –
   promote them and give them the brand's coral hairline. */
.about-meet-tx h3 {
  position: relative;
  padding-top: .7em;
  margin-top: 1.7em;
}
.about-meet-tx h3::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 2px; background: var(--coral);
}
.about-meet-fig {
  position: sticky; top: calc(var(--hdr-h) + 18px);
  margin: 0;
}
.about-meet-fig img {
  width: 100%; height: auto;
  border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px;
  box-shadow: 0 32px 64px -30px rgba(70,40,10,.5);
}
.about-meet-fig figcaption {
  margin-top: 14px; text-align: center;
  font-family: var(--font-h); font-size: 1.06rem; color: var(--earth);
}
.about-meet-fig figcaption span {
  display: block; font-family: var(--font-b);
  font-size: .82rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--earth-soft); margin-top: 5px;
}
@media (max-width: 860px) {
  .about-meet-in { grid-template-columns: 1fr; }
  /* portrait first on one column – a face before the prose */
  .about-meet-fig { position: static; order: -1; max-width: 340px; margin-inline: auto; }
}


/* ══════════════ FAQ – "Clearing Skies" ══════════════
   Full-width bands, not a bordered accordion. Each answer sits in its own
   band and the ground lightens as you descend the page, echoing the
   homepage's storm→sunshine ramp; the canopy arc separates every band. The
   last three builds shipped a plain accordion, a conversation thread and a
   category grid – this is deliberately none of those. */
.faq-run { background: var(--cream); }
.faq-band {
  position: relative;
  padding: clamp(4px, .6vw, 10px) 0;
}
/* The ramp: storm-dark at the top of the list, clearing to cream by the end.
   Set as a custom property per band from the template so any number of
   questions distributes evenly. */
.faq-band { background: var(--faq-bg, var(--cream)); }

.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(22px, 2.8vw, 32px) clamp(20px, 5vw, 34px);
  background: transparent; border: 0;
  font-family: var(--font-h);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.24;
  color: var(--faq-ink, var(--earth));
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.faq-n {
  font-family: var(--font-b);
  font-size: .78rem; font-weight: 900; letter-spacing: .12em;
  color: var(--coral-ink);
}
/* The toggle is a sun on the horizon: a half-disc that rises to full when
   the answer opens. No plus/minus. */
.faq-mark {
  position: relative;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--coral-ink);
  clip-path: inset(50% 0 0 0 round 0 0 50% 50%);
  transition: clip-path .42s cubic-bezier(.22,.9,.3,1), transform .42s cubic-bezier(.22,.9,.3,1);
}
.faq-item.open .faq-mark {
  clip-path: inset(0 0 0 0 round 50%);
  transform: translateY(-2px);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.22,.9,.3,1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; }
.faq-a-in > div {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 34px) clamp(26px, 3.2vw, 36px);
  padding-left: clamp(20px, 5vw, 34px);
}
.faq-a-in p {
  max-width: 68ch;
  font-size: 1.06rem; line-height: 1.8;
  color: var(--faq-ink, var(--earth));
  opacity: .92;
  margin: 0 0 1em;
}
.faq-a-in p:last-child { margin-bottom: 0; }
/* the canopy between bands */
.faq-arc {
  position: relative; display: block; width: 100%;
  height: clamp(26px, 3.4vw, 46px);
  margin-bottom: -1px;
  background-color: var(--faq-lo, var(--cream));
}
.faq-arc::before {
  content: ""; position: absolute; inset: 0;
  background-color: var(--faq-up, var(--cream));
  -webkit-mask-image: url('../images/arc-mask-3.svg');
  mask-image: url('../images/arc-mask-3.svg');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-mark { transition: none; }
}


/* ══════════════ CONTACT ══════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 4.4vw, 60px);
  align-items: start;
  max-width: var(--service-body-max);
  margin: 0 auto;
}
.contact-info h2 { margin-top: 0; }
.contact-reach { list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; }
.contact-reach li { margin-bottom: 18px; }
.contact-reach a,
.contact-reach span {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--earth);
  font-weight: 700; font-size: 1.04rem;
  transition: color .3s;
}
.contact-reach a:hover { color: #A85B22; }
.contact-reach svg { width: 18px; height: 18px; stroke: var(--coral-ink); fill: none; stroke-width: 1.7; flex: 0 0 auto; }
.contact-note {
  margin-top: clamp(24px, 3.2vw, 34px);
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid rgba(58,47,30,.14);
  font-size: .98rem; color: var(--earth-soft);
}
.contact-form-wrap {
  background: var(--cream-2);
  border-radius: 40px 40px 14px 14px / 60px 60px 14px 14px;
  padding: clamp(30px, 4vw, 48px) clamp(24px, 3.4vw, 40px);
  box-shadow: 0 34px 68px -36px rgba(70,40,10,.4), inset 0 0 0 1.5px rgba(232,165,71,.26);
}
.contact-form-wrap h2 { margin-top: 0; font-size: clamp(1.4rem, 2.4vw, 1.76rem); }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}


/* ══════════════ BLOG ══════════════ */
.blog-lede {
  max-width: 62ch;
  font-family: var(--font-h); font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.54rem); line-height: 1.34;
  color: var(--earth-soft);
  margin: 0 0 clamp(38px, 5vw, 60px);
}
.blog-list { max-width: 760px; margin: 0 auto; }
.blog-card { padding: clamp(28px, 3.6vw, 42px) 0; border-bottom: 1px solid rgba(58,47,30,.13); }
.blog-card:first-child { padding-top: 0; }
.blog-card__date {
  font-family: var(--font-h); font-style: italic;
  font-size: .96rem; color: var(--earth-soft); margin: 0 0 .5em;
}
.blog-card__title { font-size: clamp(1.5rem, 2.7vw, 1.98rem); margin: 0 0 .45em; }
.blog-card__title a { text-decoration: none; transition: color .3s; }
.blog-card__title a:hover { color: #A85B22; }
.blog-card__excerpt { color: var(--earth); margin: 0 0 1em; }
.blog-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  color: #A85B22; transition: gap .3s, color .3s;
}
.blog-more:hover { gap: 12px; color: var(--coral-ink); }
.blog-pagination { margin-top: clamp(38px, 5vw, 56px); }
.blog-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; justify-content: center; }
.blog-pagination a, .blog-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border-radius: 14px 14px 5px 5px;
  text-decoration: none; font-weight: 700; font-size: .95rem;
}
.blog-pagination a { background: var(--cream-2); color: var(--earth); transition: background-color .3s; }
.blog-pagination a:hover { background: var(--amber-lt); }
.blog-pagination .current { background: var(--coral-ink); color: #FFF6E7; }

.post-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .94rem; text-decoration: none;
  color: #A85B22; margin-bottom: clamp(22px, 3vw, 32px);
  transition: gap .3s;
}
.post-back:hover { gap: 13px; }
.post-meta {
  font-family: var(--font-b); font-size: .86rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--earth-soft); margin: 0 0 1em;
}
.post-body { max-width: 700px; margin: 0 auto; }
.post-body > p, .post-body > h2, .post-body > h3, .post-body > blockquote, .post-body > ul, .post-body > ol { max-width: 700px; }
.post-body p { font-size: 1.1rem; line-height: 1.82; }
.post-body > p:first-of-type::first-letter {
  float: left; font-family: var(--font-h);
  font-size: 3.6em; line-height: .82;
  padding: .06em .1em 0 0; color: var(--coral-ink);
}
.post-body blockquote {
  margin: clamp(28px, 3.6vw, 40px) 0;
  padding-left: clamp(20px, 2.6vw, 28px);
  border-left: 3px solid var(--coral);
  font-family: var(--font-h); font-style: italic;
  font-size: clamp(1.24rem, 2.3vw, 1.6rem); line-height: 1.4;
  color: var(--earth-soft);
}
.post-divider {
  width: 100%; height: clamp(20px, 2.6vw, 34px);
  margin: clamp(34px, 4.4vw, 52px) 0;
  background-color: var(--cream-2);
  -webkit-mask-image: url('../images/arc-mask-3.svg');
  mask-image: url('../images/arc-mask-3.svg');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}


/* ══════════════ SAFETY NET ══════════════
   forceVisible is the last line of defence for anything the reveal observer
   never fires for. It deliberately does NOT touch .reveal – those elements
   animate on scroll and the JS already carries its own 2.6s fallback.
   Setting them visible here would paint them before the user reaches them
   and kill the scroll transition outright.

   0.01s, not 0s: Lighthouse flags a zero-duration animation as
   non-composited and charges for it. */
@keyframes forceVisible { to { opacity: 1; transform: none; } }

.inner-content,
.contact-grid,
.about-meet-in,
.blog-list,
.post-body { animation: forceVisible 0.01s 8s forwards; }

/* If the observer does fire, the transition must win over the keyframe. */
.reveal.in,
.fade-in.visible {
  opacity: 1;
  transform: none;
  animation: none;
}


/* ══════════════ LEGAL PAGES NEVER FADE ══════════════
   Privacy Policy and T&C are 30–50KB walls of text. A reveal threshold of
   14% of a 10,000px element is never reached, so the page would sit at
   opacity 0 forever. */
body.page-privacy-policy .reveal,
body.page-privacy-policy .fade-in,
body.page-terms-and-conditions .reveal,
body.page-terms-and-conditions .fade-in,
body.page-terms-conditions .reveal,
body.page-terms-conditions .fade-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}


/* ══════════════ SHORT LANDSCAPE PHONES ══════════════
   iPhone SE landscape is 568×320. A hero with a viewport-height floor is
   taller than the screen there and the sticky header lands on top of the
   copy. Cap it and push the content clear of the nav. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; height: auto; padding-top: 104px; padding-bottom: 34px; }
  .inner-hero { height: auto; min-height: 0; padding-top: 104px; padding-bottom: 30px; }
  .inner-hero-content { padding-bottom: 20px; }
}


/* ══════════════ TOUCH FLOORS – INNER PAGES ══════════════
   The mockup's touch block only ever saw the homepage. These are the same
   two floors (14px type, 44px targets) applied to elements that only exist
   on inner pages. Keyed on hover/pointer, never max-width: an iPad Pro 11
   in landscape is 1194px wide and still a touch device. */
@media (hover: none) and (pointer: coarse) {
  .service-body a,
  .contact-reach a,
  .blog-more,
  .post-back,
  .faq-a-in a {
    min-height: 44px;
    display: inline-flex; align-items: center;
    box-sizing: border-box;
  }
  .contact-note,
  .blog-card__date,
  .post-meta,
  .about-meet-fig figcaption span,
  .faq-n {
    font-size: 14px !important;
  }
  .faq-q { min-height: 56px; }
  .nav-close { width: 46px; height: 46px; }
}


/* ── FAQ: category bands ──────────────────────────────────────────────────
   Each category is introduced by its own full-bleed band, and the grounds
   lighten across the page. Ink is passed in per zone from the template so
   the dark first band and the pale last band both stay legible. */
.faq-page .inner-content { padding-bottom: 0; }
.faq-intro { padding-bottom: clamp(30px, 4vw, 48px); }

.faq-cat {
  background: var(--faq-bg, var(--cream));
  color: var(--faq-ink, var(--earth));
  padding: clamp(30px, 4.2vw, 54px) 0;
}
.faq-cat h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}
/* the sun mark that opens each category */
.faq-cat h2::before {
  content: "";
  display: block;
  width: 30px; height: 15px;
  border-radius: 30px 30px 0 0;
  background: var(--coral);
  margin-bottom: 14px;
}

.faq-band { padding: 0; }
.faq-item + .faq-item { border-top: 1px solid rgba(58,47,30,.12); }
.faq-q-tx { display: block; }
.faq-q:hover .faq-q-tx { color: #A85B22; }
.faq-q:focus-visible { outline: 2.5px solid var(--coral-ink); outline-offset: -3px; }


/* ── Touch floors: the two that get missed every build ────────────────────
   Bare <button> and the base .btn class. A bare button inherits the UA
   default of 13.33px even though no stylesheet ever set a size, and a base
   .btn commonly sits at ~13.1px – both under the 14px touch floor, and both
   invisible to a selector list written from the mockup's named classes.

   Deliberately NO !important and low specificity: a variant that sets a
   LARGER size on purpose must keep winning. This is a floor for the
   unstyled, not an override of the designed. */
@media (hover: none) and (pointer: coarse) {
  button,
  input[type="submit"],
  input[type="button"] {
    font-size: 14px;
  }
  .btn,
  a.btn,
  button.btn {
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
  }
}