/* Weirwood Consulting — site styles
   Palette taken directly from the logo:
   deep teal #1F444F · teal #2F6274 · canopy red #C4494D · dusty rose #E2A9A4 */

:root{
  --teal-deep:#1F444F; --teal:#2F6274; --teal-soft:#AEBBBD;
  --cream:#FBF6EE; --sand:#EDE2D2; --rose:#E2A9A4;
  --red:#C4494D; --red-deep:#A83E43; --red-darkest:#8E3338;
  --body:#4A5A5E; --muted:#5D6B6E;
  --pad:clamp(20px,5vw,72px);
  --head-h:100px;   /* header height at rest — body reserves exactly this */
  --head-h-sm:63px; /* header height once condensed on scroll */
  --serif:"Newsreader",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--body);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--teal)}
a:hover{color:var(--red-deep)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;color:var(--teal-deep);letter-spacing:-.028em;line-height:1.1;text-wrap:pretty;margin:0}
p{margin:0;text-wrap:pretty}
.wrap{max-width:1400px;margin-inline:auto}
.ital{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--cream);color:var(--teal-deep);padding:12px 18px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.eyebrow{font-weight:500;font-size:11.5px;line-height:1.4;letter-spacing:.26em;color:var(--red-deep);margin:0 0 26px}
.on-teal .eyebrow{color:var(--rose)}

/* header — pinned to the top of the viewport on every page.
   z-index stays under .skip:focus (99) so the skip link is never covered.

   It is FIXED, not sticky, and that is the whole fix for the glitch. A sticky bar
   still occupies its space in the flow, so shrinking it from 88px to 60px pulled
   every pixel of the page up by the difference — a 28px jolt triggered by a 1px
   scroll, which is why crossing the threshold slowly looked broken. Fixed takes
   the bar out of flow, body reserves the gap with a constant padding-top, and the
   content slides underneath instead: the bar can now resize as much as it likes
   and nothing below it moves.

   The two heights are pinned rather than left to the content, because that
   padding-top has to match them exactly:
     at rest    20px + 60px + 20px = --head-h
     condensed   9px + 45px +  9px = --head-h-sm
   The middle number is the logo height: .inner is driven by it, so the logo,
   the min-height and the variable all move together or not at all.
   Change one and change the variable with it. .inner uses min-height, not height,
   so the mobile menu can still push the bar taller when it opens. */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--teal-deep);padding:20px var(--pad);
  transition:padding .24s ease,box-shadow .24s ease}
/* the gap the fixed header would otherwise sit on top of. Constant by design —
   it must NOT track the condensed height, or the jump comes straight back. */
body{padding-top:var(--head-h)}
/* keep anchor targets clear of the pinned header (skip link, in-page links).
   Uses the FULL height, not the condensed one: a short jump can land inside the
   dead band with the bar still expanded, and clearing too much is invisible
   whereas clearing too little hides the heading behind the bar. */
#main,:target{scroll-margin-top:calc(var(--head-h) + 12px)}
/* The "Email us" links point at /contact#reach-us so people land on the details
   and the form rather than the hero they did not ask for. This one target opts
   out of the rule above: that offset clears the FULL header height, which here
   leaves a strip of the teal page-head showing beneath the equally-teal bar and
   reads as one over-tall header.
   What you actually see above the eyebrow is this offset PLUS the section's own
   top padding, so that padding is subtracted back out here and what remains is
   the gap under the bar itself: 36px, the same at every width. Written this way
   because the padding is fluid — a fixed offset tuned on a wide screen puts the
   eyebrow behind the bar once the padding drops to its 58px floor. The clamp
   below therefore has to stay in step with the one on .sec. */
#reach-us{scroll-margin-top:calc(var(--head-h-sm) + 36px - clamp(58px,7vw,92px))}

/* condensed state — site.js adds .is-condensed past 64px of scroll and takes it
   off again inside the top 8px (see the sentinels there; the gap between those
   two numbers is what stops a slow scroll flickering the bar).
   The nav text never resizes, so the labels stay put and the words never reflow. */
