/* GroundedUX shared look (Oct 2026 refresh)
   Loaded after each page's own <style>, so it remaps the old tokens to the
   pastel + frosted-glass system used on the homepage and restyles the shared
   pieces: nav, buttons, cards, dark bands, CTA band and footer. */

:root{
  /* new system */
  --paper:#fcf8fa;
  --blush:#f7dce5;
  --lilac:#e6def6;
  --mint:#d9efe4;
  --green:#c4e8d4;
  --green-glass:rgba(196,232,212,.72);
  --green-deep:#3f7458;     /* 5.2:1 on paper */
  --ink:#2e2733;
  --ink-soft:#6b6170;       /* 5.6:1 on paper */
  --rose:#b8577c;
  --pink-glass:rgba(230,190,203,.5);
  --pink-edge:#9a4e69;
  --glass-edge:rgba(255,255,255,.65);
  --line-soft:rgba(46,39,51,.12);
  --band-overlay:rgba(46,39,51,.66);
  --display:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --accent-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* old tokens, remapped */
  --cream:var(--paper);
  --warm-cream:#f6eff5;
  --sage:var(--green-deep);
  --sage-light:var(--green);
  --sage-pale:var(--blush);
  --dark:var(--ink);
  --olive:#3b3145;          /* deep plum for any solid dark surface; white text is 12:1 */
  --mid:var(--ink-soft);
  --muted:#857b8a;
  --terra:var(--rose);
  --terra-deep:#8a3a5c;
  --terra-card:#a8536f;
  --dusty:#f0c9d6;
  --serif:var(--display);
  --sans:var(--display);
}

body{font-family:var(--display);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
/* soft pastel light behind everything, so glass has color to blur */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(38% 45% at 92% 8%,var(--blush),transparent 70%),
  radial-gradient(40% 50% at 4% 40%,var(--lilac),transparent 70%),
  radial-gradient(45% 50% at 85% 95%,var(--mint),transparent 70%)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.025em;text-wrap:balance}
