:root{--green:#0F6B4C;--green2:#0C5A3F;--green-deep:#0A4630;--mint:#A8DAC5;--pale-mint:#EDF4F0;--cream:#FAF6EC;--stone:#EFE7D5;--stone2:#E7DCC5;--ink:#241F16;--muted:#5C5A4E;--line:#E1D7BE;--line-soft:#EAE1CB;--gold:#B08D45;--gold-soft:#D8BE8B;--charcoal:#221F1D;--white:#fff;--r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--serif:'Fraunces',Georgia,serif}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}
html{max-width:100%;overflow-x:hidden}
body{max-width:100%}
/* overflow-x:hidden was previously set on both html and body. Having it on
   body too gives body a non-"visible" overflow, which makes body its own
   (never-actually-scrolling) scroll container — and that silently breaks
   .site-header's position:sticky, since the header then sticks relative to
   body instead of the viewport. Scoping it to html only keeps the
   horizontal-overflow clipping while letting the sticky header work. */
/* Main page background is now the warmer stone tone (was cream) — cards,
   panels and content boxes stay on white/cream so they read as visibly
   separated from the page rather than blending into it. */
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--stone);line-height:1.7}
a{color:var(--green2);text-decoration:none}
a:focus-visible,button:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--green2);outline-offset:3px;border-radius:4px}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin:auto}
.narrow{width:min(860px,92%)}
p{font-size:1.06rem}

/* ---------- motion base ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in-view{opacity:1;transform:none}
.reveal-zoom{opacity:0;transform:scale(.97);transition:opacity .7s ease,transform .7s ease}
.reveal-zoom.in-view{opacity:1;transform:none}
.stagger>*{transition-delay:calc(var(--i,0) * 90ms)}
@media(prefers-reduced-motion:reduce){.reveal,.reveal-zoom,.stagger>*{opacity:1!important;transform:none!important;transition:none!important}.process::after{transition:none!important}.photo-fade{animation:none!important}}

/* Feature photography: a plain CSS @keyframes fade-up, NOT gated by
   JavaScript/IntersectionObserver in any way. The element is fully opaque
   the instant the animation ends (or immediately, in any browser too old
   to run the animation at all) — visibility never depends on a script
   running, a class being toggled, or a scroll/observer callback firing. */
@keyframes photoFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes photoFadeLeft{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes photoFadeRight{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.photo-fade{animation:photoFadeUp .8s cubic-bezier(.2,.7,.3,1) both}
.photo-fade.from-left{animation-name:photoFadeLeft}
.photo-fade.from-right{animation-name:photoFadeRight}

/* Directional text/panel reveal (same safe mechanism as .reveal — opacity
   +transform, guarded by the same IntersectionObserver + failsafe timeout
   in script.js, never hidden without a guaranteed way back to visible). */
.reveal-left{opacity:0;transform:translateX(-26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal-left.in-view{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal-right.in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-left,.reveal-right{opacity:1!important;transform:none!important;transition:none!important}.photo-fade{animation:none!important}}

/* Restrained brand watermark, reused across dark sections/panels. */
.tb-watermark{position:relative;overflow:hidden}
.tb-watermark::before{content:'';position:absolute;right:-50px;bottom:-50px;width:260px;height:260px;background:url('assets/treasurebabs-logo-official-web.png') center/contain no-repeat;filter:grayscale(1) invert(1);opacity:.06;pointer-events:none;z-index:0}
.tb-watermark>*{position:relative;z-index:1}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(239,231,213,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--green-deep);white-space:nowrap;letter-spacing:-.01em}
.brand img{height:46px;width:auto;object-fit:contain}
.brand span{font-size:1.05rem}
.main-nav{display:flex;gap:1.7rem;align-items:center}
.main-nav a{position:relative;color:var(--ink);font-weight:600;font-size:.95rem;padding:8px 2px;white-space:nowrap;transition:color .2s ease}
.main-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--gold);transition:right .28s cubic-bezier(.2,.7,.3,1)}
.main-nav a:hover{color:var(--green-deep)}
.main-nav a:hover::after,.main-nav a.active::after{right:0}
.main-nav a.active{color:var(--green-deep)}
.main-nav a.nav-cta{background:var(--green-deep);color:white;padding:9px 16px;border-radius:var(--r-sm);font-weight:600;font-size:.92rem;transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.main-nav a.nav-cta::after{display:none}
.main-nav a.nav-cta:hover{background:var(--green);color:white;transform:translateY(-2px);box-shadow:0 10px 22px rgba(10,70,48,.24)}
.nav-toggle{display:none;background:none;border:0;font-size:1.4rem;color:var(--green-deep)}

/* ---------- type & headings ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;font-weight:700;color:var(--gold)}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor}
/* The homepage hero's credential/location line ("Chartered Certified
   Accountants · Swansea") reads as short metadata, not a section
   label — the little dash in front of it looked like a template
   placeholder rather than a deliberate design mark, so it's dropped
   here specifically. */
.eyebrow.no-dash::before{display:none}
.section-head.center .eyebrow{justify-content:center}
h1,h2,h3{line-height:1.15;color:var(--charcoal)}
/* These clamp() ceilings were last tuned against ~1280-1440px laptop
   widths (fixing an earlier bug where a fluid html root font-size was
   inflating everything ~25%). That left the "preferred" curve hitting
   its max well before typical desktop/monitor widths — h3 and .lead
   were already flat by ~1280px, h2 by ~1420px, h1 by ~1670px — so
   text stopped growing at all for anyone on a normal 1440-1920px+
   screen, reading noticeably smaller there than intended. The min
   bounds (which govern mobile) are unchanged; only the slope/max are
   raised so headings and lead text keep scaling gently through to
   ~1900-1950px instead of flatlining a third of the way there. */
h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,1.6rem + 1.3vw,3.15rem);letter-spacing:-.015em;margin:.4rem 0 1rem}
h1.h1-compact{font-size:clamp(1.75rem,1.5rem + 1.05vw,2.75rem)}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,1.4rem + 1vw,2.6rem);letter-spacing:-.01em;margin:.4rem 0 1rem;position:relative}
h2::after{content:'';display:block;width:46px;height:2px;margin-top:16px;background:var(--gold)}
h3{font-size:clamp(1.05rem,1rem + 0.35vw,1.4rem);font-weight:700}
.center-head h2::after{margin-left:auto;margin-right:auto}
.hero-scene h1{font-size:clamp(1.95rem,1.6rem + 1.5vw,3.4rem);line-height:1.22;letter-spacing:-.015em}
.lead{font-size:clamp(1.1rem,1.03rem + 0.4vw,1.5rem);line-height:1.55;color:var(--muted);max-width:680px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:var(--r-sm);font-weight:700;font-size:1rem;border:1px solid transparent;transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
.btn.primary{background:var(--green-deep);color:white}
.btn.primary:hover{background:var(--green);transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,70,48,.28)}
.btn.secondary{border-color:var(--green-deep);color:var(--green-deep);background:transparent}
.btn.secondary:hover{background:var(--stone);transform:translateY(-2px)}
.btn.light{background:white;color:var(--green-deep)}
.btn.light:hover{background:var(--cream);transform:translateY(-2px)}
.btn.gold{background:var(--gold);color:var(--charcoal)}
.btn.gold:hover{background:var(--gold-soft);transform:translateY(-2px)}