.site-head .inner{transition:min-height .24s ease}
.site-head .brand img{transition:height .24s ease}
.site-head .nav a.btn-head{transition:padding .24s ease}
.site-head.is-condensed{padding:9px var(--pad);box-shadow:0 6px 20px rgba(31,68,79,.22)}
.site-head.is-condensed .inner{min-height:45px}
.site-head.is-condensed .brand img{height:45px}
@media(min-width:901px){
  /* desktop only — on mobile this button is a full-width row in the drop-down menu
     and must keep its larger tap target */
  .site-head.is-condensed .nav a.btn-head{padding:8px 18px}
}
/* zero-footprint markers at the top of the document for IntersectionObserver to
   watch. Positioned out of flow so they affect nothing; site.js sets each height. */
.head-sentinel{position:absolute;top:0;left:0;width:1px;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .site-head,.site-head .inner,.site-head .brand img,.site-head .nav a.btn-head{transition:none}
}
.site-head .inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,32px);max-width:1400px;margin-inline:auto;min-height:60px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
/* The logo is a single lockup (circular mark + wordmark) with a white wordmark for
   the dark header, so it is sized by height and its own aspect ratio sets the width.
   Never give it a fixed width and height together — that squashes it. */
.brand img{height:60px;width:auto;object-fit:contain}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font-size:15px;font-weight:400}
.nav a{color:rgba(251,246,238,.82);text-decoration:none}
.nav a:hover{color:var(--rose)}
/* [aria-current=page] is the page itself; [aria-current=true] marks the section a
   sub-page belongs to (a service detail page highlights "Services"). Both underline. */
.nav a[aria-current]{color:var(--cream);border-bottom:1.5px solid var(--rose);padding-bottom:3px}
.nav .tel{color:var(--rose);font-variant-numeric:tabular-nums}
.nav .tel:hover{color:var(--cream)}
.btn-head,.nav a.btn-head{background:var(--red);color:#fff;text-decoration:none;padding:11px 20px;border-radius:999px;font-size:14.5px}
.btn-head:hover,.nav a.btn-head:hover{background:var(--rose);color:var(--teal-deep)}
.nav-toggle{display:none;background:none;border:1px solid rgba(251,246,238,.4);color:var(--cream);font-family:var(--sans);font-size:13px;letter-spacing:.16em;padding:11px 15px;border-radius:999px;cursor:pointer}

/* social icons (header + footer) */
.social{display:inline-flex;align-items:center;gap:12px}
.social a{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:rgba(251,246,238,.72)}
.social a:hover{color:var(--rose)}
.social svg{width:16px;height:16px;fill:currentColor;display:block}
.social .rule{width:1px;height:15px;background:rgba(251,246,238,.28);flex:none}
/* footer: phone number and social icons on one line, split by the vertical rule */
.foot-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.foot-line .rule{width:1px;height:15px;background:rgba(237,231,220,.3);flex:none}
.foot-line .ico{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:rgba(237,231,220,.82)}
.foot-line .ico:hover{color:var(--rose)}
.foot-line .ico svg{width:16px;height:16px;fill:currentColor;display:block}
@media(max-width:900px){
  .nav-toggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:16px;border-top:1px solid rgba(251,246,238,.2)}
  /* the header is pinned, so an open menu must scroll rather than run off-screen */
  .nav.open{display:flex;max-height:calc(100dvh - var(--head-h) - 24px);overflow-y:auto;overscroll-behavior:contain}
  .nav a{padding:15px 2px;border-bottom:1px solid rgba(251,246,238,.12);font-size:17px}
  .nav a[aria-current]{border-bottom:1px solid rgba(251,246,238,.12);padding-bottom:15px}
  .btn-head{text-align:center;margin-top:16px;padding:15px 20px;font-size:16px}
  .site-head .inner{flex-wrap:wrap}
  .nav .social{padding:14px 2px;border-bottom:1px solid rgba(251,246,238,.12);gap:18px}
  .nav .social a{width:34px;height:34px;border-bottom:none}
  .nav .social svg{width:19px;height:19px}
}

