/* ============================================================
   Big D Landscaping — bespoke homepage + page-hero styles.
   Hand-built section layouts (NOT generic card grids).
   Tokens live in styles.css :root. One ease: var(--ease-premium).
   ============================================================ */

/* ---- shared section furniture ---- */
.section-head{max-width:760px;margin-bottom:clamp(40px,6vw,68px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .kicker{margin-bottom:20px}
.section-head h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.section-head p{font-size:clamp(1.05rem,1.5vw,1.22rem);opacity:.86;margin-top:18px;max-width:62ch}
.section-head.center p{margin-inline:auto}
.eyebrow-rule{display:inline-flex;align-items:center;gap:14px}
.eyebrow-rule svg{flex:none}
.divider-leaf{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--accent);opacity:.7;padding:8px 0}
.divider-leaf::before,.divider-leaf::after{content:"";height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,var(--border))}
.divider-leaf::after{background:linear-gradient(270deg,transparent,var(--border))}

/* gradient + watermark display type (premium kit) */
.display-grad{background:linear-gradient(120deg,var(--primary),var(--secondary) 55%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.watermark{position:absolute;font-family:var(--font-head);font-weight:700;letter-spacing:-.04em;line-height:.8;
  font-size:clamp(7rem,22vw,20rem);color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--primary) 14%,transparent);
  text-stroke:1.5px color-mix(in srgb,var(--primary) 14%,transparent);pointer-events:none;user-select:none;z-index:0;white-space:nowrap}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:clamp(640px,94vh,1000px);background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 8%,var(--background)),var(--background))}
.hero__poster{background:
   radial-gradient(140% 120% at 78% 8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 55%),
   radial-gradient(120% 130% at 12% 92%,color-mix(in srgb,var(--primary) 26%,transparent),transparent 60%),
   linear-gradient(180deg,color-mix(in srgb,var(--primary) 10%,var(--background)),var(--background))}
.hero__content{max-width:var(--container);width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero__copy{position:relative;z-index:3}
.hero .kicker{background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--border);padding:8px 16px;border-radius:var(--radius-pill);backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(2.7rem,6.6vw,5rem);margin:.35em 0 .4em;letter-spacing:-.03em}
.hero h1 .accent{font-style:italic;color:var(--accent)}
.hero__lede{font-size:clamp(1.08rem,1.7vw,1.32rem);max-width:46ch;opacity:.9}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__trust{display:flex;flex-wrap:wrap;gap:26px;margin-top:42px;padding-top:30px;border-top:1px solid var(--border)}
.hero__trust .ht{display:flex;align-items:center;gap:12px;font-size:.92rem;line-height:1.3}
.hero__trust .ht b{display:block;font-family:var(--font-head);font-size:1.15rem;color:var(--primary)}
.hero__trust .ht svg{flex:none;color:var(--accent)}
/* hero visual card — framed image stack with botanical frame */
.hero__visual{position:relative;z-index:2}
.hero-frame{position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;border:1px solid var(--border)}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--primary) 55%,transparent))}
.hero-badge{position:absolute;left:-18px;bottom:30px;z-index:4;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;max-width:240px}
.hero-badge svg{flex:none;color:var(--accent)}
.hero-badge .hb-n{font-family:var(--font-head);font-size:1.6rem;font-weight:700;color:var(--primary);line-height:1}
.hero-badge .hb-l{font-size:.8rem;opacity:.75;line-height:1.25}
.hero-leaf{position:absolute;color:var(--secondary);opacity:.5;z-index:1}
.hero-leaf--1{top:-26px;right:8%;width:90px;animation:sway 7s var(--ease-premium) infinite}
.hero-leaf--2{bottom:-30px;left:-30px;width:110px;animation:sway 9s var(--ease-premium) infinite reverse}
@keyframes sway{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hero-leaf{animation:none}}
@media (max-width:900px){.hero__content{grid-template-columns:1fr}.hero__visual{display:none}}

/* ============================================================
   MARQUEE — credibility strip (editorial marquee kit)
   ============================================================ */