/* ---------- hero (full-bleed background image, text overlaid) ----------
   The photograph fills the entire hero — there is no separate image
   half and text half. A single flat, even tint sits over the whole
   photo (not a directional gradient) so the image stays visible at
   roughly the same strength across the full width, while the
   heading/lead/buttons keep enough contrast to read clearly. A slow
   one-time "settle" zoom is a plain CSS animation (no JS/observer
   dependency), so the photo is guaranteed visible regardless of what
   any script does. */
.hero-scene{position:relative;overflow:hidden;background:var(--green-deep);min-height:640px;display:flex;align-items:center}
.hero-scene-visual{position:absolute;inset:0;z-index:0}
/* Rotating hero: two photographs stacked in the same box, sharing one
   keyframe that holds each image at full opacity for 4s then fades it
   out over 1s (and back in over 1s), on a 10s cycle. The second image
   uses a NEGATIVE animation-delay (-5s, exactly half the cycle) rather
   than a positive one — a negative delay makes the animation act as
   though it had already been running for that long, so it is already
   mid-cycle and actively animating from the very first frame, instead
   of sitting frozen at its starting opacity until a positive delay
   elapses. That's what makes the two images genuinely complementary:
   whenever one is fading out, the other is fading in over that exact
   same window, so their combined opacity never dips toward zero and
   the hero never flashes to a solid background colour between images.
   A slow, independent, very subtle scale runs underneath so the
   photography feels like it's gently breathing rather than switching.
   The first slide has a plain opacity:1 fallback so, in a browser
   where the animation never runs at all, the hero still shows one
   full photograph rather than nothing. */
.hero-scene-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:heroCrossfade3 10s ease-in-out infinite,heroKenBurns 15s ease-in-out infinite}
.hero-scene-visual img:first-child{opacity:1}
.hero-scene-visual img:nth-child(1){object-position:78% center;animation-delay:0s,0s}
.hero-scene-visual img:nth-child(2){object-position:center 38%;animation-delay:-5s,7.5s}
@keyframes heroCrossfade3{0%{opacity:1}40%{opacity:1}50%{opacity:0}90%{opacity:0}100%{opacity:1}}
@keyframes heroKenBurns{0%{transform:scale(1)}50%{transform:scale(1.035)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .hero-scene-visual img{animation:none!important;opacity:0!important;transform:none!important}
  .hero-scene-visual img:first-child{opacity:1!important}
}
/* A flat, even tint across the whole hero — not a left-to-right
   gradient — so the photograph reads at roughly the same visibility
   everywhere behind the text, just dimmed enough for white/light text
   to stay readable. */
.hero-scene-scrim{position:absolute;inset:0;z-index:1;background:rgba(8,38,27,.4)}
/* The blurry fade that used to sit between the hero and the next (deep
   green) section has been removed — it read as smudged, not designed.
   The hero now ends on a crisp, flat colour change, and the section
   below already marks its own top edge with a short gold rule
   (.section.deep::after), so the seam still reads as deliberate. */
.hero-scene .container{position:relative;z-index:2}
.hero-scene-content{max-width:560px}
.hero-scene-content .hero-actions{justify-content:flex-start}
.hero-scene-content .eyebrow{color:var(--gold-soft)}
.hero-scene-content h1{color:var(--white);text-align:center}
.hero-scene-content .lead{color:var(--pale-mint)}
.hero-scene-content .btn.primary{background:var(--gold);color:var(--charcoal)}
.hero-scene-content .btn.primary:hover{background:var(--gold-soft)}
.hero-scene-content .btn.secondary{border-color:rgba(255,255,255,.65);color:var(--white)}
.hero-scene-content .btn.secondary:hover{background:rgba(255,255,255,.16)}
@media(max-width:900px){
  .hero-scene{min-height:540px}
  .hero-scene .container{padding:36px 24px}
  .hero-scene-content{max-width:none;text-align:center;margin:0 auto}
  .hero-scene-content .hero-actions{justify-content:center}
}

.credentials-strip{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:10px 18px;margin:6px 0 0;font-size:.86rem;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;font-weight:600}
.credentials-strip span+span{position:relative;padding-left:20px}
.credentials-strip span+span::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* ---------- trust strip (home) ----------
   A thin, fact-only credential band reusing the existing dot-separated
   credentials-strip pattern, centred and framed with hairline rules — a
   restrained nod to a financial-statement rule, not a new component.
   "20+ years" is explicitly attributed to Bolanle by name here so it
   never reads as a claim about how long the company itself has traded. */
.trust-strip{padding:22px 0;background:var(--stone);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip .credentials-strip{justify-content:center;margin:0}

/* ---------- who we help (home) ----------
   Editorial, not another card grid: a deep-green intro panel (with a
   faint ledger-line texture — a restrained nod to ruled financial
   paper, no fabricated figures) beside a numbered list of client types
   as plain text rows, each linking straight to the relevant Services
   section rather than sitting in a box of its own. */
.who-help-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 50px rgba(30,27,20,.1)}
.who-help-intro{background:var(--green-deep);color:var(--pale-mint);padding:48px 44px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.who-help-intro::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);pointer-events:none}
.who-help-intro>*{position:relative}
.who-help-intro h2{color:var(--white)}
.who-help-intro h2::after{background:var(--gold)}
.who-help-intro .eyebrow{color:var(--mint)}
.who-help-intro p{color:var(--mint);margin:0}
.who-help-list{background:var(--cream);display:flex;flex-direction:column;padding:8px 0}
.who-help-row{display:flex;align-items:center;gap:18px;padding:18px 40px;border-bottom:1px solid var(--line);color:var(--ink);transition:padding-left .25s ease,background .25s ease}
.who-help-row:last-child{border-bottom:0}
.who-help-row:hover{background:var(--stone);padding-left:48px}
.who-help-num{font-family:var(--serif);font-size:1.1rem;color:var(--gold-soft);flex-shrink:0;width:26px}
.who-help-label{flex:1;font-weight:700;font-size:1.08rem;color:var(--green-deep)}
.who-help-arrow{color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease;flex-shrink:0}
.who-help-row:hover .who-help-arrow{opacity:1;transform:translateX(0)}
@media(max-width:900px){
  .who-help-grid{grid-template-columns:1fr}
  .who-help-intro{padding:40px 28px}
  .who-help-row{padding:16px 24px}
  .who-help-row:hover{padding-left:30px}
}

/* ---------- what do you need help with (home) ----------
   Deliberately different from Who We Help: plain client-friendly
   questions as elegant text links on a stone background, with a gold
   underline that grows on hover rather than a numbered list. */
.what-help{background:var(--cream)}
.what-help-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 48px;margin-top:8px}
.what-help-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;border-bottom:1px solid var(--line-soft);color:var(--green-deep);font-family:var(--serif);font-size:1.12rem;font-weight:600;position:relative}
.what-help-item::after{content:'';position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--gold);transition:right .3s cubic-bezier(.2,.7,.3,1)}
.what-help-item:hover::after{right:0}
.what-help-item:hover{color:var(--green)}
.what-help-arrow{color:var(--gold);font-family:var(--serif);flex-shrink:0;transition:transform .25s ease}
.what-help-item:hover .what-help-arrow{transform:translateX(4px)}
@media(max-width:800px){.what-help-list{grid-template-columns:1fr}}

/* ---------- sticky consultation CTA (mobile only) ----------
   Desktop already keeps "Book a Consultation" visible at all times in
   the sticky header; on mobile that button is hidden inside the
   hamburger menu, so this fills that one real gap — a small, quiet pill
   that fades/rises in once the visitor has scrolled past the hero, and
   never covers the mobile nav (which lives at the top, not here). */