/* buttons */
.btn{display:inline-block;background:var(--red);color:#FFF8F1;text-decoration:none;padding:17px 30px;border-radius:999px;font-weight:500;font-size:16.5px;line-height:1;border:none;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--red-deep);color:#FFF8F1}
.btn-dark{display:inline-block;background:var(--teal-deep);color:var(--cream);text-decoration:none;padding:16px 28px;border-radius:999px;font-weight:500;font-size:16px;line-height:1}
.btn-dark:hover{background:var(--teal);color:var(--cream)}
.btn-quiet{font-weight:300;font-size:16.5px;color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(47,98,116,.4);padding-bottom:4px}
.btn-quiet:hover{color:var(--red-deep)}
.link-more{font-weight:500;font-size:15.5px;color:var(--teal);text-decoration:none;border-bottom:1.5px solid rgba(47,98,116,.35);padding-bottom:4px;align-self:flex-start}
.link-more:hover{color:var(--red-deep)}
.cta-row{display:flex;align-items:center;gap:24px;margin-top:38px;flex-wrap:wrap}
/* .link-more sets align-self:flex-start so it does not stretch inside the column-flex
   cards on the home page; in this row it must sit centred against the taller button */
.cta-row .link-more{align-self:center}

/* sections */
.sec{position:relative;padding:clamp(58px,7vw,92px) var(--pad);overflow:hidden}
.sec-teal{background:var(--teal-deep);color:rgba(237,231,220,.88)}
.sec-teal h1,.sec-teal h2,.sec-teal h3{color:var(--cream)}
.sec-sand{background:var(--sand)}
.sec h2{font-size:clamp(29px,3.4vw,44px)}
.sec h3{font-size:clamp(23px,2.2vw,28px)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(32px,5vw,64px);align-items:start}
.stack{display:flex;flex-direction:column;gap:22px;max-width:40em}
.lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.65;max-width:34em}
.pull{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,1.9vw,24px);line-height:1.52;color:var(--red-deep)}
.sec-teal .pull{color:var(--cream)}
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,52px)}
.head-row p{font-size:16.5px;line-height:1.55;color:var(--muted);max-width:26em}

/* decorative shapes */
.shp{position:absolute;display:block;pointer-events:none}
.arch{border-radius:999px 999px 8px 8px}
.arch-r{border-radius:0 999px 999px 0}
.round{border-radius:999px}
.sq{border-radius:6px}

/* page head */
.page-head{position:relative;background:var(--teal-deep);padding:clamp(52px,6vw,84px) var(--pad) clamp(56px,6vw,88px);overflow:hidden}
.page-head .inner{position:relative;max-width:1400px;margin-inline:auto}
.page-head h1{color:var(--cream);font-size:clamp(34px,4.4vw,60px);max-width:20em}
.page-head .lede{margin-top:26px;color:rgba(237,231,220,.9)}
.page-head .eyebrow{color:var(--rose)}

/* hero (home) */
.hero{position:relative;padding:clamp(46px,5.5vw,78px) var(--pad) clamp(52px,6vw,86px);overflow:hidden}
.hero .inner{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(32px,5vw,68px);align-items:center;max-width:1400px;margin-inline:auto}
.hero h1{font-size:clamp(38px,4.8vw,66px);letter-spacing:-.032em}
.hero h1 .ital{color:var(--red-deep)}
.hero .lede{margin-top:30px;max-width:28em}
.photo-arch{position:relative;padding:0 0 28px 28px;display:flex;justify-content:flex-end}
.photo-arch .frame{position:relative;width:min(74%,420px);aspect-ratio:3/4.15;border-radius:999px 999px 8px 8px;overflow:hidden;background:var(--sand)}
.photo-arch .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}

/* service blocks */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(28px,3.5vw,44px)}
.svc{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:20px}
.glyph{height:132px;display:flex;align-items:flex-end;gap:12px}
.glyph span{display:block}
.svc .sub{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;color:var(--red-deep)}
.svc p.desc{font-size:17px;line-height:1.68}

.svc-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(28px,4vw,56px);align-items:start}
.svc-detail .glyph{height:auto;align-items:flex-start}
.nf .values a{color:var(--teal);text-decoration:none}
.nf .values a:hover{color:var(--red-deep)}