.cred-marquee{background:var(--primary);color:var(--background);overflow:hidden;padding:18px 0;border-block:1px solid color-mix(in srgb,var(--background) 18%,var(--primary))}
.cred-marquee__track{display:flex;gap:48px;width:max-content;animation:marquee 32s linear infinite}
.cred-marquee:hover .cred-marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.cred-marquee .ci{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-head);font-size:1.05rem;letter-spacing:.01em;white-space:nowrap;opacity:.92}
.cred-marquee .ci svg{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.cred-marquee__track{animation:none;flex-wrap:wrap;justify-content:center}}

/* ============================================================
   STATS band (animated counters kit)
   ============================================================ */
.stats{background:linear-gradient(180deg,var(--background),color-mix(in srgb,var(--muted) 50%,var(--background)))}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--surface);padding:clamp(28px,4vw,44px) 28px;text-align:center;position:relative}
.stat__n{font-family:var(--font-head);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--primary);line-height:1;letter-spacing:-.02em}
.stat__n .suffix{color:var(--accent)}
.stat__l{margin-top:12px;font-size:.95rem;opacity:.8;letter-spacing:.02em}
.stat svg{position:absolute;top:18px;right:18px;color:var(--accent);opacity:.45}
@media (max-width:860px){.stats__grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   SERVICES — bespoke asymmetric grid
   ============================================================ */
.services{position:relative;overflow:hidden}
.services .watermark{top:-40px;right:-2vw}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;position:relative;z-index:1}
.svc{grid-column:span 2;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .45s var(--ease-premium),box-shadow .45s var(--ease-premium),border-color .45s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.svc--wide{grid-column:span 3}
.svc--tall{grid-row:span 2}
.svc__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.svc--tall .svc__media{aspect-ratio:4/5}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-premium)}
.svc:hover .svc__media img{transform:scale(1.06)}
.svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--primary) 62%,transparent))}
.svc__icon{position:absolute;left:18px;top:18px;z-index:2;width:48px;height:48px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);border-radius:12px;color:var(--primary);backdrop-filter:blur(4px)}
.svc__body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.svc__body h3{margin:0;font-size:1.35rem}
.svc__body p{margin:0;opacity:.82;font-size:.97rem;flex:1}
.svc__link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;color:var(--primary);font-size:.95rem}
.svc__link svg{transition:transform .35s var(--ease-premium)}
.svc:hover .svc__link svg{transform:translateX(5px)}
.svc__link:hover{color:var(--accent)}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}.svc,.svc--wide{grid-column:span 1}.svc--tall{grid-row:auto}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ============================================================
   SIGNATURE — "Plan your project" matcher
   ============================================================ */
.matcher{background:var(--primary);color:var(--background);position:relative;overflow:hidden}
.matcher .watermark{top:auto;bottom:-50px;left:-1vw;-webkit-text-stroke-color:color-mix(in srgb,var(--background) 12%,transparent);text-stroke-color:color-mix(in srgb,var(--background) 12%,transparent)}
.matcher__wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,64px);align-items:center}
.matcher__intro .kicker{color:var(--accent)}
.matcher__intro h2{color:var(--background);font-size:clamp(2rem,4vw,3rem)}
.matcher__intro p{opacity:.82;max-width:42ch}
.matcher__panel{background:color-mix(in srgb,var(--background) 8%,var(--primary));border:1px solid color-mix(in srgb,var(--background) 22%,transparent);border-radius:calc(var(--radius) + 4px);padding:clamp(24px,3vw,38px)}
.matcher__step{margin-bottom:26px}
.matcher__step > span{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.matcher__step > span i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--primary);font-style:normal;font-size:.72rem;font-weight:700}
.opt-row{display:flex;flex-wrap:wrap;gap:10px}
.opt{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--radius-pill);cursor:pointer;
  background:color-mix(in srgb,var(--background) 6%,transparent);border:1px solid color-mix(in srgb,var(--background) 26%,transparent);
  color:var(--background);font-family:var(--font-head);font-weight:600;font-size:.92rem;transition:all .3s var(--ease-premium)}