.sticky-consult{position:fixed;left:50%;bottom:18px;transform:translate(-50%,16px);z-index:20;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease;display:none}
.sticky-consult.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.sticky-consult a{background:var(--green-deep);color:white;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.92rem;box-shadow:0 10px 26px rgba(10,70,48,.35);border:1px solid var(--gold-soft);display:inline-flex;align-items:center;gap:8px}
@media(max-width:640px){.sticky-consult{display:block}}
@media(prefers-reduced-motion:reduce){.sticky-consult{transition:opacity .2s ease}}

/* ---------- editorial image/text split band (full-bleed, no container) ----------
   Used for About's "Who We Are". The photo already bleeds to the section
   edge; a short gold rule and a soft green depth-shape behind the photo
   give it some layering beyond a plain rectangle. */
.split-band{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split-media{position:relative;overflow:hidden;min-height:360px}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.split-media:hover img{transform:scale(1.05)}
.split-band.depth{position:relative}
.split-band.depth .split-media{margin:28px 28px 28px 0}
.split-band.depth .split-media::before{content:'';position:absolute;top:20px;left:-20px;right:-20px;bottom:-20px;background:var(--green-deep);z-index:-1}
.split-copy{display:flex;flex-direction:column;justify-content:center;padding:64px clamp(24px,6vw,64px)}
.split-rule{display:block;width:0;height:2px;background:var(--gold);margin:4px 0 22px;transition:width .9s cubic-bezier(.2,.7,.3,1) .2s}
.split-copy.in-view .split-rule{width:64px}
.split-band.reverse .split-media{order:2}
.split-band.reverse .split-copy{order:1}
.mt-md{margin-top:24px}
@media(max-width:900px){
  .split-band{grid-template-columns:1fr}
  .split-band.reverse .split-media,.split-band.reverse .split-copy{order:initial}
  .split-media{min-height:260px}
  .split-band.depth .split-media{margin:20px 20px 0 20px}
  .split-copy{padding:40px 24px}
}
/* Compact variant (About "Who We Are"). The default split-band above
   lets the media stretch (align-items:stretch, inherited here too) to
   match whatever height the copy column needs — combined with
   .split-copy's own 64px vertical padding on top of the outer
   .section's 88px, a modest 3-paragraph intro was producing a very
   tall image and a lot of empty space around a small amount of text.
   This variant keeps the stretch-to-match-copy behaviour (so the two
   columns' heights track each other naturally at any width, rather
   than drifting apart the way a fixed/vw-based image height did when
   tried here), but caps it with max-height so the image can't balloon
   past a sensible size the way it did before, and trims the copy
   column's padding so the height it's matching is reasonable to begin
   with. Used with .section.tight on the wrapping <section> for the
   same reason — less outer padding.
   The column-ratio override is scoped to min-width:901px specifically
   because .split-band.compact (two classes) is otherwise MORE specific
   than the existing @media(max-width:900px){.split-band{...1fr}} mobile
   stacking rule below, and would silently win over it at any width —
   this keeps that existing mobile behaviour fully intact. */
@media(min-width:901px){.split-band.compact{grid-template-columns:1.15fr 1fr}}
.split-band.compact .split-copy{padding:40px clamp(24px,5vw,56px)}
.split-band.compact .split-media{min-height:0;max-height:460px;align-self:center}
.split-band.compact .split-media img{object-position:center 28%}
@media(max-width:900px){
  .split-band.compact .split-copy{padding:32px 24px}
  .split-band.compact .split-media{height:clamp(220px,58vw,320px);max-height:none;min-height:0}
}

/* ---------- advisory scene (home) — image as a background layer with an
   overlapping deep-green content panel, not a side-by-side split ---------- */
.advisory-scene{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden}
.advisory-media{position:absolute;inset:0}
.advisory-media img{width:100%;height:100%;object-fit:cover}
.advisory-media::before{content:'';position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(180deg,var(--green-deep),transparent);opacity:.5;pointer-events:none}
.advisory-panel{position:relative;background:var(--green-deep);color:var(--pale-mint);padding:52px 48px;max-width:560px;margin-left:auto;box-shadow:0 30px 70px rgba(10,70,48,.32)}
.advisory-panel h2,.advisory-panel h2::after{color:var(--white)}
.advisory-panel h2::after{background:var(--gold)}
.advisory-panel .eyebrow{color:var(--mint)}
.advisory-rule{display:block;width:0;height:2px;background:var(--gold);margin:22px 0 0;transition:width 1s cubic-bezier(.2,.7,.3,1) .25s}
.advisory-panel.in-view .advisory-rule{width:72px}
.advisory-panel .service-cols{margin-top:20px;column-gap:28px}
.advisory-panel .service-cols a{color:var(--pale-mint);border-bottom-color:rgba(255,255,255,.2)}
.advisory-panel .service-cols a:hover{color:white}
.advisory-panel .text-link{color:var(--gold-soft)}
.advisory-panel .text-link:hover{color:var(--gold)}
@media(max-width:900px){
  .advisory-scene{min-height:auto;display:block}
  .advisory-media{position:relative;inset:auto;aspect-ratio:4/3}
  .advisory-panel{margin:-56px 20px 0;max-width:none;padding:36px 26px}
}

/* ---------- sections ---------- */
.section{padding:88px 0}
.section.alt{background:var(--white)}
.section.stone{background:var(--stone)}
.section.deep,.section.charcoal{position:relative}
.section.deep{background:var(--green-deep);color:var(--pale-mint)}
.section.deep h2,.section.deep h1,.section.deep h3{color:var(--white)}
.section.deep h2::after{background:var(--gold)}
.section.deep .lead,.section.deep .eyebrow{color:var(--mint)}
/* Was solid charcoal; recoloured to deep green so green (not charcoal/
   brown) reads as the site's main dark brand colour — charcoal is now kept
   for small, controlled areas only (footer, text). */
.section.charcoal{background:var(--green-deep);color:var(--pale-mint)}
.section.charcoal h2,.section.charcoal h1,.section.charcoal h3{color:var(--white)}
.section.charcoal h2::after{background:var(--gold)}
.section.charcoal .lead,.section.charcoal .eyebrow{color:var(--mint)}
/* A thin gold seam marks the transition into a dark section intentionally,
   instead of the colour just cutting off hard. */
.section.deep::after,.section.charcoal::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(240px,55%);height:2px;background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);opacity:.8;pointer-events:none}
.section.tight{padding:56px 0}
.section-head{margin-bottom:40px}
.section-head.center{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.section-head.mt-lg{margin-top:64px}
.section-head.center h2::after{margin-left:auto;margin-right:auto}

/* interactive "why choose us" cards (home) — click to expand, one at a time */
.why-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:8px}
.why-card{flex:1 1 270px;max-width:320px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 20px rgba(30,27,20,.05);transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease}
.why-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(30,27,20,.09);border-color:var(--gold-soft)}
.why-toggle{display:flex;flex-direction:column;width:100%;background:none;border:0;padding:28px 26px;font:inherit;color:inherit;text-align:left;cursor:pointer}
/* Shared icon-tile colour across .why-icon/.value-icon/.svc-icon — see
   DESIGN.md §7. Uses the existing --gold-soft token (a deliberate
   mid-tone between the old solid --gold, judged too heavy, and a later
   --stone pass, judged too pale) so all three read as one system. */