/* detail list (services page / approach) */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,3vw,44px);padding:34px 0;border-top:1px solid rgba(31,68,79,.18);align-items:start}
.row:last-child{border-bottom:1px solid rgba(31,68,79,.18)}
.sec-teal .row{border-color:rgba(237,231,220,.22)}
.row .k{display:flex;gap:16px;align-items:flex-start}
.row .k h3{font-size:clamp(21px,2vw,26px)}
.row .badge{width:34px;height:34px;flex:none;margin-top:3px}
.row p{font-size:17px;line-height:1.7}

/* values */
.values{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,54px);margin-top:clamp(36px,4vw,52px);padding-top:26px;border-top:1px solid rgba(31,68,79,.22);font-weight:500;font-size:14.5px;line-height:1.4;letter-spacing:.16em;color:var(--teal)}
.sec-teal .values{border-color:rgba(237,231,220,.22);color:rgba(237,231,220,.84)}

/* people */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(30px,4vw,56px);align-items:start}
.team-shot{margin:0}
.team-shot .frame{position:relative;width:100%;max-width:400px;aspect-ratio:3/4;border-radius:999px 999px 8px 8px;overflow:hidden;background:var(--sand)}
.team-shot .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.team-shot figcaption{margin-top:16px;max-width:400px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--red-deep)}
.bios{display:flex;flex-direction:column;gap:clamp(30px,4vw,44px)}
.bios .person h3:first-child{margin-top:0}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(30px,4vw,56px);margin-top:8px}
.shot-wrap{position:relative;padding:0 0 22px 22px;width:100%;max-width:362px}
.shot-wrap .shot{position:relative}
.glyph-sm{height:84px;margin-bottom:20px}
.person .shot{position:relative;width:100%;max-width:340px;z-index:1;aspect-ratio:3/3.8;border-radius:999px 999px 8px 8px;overflow:hidden;background:var(--sand)}
.person .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.person h3{margin:24px 0 4px;font-size:clamp(23px,2.1vw,27px)}
.person .role{font-family:var(--serif);font-style:italic;font-size:18.5px;color:var(--red-deep);margin-bottom:16px}
.person .bio{display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:1.7}

/* named partner strip */
.partner{display:flex;align-items:center;gap:clamp(22px,3vw,40px);flex-wrap:wrap;padding-top:clamp(34px,4vw,50px);border-top:1px solid rgba(31,68,79,.16);max-width:1400px;margin-inline:auto}
.partner .pic{position:relative;width:clamp(112px,13vw,168px);flex:none}
.partner .pic .in{position:relative;aspect-ratio:1;border-radius:999px;overflow:hidden;background:var(--sand)}
.partner .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.partner p{flex:1 1 300px;font-size:clamp(19px,2vw,25px);line-height:1.45;color:var(--teal-deep)}
.partner strong{font-weight:600}