.opt svg{color:var(--accent);transition:color .3s}
.opt:hover{border-color:var(--accent)}
.opt.is-active{background:var(--accent);color:var(--primary);border-color:var(--accent)}
.opt.is-active svg{color:var(--primary)}
.matcher__result{margin-top:8px;background:color-mix(in srgb,var(--background) 12%,var(--primary));border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:var(--radius);padding:24px;min-height:128px;
  display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-premium),transform .5s var(--ease-premium)}
.matcher__result.is-shown{opacity:1;transform:none}
.matcher__result h4{margin:0;font-family:var(--font-head);font-size:1.3rem;color:var(--background);display:flex;align-items:center;gap:10px}
.matcher__result h4 svg{color:var(--accent)}
.matcher__result p{margin:0;opacity:.85;font-size:.96rem}
.matcher__result a{align-self:flex-start;margin-top:6px}
.matcher__placeholder{display:flex;align-items:center;gap:12px;color:color-mix(in srgb,var(--background) 60%,transparent);font-size:.95rem}
@media (max-width:880px){.matcher__wrap{grid-template-columns:1fr}}

/* ============================================================
   PROCESS — numbered path with inline SVG connectors
   ============================================================ */
.process{position:relative}
.process__track{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.process__track::before{content:"";position:absolute;top:38px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--border) 0 8px,transparent 8px 16px);z-index:0}
.pstep{position:relative;z-index:1;text-align:center;padding:0 8px}
.pstep__num{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:var(--surface);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--primary);position:relative;box-shadow:0 10px 26px -16px rgba(0,0,0,.4)}
.pstep__num span{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--primary);
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.85rem}
.pstep h3{font-size:1.2rem;margin-bottom:8px}
.pstep p{opacity:.8;font-size:.94rem;margin:0}
@media (max-width:820px){.process__track{grid-template-columns:repeat(2,1fr);gap:36px}.process__track::before{display:none}}
@media (max-width:480px){.process__track{grid-template-columns:1fr}}

/* ============================================================
   BEFORE / AFTER drag slider (signature effect)
   ============================================================ */
.beforeafter{background:color-mix(in srgb,var(--muted) 40%,var(--background))}
.ba__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.ba__copy h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.ba__copy ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:14px}
.ba__copy li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.ba__copy li svg{flex:none;color:var(--accent);margin-top:3px}
.ba{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);user-select:none;touch-action:none;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__label{position:absolute;top:14px;font-family:var(--font-head);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  background:color-mix(in srgb,var(--primary) 80%,transparent);color:var(--background);padding:5px 12px;border-radius:var(--radius-pill);z-index:3}
.ba__label--b{left:14px}.ba__label--a{right:14px}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--background);transform:translateX(-50%);z-index:4;box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 30%,transparent)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--surface);
  border:1px solid var(--border);display:grid;place-items:center;color:var(--primary);box-shadow:var(--shadow);z-index:5}
@media (max-width:820px){.ba__wrap{grid-template-columns:1fr}}

/* ============================================================
   FOUNDER / authority
   ============================================================ */