.why-icon{width:44px;height:44px;display:grid;place-items:center;color:var(--green-deep);background:var(--gold-soft);border-radius:12px;margin-bottom:14px;flex-shrink:0}
.why-icon svg{width:23px;height:23px}
.why-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.why-title{font-size:1.12rem;font-weight:700;color:var(--green-deep);transition:color .2s ease}
.why-toggle:hover .why-title{color:var(--green)}
.why-summary{margin-top:6px;color:var(--muted);font-size:.98rem}
.why-chevron{width:20px;height:20px;flex-shrink:0;margin-top:2px;display:grid;place-items:center;color:var(--gold);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.why-chevron svg{width:13px;height:13px}
.why-card.is-open .why-chevron{transform:rotate(180deg)}
.why-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.3,1)}
.why-card.is-open .why-panel{grid-template-rows:1fr}
.why-panel-inner{overflow:hidden;opacity:0;transition:opacity .3s ease}
.why-card.is-open .why-panel-inner{opacity:1;transition:opacity .35s ease .1s}
.why-panel-inner p{margin:0;padding:0 26px 26px;color:var(--muted);font-size:.98rem}

/* editorial link columns (replaces boxed link grid) */
.service-cols{column-count:2;column-gap:56px;margin-top:8px}
.service-cols a{display:block;position:relative;padding:14px 26px 14px 0;border-bottom:1px solid var(--line);break-inside:avoid;color:var(--charcoal);font-weight:600;transition:color .25s ease,padding-left .25s ease}
.service-cols a::after{content:'→';position:absolute;right:2px;top:14px;opacity:0;transition:opacity .25s ease,transform .25s ease;transform:translateX(-6px);color:var(--gold)}
.service-cols a:hover{color:var(--green-deep);padding-left:8px}
.service-cols a:hover::after{opacity:1;transform:translateX(0)}

.text-link{color:var(--green-deep);font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:gap .2s ease}
.text-link:hover{color:var(--green);gap:10px}
.banner-photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line)}
/* Ivory, not green — this is the section directly above the footer on
   Home, and a second green block here was exactly what made the bottom
   of the page read as one oversized green wall. An ivory (stone) close
   with a gold top rule keeps the "premium, intentional" feel while
   leaving only the compact footer below in the brand's dark colour. */
.cta{background:var(--stone);color:var(--ink);padding:64px 0;position:relative;overflow:hidden;border-top:3px solid var(--gold)}
.cta::before{content:'';position:absolute;right:-40px;bottom:-50px;width:300px;height:300px;background:url('assets/treasurebabs-logo-official-web.png') center/contain no-repeat;filter:grayscale(1);opacity:.05;pointer-events:none}
.cta h2{color:var(--green-deep)}
.cta h2::after{background:var(--gold)}
.cta .lead{color:var(--muted)}
.cta .container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative}
.cta-banner{background:var(--green-deep);color:var(--white);border-radius:var(--r-lg);padding:44px 40px;margin-top:40px;text-align:center;position:relative;overflow:hidden}
.cta-banner h2{color:var(--white)}
.cta-banner h2::after{background:var(--gold);margin-left:auto;margin-right:auto}
.cta-banner .lead{color:var(--mint);max-width:560px;margin:0 auto 24px}

.page-hero{padding:80px 0 46px;background:var(--cream)}

/* ---------- page hero photo treatment (About / Services / How We Work /
   Contact) ----------
   The same rotating-image, crossfade-and-Ken-Burns quality as the
   homepage hero (reuses the exact heroCrossfade/heroKenBurns keyframes
   for a consistent transition feel), scaled to a shorter band suited to
   an inner-page intro rather than a full landing hero. Legal, Pricing
   and Thank You keep the plain .page-hero band untouched. */
.page-hero.photo{padding:0;position:relative;overflow:hidden;min-height:400px;display:flex;align-items:center}
.page-hero-visual{position:absolute;inset:0;z-index:0}
.page-hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:heroCrossfade 15s ease-in-out infinite,heroKenBurns 15s ease-in-out infinite}
.page-hero-visual img:first-child{opacity:1}
.page-hero-visual img:nth-child(1){animation-delay:0s,0s}
.page-hero-visual img:nth-child(2){animation-delay:5s,1.5s}
.page-hero-visual img:nth-child(3){animation-delay:10s,3s}
@media(prefers-reduced-motion:reduce){
  .page-hero-visual img{animation:none!important;opacity:0!important;transform:none!important}
  .page-hero-visual img:first-child{opacity:1!important}
}
.page-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--stone) 0%,var(--stone) 38%,rgba(239,231,213,.92) 50%,rgba(239,231,213,.5) 64%,rgba(239,231,213,.1) 80%,transparent 92%)}
.page-hero.photo .container{position:relative;z-index:2;padding:80px 0 52px}
@media(max-width:900px){
  .page-hero.photo{min-height:auto;display:block}
  .page-hero-visual{position:relative;inset:auto;aspect-ratio:4/3;z-index:auto}
  .page-hero-scrim{background:linear-gradient(180deg,transparent 38%,var(--stone) 92%)}
  .page-hero.photo .container{padding:28px 24px 40px;text-align:center}
  .page-hero.photo .eyebrow{justify-content:center}
}

/* ---------- values (about) ----------
   Pure flexbox wrap (no breakpoints needed): a 250px flex-basis with a
   300px cap naturally gives 1-per-row on mobile, 2-per-row on tablet,
   and 3-per-row (+2 centred underneath) on desktop, at any width. */
.values-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:32px}
.value-item{flex:1 1 250px;max-width:300px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px 28px;box-shadow:0 6px 20px rgba(30,27,20,.05);transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease}
.value-item:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(30,27,20,.09);border-color:var(--gold-soft)}
.value-icon{width:46px;height:46px;display:grid;place-items:center;color:var(--green-deep);background:var(--gold-soft);border-radius:12px;margin-bottom:16px}
.value-icon svg{width:24px;height:24px}
.value-item h3{margin:0 0 8px;font-size:1.18rem;color:var(--green-deep)}
.value-item p{margin:0;color:var(--muted);font-size:1rem}

.divider{border:0;height:1px;background:var(--line);margin:56px 0 0}
.divider-accent{border:0;height:2px;width:56px;background:var(--gold);margin:56px auto 0}
/* Wide/horizontal composition: the photo takes a fixed, moderate
   column so it never balloons to fill space, and the biography gets
   the rest of the page's width to breathe — avoiding the very tall,
   narrow text column a near-even split produced at the old .narrow
   (860px) container width. */
.founder-grid{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:56px;align-items:start;margin-top:16px}
.founder-photo-wrap{position:relative;align-self:start}
.founder-photo-wrap::before{content:'';position:absolute;top:-18px;left:-18px;right:18px;bottom:18px;border:2px solid var(--gold);border-radius:var(--r-md);z-index:0}
.founder-photo{position:relative;z-index:1;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;border-radius:var(--r-md);box-shadow:0 24px 48px rgba(30,27,20,.16)}
.founder p{color:var(--muted)}
.founder-copy h2{margin-top:0}
@media(min-width:901px){.founder-copy{border-left:2px solid var(--gold-soft);padding-left:44px;padding-top:6px}}
@media(max-width:600px){.founder-photo-wrap::before{top:-12px;left:-12px;right:12px;bottom:12px}}