/* testimonial */
blockquote{margin:0;max-width:24em;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.4vw,30px);line-height:1.44;color:var(--teal-deep);text-wrap:pretty}
.quote-row{display:flex;gap:clamp(20px,3vw,44px);align-items:flex-start}
.attrib{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.attrib .dash{width:40px;height:1.5px;background:var(--red)}
.attrib .who{font-weight:400;font-size:16px;color:var(--body)}
.todo{background:rgba(196,73,77,.12);color:var(--red-deep);font-weight:400;font-size:11px;line-height:1.5;letter-spacing:.12em;padding:6px 10px}

/* CTA */
.cta{position:relative;background:var(--red-deep);padding:clamp(60px,7vw,92px) var(--pad);overflow:hidden}
.cta .inner{position:relative;max-width:1400px;margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(32px,5vw,68px);align-items:end}
.cta h2{color:#FFF6F0;font-size:clamp(32px,3.7vw,48px);letter-spacing:-.03em}
.cta p{margin-top:24px;max-width:26em;font-size:clamp(17px,1.5vw,18.5px);line-height:1.7;color:#FFF6F0}
.cta .links{display:flex;flex-direction:column;gap:16px}
.cta .primary{background:var(--cream);color:var(--red-darkest);text-decoration:none;padding:19px 28px;border-radius:999px;font-weight:500;font-size:17px;line-height:1;display:flex;justify-content:space-between;align-items:center;gap:16px}
.cta .primary:hover{background:#fff;color:var(--red-darkest)}
.cta .alt{border:1.5px solid rgba(255,246,240,.45);color:#FFF6F0;text-decoration:none;padding:17px 28px;border-radius:999px;font-size:17px;line-height:1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta .alt:hover{border-color:#FFF6F0;color:#fff}

/* footer */
.site-foot{background:var(--teal-deep);padding:clamp(30px,3.2vw,42px) var(--pad) 26px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(20px,2.6vw,34px);align-items:start;padding-bottom:24px;border-bottom:1px solid rgba(237,231,220,.18)}
/* the lockup already carries the company name, so the footer stacks it above the
   tagline rather than setting a separate wordmark beside it.
   The tagline uses the eyebrow style used for section labels, not the serif italic
   used for pull quotes: an italic line on its own under the lockup read as a script
   flourish against the sans footer columns. */
.foot-brand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot-brand img{height:44px;width:auto;object-fit:contain}
.foot-brand .t{font-weight:500;font-size:11.5px;line-height:1.4;letter-spacing:.26em;text-transform:uppercase;color:var(--rose);margin:0}
.foot-col{display:flex;flex-direction:column;gap:7px;font-size:14.5px;line-height:1.55;color:rgba(237,231,220,.82)}
.foot-col a{color:rgba(237,231,220,.82);text-decoration:none}
.foot-col a:hover{color:var(--rose)}
.legal{margin-top:14px;font-size:12.5px;line-height:1.5;color:rgba(237,231,220,.74)}
.legal a{color:rgba(237,231,220,.74)}
.legal .rule-dot{margin:0 4px;opacity:.55}
.legal a[data-cookie-settings]{cursor:pointer}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(32px,5vw,64px);align-items:start}
.detail{display:flex;flex-direction:column;gap:4px;padding:22px 0;border-top:1px solid rgba(31,68,79,.16)}
.detail:last-child{border-bottom:1px solid rgba(31,68,79,.16)}
.detail .k{font-weight:500;font-size:11.5px;letter-spacing:.22em;color:var(--red-deep)}
.detail a,.detail .v{font-size:19px;color:var(--teal);text-decoration:none;word-break:break-word}
.detail a:hover{color:var(--red-deep)}
form{display:flex;flex-direction:column;gap:20px}
label{display:flex;flex-direction:column;gap:8px;font-size:12.5px;letter-spacing:.18em;font-weight:500;color:var(--teal-deep);text-transform:uppercase}
input,textarea{font-family:var(--sans);font-weight:300;font-size:17px;color:var(--teal-deep);background:var(--cream);border:1px solid rgba(31,68,79,.3);border-radius:4px;padding:14px 16px;width:100%}
input:focus,textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 2px rgba(47,98,116,.18)}
textarea{min-height:150px;resize:vertical}
.form-note{font-size:14px;line-height:1.6;color:var(--muted)}

/* Honeypot. Pushed off-screen rather than display:none, because some bots skip
   fields they can tell are hidden; aria-hidden and tabindex=-1 on the markup keep
   it away from screen readers and the tab order. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Turnstile renders its own iframe; this is just the spacing around it */
.cf-turnstile{min-height:65px}
.form-status{font-size:15px;line-height:1.6;padding:12px 14px;border-radius:4px;margin:0}
.form-status.is-ok{color:var(--teal-deep);background:rgba(47,98,116,.09);border:1px solid rgba(47,98,116,.28)}
.form-status.is-err{color:var(--red-darkest);background:rgba(196,73,77,.08);border:1px solid rgba(196,73,77,.32)}
/* Field-level validation messages. These sit inside the <label>, which is uppercase and
   widely letter-spaced, so the label typography has to be undone or the message is
   unreadable. */
.field-err{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--red-darkest)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--red)}
input[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(196,73,77,.18)}
.booking .frame{margin-top:28px;background:var(--cream);border:1px solid rgba(31,68,79,.16);border-radius:6px;min-height:660px;overflow:hidden}

/* prose */
.prose{max-width:38em}
.prose h2{font-size:clamp(23px,2.3vw,29px);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:17px;line-height:1.75}
.prose ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px}
.prose p+p{margin-top:16px}