.founder{position:relative;overflow:hidden}
.founder__wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,72px);align-items:center}
.founder__portrait{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:5/6;border:1px solid var(--border);box-shadow:var(--shadow)}
.founder__portrait img{width:100%;height:100%;object-fit:cover}
.founder__portrait .badge{position:absolute;left:18px;bottom:18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px}
.founder__portrait .badge b{font-family:var(--font-head);color:var(--primary)}
.founder__copy blockquote{margin:0 0 28px;font-family:var(--font-head);font-weight:600;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.3;color:var(--primary);letter-spacing:-.01em}
.founder__copy blockquote .q{color:var(--accent)}
.founder__sign{display:flex;align-items:center;gap:16px;margin-top:8px}
.founder__sign svg{color:var(--primary)}
.founder__sign b{font-family:var(--font-head);display:block;font-size:1.05rem}
.founder__sign span{font-size:.88rem;opacity:.72}
.founder__list{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.founder__list .fi{display:flex;gap:12px;align-items:flex-start}
.founder__list .fi svg{flex:none;color:var(--accent);margin-top:2px}
.founder__list .fi b{font-family:var(--font-head);display:block;font-size:1rem}
.founder__list .fi span{font-size:.9rem;opacity:.78}
@media (max-width:880px){.founder__wrap{grid-template-columns:1fr}.founder__list{grid-template-columns:1fr}}

/* ============================================================
   SERVICE AREAS — inline SVG map + town list
   ============================================================ */
.areas{background:var(--primary);color:var(--background);position:relative;overflow:hidden}
.areas__wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,68px);align-items:center;position:relative;z-index:1}
.areas h2{color:var(--background)}
.areas .kicker{color:var(--accent)}
.areas__copy p{opacity:.84;max-width:46ch}
.areas__towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.areas__towns .town{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--background) 6%,transparent);border:1px solid color-mix(in srgb,var(--background) 22%,transparent);font-size:.9rem}
.areas__towns .town svg{color:var(--accent)}
.areas__map{position:relative}
.areas__map svg{width:100%;height:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.map-pin{transform-origin:center;animation:pin-pulse 3s ease-in-out infinite}
@keyframes pin-pulse{0%,100%{opacity:.7}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.map-pin{animation:none}}
@media (max-width:880px){.areas__wrap{grid-template-columns:1fr}}

/* ============================================================
   GALLERY preview — masonry-ish + tilt cards
   ============================================================ */
.gallery{position:relative;overflow:hidden}
.gallery .watermark{top:-30px;left:-1vw}
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px;position:relative;z-index:1}
.gtile{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:transform .4s var(--ease-premium),box-shadow .4s}
.gtile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-premium)}
.gtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--primary) 55%,transparent));opacity:0;transition:opacity .4s}
.gtile:hover::after{opacity:1}
.gtile:hover img{transform:scale(1.07)}
.gtile:hover{box-shadow:var(--shadow)}
.gtile cite{position:absolute;left:16px;bottom:14px;z-index:2;color:var(--background);font-style:normal;font-family:var(--font-head);font-weight:600;opacity:0;transform:translateY(8px);transition:.4s var(--ease-premium)}
.gtile:hover cite{opacity:1;transform:none}
.gtile--big{grid-column:span 2;grid-row:span 2}
.gtile--wide{grid-column:span 2}
@media (max-width:820px){.gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.gtile--big{grid-column:span 2}}

/* ============================================================
   FAQ
   ============================================================ */
.faq__wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,64px);align-items:start}
.faq__aside{position:sticky;top:110px}
.faq__aside .card-cta{background:var(--primary);color:var(--background);border-radius:var(--radius);padding:28px;margin-top:24px}
.faq__aside .card-cta h3{color:var(--background)}
.faq__aside .card-cta p{opacity:.82;font-size:.95rem}
.faqs{display:flex;flex-direction:column;gap:14px}
.faqs details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .3s}
.faqs details[open]{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.faqs summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-head);font-weight:600;font-size:1.06rem}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary .chev{flex:none;color:var(--accent);transition:transform .4s var(--ease-premium)}
.faqs details[open] summary .chev{transform:rotate(45deg)}
.faqs details > p{padding:0 24px 22px;margin:0;opacity:.84;font-size:.97rem;line-height:1.7}
@media (max-width:820px){.faq__wrap{grid-template-columns:1fr}.faq__aside{position:static}}

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.contact{background:linear-gradient(180deg,var(--background),color-mix(in srgb,var(--primary) 9%,var(--background)))}
.contact__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.contact__info h2{font-size:clamp(2rem,4vw,3rem)}
.contact__cards{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.cinfo{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 20px;transition:transform .35s var(--ease-premium),border-color .35s}
.cinfo:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.cinfo__ic{flex:none;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));display:grid;place-items:center;color:var(--primary)}
.cinfo b{font-family:var(--font-head);display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6}
.cinfo span,.cinfo a{font-size:1.08rem;color:var(--foreground)}
.cinfo a:hover{color:var(--accent)}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:clamp(26px,3vw,40px);box-shadow:var(--shadow)}
.form-card h3{font-size:1.5rem;margin-bottom:6px}
.form-card .sub{opacity:.78;font-size:.95rem;margin-bottom:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:980px){.contact__wrap{grid-template-columns:1fr}}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}