/* ---------- mission band ---------- */
.mission{background:var(--green-deep);color:var(--pale-mint);border-radius:var(--r-lg);padding:52px 48px;margin-top:40px;position:relative;overflow:hidden}
.mission h2,.mission h2::after{color:var(--white)}
.mission h2::after{background:var(--gold)}
.mission p{color:var(--mint);font-size:1.2rem;max-width:64ch;position:relative}
.mission p+p{color:#DDEFE5}
/* Small financial-detail photo, floated as a subtle accent in the mission
   band's corner — a supporting visual, not a competing image. */
.mission-accent{position:absolute;right:-16px;bottom:-16px;width:128px;height:128px;border-radius:var(--r-md);overflow:hidden;box-shadow:0 16px 32px rgba(6,30,20,.4);border:3px solid var(--gold-soft);opacity:.92}
.mission-accent img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.mission-accent{display:none}}

/* ---------- photo strip (About / Services) ----------
   A shared, restrained "photography between sections" treatment: a short,
   wide rounded image with a deep-green wash on one edge and a thin gold
   rule beneath, reused wherever a page needs a supporting photograph that
   isn't a full section of its own. */
.photo-strip{margin:48px 0}
.photo-strip-frame{position:relative;height:clamp(160px,20vw,240px);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 44px rgba(30,27,20,.14)}
.photo-strip-frame img{width:100%;height:100%;object-fit:cover}
.photo-strip-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,var(--green-deep) 0%,rgba(10,70,48,.5) 24%,transparent 55%);pointer-events:none}
.photo-strip-rule{display:block;width:56px;height:2px;background:var(--gold);margin:14px auto 0}

/* ---------- people strip (home) ----------
   An overlapping deep-green caption card offset over the corner of a
   photograph, rather than a plain rectangle — one of the "more alive"
   photography treatments used to break up the home page's green bands. */
.people-strip{background:var(--stone)}
.people-strip-grid{position:relative;max-width:640px;margin:0 auto}
.people-strip-media{height:clamp(260px,32vw,380px);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 26px 60px rgba(30,27,20,.16);position:relative}
.people-strip-media img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
.people-strip-media::after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,rgba(10,70,48,.4),transparent 60%)}
.people-strip-caption{position:relative;background:var(--green-deep);color:var(--pale-mint);padding:26px 30px;border-radius:var(--r-md);margin:-46px 32px 0;box-shadow:0 20px 40px rgba(10,70,48,.26);max-width:420px}
.people-strip-caption::before{content:'';position:absolute;top:0;left:30px;width:40px;height:2px;background:var(--gold)}
.people-strip-caption .eyebrow{color:var(--mint)}
.people-strip-caption p{margin:10px 0 0;color:var(--pale-mint);font-size:1.02rem}
@media(max-width:700px){.people-strip-caption{margin:-28px 16px 0;padding:22px 22px}}

.notice{margin:24px 0;padding:18px 20px;background:var(--stone);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink)}
.center{text-align:center;margin-top:32px}

/* ---------- process timeline (how we work) — deliberately card-less, distinct from services ---------- */
.process{position:relative;margin:36px 0 52px;--progress:0}
.process::before{content:'';position:absolute;top:0;bottom:0;left:34px;width:1px;background:var(--line);z-index:0}
.process::after{content:'';position:absolute;top:0;left:34px;width:2px;height:100%;background:var(--gold);transform-origin:top;transform:scaleY(var(--progress));transition:transform .1s linear;z-index:0}
/* .process-step gets its own explicit stack level (not just position:
   relative) so the whole step — numbered circle included — reliably
   paints above the timeline line (.process::before/::after). Without
   this, the step's reveal-left/reveal-right transform can promote it
   into a stacking context that isn't dependably compared against the
   line's z-index, which is what let the gold line visually cross over
   the circles rather than sit behind them. */
.process-step{position:relative;z-index:1;display:grid;grid-template-columns:70px 1fr;gap:22px;padding:0 0 44px}
.process-step:last-child{padding-bottom:0}
.process-num{position:relative;z-index:1;width:68px;height:68px;border-radius:50%;background:var(--cream);border:1px solid var(--green-deep);color:var(--green-deep);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1.35rem;flex-shrink:0;transition:background .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease}
.process-num span{position:relative;z-index:1}
.process-step.in-view .process-num{background:var(--green-deep);color:white;border-color:var(--gold);box-shadow:0 8px 20px rgba(10,70,48,.28);animation:numPulse 1.1s ease-out}
/* A single one-shot gold ripple when a step's number activates — not a
   continuous/looping animation, just a small settle-in flourish. */
@keyframes numPulse{0%{box-shadow:0 8px 20px rgba(10,70,48,.28),0 0 0 0 rgba(176,141,69,.45)}70%{box-shadow:0 8px 20px rgba(10,70,48,.28),0 0 0 9px rgba(176,141,69,0)}100%{box-shadow:0 8px 20px rgba(10,70,48,.28),0 0 0 0 rgba(176,141,69,0)}}
@media(prefers-reduced-motion:reduce){.process-step.in-view .process-num{animation:none}}
.process-body{padding:6px 0 0;border-top:2px solid var(--gold-soft);transition:border-color .3s ease;position:relative}
.process-step:hover .process-body,.process-step.in-view .process-body{border-top-color:var(--gold)}
/* A very faint deep-green wash behind the active step's text — enough to
   give the current step a touch of quiet emphasis without turning the
   deliberately card-less timeline into a boxed panel. */
.process-body::before{content:'';position:absolute;top:-10px;bottom:-10px;left:-22px;right:-22px;background:radial-gradient(ellipse at center,rgba(10,70,48,.09),transparent 72%);opacity:0;transition:opacity .8s ease;pointer-events:none;z-index:-1}
.process-step.in-view .process-body::before{opacity:1}
/* The wash above bleeds 22px past .process-body on both sides, which is
   fine once the container's side gutter comfortably exceeds that (true
   from ~1000px up). Below that, the gutter this row actually has left
   (after the timeline's own grid columns) shrinks below 22px — as low as
   ~8px right around the 860-950px range, and to ~15-17px on phones — so
   the same fixed bleed was pushing past the page edge and causing a real
   (if invisible-looking, since the gradient itself fades out well before
   its own edge) horizontal-scroll overflow. Pull the bleed in to a value
   that's safely inside the smallest gutter this row has anywhere in that
   band, rather than resizing per breakpoint. */
@media(max-width:1024px){.process-body::before{left:-6px;right:-6px}}
/* Text settles in a beat after the number/photo, instead of everything
   arriving in one flat motion. */