/* 404 */
.nf{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,8vw,110px) var(--pad);position:relative;overflow:hidden}
.nf h1{font-size:clamp(34px,4.6vw,60px);max-width:20em;position:relative}
.nf p{margin-top:24px;max-width:30em;font-size:18px;position:relative}

/* ---- service detail pages + FAQ ---- */

/* "back to services" crumb above the page heading */
.crumb{display:inline-block;font-size:14px;letter-spacing:.04em;color:var(--rose);text-decoration:none;margin-bottom:20px}
.crumb:hover{color:var(--cream)}

/* bulleted points, used where the source copy is a run of short statements.
   The wording is unchanged; only the presentation is a list rather than a paragraph. */
.pts{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;max-width:40em}
.pts li{position:relative;padding-left:30px;font-size:17px;line-height:1.7}
.pts li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:999px 999px 3px 3px;background:var(--rose)}
.sec-teal .pts li::before{background:var(--rose)}
.sec-sand .pts li::before{background:var(--teal)}

/* Q&A accordions. Built on <details>/<summary> so they open and close with no
   JavaScript at all, stay keyboard accessible for free, and are still findable by
   in-page search in browsers that support content-visibility on closed details. */
.qa{max-width:46em;margin-top:clamp(26px,3.4vw,38px);border-top:1px solid rgba(31,68,79,.18)}
.qa details{border-bottom:1px solid rgba(31,68,79,.18)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  padding:22px 0;font-weight:500;font-size:clamp(17.5px,1.7vw,20px);line-height:1.45;color:var(--teal-deep)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--red-deep)}
/* the +/- marker: a horizontal bar plus a vertical bar that collapses when open */
.qa .mk{flex:none;position:relative;width:20px;height:20px;margin-top:4px}
.qa .mk::before,.qa .mk::after{content:"";position:absolute;background:var(--red);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.qa .mk::before{left:0;top:9px;width:20px;height:2px}
.qa .mk::after{left:9px;top:0;width:2px;height:20px}
.qa details[open] .mk::after{transform:scaleY(0);opacity:0}
.qa details[open] summary{color:var(--red-deep)}
.qa .ans{padding:0 0 26px;max-width:42em;font-size:17px;line-height:1.72}
.qa .ans p+p{margin-top:14px}
/* same accordion sitting on the dark teal band */
.sec-teal .qa,.sec-teal .qa details{border-color:rgba(237,231,220,.22)}
.sec-teal .qa summary{color:var(--cream)}
.sec-teal .qa summary:hover,.sec-teal .qa details[open] summary{color:var(--rose)}
.sec-teal .qa .mk::before,.sec-teal .qa .mk::after{background:var(--rose)}
.sec-teal .qa .ans{color:rgba(237,231,220,.88)}
@media(prefers-reduced-motion:reduce){.qa .mk::before,.qa .mk::after{transition:none}}

@media print{.site-head,.site-foot,.cta{display:none}}

/* ============================================================
   Cookie consent panel.
   The library ships its own stylesheet in /vendor, deliberately left untouched
   so it can be swapped for a newer version without losing our work. Everything
   below re-skins it through the custom properties it exposes, so the banner
   reads as part of the site: our cream, our teal, our pill buttons, Newsreader
   for the headings and Jost for the rest.
   ============================================================ */
#cc-main{
  --cc-font-family:var(--sans);
  --cc-bg:var(--cream);
  --cc-primary-color:var(--teal-deep);
  --cc-secondary-color:var(--body);
  --cc-link-color:var(--teal);

  --cc-btn-border-radius:999px;
  --cc-btn-primary-bg:var(--red);
  --cc-btn-primary-color:#fff;
  --cc-btn-primary-border-color:var(--red);
  --cc-btn-primary-hover-bg:var(--red-deep);
  --cc-btn-primary-hover-border-color:var(--red-deep);
  --cc-btn-primary-hover-color:#fff;

  --cc-btn-secondary-bg:transparent;
  --cc-btn-secondary-color:var(--teal-deep);
  --cc-btn-secondary-border-color:rgba(31,68,79,.34);
  --cc-btn-secondary-hover-bg:var(--sand);
  --cc-btn-secondary-hover-color:var(--teal-deep);
  --cc-btn-secondary-hover-border-color:rgba(31,68,79,.5);

  --cc-modal-border-radius:10px;
  --cc-overlay-bg:rgba(31,68,79,.55);
  --cc-separator-border-color:rgba(31,68,79,.14);
  --cc-cookie-category-block-bg:rgba(237,226,210,.45);
  --cc-cookie-category-block-border:rgba(31,68,79,.12);
  --cc-cookie-category-block-hover-bg:rgba(237,226,210,.8);
  --cc-cookie-category-expanded-block-bg:transparent;
  --cc-footer-bg:var(--sand);
  --cc-footer-color:var(--muted);
  --cc-footer-border-color:rgba(31,68,79,.14);

  --cc-toggle-on-bg:var(--teal);
  --cc-toggle-off-bg:var(--teal-soft);
  --cc-toggle-readonly-bg:rgba(174,187,189,.55);
  --cc-toggle-on-knob-bg:var(--cream);
  --cc-toggle-off-knob-bg:var(--cream);
  --cc-z-index:60;
}
/* headings in the serif, matching every other heading on the site */
#cc-main .cm__title,#cc-main .pm__title{font-family:var(--serif);font-weight:400;letter-spacing:0}
#cc-main .cm__title{font-size:21px}
#cc-main .pm__title{font-size:23px}
#cc-main .cm__desc,#cc-main .pm__section-desc{font-size:15.5px;line-height:1.65}
#cc-main .cm{box-shadow:0 18px 48px rgba(31,68,79,.24)}
/* the site's buttons are pill-shaped with a little more presence than the default */
#cc-main .cm__btn,#cc-main .pm__btn{font-family:var(--sans);font-size:14.5px;font-weight:400;padding:11px 20px}
#cc-main .pm__section--toggle .pm__section-title{font-weight:500}
@media(prefers-reduced-motion:reduce){
  #cc-main{--cc-modal-transition-duration:0s}
}