/* ============================================================
   FOOTER (rich)
   ============================================================ */
.site-footer{background:var(--primary);color:var(--background);border-top:0}
.footer-rich{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid color-mix(in srgb,var(--background) 16%,transparent)}
.footer-rich h4{color:var(--background);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:18px}
.footer-rich a{display:block;color:var(--background);opacity:.78;padding:5px 0;font-size:.95rem}
.footer-rich a:hover{opacity:1;color:var(--accent)}
.footer-brand .fb-mark{font-family:var(--font-head);font-weight:700;font-size:1.4rem;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand .fb-mark svg{color:var(--accent)}
.footer-brand p{opacity:.74;font-size:.95rem;max-width:34ch}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-top:28px;font-size:.86rem;opacity:.7}
.site-footer .container{display:block}
@media (max-width:880px){.footer-rich{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:520px){.footer-rich{grid-template-columns:1fr}}

/* ---- inner page hero ---- */
.page-hero{position:relative;padding:clamp(120px,16vh,180px) 0 clamp(56px,8vw,88px);background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 12%,var(--background)),var(--background));overflow:hidden}
.page-hero .watermark{top:auto;bottom:-60px;right:-1vw}
.page-hero__inner{position:relative;z-index:1;max-width:760px}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.8rem)}
.page-hero p{font-size:clamp(1.05rem,1.6vw,1.25rem);opacity:.86;max-width:60ch}
.breadcrumbs{display:flex;gap:8px;align-items:center;font-size:.88rem;opacity:.7;margin-bottom:22px}
.breadcrumbs a{color:var(--foreground)}.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs svg{opacity:.5}

/* quick-answer + key-facts (AEO) */
.quick-answer{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:24px 26px;margin:0 0 36px}
.quick-answer b{font-family:var(--font-head);display:flex;align-items:center;gap:8px;color:var(--primary);margin-bottom:8px}
.quick-answer b svg{color:var(--accent)}
.keyfacts{width:100%;border-collapse:collapse;margin:28px 0}
.keyfacts th,.keyfacts td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);font-size:.96rem}
.keyfacts th{font-family:var(--font-head);width:38%;color:var(--primary);font-weight:600}
.prose{max-width:74ch}
.prose h2{margin-top:48px}.prose h3{margin-top:32px}
.prose ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px;margin:20px 0}
.prose ul li{display:flex;gap:12px;align-items:flex-start}
.prose ul li svg{flex:none;color:var(--accent);margin-top:4px}
.inner-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:48px;align-items:start}
.inner-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.aside-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.aside-card.dark{background:var(--primary);color:var(--background)}
.aside-card.dark h3,.aside-card.dark b{color:var(--background)}
.aside-card h3{font-size:1.2rem}
.aside-card ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.aside-card li a{display:flex;align-items:center;gap:10px;color:inherit;opacity:.85;font-size:.95rem}
.aside-card li a:hover{opacity:1;color:var(--accent)}
@media (max-width:880px){.inner-grid{grid-template-columns:1fr}.inner-aside{position:static}}

/* nav link active + cta button in header */
.nav-desktop .nav-cta{background:var(--primary);color:var(--background);padding:9px 18px;border-radius:var(--radius-pill)}
.nav-desktop .nav-cta:hover{background:var(--accent);color:var(--primary)}
.nav-desktop a.has-sub{position:relative}
.nav-mobile .nav-cta{color:var(--accent)}

/* reveal helper for grouped children already in styles via [data-reveal] */
[data-reveal][data-reveal="up"]{will-change:transform,opacity}