h1{line-height:1.03}
:is(h1,h2,h3,h4) em,.nav-logo span,.footer-logo em,.pull-quote q,.personal-pull{font-family:var(--accent-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.section-label,.meta-label,.detail-label,.pill-label,.tldr-label,.story-block-label,.img-empty-label{font-family:var(--mono);letter-spacing:.06em}
.section-label::before,.story-block-label::before{background:var(--green-deep)}
.deco-flower{display:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}

/* NAV: floating glass pill */
body > nav:not(.sub-nav){top:14px;left:max(16px,calc((100vw - 1240px)/2 + 16px));right:max(16px,calc((100vw - 1240px)/2 + 16px));padding:.55rem .6rem .55rem 1.3rem;border-radius:999px;background:rgba(252,248,250,.62);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--glass-edge);box-shadow:0 18px 40px -22px rgba(46,39,51,.35)}
.nav-logo{font-family:var(--display);font-size:1.15rem;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.nav-logo span{color:var(--ink);font-size:1.25rem}
.nav-links{gap:1.8rem}
.nav-links a{font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.nav-links a:hover,.nav-links a.active{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.nav-toggle span{background:var(--ink)}
.nav-backdrop{background:rgba(46,39,51,.3)}

/* BUTTONS */
.nav-cta,.btn-olive,.btn-cream,.btn-primary,.btn-light,.btn-submit,.btn-live,.btn-dark,.btn-resume{
  display:inline-flex!important;align-items:center;gap:.5rem;font-family:var(--display)!important;font-size:.95rem!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--ink)!important;background:var(--pink-glass)!important;border:1.5px solid var(--pink-edge)!important;border-radius:999px!important;
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 12px 30px -14px rgba(46,39,51,.45),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .25s ease,background .25s ease!important}
.nav-cta{padding:.6rem 1.15rem!important}
.nav-cta:hover,.btn-olive:hover,.btn-cream:hover,.btn-primary:hover,.btn-light:hover,.btn-submit:hover,.btn-live:hover,.btn-dark:hover,.btn-resume:hover{background:rgba(230,190,203,.85)!important;color:var(--ink)!important;transform:translateY(-2px)}
.btn-secondary,.btn-live-secondary,.btn-ghost{
  display:inline-flex!important;align-items:center;font-family:var(--display)!important;font-size:.95rem!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--ink)!important;background:rgba(255,255,255,.5)!important;border:1px solid var(--glass-edge)!important;border-radius:999px!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 26px -16px rgba(46,39,51,.4)}
.btn-secondary:hover,.btn-live-secondary:hover,.btn-ghost:hover{background:rgba(255,255,255,.8)!important}

/* LIGHT CARDS: frosted glass */
.help-card,.work-card,.insight-card,.decision-card,.ba-card,.strategy-card,.value-card,.callout,.tldr,.contact-right .contact-form,.form-header + form,.cs-meta-item,.detail-item,.response-badge{
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--glass-edge);box-shadow:0 20px 50px -28px rgba(46,39,51,.35)}
.help-card,.work-card,.insight-card,.decision-card,.ba-card,.strategy-card,.value-card,.callout,.tldr{border-radius:24px}
.cs-section.alt,.extra-section.alt,.faq{background:rgba(246,239,245,.65)}

/* chips and filters */
.work-card-tag,.service-pill,.filter-btn,.sub-nav a{border-radius:999px;font-family:var(--display);letter-spacing:0;text-transform:none}
.work-card-tag{background:var(--green-glass);color:var(--ink)}
.sub-nav{justify-content:flex-start;background:rgba(252,248,250,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sub-nav a,.filter-btn{background:rgba(255,255,255,.55);border-color:var(--line-soft);color:var(--ink)}
.sub-nav a:hover,.filter-btn:hover,.filter-btn.active,.service-pill.selected,.service-pill:hover{background:var(--green-glass)!important;color:var(--ink)!important;border-color:var(--green-deep)!important}

/* numbers in the secondary green */
.stat-big,.stat-num,.hs-num,.insight-num,.step-num-lg,.proc-num,.value-icon{color:var(--green-deep)}
.stat-big em,.stat-num em{color:var(--rose)}

/* DARK BANDS become photo bands with a plum veil (white text stays above 4.5:1) */
.cta-band,.process,.cs-section.dark,.contact-left{
  background:linear-gradient(var(--band-overlay),var(--band-overlay)),url(images/home/hero.jpg) center 35%/cover!important;color:#fff}
.process{background:linear-gradient(var(--band-overlay),var(--band-overlay)),url(images/home/harbor.jpg) center 40%/cover!important}
.cta-band::before,.process::before,.contact-left::before{display:none}
.cta-band h2,.process h2,.cs-section.dark h2{color:#fff}
.cta-band h2 em,.process h2 em,.cs-section.dark h2 em{color:var(--dusty)}
:is(.cta-band,.process,.cs-section.dark,.contact-left) :is(.help-card,.work-card,.insight-card,.decision-card,.ba-card,.strategy-card,.value-card,.callout,.tldr,.proc-step,.response-badge,.detail-item){
  background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.28);box-shadow:none}
.process .proc-step{border-radius:20px;padding:1.5rem}
.cs-section.dark .insight-num,.process .proc-num,.cs-section.dark .step-num-lg{color:var(--green)}
.values-section{background:rgba(246,239,245,.65)}
.value-icon{background:var(--green-glass);color:var(--ink)}
.cta-band{border-radius:0}
.cta-band .btn-cream,.cta-band .btn-primary{white-space:nowrap}
/* buttons on photo bands read better with a lighter pink */
.cta-band :is(.btn-cream,.btn-primary),.contact-left .btn-light{background:rgba(240,200,214,.82)!important}

/* FOOTER: light */
footer{background:transparent;color:var(--ink-soft);border-top:1px solid var(--line-soft)}
.footer-inner{border-bottom-color:var(--line-soft)}
.footer-logo{font-family:var(--display);font-weight:500;color:var(--ink);font-size:1.15rem}
.footer-logo em{color:var(--ink)}
.footer-links a{font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.footer-links a:hover{color:var(--ink)}

/* page heroes: pastel light instead of the flat gradient */
.page-hero-bg,.cs-hero-bg{background:
  radial-gradient(50% 70% at 85% 20%,var(--blush),transparent 70%),
  radial-gradient(45% 60% at 10% 90%,var(--mint),transparent 70%),
  radial-gradient(40% 60% at 50% 0%,var(--lilac),transparent 70%)!important}

/* form fields */
.form-group input,.form-group select,.form-group textarea{background:rgba(255,255,255,.7);border-color:rgba(46,39,51,.25);border-radius:14px;font-family:var(--display);color:var(--ink)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--pink-edge);outline:3px solid rgba(154,78,105,.25);outline-offset:1px}

@media (max-width:900px){
  body > nav:not(.sub-nav){top:10px;padding:.45rem .5rem .45rem 1.1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* the nav's blur would trap the fixed mobile drawer inside the pill, so drop it while the menu is open */
body > nav:not(.sub-nav):has(.nav-links.open){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(252,248,250,.96)}