.process-body h3,.process-body p{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.process-step.in-view .process-body h3{opacity:1;transform:none;transition-delay:.12s}
.process-step.in-view .process-body p{opacity:1;transform:none;transition-delay:.22s}
@media(prefers-reduced-motion:reduce){.process-body h3,.process-body p{opacity:1!important;transform:none!important;transition:none!important}}
.process-body h3{margin:14px 0 8px;color:var(--green-deep)}
.process-body p{margin:0;color:var(--muted)}
.process-photo{display:block;width:220px;height:165px;max-width:100%;object-fit:cover;border-radius:var(--r-md);margin-bottom:14px;box-shadow:0 10px 24px rgba(30,27,20,.1);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.process-step.in-view .process-photo{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){.process-step.in-view .process-photo{transform:none}}

/* A small floating circular crop for Step 3. */
.ph-float .process-photo{width:104px;height:104px;border-radius:50%;float:right;margin:0 0 12px 16px;box-shadow:0 10px 22px rgba(30,27,20,.18);border:3px solid var(--cream)}
@media(min-width:860px){
  .process-step:nth-child(even).ph-float .process-photo{float:left;margin:0 18px 12px 0}
}
@media(max-width:859px){
  .ph-float .process-photo{float:none;margin:0 0 14px;width:100%;height:150px;border-radius:var(--r-md)}
}

/* Step 1 — a noticeably larger image (fills more of the column's
   horizontal space on desktop than the previous 220px default). */
@media(min-width:860px){.ph-large .process-photo{width:100%;max-width:320px;height:240px}}

/* Step 2 — a small square detail inset, distinct from Step 3's circular
   float and Step 1's large rectangle: a compact supporting image rather
   than a dominant one. */
.ph-detail .process-photo{width:120px;height:120px;border-radius:var(--r-md);float:right;margin:0 0 12px 16px;box-shadow:0 10px 22px rgba(30,27,20,.16);border:2px solid var(--gold-soft)}
@media(min-width:860px){.process-step:nth-child(even).ph-detail .process-photo{float:left;margin:0 16px 12px 0}}
@media(max-width:859px){.ph-detail .process-photo{float:none;margin:0 0 14px;width:130px;height:130px}}

/* Step 5 — a taller vertical image, larger and narrower than Step 1's,
   so the two "plain rectangle" steps still read differently from each
   other and make fuller use of the column's height. */
.ph-tall .process-photo{width:190px;height:280px}
@media(min-width:860px){.ph-tall .process-photo{width:100%;max-width:230px;height:320px}}
@media(max-width:859px){.ph-tall .process-photo{width:100%;height:260px}}

/* Step 6 — a wide, short landscape strip beneath the paragraph rather
   than a rectangle above the heading, using the column's full width. */
.ph-wide .process-photo{width:100%;height:130px;margin:14px 0 0;float:none}
@media(min-width:860px){.ph-wide .process-photo{width:100%;max-width:none}}

/* Step 7 — the concluding image, offset behind a thin gold frame (the
   same visual language as the founder photo on About, at timeline
   scale), a distinct "offset/overlapping" treatment for the final step. */
.ph-offset .process-photo-wrap{position:relative;display:block;width:190px;max-width:100%;margin-bottom:14px}
.ph-offset .process-photo-wrap::before{content:'';position:absolute;top:-10px;left:-10px;right:10px;bottom:10px;border:2px solid var(--gold);border-radius:var(--r-md);z-index:0}
.ph-offset .process-photo{position:relative;z-index:1;width:190px;height:150px;margin-bottom:0}
@media(max-width:859px){.ph-offset .process-photo-wrap{width:100%;max-width:260px}.ph-offset .process-photo{width:100%;height:auto;aspect-ratio:4/3}}

/* Step 4 — a genuine background-image treatment: the photo fills the
   whole text block with a readable deep-green overlay, rather than
   sitting above the heading like Step 1. Gives the timeline a third,
   clearly different rhythm instead of repeating the same layout twice. */
.ph-bg .process-body{border-top:none;border-radius:var(--r-lg);overflow:hidden;padding:30px 28px;min-height:230px;display:flex;flex-direction:column;justify-content:center}
.ph-bg .process-photo{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;box-shadow:none;z-index:0}
.ph-bg .process-body::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,70,48,.9),rgba(10,70,48,.68));z-index:1;opacity:1;pointer-events:none}
.ph-bg .process-body::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);z-index:2;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.3,1) .2s}
.ph-bg.process-step.in-view .process-body::after{transform:scaleX(1)}
.ph-bg .process-body h3,.ph-bg .process-body p{position:relative;z-index:2}
.ph-bg .process-body h3{color:var(--white)}
.ph-bg .process-body p{color:var(--pale-mint)}
@media(max-width:859px){.ph-bg .process-body{min-height:200px;padding:26px 24px}}
/* On mobile the steps stack in a single column, so a left/right entrance
   would read oddly — fall back to the same vertical fade everywhere. */
@media(max-width:859px){.process-step.reveal-left,.process-step.reveal-right{transform:translateY(22px)}}
@media(min-width:860px){
  .process::before,.process::after{left:50%;margin-left:-.5px}
  .process-step{grid-template-columns:1fr 68px 1fr;gap:0;align-items:start}
  .process-step .process-num{grid-column:2;justify-self:center}
  .process-step .process-body{grid-column:1;grid-row:1;margin-right:40px}
  .process-step:nth-child(even) .process-body{grid-column:3;margin-right:0;margin-left:40px}
  .process-step:nth-child(even) .process-num{grid-column:2}
  .process-step .process-photo,.process-step .process-photo-wrap{margin-left:auto}
  .process-step:nth-child(even) .process-photo,.process-step:nth-child(even) .process-photo-wrap{margin-left:0;margin-right:auto}
}
.requirements-box{border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 44px;background:var(--white)}
.requirements{max-width:760px;margin:0 auto}
.requirements ul{padding-left:0;list-style:none;display:grid;gap:14px;margin:20px 0 0}
.requirements li{position:relative;padding-left:26px;color:var(--muted);font-size:1.05rem}
.requirements li::before{content:'—';position:absolute;left:0;color:var(--gold)}
.requirements p.note{margin-top:22px;font-style:italic;color:var(--muted)}

/* ---------- service category cards (services.html) — large white expandable cards ---------- */
.svc-list{display:grid;gap:28px;margin-top:8px}
.svc-card{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px rgba(30,27,20,.05);overflow:hidden;transition:box-shadow .3s ease,border-color .3s ease;scroll-margin-top:96px}
.svc-card:hover{box-shadow:0 16px 32px rgba(30,27,20,.08);border-color:var(--gold-soft)}
.svc-top{display:flex;align-items:stretch}
.svc-media{flex:0 0 260px;position:relative;overflow:hidden;min-height:220px}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.svc-card:hover .svc-media img{transform:scale(1.06)}
.svc-main{flex:1;display:flex;gap:24px;align-items:flex-start;padding:36px 40px 28px;min-width:0}
.svc-card.media-right .svc-top{flex-direction:row-reverse}
.svc-icon{width:52px;height:52px;display:grid;place-items:center;color:var(--green-deep);background:var(--gold-soft);border-radius:14px;flex-shrink:0}
.svc-icon svg{width:26px;height:26px}
.svc-body{min-width:0}
.svc-body h2{margin:0 0 10px}
.svc-intro{margin:0 0 18px;color:var(--muted)}
.svc-pills{display:flex;flex-wrap:wrap;gap:8px}
.svc-pills span{background:var(--stone);color:var(--charcoal);font-weight:600;font-size:.85rem;padding:6px 14px;border-radius:20px;border:1px solid var(--line)}
.svc-footer{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 40px;background:var(--cream);border:0;border-top:1px solid var(--line);font:inherit;font-size:.98rem;font-weight:700;color:var(--green-deep);cursor:pointer;text-align:left;transition:color .2s ease}
.svc-footer:hover{color:var(--green)}
.svc-chevron{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;color:var(--gold);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.svc-chevron svg{width:13px;height:13px}
.svc-card.is-open .svc-chevron{transform:rotate(180deg)}
.svc-panel{display:grid;grid-template-rows:0fr;background:var(--cream);transition:grid-template-rows .4s cubic-bezier(.2,.7,.3,1)}
.svc-card.is-open .svc-panel{grid-template-rows:1fr}
.svc-panel-inner{overflow:hidden;opacity:0;transition:opacity .3s ease}
.svc-card.is-open .svc-panel-inner{opacity:1;transition:opacity .35s ease .1s}
.svc-services{padding:8px 40px 34px;display:grid;gap:22px}
.svc-services h3{margin:0 0 6px;color:var(--charcoal);font-size:1.16rem}
.svc-services p{margin:0;color:var(--muted)}
.svc-services>div+div{padding-top:20px;border-top:1px dashed var(--line-soft)}

/* Five distinct header treatments so the cards don't all read as the same
   "image left, content right" pattern repeated five times, while every
   card keeps the identical icon/pills/footer/expand behaviour beneath. */

/* corner crop — a small image inset into the top corner, text flows below it */
.svc-card--corner .svc-top{display:block;position:relative}
.svc-card--corner .svc-media{position:absolute;top:0;right:0;width:190px;height:150px;flex:none;border-radius:0 0 0 22px}
.svc-card--corner .svc-main{display:block;padding:36px 220px 28px 40px}
.svc-card--corner .svc-icon{margin-bottom:14px}

/* dark overlay header — photo sits behind the icon/heading with a gradient scrim */
.svc-card--overlay .svc-top{display:block;position:relative}
.svc-card--overlay .svc-media{position:absolute;inset:0;width:auto;height:auto;flex:none;min-height:0}
.svc-card--overlay .svc-media::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(10,70,48,.9) 0%,rgba(10,70,48,.6) 55%,rgba(10,70,48,.18) 100%)}
.svc-card--overlay .svc-main{position:relative;z-index:1;display:block;min-height:230px;padding:36px 40px 28px}
.svc-card--overlay .svc-icon{background:rgba(255,255,255,.16);color:var(--white);margin-bottom:14px}
.svc-card--overlay .svc-body h2,.svc-card--overlay .svc-body h2::after{color:var(--white)}
.svc-card--overlay .svc-body h2::after{background:var(--gold)}
.svc-card--overlay .svc-intro{color:var(--mint)}