/* The library reuses --cc-btn-border-radius for the category blocks as well as the
   buttons. Our buttons are pills, and a 999px radius on a block that also carries
   overflow:hidden clips the text inside it - which is what cut the copy off in the
   expanded sections. So the blocks get their own small radius, matching the form
   inputs elsewhere on the site, and only the buttons stay pill-shaped. */
#cc-main .pm__section,
#cc-main .pm__section--toggle,
#cc-main .pm__section-title,
#cc-main .pm__section--toggle .pm__section-desc-wrapper{border-radius:4px}
/* where the open panel meets the header above it, the join stays square */
#cc-main .pm__section--toggle.is-expanded .pm__section-title{border-bottom-left-radius:0;border-bottom-right-radius:0}
#cc-main .pm__section--toggle .pm__section-desc-wrapper{border-top-left-radius:0;border-top-right-radius:0}
/* a little more breathing room now the corners are not eating into the text */
#cc-main .pm__section--toggle .pm__section-desc{padding:1.1em 1.2em}
#cc-main .pm__section{padding:1.1em 1.2em}

/* Booking calendar consent notice, shown in place of the Calendly embed when the
   booking-calendar category has been declined. */
.cal-off{display:flex;flex-direction:column;gap:12px;max-width:560px;margin-inline:auto;
  padding:clamp(22px,3vw,30px);text-align:center;background:var(--sand);
  border:1px solid rgba(31,68,79,.18);border-radius:6px}
/* .cal-off sets display:flex, which would otherwise beat the hidden attribute */
.cal-off[hidden]{display:none}
.cal-off__t{font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--teal-deep)}
.cal-off p{font-size:16px;line-height:1.65;color:var(--body)}
.is-hidden{display:none}

/* While the consent notice stands in for the calendar, the frame becomes a centring
   box. It keeps its 660px min-height either way, so without this the notice sits in
   the top-left corner of a tall empty rectangle. */
.booking .frame.is-empty{display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,40px)}