/* floating thumbnail — a small round image floats beside the icon */
.svc-card--float .svc-top{align-items:flex-start;padding:36px 40px 0}
.svc-card--float .svc-media{order:2;position:static;flex:0 0 76px;width:76px;height:76px;min-height:0;border-radius:50%;margin-left:auto;box-shadow:0 10px 26px rgba(30,27,20,.2);border:3px solid var(--cream)}
.svc-card--float .svc-main{order:1;padding:0 0 28px}

/* editorial banner — a large image sits above the content, not beside it */
.svc-card--banner .svc-top{display:block}
.svc-card--banner .svc-media{position:static;width:100%;height:300px;flex:none;min-height:0}
.svc-card--banner .svc-main{display:block;padding:32px 40px 28px}
.svc-card--banner .svc-icon{margin-bottom:16px}

@media(max-width:700px){
  .svc-card--corner .svc-media{position:relative;width:100%;height:170px;border-radius:0}
  .svc-card--corner .svc-main{padding:24px 22px 22px}
  .svc-card--overlay .svc-main{padding:26px 22px 22px;min-height:0}
  .svc-card--float .svc-top{flex-direction:column;padding:24px 22px 0;gap:14px}
  .svc-card--float .svc-media{order:0;margin:0}
  .svc-card--float .svc-main{padding:0 0 22px}
  .svc-card--banner .svc-media{height:190px}
  .svc-card--banner .svc-main{padding:24px 22px 22px}
}

/* ---------- footer ----------
   Deep green, not charcoal — this sits directly under the deep-green CTA
   band on every page, so it now reads as one intentional, continuous
   brand-coloured close rather than a green block giving way to an
   unrelated dark/brown wall. Charcoal is reserved for text and small
   accents; it no longer fills any large area of the site. */
.site-footer{background:var(--green-deep);color:var(--cream);padding:40px 0 20px;margin-top:0;line-height:1.45;position:relative;overflow:hidden;border-top:3px solid var(--gold)}
.site-footer::before{content:'';position:absolute;right:-50px;top:-50px;width:280px;height:280px;background:url('assets/treasurebabs-logo-official-web.png') center/contain no-repeat;filter:grayscale(1) invert(1);opacity:.06;pointer-events:none}
/* Three columns — Quick links, Get in touch, Follow us. The former
   fourth column (company info/ACCA credentials) was moved out of this
   grid entirely into its own .footer-regulatory row below (see further
   down) — DOM order here already matches the wanted order at every
   width, so no order/breakpoint juggling is needed the way the old
   4-column version required. */
.footer-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:40px;position:relative}
.footer-grid>div{margin:0}
.footer-grid>div>p{margin:0 0 8px}
.site-footer a{color:var(--cream)}
.site-footer h3,.site-footer h4{color:white;margin:0 0 8px}
.site-footer h3{font-family:var(--serif);font-weight:600;font-size:1.18rem}
.site-footer h4{font-size:.92rem}
.site-footer p,.site-footer a{font-size:.94rem}
.footer-col-links,.footer-col-follow{display:grid;gap:6px;align-content:start}
.footer-social{display:grid;gap:6px;align-content:start}
.footer-social a,.footer-social span{display:inline-flex;align-items:center;gap:8px;transition:color .2s ease,transform .2s ease}
.footer-social a:hover{color:var(--gold-soft);transform:translateX(3px)}
.footer-social span{color:#B7AF9C;cursor:help}
.footer-social svg{width:17px;height:17px;flex-shrink:0}
/* LinkedIn/Instagram/Facebook now render as their real two-tone brand
   marks (badge + white glyph) rather than plain single-colour outline
   icons, so - like .wa-icon - they keep their own fixed brand colours
   (no currentColor) and run a touch larger than the plain outline
   icons for the same "reads as an actual logo" reason. */
.brand-icon{width:18px!important;height:18px!important;flex-shrink:0}
.footer-note{font-size:.8rem;color:#B7AF9C;margin-top:4px}
/* Phone/email icons — same inline-flex icon+text pattern already used
   by .footer-social above, just applied to the contact links. */
.icon-link{display:inline-flex;align-items:center;gap:9px;transition:color .2s ease}
.icon-link svg{width:16px;height:16px;flex-shrink:0;color:var(--gold-soft)}
.icon-link:hover{color:var(--gold-soft)}
/* The WhatsApp mark is its own two-tone brand icon (green circle, white
   handset), not one of the site's single-colour outline icons, so it
   keeps its own fixed colours instead of inheriting currentColor, and
   runs a touch larger than its siblings so the circle reads clearly at
   a glance rather than looking like a small outline glyph. */
.wa-icon{width:20px!important;height:20px!important;flex-shrink:0}
/* Bottom area: one divider, two stacked rows — the slim business/legal
   identity strip (company name, company number, ACCA number), then the
   existing copyright + legal-links row. */
.footer-bottom{border-top:1px solid rgba(176,141,69,.35);margin-top:22px;padding-top:14px;display:flex;flex-direction:column;gap:10px;position:relative}
.footer-legal-strip{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.78rem;color:#B7AF9C}
.footer-legal-strip span+span{position:relative;padding-left:16px}
.footer-legal-strip span+span::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:#B7AF9C}
.footer-bottom-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem}
@media(max-width:600px){.footer-legal-strip{justify-content:center;text-align:center}.footer-bottom-row{justify-content:center;text-align:center}}
/* Mobile: the three top columns stack to one. No order rules needed —
   DOM order (links, contact, follow) already matches. */
@media(max-width:640px){.footer-grid{grid-template-columns:1fr;gap:36px}}
/* Regulatory row — sits between the top 3-column grid and .footer-bottom
   (whose border-top is the footer's one horizontal divider), so it reads
   as "directly above the divider" without needing a divider of its own.
   Holds only the regulatory statement and the ACCA credential mark (the
   ACCA registration number used to sit here too, but the client asked
   for it to appear only once, in the .footer-legal-strip below, not
   duplicated here) as one horizontal row: the statement is the only
   flexible item (wraps internally as space allows); the logo stays
   fixed-size. Deliberately no card/border/effects - just text plus the
   supplied artwork. */
.footer-regulatory{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.footer-regulatory p{margin:0}
.footer-regulatory>p:first-child{flex:1 1 320px}
/* Xero is temporarily removed (pending the client's official supplied
   artwork) - this row is currently ACCA-only, but .footer-credential is
   still laid out as a flex row (not a fixed single-image rule) so Xero
   can be dropped back in beside it later without restructuring. */
.footer-credential{display:flex;align-items:center;gap:18px;flex-wrap:wrap;flex:0 0 auto}
.footer-credential img{display:block;width:44px;height:44px}

/* ---------- contact ---------- */
.contact-split{display:grid;grid-template-columns:1.1fr 1.15fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
/* Background photo texture: N.jpg (a face-free hand-on-folder shot,
   not shown anywhere else on the site, and not calculator-heavy) as a
   barely-there, heavily tinted backdrop behind this panel. */
.contact-info{background:linear-gradient(160deg,var(--green-deep) 0%,var(--green-deep) 55%,var(--charcoal) 130%),url('assets/N.jpg');background-size:cover;background-position:center,center;background-blend-mode:multiply;color:var(--pale-mint);padding:48px 44px;position:relative;overflow:hidden;border-top:3px solid var(--gold)}
.contact-info::before{content:'';position:absolute;right:-50px;bottom:-50px;width:260px;height:260px;background:url('assets/treasurebabs-logo-official-web.png') center/contain no-repeat;filter:grayscale(1) invert(1);opacity:0;transform:translate(16px,16px);transition:opacity 1.1s ease,transform 1.1s ease;pointer-events:none}
.contact-info.in-view::before{opacity:.08;transform:translate(0,0)}
.contact-info h2{color:white;position:relative;font-size:clamp(1.6rem,1.4rem + 1vw,2.3rem)}
.contact-info p{position:relative}
.contact-info a{color:white;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.contact-info a:hover{text-decoration-color:var(--gold-soft)}
.contact-block{position:relative;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.contact-info.in-view .contact-block{opacity:1;transform:none}
.contact-info.in-view .contact-block:nth-of-type(2){transition-delay:.15s}
.contact-info.in-view .contact-block:nth-of-type(3){transition-delay:.3s}
.contact-divider{display:block;height:1px;background:rgba(255,255,255,.18);margin:24px 0;position:relative;overflow:hidden}
.contact-divider::after{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.3,1) .35s}
.contact-info.in-view .contact-divider::after{transform:scaleX(1)}
.contact-founder{display:flex;align-items:center;gap:16px}
.contact-founder img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0}
.contact-founder span{font-size:.92rem;color:var(--mint);line-height:1.4}
.contact-detail-list h4{margin:0 0 14px;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-soft);font-weight:700}
.contact-detail-list p{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.contact-detail-list svg{width:17px;height:17px;flex-shrink:0;color:var(--mint)}
.contact-detail-list .footer-social{margin-top:6px}
.contact-form-panel{background:var(--cream);padding:48px 44px;position:relative;scroll-margin-top:24px}
@keyframes consultHighlight{0%{box-shadow:0 0 0 3px rgba(176,141,69,.55);background:var(--pale-mint)}100%{box-shadow:0 0 0 0 rgba(176,141,69,0);background:var(--cream)}}
.contact-form-panel.highlight{animation:consultHighlight 2.4s ease-out both}
@media(prefers-reduced-motion:reduce){.contact-form-panel.highlight{animation:none}.contact-block{opacity:1!important;transform:none!important}.contact-divider::after{transform:scaleX(1)!important}.contact-info::before{transition:none!important}}
.contact-form{display:grid;gap:22px}
.contact-form label{display:grid;gap:8px;font-weight:600;font-size:.86rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
input,select,textarea{width:100%;padding:11px 2px;border:0;border-bottom:1px solid #D3C7A8;border-radius:0;font:inherit;font-size:1.05rem;background:transparent;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--green-deep);box-shadow:none}
.consent{grid-template-columns:auto 1fr!important;align-items:start}
.consent input{width:auto;margin-top:5px;border:0}
.form-success{background:var(--pale-mint);color:var(--green-deep);padding:18px 20px;border-radius:var(--r-sm);font-weight:700;border:1px solid var(--mint);margin-top:16px}
.form-error{background:#F5E6E0;color:#7A3B26;padding:16px 18px;border-radius:var(--r-sm);font-weight:700;border:1px solid #E7C9BC;margin-top:16px}

.legal details{background:white;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;margin-bottom:14px;scroll-margin-top:96px}
.legal summary{cursor:pointer;font-weight:700;color:var(--green-deep);font-size:1.1rem}
.legal summary:focus-visible{outline:2px solid var(--green-deep);outline-offset:3px;border-radius:6px}
.legal summary h2{display:inline;font:inherit;color:inherit;margin:0;font-size:inherit;position:static}
.legal summary h2::after{display:none}
.legal .policy-subtitle{font-weight:700;font-size:1.08rem;margin:1em 0;color:var(--ink)}

/* ---------- pricing cards ---------- */
.cards{display:grid;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:transparent;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:30px 26px;transition:background .3s ease}
.card:hover{background:var(--white)}
.card h2{font-size:1.35rem}

@media(max-width:1200px){.main-nav{gap:1.15rem}.main-nav a{font-size:.9rem}.main-nav a.nav-cta{padding:8px 14px;font-size:.88rem}.brand span{font-size:.98rem}.brand img{height:40px}}
/* The full desktop nav (6 links + CTA) was crowding the brand name at
   tablet/small-laptop widths — the .container itself narrows below
   ~1217px while the nav still rendered inline, leaving too little of
   the shrunk gap to feel intentional. Rather than squeezing the nav
   further, the mobile menu now takes over one breakpoint earlier
   (1200px instead of 900px), matching the "hide nav, show hamburger"
   behaviour that already exists below 900px — the brand keeps its
   normal size/spacing at every width above this. */
@media(max-width:1200px){
  .main-nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--cream);padding:20px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}
  .main-nav.open{display:flex}
  .main-nav a.nav-cta{text-align:center}
  .nav-toggle{display:block}
}
@media(max-width:900px){
  .founder-grid{grid-template-columns:1fr}
  .cards.four{grid-template-columns:1fr 1fr}
  .contact-split{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cards.four,.service-cols{grid-template-columns:1fr;column-count:1}
  .cta .container{align-items:flex-start;flex-direction:column}
  .process::before,.process::after{left:23px}
  .process-step{grid-template-columns:46px 1fr;gap:16px}
  .process-num{width:46px;height:46px;font-size:1.05rem}
  .svc-top,.svc-card.media-right .svc-top{flex-direction:column}
  .svc-media{flex-basis:auto;min-height:180px}
  .svc-main{padding:24px 22px 22px;gap:16px}
  .svc-icon{width:42px;height:42px}
  .svc-icon svg{width:21px;height:21px}
  .svc-footer{padding:14px 22px}
  .svc-services{padding:6px 22px 26px}
  .mission{padding:34px 26px}
  .requirements-box{padding:30px 26px}
  .contact-info,.contact-form-panel{padding:40px 26px}
  .why-toggle{padding:24px 22px}
  .why-panel-inner p{padding:0 22px 22px}
}