/* BridgeWell — site-wide styles. Tokens, header, footer, homepage. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200..900;1,9..40,200..700&display=swap');

:root{
  --forest:#183025; --forest-deep:#0E1F18; --forest-soft:#23422F;
  --lime:#B1D675; --lime-deep:#8CB544; --lime-soft:#C7E48F;
  --purple:#CAA2DD; --purple-deep:#7B4FB1;
  --yellow:#F2C75C; --yellow-deep:#9C6A1A;
  --blue:#A4C8E1; --blue-deep:#3A6E94;
  --tan:#FEF2E6;
  --ink:#0E1F18; --ink-2:#3A4A42; --ink-3:#6B786F;
  --on-dark:#E6F0D7; --on-dark-mute:#B6C8A9;
  --line:#D7DDD6; --line-soft:#EAEDE8;
  --surface:#fff; --surface-2:#F7F5F0;

  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-card:24px; --radius-pill:999px;

  /* Spacing scale — 4pt base. Use for gaps, padding, margins. */
  --space-1:4px;  --space-2:8px;   --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px;  --space-7:48px; --space-8:64px;
  --space-9:80px; --space-10:120px;

  /* Section vertical padding — fluid between mobile and desktop.
     Kills the need for media-query overrides. */
  --section-pad:clamp(64px, 7vw, 112px);
  --section-pad-sm:clamp(48px, 5vw, 72px);

  /* Header — floating pill sits at top:18px and is ~52px tall.
     --header-h is the vertical space content must clear under it.
     Heroes: padding-top:var(--hero-pad-top) keeps hero copy
     comfortably below the header at every viewport. */
  --header-h:88px;
  --hero-pad-top:calc(var(--header-h) + var(--section-pad));

  --shadow-1:0 1px 2px rgba(24,48,37,.06),0 1px 1px rgba(24,48,37,.04);
  --shadow-2:0 4px 12px rgba(24,48,37,.08),0 1px 2px rgba(24,48,37,.04);
  --shadow-3:0 12px 32px rgba(24,48,37,.14),0 2px 4px rgba(24,48,37,.06);
  --shadow-float:0 6px 20px rgba(24,48,37,.10),0 1px 3px rgba(24,48,37,.06);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --container:1240px; --container-narrow:960px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; color:var(--ink); background:var(--surface);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ========== Type ========== */
.eyebrow{
  display:inline-flex;align-self:flex-start;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--lime);color:var(--forest);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  white-space:nowrap;width:fit-content;
}
.eyebrow.outlined{background:transparent;box-shadow:inset 0 0 0 1.5px var(--forest);}
.eyebrow.on-dark{background:var(--lime);color:var(--forest);}
.eyebrow.on-dark.outlined{color:var(--lime);box-shadow:inset 0 0 0 1.5px var(--lime);}
.eyebrow.purple{background:var(--purple);color:var(--forest);}
.eyebrow.yellow{background:var(--yellow);color:var(--forest);}
.eyebrow.blue{background:var(--blue);color:var(--forest);}

/* Prevent orphans / widows in all headings site-wide */
h1, h2, h3, h4,
.display, .display-xl, .display-lg, .display-md, .display-sm{
  text-wrap: balance;
}
/* Prevent orphans in body copy site-wide */
p, li, figcaption,
.body-lg, .body-md, .body-sm,
.lede{ text-wrap: pretty; }

/* Short text passages — balance for even line lengths, prevents single-word orphans */
q, blockquote{ text-wrap: balance; }

.display{font-weight:200;line-height:.98;letter-spacing:-.035em;margin:0;}
.display-xl{font-size:clamp(48px,8.6vw,128px);line-height:1.05;}
.display-lg{font-size:clamp(40px,6.4vw,96px);line-height:1.05;}
.display-md{font-size:clamp(34px,4.6vw,68px);font-weight:300;line-height:1.3;letter-spacing:-.03em;}
.display-sm{font-size:clamp(28px,3.5vw,46px);font-weight:300;line-height:1.3;letter-spacing:-.024em;}

.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--ink-2);font-weight:400;}
.body-lg{font-size:18px;line-height:1.6;color:var(--ink-2);}
.body{font-size:16px;line-height:1.6;color:var(--ink-2);}
.body-sm{font-size:14px;line-height:1.55;color:var(--ink-2);}

.hl{display:inline;background:rgba(177,214,117,.5);color:var(--forest);padding:0 14px;border-radius:var(--radius-pill);line-height:inherit;font-style:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:var(--radius-pill);
  font-size:14.5px;font-weight:600;line-height:1;border:0;cursor:pointer;
  text-decoration:none;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .18s var(--ease-out),color .18s var(--ease-out);
  white-space:nowrap;
}
.btn .arr{display:inline-block;transition:transform .22s var(--ease-out);}
.btn:hover{transform:translateY(-1px);}
.btn:hover .arr{transform:translateX(3px);}
.btn:active{transform:translateY(0);}
.btn.sm{padding:10px 18px;font-size:13px;gap:6px;}
.btn.lg{padding:18px 32px;font-size:16px;}

.btn-primary{background:var(--forest);color:var(--lime);}
.btn-primary:hover{background:var(--forest-deep);box-shadow:var(--shadow-2);}
.btn-primary.on-dark{background:var(--lime);color:var(--forest);}
.btn-primary.on-dark:hover{background:var(--lime-soft);}

.btn-secondary{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest);}
.btn-secondary:hover{background:rgba(24,48,37,.06);}
.btn-secondary.on-dark{color:var(--lime);box-shadow:inset 0 0 0 1.5px var(--lime);}
.btn-secondary.on-dark:hover{background:rgba(177,214,117,.10);}

.btn-link{background:transparent;color:var(--forest);padding:14px 4px;font-weight:600;font-size:14.5px;position:relative;}
.btn-link::after{content:"";position:absolute;left:4px;right:4px;bottom:9px;height:1.5px;background:currentColor;transform:scaleX(.4);transform-origin:left;transition:transform .25s var(--ease-out);}
.btn-link:hover::after{transform:scaleX(1);}
.btn-link.on-dark{color:var(--lime);}

/* ========== Layout ========== */
.container{max-width:var(--container);margin:0 auto;padding:0 32px;width:100%;}
.container.narrow{max-width:var(--container-narrow);}
section{position:relative;}

/* ========== Texture utilities ========== */
.tex{position:relative;}
.tex-darkgreen{background:#183025 url('../assets/texture-darkgreen.png') center/600px 600px;}
.tex-lightgreen{background:#B1D675 url('../assets/texture-lightgreen.png') center/600px 600px;}
.tex-purple{background:#CAA2DD url('../assets/texture-purple.png') center/600px 600px;}
.tex-yellow{background:#F2C75C url('../assets/texture-sun.png') center/600px 600px;}
.tex-blue{background:#A4C8E1 url('../assets/texture-blue.png') center/600px 600px;}
.tex-tan{background:var(--tan);position:relative;}
.tex-tan::before{content:"";position:absolute;inset:0;background:url('../assets/texture-sun.png') center/700px 700px;opacity:.18;mix-blend-mode:multiply;pointer-events:none;}

/* ========== Reveals ========== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.reveal-stagger.in > *{opacity:1;transform:none;}
.reveal-stagger.in > *:nth-child(1){transition-delay:.04s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.20s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.28s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.36s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.44s;}
.swoop-draw path{stroke-dasharray:6000;stroke-dashoffset:6000;transition:stroke-dashoffset 2.4s var(--ease-out);}
.swoop-draw.in path{stroke-dashoffset:0;}

/* ========== Header (global, floating pill) ========== */
.site-header-shell{
  position:fixed;top:18px;left:0;right:0;z-index:80;
  display:flex;justify-content:center;padding:0 20px;
  pointer-events:none;
  transition:top .35s var(--ease-out);
}
.site-header-shell::before{
  content:"";
  position:absolute;left:0;right:0;top:-32px;height:160px;
  background:linear-gradient(180deg, rgba(14,31,24,.86) 0%, rgba(14,31,24,.55) 48%, rgba(14,31,24,0) 100%);
  pointer-events:none;
  opacity:0;
  transition:opacity .35s var(--ease-out);
  z-index:-1;
}
/* Show gradient when header is dark-mode AND not yet scrolled into the solid pill state */
.site-header-shell:has(.site-header.on-dark:not(.solid))::before{opacity:1;}
.site-header-shell > *{pointer-events:auto;}
.site-header{
  display:flex;align-items:center;gap:8px;
  padding:8px 8px 8px 22px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out),backdrop-filter .3s var(--ease-out),padding .3s var(--ease-out);
  max-width:100%;
}
.site-header.solid{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow-float);
}
.site-header.on-light{background:rgba(255,255,255,.96);box-shadow:var(--shadow-2);}

.site-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.012em;color:var(--forest);padding:6px 4px;}
.site-brand img{width:24px;height:auto;}
.site-header.on-dark .site-brand{color:var(--lime);}
.site-header.solid .site-brand{color:var(--forest);}
/* Solid pill wins over on-dark, even when both classes are present */
.site-header.solid.on-dark .site-brand{color:var(--forest);}
/* Two brand marks stacked; CSS toggles which is visible. */
.site-brand .brand-mark{position:relative;display:inline-flex;width:24px;height:30px;align-items:center;justify-content:center;}
.site-brand .brand-mark img{position:absolute;inset:0;margin:auto;display:block;}
.site-brand .mark-on-light{opacity:0;}
.site-header.on-dark:not(.solid) .site-brand .mark-on-light{opacity:0;}
.site-header.on-dark:not(.solid) .site-brand .mark-on-dark{opacity:1;}
.site-header:not(.on-dark) .site-brand .mark-on-dark,
.site-header.solid .site-brand .mark-on-dark{opacity:0;}
.site-header:not(.on-dark) .site-brand .mark-on-light,
.site-header.solid .site-brand .mark-on-light{opacity:1;}

.site-nav{display:flex;align-items:center;gap:2px;margin-left:8px;}
.site-nav a,
.site-nav button.has-children{
  padding:10px 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:500;color:var(--forest);
  transition:background .18s var(--ease-out),color .18s var(--ease-out);
  position:relative;white-space:nowrap;
}
.site-header.on-dark .site-nav a,
.site-header.on-dark .site-nav button.has-children{color:var(--on-dark);}
.site-nav a:hover,
.site-nav button.has-children:hover{background:rgba(24,48,37,.06);}
.site-header.on-dark .site-nav a:hover,
.site-header.on-dark .site-nav button.has-children:hover{background:rgba(255,255,255,.08);color:var(--lime);}
.site-nav a.active{background:var(--forest);color:var(--lime);}
.site-header.on-dark .site-nav a.active{background:var(--lime);color:var(--forest);}

/* Solid pill overrides: nav text + caret become forest, regardless of on-dark */
.site-header.solid.on-dark .site-nav a{color:var(--forest);}
.site-header.solid.on-dark .site-nav a:hover{background:rgba(24,48,37,.06);color:var(--forest);}
.site-header.solid.on-dark .site-nav a.active{background:var(--forest);color:var(--lime);}
.site-header.solid.on-dark .nav-group > a.has-children,
.site-header.solid.on-dark .nav-group > button.has-children{color:var(--forest);}
.site-header.solid.on-dark .nav-group:hover > a.has-children,
.site-header.solid.on-dark .nav-group:hover > button.has-children{color:var(--forest);}

.site-nav .divider{width:1px;height:18px;background:rgba(24,48,37,.18);margin:0 6px;}
.site-header.on-dark .site-nav .divider{background:rgba(177,214,117,.28);}
.site-nav a.muted{font-weight:400;color:var(--ink-3);font-style:normal;}
.site-header.on-dark .site-nav a.muted{color:var(--on-dark-mute);}

/* ===== Dropdown nav ===== */
.nav-group{position:relative;display:inline-flex;}
.nav-group > a.has-children,
.nav-group > button.has-children{
  display:inline-flex;align-items:center;gap:4px;
  border:0;background:transparent;cursor:pointer;
  font-family:inherit;letter-spacing:inherit;
}
.nav-caret{display:inline-flex;align-items:center;justify-content:center;transition:transform .22s var(--ease-out);opacity:.7;margin-left:2px;}
.nav-group:hover > a.has-children .nav-caret,
.nav-group:hover > button.has-children .nav-caret,
.nav-group.open > a.has-children .nav-caret,
.nav-group.open > button.has-children .nav-caret{transform:rotate(180deg);opacity:1;}

.nav-dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:300px;background:rgba(255,255,255,.98);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-radius:18px;box-shadow:0 18px 40px rgba(24,48,37,.18),0 2px 6px rgba(24,48,37,.06);
  padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);
  z-index:90;
}
/* hover bridge so cursor can travel through the gap */
.nav-dropdown::before{
  content:"";position:absolute;left:0;right:0;top:-12px;height:14px;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group.open .nav-dropdown{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}

.dropdown-item{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;border-radius:12px;
  color:var(--forest);
  transition:background .18s var(--ease-out);
}
.dropdown-item:hover{background:var(--surface-2);}
.dropdown-item.is-active{background:var(--surface-2);}
.dropdown-item .di-label{font-weight:600;font-size:14.5px;line-height:1.2;color:var(--forest);}
.dropdown-item .di-desc{font-size:12.5px;line-height:1.4;color:var(--ink-3);font-weight:400;}

/* on-dark variant of the trigger; dropdown panel itself stays light */
.site-header.on-dark .nav-group > a.has-children,
.site-header.on-dark .nav-group > button.has-children{color:var(--on-dark);}
.site-header.on-dark .nav-group:hover > a.has-children,
.site-header.on-dark .nav-group:hover > button.has-children{color:var(--lime);}

/* Mobile children sub-list inside drawer */
.m-children{display:flex;flex-direction:column;padding:2px 0 6px 16px;border-left:2px solid var(--line-soft);margin:-4px 4px 4px 16px;}
.mobile-drawer-panel .m-child{font-size:15px;font-weight:400;color:var(--ink-2);padding:10px 14px;}
.mobile-drawer-panel .m-child:hover{color:var(--forest);}

.header-cta{margin-left:6px;}
.site-header .header-cta{
  background:var(--forest);color:var(--lime);
  padding:11px 20px;border-radius:var(--radius-pill);font-weight:600;font-size:14px;
  transition:background .18s var(--ease-out),transform .18s var(--ease-out);
  white-space:nowrap;
}
.site-header.on-dark .header-cta{background:var(--lime);color:var(--forest);}
.site-header .header-cta:hover{background:var(--forest-deep);transform:translateY(-1px);}
.site-header.on-dark .header-cta:hover{background:var(--lime-soft);}
/* Solid pill — CTA returns to forest fill */
.site-header.solid.on-dark .header-cta{background:var(--forest);color:var(--lime);}
.site-header.solid.on-dark .header-cta:hover{background:var(--forest-deep);}

/* schools accent */
.site-header.hub-schools .site-nav a.active{background:var(--purple);color:var(--forest);}
.site-header.hub-schools .header-cta{background:var(--purple-deep);color:#fff;}
.site-header.hub-healthcare .site-nav a.active{background:var(--yellow);color:var(--forest);}
.site-header.hub-healthcare .header-cta{background:var(--yellow-deep);color:#fff;}
.site-header.hub-social .site-nav a.active{background:var(--blue);color:var(--forest);}
.site-header.hub-social .header-cta{background:var(--blue-deep);color:#fff;}

/* The toggle's color must match what's behind it. The header has three
   visual states and we need a different icon shade for each:
     1. Light page (no .on-dark)            → transparent over light bg → dark-green icon
     2. .on-dark and NOT .solid             → transparent over dark hero → lime icon
     3. .on-dark.solid (scrolled into pill) → white pill background     → dark-green icon
   Rule #3 must override #2 because both .on-dark and .solid are set. */
.menu-toggle{display:none;flex-shrink:0;width:42px;height:42px;border-radius:50%;background:rgba(24,48,37,.08);border:0;align-items:center;justify-content:center;color:var(--forest);cursor:pointer;transition:background .18s var(--ease-out),color .18s var(--ease-out);}
.menu-toggle:hover,.menu-toggle:focus-visible{background:rgba(24,48,37,.16);}
.menu-toggle svg{width:20px;height:20px;}
.site-header.on-dark .menu-toggle{background:rgba(199,238,128,.16);color:var(--lime);}
.site-header.on-dark .menu-toggle:hover,
.site-header.on-dark .menu-toggle:focus-visible{background:rgba(199,238,128,.28);}
/* Solid pill wins over on-dark — pill is white, icon goes back to dark green. */
.site-header.on-dark.solid .menu-toggle{background:rgba(24,48,37,.08);color:var(--forest);}
.site-header.on-dark.solid .menu-toggle:hover,
.site-header.on-dark.solid .menu-toggle:focus-visible{background:rgba(24,48,37,.16);}

/* Narrow-viewport survival rules. The header is a fixed pill at top:18px
   with a hard-coded 20px shell padding and ~30px of internal padding —
   that leaves only ~viewport-50px for the brand + Book a Demo + hamburger
   to share. Without these rules the hamburger silently overflows. */
@media (max-width:480px){
  /* Hide the "BridgeWell" wordmark; the icon alone is enough. */
  .site-header .site-brand span:not(.brand-mark){display:none;}
  /* Tighten the Book a Demo button so it does not eat the row. */
  .site-header .header-cta{padding:10px 14px;font-size:13px;}
  /* Tighter shell so we get a few more usable pixels. */
  .site-header-shell{padding:0 12px;}
  .site-header{padding:8px 8px 8px 12px;gap:6px;}
}

/* mobile drawer */
.mobile-drawer{
  position:fixed;inset:0;z-index:90;background:rgba(14,31,24,.6);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out);
}
.mobile-drawer.open{opacity:1;pointer-events:auto;}
.mobile-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(380px,90vw);
  background:var(--surface);padding:24px;
  transform:translateX(100%);transition:transform .35s var(--ease-out);
  display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;
}
.mobile-drawer.open .mobile-drawer-panel{transform:none;}
.mobile-drawer-panel a{padding:14px 16px;border-radius:var(--radius-md);font-size:17px;font-weight:500;color:var(--forest);}
.mobile-drawer-panel a:hover{background:var(--surface-2);}
.mobile-drawer-panel .m-parent{padding:14px 16px;font-size:17px;font-weight:600;color:var(--forest);letter-spacing:.01em;}
.mobile-drawer-panel .header-cta{margin-top:12px;text-align:center;}
.mobile-drawer-panel .close{align-self:flex-end;background:transparent;border:0;padding:8px;color:var(--ink);}

@media (max-width:920px){
  .site-nav,.header-cta.desktop-only{display:none;}
  .menu-toggle{display:inline-flex;}
  .site-header{padding:8px 8px 8px 18px;}
}

/* ========== HERO — Blob Feature Frame ==========
   Full-bleed photo. Two forest-textured silhouettes carve a single asymmetric
   opening (large top-left, smaller crescent bottom-right). A flowing lime
   contour line skims the silhouette edge. Copy sits inside the carved opening.
*/
.hero{
  position:relative;color:var(--on-dark);overflow:hidden;
  padding:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--forest);
}
.hero-frame{position:absolute;inset:0;z-index:0;}
.hero-frame .hero-photo{position:absolute;inset:0;background-size:cover;background-position:25% 30%;z-index:0;}
.hero-frame .hero-frame-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;z-index:2;}
/* Gradient veil sits on top of everything but is tightly bounded to the
   left copy zone so it doesn't reach the right-side dark green blob. */
.hero-frame .hero-veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(45% 110% at 8% 50%, rgba(14,31,24,.92) 0%, rgba(14,31,24,.72) 30%, rgba(14,31,24,.38) 56%, rgba(14,31,24,0) 80%);
}
.hero::after{content:none;}
.hero .container{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding-top:140px;padding-bottom:80px;}
.hero-copy{display:flex;flex-direction:column;gap:26px;max-width:62%;}
.hero-copy h1{color:var(--on-dark);font-weight:200;font-size:clamp(46px,7.4vw,108px);line-height:.96;letter-spacing:-.035em;margin:0;max-width:14ch;}
.hero-copy h1 em{color:var(--lime);font-style:normal;}
.hero-copy .lede{color:var(--on-dark-mute);max-width:48ch;font-size:clamp(17px,1.35vw,20px);}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px;}
.hero-tertiary{margin-top:8px;display:inline-flex;align-items:center;gap:8px;color:var(--on-dark-mute);font-size:14px;font-weight:500;width:fit-content;}
.hero-tertiary:hover{color:var(--lime);}
.hero-tertiary .dn{display:inline-block;transition:transform .25s var(--ease-out);}
.hero-tertiary:hover .dn{transform:translateY(3px);}

@media (max-width:920px){
  .hero{min-height:0;}
  .hero .container{padding-top:120px;padding-bottom:64px;}
  .hero-copy{max-width:100%;}
  .hero-copy h1{font-size:clamp(38px,9vw,64px);}
}

/* ----- Hero on phones: photo becomes a feature image at the top,
        text sits below on solid dark green for legibility ----- */
@media (max-width:640px){
  .hero{display:block;min-height:0;background:var(--forest);overflow:visible;}
  .hero-frame{
    position:relative;inset:auto;
    height:46vh;min-height:280px;max-height:420px;
    width:100%;
    overflow:hidden;
  }
  .hero-frame .hero-photo{
    background-position:center 35%;
  }
  /* Hide the desktop-only swoop PNG on mobile — designed for the L-shape
     of the desktop layout, doesn't translate to a stacked layout. */
  .hero-frame .hero-frame-overlay{display:none !important;}
  /* Strong dark fade at the bottom of the photo into the text panel below. */
  .hero-frame .hero-veil{
    background:linear-gradient(
      to bottom,
      rgba(14,31,24,.15) 0%,
      rgba(14,31,24,.25) 35%,
      rgba(14,31,24,.70) 78%,
      rgba(14,31,24,.96) 96%,
      var(--forest) 100%
    ) !important;
  }
  .hero .container{
    padding-top:36px;padding-bottom:56px;
    background:var(--forest);
    position:relative;z-index:3;
    display:block;
  }
  .hero-copy{margin-top:0 !important;gap:18px;}
  .hero-copy h1{
    width:auto !important;
    font-size:clamp(34px,9vw,46px) !important;
    line-height:1.08;
    max-width:100%;
  }
  .hero-copy .lede{
    font-size:16px !important;
    line-height:1.55;
    max-width:100%;
  }
  /* The blur-glow scrims behind H1/lede were sized for desktop overlap;
     no longer needed once text sits on solid dark green. */
  .hero-copy h1::before,
  .hero-copy .lede::before{display:none;}
  .hero-actions{margin-top:8px;width:100%;}
  .hero-actions .btn{width:100%;justify-content:center;}
}

/* ========== Credibility bar ========== */
.cred{position:relative;color:var(--on-dark);padding:var(--section-pad) 0;overflow:hidden;}
.cred .tex-layer{position:absolute;inset:0;background:var(--forest-deep) url('../assets/texture-darkgreen.png') center/600px 600px;z-index:0;}
.cred .container{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.cred-stat{display:flex;flex-direction:column;gap:8px;border-top:1.5px solid rgba(177,214,117,.32);padding-top:22px;}
.cred-stat .num{font-weight:200;font-size:clamp(40px,4.6vw,72px);line-height:.95;letter-spacing:-.035em;color:var(--lime);}
.cred-stat .num .num-suffix{font-size:.42em;font-weight:300;letter-spacing:-.012em;color:var(--lime);opacity:.92;display:block;margin-top:6px;}
.cred-stat .lbl{color:var(--on-dark-mute);font-size:14.5px;line-height:1.5;max-width:32ch;}

@media (max-width:780px){.cred .container{grid-template-columns:1fr;gap:32px;}}

/* ========== Problem section ========== */
.problem{background:var(--surface);padding:var(--section-pad) 0;position:relative;}
.problem-layout{
  display:grid;grid-template-columns:.95fr 1.2fr;gap:72px;
  align-items:center;margin-bottom:64px;
}
.problem-media{position:relative;}
.problem-photo{
  width:100%;aspect-ratio:4/5;
  background-size:cover;background-position:center 30%;
  border-radius:48% 52% 38% 56% / 56% 42% 52% 38%;
  box-shadow:0 30px 60px -20px rgba(24,48,37,.30),0 6px 14px rgba(24,48,37,.08);
}
.problem-media::before{
  content:"";position:absolute;
  inset:-22px -22px auto auto;width:48%;height:48%;
  border-radius:50%;border:1.5px solid var(--lime-deep);
  pointer-events:none;
  transform:rotate(-12deg);
  opacity:.55;
}
.problem-content{display:flex;flex-direction:column;gap:24px;}
.problem-content .eyebrow{align-self:flex-start;}
.problem-content h2{margin:0;}
.problem-body{display:flex;flex-direction:column;gap:18px;max-width:62ch;}
.problem-body p{margin:0;}

.problem-quote{
  margin-top:32px;background:var(--tan);border-radius:var(--radius-card);
  padding:56px 64px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
}
.problem-quote::before{content:"";position:absolute;inset:0;background:url('../assets/texture-sun.png') center/700px 700px;opacity:.16;mix-blend-mode:multiply;pointer-events:none;}
.problem-quote-mark{font-family:'DM Sans';font-weight:200;font-size:120px;line-height:.7;color:var(--lime-deep);position:relative;z-index:1;}
.problem-quote q{display:block;font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.32;letter-spacing:-.012em;color:var(--forest);margin:0;quotes:none;position:relative;z-index:1;max-width:54ch;}
.problem-quote q::before,.problem-quote q::after{content:"";}
.problem-quote .cite{margin-top:18px;font-size:14px;color:var(--ink-2);position:relative;z-index:1;}
.problem-quote .cite b{color:var(--forest);font-weight:600;display:block;}

@media (max-width:780px){
  .problem{padding:var(--section-pad-sm) 0;}
  .problem-layout{grid-template-columns:1fr;gap:40px;}
  .problem-photo{aspect-ratio:4/3;max-width:500px;margin:0 auto;}
  .problem-quote{padding:36px 28px;grid-template-columns:1fr;gap:16px;}
  .problem-quote-mark{font-size:70px;}
}

/* ========== How it works ========== */
.how{background:var(--surface-2);padding:var(--section-pad) 0;position:relative;overflow:hidden;}
.how::before{content:"";position:absolute;inset:0;background:url('../assets/texture-sun.png') center/700px 700px;opacity:.06;mix-blend-mode:multiply;pointer-events:none;}
.how-head{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:32px;}
.how-head h2{margin:0;color:var(--forest);}
.how-head h2 em{font-style:normal;display:inline;background:var(--lime);color:var(--forest);padding:0 18px;border-radius:var(--radius-pill);line-height:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* New dynamic staggered grid with curved connecting path */
.how-flow{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px 56px;
  position:relative;padding:32px 0 60px;
  max-width:1000px;margin:0 auto;
}
.how-path{
  position:absolute;left:0;right:0;top:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.how-path path{
  fill:none;stroke:var(--ink-3);stroke-width:1.5;
  stroke-dasharray:6 8;stroke-linecap:round;
  opacity:.45;
}

.how-step{
  position:relative;z-index:1;
  background:var(--surface);border-radius:24px;
  display:flex;flex-direction:column;
  box-shadow:0 2px 6px rgba(24,48,37,.05),0 1px 2px rgba(24,48,37,.04);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
  border:1px solid var(--line-soft);
  min-height:380px;overflow:hidden;
}

/* Diagonal stagger across the 2×2 — gentle drift for visual rhythm */
.how-step[data-step="1"]{transform:translateY(0);}
.how-step[data-step="2"]{transform:translateY(48px);}
.how-step[data-step="3"]{transform:translateY(-16px);}
.how-step[data-step="4"]{transform:translateY(32px);}

.how-step:hover{
  transform:translateY(calc(var(--baseY, 0px) - 8px));
  box-shadow:0 16px 36px rgba(24,48,37,.14),0 2px 4px rgba(24,48,37,.06);
}
.how-step[data-step="1"]:hover{--baseY:0px;}
.how-step[data-step="2"]:hover{--baseY:48px;}
.how-step[data-step="3"]:hover{--baseY:-16px;}
.how-step[data-step="4"]:hover{--baseY:32px;}

/* Card header — accent-tinted top zone with icon + giant numeral */
.how-step-header{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;
  padding:32px 36px 28px;
  background:var(--accent-soft);
  border-bottom:1px solid color-mix(in oklch, var(--accent-deep) 18%, transparent);
  overflow:hidden;
}
.how-step-header::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--accent);
}
.how-step-header::after{
  content:"";position:absolute;bottom:-30px;right:-30px;
  width:120px;height:120px;border-radius:50%;
  background:color-mix(in oklch, var(--accent) 65%, transparent);
  opacity:.35;pointer-events:none;
}
.how-step-icon{
  position:relative;z-index:1;
  width:64px;height:64px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--accent-deep);
  box-shadow:0 8px 18px -8px color-mix(in oklch, var(--accent-deep) 50%, transparent);
  border:1.5px solid color-mix(in oklch, var(--accent-deep) 22%, transparent);
}
.how-step-icon svg{width:30px;height:30px;}
.how-step-num{
  position:relative;z-index:1;
  font-weight:200;font-size:96px;line-height:.85;letter-spacing:-.06em;
  color:var(--accent-deep);
  opacity:.85;
  pointer-events:none;user-select:none;
}

/* Card body */
.how-step-body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:14px;
  padding:28px 36px 36px;
}
.how-step-label{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  color:var(--accent-deep);
}
.how-step-label .dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.how-step h3{margin:0;font-weight:500;font-size:26px;line-height:1.2;letter-spacing:-.012em;color:var(--forest);}
.how-step p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2);}

@media (max-width:760px){
  .how-flow{grid-template-columns:1fr;gap:24px;padding:40px 0;}
  .how-step,.how-step[data-step]{transform:none !important;}
  .how-step:hover{transform:translateY(-4px) !important;}
  .how-step-header{padding:24px 28px 22px;}
  .how-step-num{font-size:72px;}
  .how-step-icon{width:54px;height:54px;}
  .how-step-icon svg{width:26px;height:26px;}
  .how-step-body{padding:22px 28px 30px;}
  .how{padding:var(--section-pad-sm) 0;}
  .how-head{margin-bottom:48px;}
  .how-path{display:none;}
}

/* ========== Who we serve — image card with blob-carved photo ==========
   White card. Photo on top fills the upper region. The top-left corner of the
   photo is carved with a generous organic curve, revealing the accent-colored
   textured background behind. Pill label + headline + CTA arrow sit below.
*/
.serve{background:var(--surface-2);padding:var(--section-pad) 0;}
.serve-head{display:flex;flex-direction:column;gap:18px;max-width:780px;margin-bottom:64px;}
.serve-head h2{margin:0;color:var(--forest);}
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.serve-card{
  position:relative;background:var(--surface);
  border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.serve-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);}

.serve-media{
  position:relative;aspect-ratio:5/4;overflow:hidden;
  background-size:500px 500px;background-position:center;
  background-color:#0E1F18;
  background-image:url('../assets/texture-darkgreen.png');
}
.serve-media .photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  /* Large top-left arc cut from the image, revealing the textured color behind */
  border-top-left-radius:85% 95%;
}
/* legacy corner element — no longer rendered as a separate pie */
.serve-corner{display:none;}

.serve-body{padding:28px 28px 32px;display:flex;flex-direction:column;gap:16px;flex:1;}
.serve-card .accent-pill{
  align-self:flex-start;width:fit-content;
  padding:8px 18px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:600;letter-spacing:.04em;line-height:1;
  white-space:nowrap;color:var(--forest);
}
.serve-card h3{margin:0;font-weight:500;font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:-.012em;color:var(--forest);max-width:24ch;}
.serve-body-copy{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:42ch;}

.serve-card .cta{
  display:inline-flex;align-items:center;gap:14px;margin-top:auto;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest);
}
.serve-card .cta-dot{
  width:36px;height:36px;border-radius:var(--radius-pill);
  background:var(--forest);color:var(--lime);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .22s var(--ease-out);
}
.serve-card:hover .cta-dot{transform:translateX(4px);}
.serve-card .cta-dot svg{width:16px;height:16px;}

/* Per-card textured colored background behind the photo */
.serve-schools .serve-media{background-color:var(--purple);background-image:url('../assets/texture-purple.png');}
.serve-schools .accent-pill{background:var(--purple);}

.serve-health .serve-media{background-color:var(--yellow);background-image:url('../assets/texture-sun.png');}
.serve-health .accent-pill{background:var(--yellow);}

.serve-social .serve-media{background-color:var(--blue);background-image:url('../assets/texture-blue.png');}
.serve-social .accent-pill{background:var(--blue);}

@media (max-width:920px){
  .serve-grid{grid-template-columns:1fr;}
}

/* ========== Differentiation — ledger comparison ========== */
.diff{background:var(--tan);padding:var(--section-pad) 0;position:relative;overflow:hidden;}
.diff::before{content:"";position:absolute;inset:0;background:url('../assets/texture-sun.png') center/700px 700px;opacity:.18;mix-blend-mode:multiply;pointer-events:none;}
.diff .container{position:relative;z-index:1;}

.diff-head{display:flex;flex-direction:column;gap:18px;max-width:880px;margin:0 0 64px;}
.diff-head h2{margin:0;color:var(--forest);}
.diff-head h2 em{font-style:normal;color:var(--forest);background:var(--lime);padding:0 18px;border-radius:var(--radius-pill);line-height:inherit;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* ----- The ledger ----- */
.diff-ledger{
  background:var(--surface);border-radius:var(--radius-card);
  padding:48px 56px;
  box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;gap:36px;
  position:relative;
}

.ledger-row{
  display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center;
}
.ledger-row + .ledger-row{padding-top:36px;border-top:1px solid rgba(24,48,37,.10);}

.ledger-label{display:flex;flex-direction:column;gap:8px;}
.ledger-tag{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.ledger-summary{
  font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.015em;
  color:var(--forest);
}
.ledger-summary em{
  font-style:normal;
  background-image:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 96%, transparent 96%);
  padding:0 3px;
}

/* Old-way row: muted */
.ledger-row--old .ledger-tag{color:var(--ink-3);}
.ledger-row--old .ledger-summary{color:var(--ink-3);font-weight:400;font-size:clamp(20px,1.7vw,24px);}

/* Flow row */
.ledger-flow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  position:relative;min-width:0;
}

.step{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:var(--radius-pill);
  font-weight:600;font-size:14px;letter-spacing:.01em;
  color:var(--forest);background:var(--surface-2);
  white-space:nowrap;
  box-shadow:inset 0 0 0 1.5px rgba(24,48,37,.10);
}

/* Old row pills are muted */
.ledger-row--old .step{
  background:transparent;color:var(--ink-3);
  box-shadow:inset 0 0 0 1.5px rgba(58,74,66,.22);
}
.ledger-row--old .step--gap{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(58,74,66,.22);
  font-style:italic;color:var(--ink-3);
}

/* New row: brand-colored pills */
.step--purple{background:var(--purple);box-shadow:none;}
.step--yellow{background:var(--yellow);box-shadow:none;}
.step--blue{background:var(--blue);box-shadow:none;}
.step--lime{background:var(--lime);box-shadow:none;}

/* Connectors between steps */
.connector{
  flex:1;min-width:18px;height:2px;
  background:currentColor;color:rgba(24,48,37,.18);
  position:relative;
}
.connector::after{
  content:"";position:absolute;right:-1px;top:50%;
  width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.connector--solid{color:var(--forest);}
.connector--broken{
  background:transparent;height:14px;color:rgba(58,74,66,.45);
}
.connector--broken::after{display:none;}
.connector--broken svg{width:100%;height:100%;display:block;}
.connector--broken path{fill:none;stroke:currentColor;stroke-width:2;}

/* The loop-back badge on the BridgeWell row */
.loop-back{
  position:absolute;right:-6px;top:calc(100% + 14px);
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--forest);
}
.loop-back svg{width:22px;height:22px;color:var(--forest);}
.ledger-row--new{position:relative;}

/* ----- Three principles ----- */
.diff-principles{
  list-style:none;margin:64px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(24,48,37,.14);
}
.diff-principles li{
  display:flex;align-items:flex-start;gap:18px;
  padding:36px 32px 0 0;
  position:relative;
}
.diff-principles li + li{padding-left:32px;}
.diff-principles li + li::before{
  content:"";position:absolute;left:0;top:36px;bottom:0;width:1px;
  background:rgba(24,48,37,.14);
}
.diff-num{
  font-family:'DM Sans',sans-serif;font-weight:300;
  font-size:42px;line-height:.9;letter-spacing:-.03em;color:var(--forest);
  flex-shrink:0;
}
.diff-principles p{
  margin:0;font-size:20px;line-height:1.25;letter-spacing:-.012em;color:var(--forest);
  font-weight:400;
}
.diff-principles strong{font-weight:600;}
.diff-principles .muted{color:var(--ink-3);font-weight:400;}

@media (max-width:920px){
  .diff{padding:var(--section-pad-sm) 0;}
  .diff-head{margin-bottom:48px;}
  .diff-ledger{padding:32px 24px;gap:28px;}
  .ledger-row{grid-template-columns:1fr;gap:20px;align-items:flex-start;}
  .ledger-row + .ledger-row{padding-top:28px;}
  .ledger-flow{flex-wrap:wrap;gap:8px;}
  .connector{flex:0 0 24px;}
  .loop-back{position:static;margin-top:8px;}
  .diff-principles{grid-template-columns:1fr;border-top:none;margin-top:48px;}
  .diff-principles li{padding:20px 0;border-top:1px solid rgba(24,48,37,.14);}
  .diff-principles li + li{padding-left:0;}
  .diff-principles li + li::before{display:none;}
}

/* Phones: stack the step chain vertically with down-pointing chevrons
   between pills — the horizontal layout wraps onto multiple ragged
   rows and the right-arrow connectors collide with line breaks. */
@media (max-width:640px){
  .ledger-flow{flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;}
  .ledger-flow .step{width:100%;justify-content:center;text-align:center;padding:14px 18px;white-space:normal;}
  .ledger-flow .connector{
    flex:0 0 28px;width:100%;height:28px;
    background:transparent;
  }
  /* Solid connector: thin vertical line + down chevron */
  .ledger-flow .connector::before{
    content:"";position:absolute;left:50%;top:4px;
    width:2px;height:14px;background:currentColor;
    transform:translateX(-50%);
  }
  .ledger-flow .connector::after{
    left:50%;top:auto;right:auto;bottom:2px;
    width:8px;height:8px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    border-top:0;
    transform:translateX(-50%) rotate(45deg);
  }
  /* Broken (dashed) connector: dashed vertical line, no chevron */
  .ledger-flow .connector--broken{height:28px;}
  .ledger-flow .connector--broken::before{
    background:transparent;border-left:2px dashed currentColor;
    height:20px;width:0;
  }
  .ledger-flow .connector--broken::after{display:none;}
  .ledger-flow .connector--broken svg{display:none;}
}

/* ========== Big quote section ========== */
.bigquote{background:var(--surface);padding:var(--section-pad) 0;}
.bigquote-card{
  display:grid;grid-template-columns:.85fr 1.4fr;gap:64px;
  align-items:center;
}
.bigquote-img{
  position:relative;aspect-ratio:1/1.15;overflow:hidden;
  border-top-left-radius:58% 38%;
  border-top-right-radius:18px;
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  background-size:cover;background-position:center;
  background-image:linear-gradient(180deg,rgba(24,48,37,.10),rgba(24,48,37,.40)),url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=1200&q=80');
}
.bigquote-img .grain{position:absolute;inset:0;background:url('../assets/texture-darkgreen.png') center/400px 400px;mix-blend-mode:multiply;opacity:.45;pointer-events:none;}
.bigquote-body q{display:block;font-weight:300;font-size:clamp(24px,2.4vw,36px);line-height:1.28;letter-spacing:-.012em;color:var(--forest);margin:0;quotes:none;max-width:32ch;}
.bigquote-body q::before,.bigquote-body q::after{content:"";}
.bigquote-cite{margin-top:32px;display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--ink-2);}
.bigquote-cite b{color:var(--forest);font-weight:600;}
.bigquote-link{margin-top:36px;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--forest);}
.bigquote-link .arr{transition:transform .22s var(--ease-out);}
.bigquote-link:hover .arr{transform:translateX(4px);}

@media (max-width:920px){.bigquote-card{grid-template-columns:1fr;gap:36px;--bq-cite-offset:0px;}.bigquote{padding:var(--section-pad-sm) 0;}}

/* ========== Final CTA ========== */
.finalcta{
  position:relative;padding:var(--section-pad) 0;color:var(--on-dark);overflow:hidden;
}
.finalcta .tex-layer{position:absolute;inset:0;background:var(--forest) url('../assets/texture-darkgreen.png') center/600px 600px;z-index:0;}
.finalcta .swoop{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.finalcta .swoop svg{width:100%;height:100%;display:block;}
.finalcta .swoop path{fill:none;stroke:var(--lime);stroke-width:3;}
.finalcta .container{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;max-width:880px;}
.finalcta h2{color:var(--on-dark);font-weight:200;font-size:clamp(34px,4.2vw,60px);line-height:1.05;letter-spacing:-.028em;margin:0;max-width:20ch;}
.finalcta h2 em{font-style:normal;color:var(--lime);}
.finalcta p{margin:0;color:var(--on-dark-mute);font-size:18px;line-height:1.55;max-width:54ch;}
.finalcta .actions{display:flex;gap:28px;flex-wrap:wrap;align-items:center;margin-top:14px;}

/* On phones the lime swoop visually crowds the headline + CTA. Drop its
   opacity so the text and button stay the focal point. */
@media (max-width:640px){
  .finalcta .swoop{opacity:.3;}
}

/* ========== Footer ========== */
.site-footer{
  background:var(--forest-deep);color:var(--on-dark);
  padding:96px 0 40px;position:relative;overflow:hidden;
}
.site-footer .tex-layer{position:absolute;inset:0;background:var(--forest-deep) url('../assets/texture-darkgreen.png') center/600px 600px;z-index:0;pointer-events:none;}
.site-footer .container{position:relative;z-index:1;}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:56px;padding-bottom:64px;border-bottom:1px solid rgba(177,214,117,.18);}
.footer-brand{display:flex;flex-direction:column;gap:18px;}
.footer-brand .mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--lime);}
.footer-brand .mark img{width:24px;height:auto;}
.footer-brand p{margin:0;font-size:14px;line-height:1.6;color:var(--on-dark-mute);max-width:34ch;}
.footer-col h2{
  margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime-soft);
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;color:var(--on-dark-mute);transition:color .18s var(--ease-out);}
.footer-col a:hover{color:var(--lime);}
.footer-bottom{padding-top:32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--on-dark-mute);}
.footer-bottom .wayfind{display:flex;align-items:center;gap:14px;}
.footer-bottom .wayfind .bar{width:1px;height:14px;background:rgba(177,214,117,.28);}
.footer-bottom .legal{display:flex;gap:24px;}
.footer-bottom a{color:inherit;}
.footer-bottom a:hover{color:var(--lime);}

@media (max-width:920px){.footer-top{grid-template-columns:1fr 1fr;gap:36px;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* ========== Skip-to-content (a11y) ========== */
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--lime);padding:12px 18px;border-radius:var(--radius-pill);font-weight:600;}
.skip:focus{left:16px;top:16px;z-index:200;}

/* Global focus-visible safety net. Browsers no longer show a default
   outline on every focused element, so keyboard users can lose their
   place. Any link/button/input that does not define its own focus
   style falls back to a clearly visible lime ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
  border-radius:4px;
}
/* On the on-dark header, a forest-deep ring reads better than lime
   over lime backgrounds. */
.site-header.on-dark a:focus-visible,
.site-header.on-dark button:focus-visible{
  outline-color:#fff;
}

/* ========== Community strip (shared across home + sub-pages) ========== */
.community-strip{
  background:var(--forest-deep);
  position:relative;overflow:hidden;
  padding:var(--section-pad) 0;
}
.community-strip .tex-layer{position:absolute;inset:0;background:var(--forest-deep) url('../assets/texture-darkgreen.png') center/600px 600px;z-index:0;}
.community-strip::after{
  content:"";position:absolute;
  right:-160px;top:-160px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(177,214,117,.18) 0%,rgba(177,214,117,0) 70%);
  pointer-events:none;
}
.community-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;
}
.community-copy{display:flex;flex-direction:column;gap:10px;max-width:560px;}
.community-copy .eyebrow{color:var(--lime);opacity:.85;}
.community-copy h2{
  margin:0;font-weight:300;
  font-size:clamp(26px,3vw,42px);
  line-height:1.12;letter-spacing:-.022em;color:#fff;
}
.community-copy h2 em{font-style:normal;color:var(--lime);}
.community-copy p{
  margin:0;color:rgba(218,227,212,.8);
  font-size:clamp(15px,1.1vw,17px);line-height:1.6;max-width:48ch;
}
.community-action{flex-shrink:0;}
.btn-community{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--lime);color:var(--forest);
  font-weight:600;font-size:15px;
  padding:14px 28px;border-radius:var(--radius-pill);
  border:none;cursor:pointer;
  transition:background .2s,transform .15s,box-shadow .2s;
  text-decoration:none;white-space:nowrap;
}
.btn-community:hover{background:#c8e87a;transform:translateY(-2px);}
.btn-community svg{transition:transform .2s;}
.btn-community:hover svg{transform:translateX(3px);}
@media(max-width:760px){
  .community-inner{flex-direction:column;align-items:flex-start;gap:28px;}
  .community-strip{padding:var(--section-pad-sm) 0;}
}

/* ========== Newsletter popup (shared) ========== */
.nl-backdrop{
  position:fixed;inset:0;z-index:9000;
  background:rgba(10,28,20,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.nl-backdrop.open{opacity:1;pointer-events:auto;}
.nl-modal{
  background:var(--surface);border-radius:20px;
  width:100%;max-width:520px;
  padding:48px 44px 44px;
  position:relative;overflow:hidden;
  transform:translateY(22px) scale(.97);
  transition:transform .35s cubic-bezier(.22,.68,0,1.15),opacity .3s ease;
  opacity:0;
  box-shadow:0 32px 80px rgba(10,28,20,.32),0 2px 8px rgba(10,28,20,.12);
}
.nl-backdrop.open .nl-modal{transform:translateY(0) scale(1);opacity:1;}
.nl-close{
  position:absolute;top:18px;right:18px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  border:none;background:rgba(24,48,37,.07);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--forest);transition:background .2s,transform .15s;
}
.nl-close:hover{background:rgba(24,48,37,.14);transform:rotate(90deg);}
/* MailerLite embed integration */
#mlb2-41360960.ml-form-embedContainer{margin:0!important;position:relative;z-index:1;display:block;width:100%!important;}
#mlb2-41360960.ml-form-embedContainer .ml-form-embedWrapper,
#mlb2-41360960.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
  background:transparent!important;border-radius:0!important;
  box-shadow:none!important;width:100%!important;max-width:100%!important;display:block!important;
}
#mlb2-41360960 .ml-form-embedHeader{display:none!important;}
#mlb2-41360960 .ml-form-embedBody,
#mlb2-41360960 .ml-form-successBody{padding:0!important;}
#mlb2-41360960 .ml-form-embedContent h4{
  color:var(--forest)!important;font-weight:300!important;
  font-size:clamp(24px,2.2vw,32px)!important;
  line-height:1.1!important;letter-spacing:-.022em!important;
}
#mlb2-41360960 .ml-form-embedSubmit button.primary{
  border-radius:var(--radius-pill)!important;
  font-size:15px!important;padding:14px!important;
}

/* ============================================================
   GLOBAL RESPONSIVE SAFETY
   Mobile-first fixes that apply to every page on the site.
   Layered below page-specific media queries.
   ============================================================ */

/* Prevent any element from causing horizontal page scroll */
html,body{overflow-x:hidden;}
img,svg,video,iframe{max-width:100%;height:auto;}
iframe{display:block;}

/* ---- Tablet (≤768px) ---- */
@media (max-width:768px){
  :root{
    --container:100%;
  }
  .container{padding:0 24px;}
  /* Common section padding compaction */
  section{}
  /* Buttons that share a row should be allowed to wrap */
  .hero-actions,
  .cta-row,
  .actions,
  .btn-row{flex-wrap:wrap;}
  /* Eyebrow text shouldn't push layouts wide */
  .eyebrow{white-space:normal;text-align:left;}
}

/* ---- Phone (≤560px) ---- */
@media (max-width:560px){
  .container{padding:0 20px;}
  /* Buttons full-width feels nicer on phones */
  .hero-actions .btn,
  .free-cta .btn,
  .feat-link .btn,
  .actions .btn{
    flex:1 1 auto;justify-content:center;
  }
  .hero-actions .btn-link,
  .actions .btn-link{flex:0 0 auto;}
  /* Drop big section padding (still page-specific overrides win) */
  .hero{padding-top:96px;}
  /* Display heading min/max — keep them readable but not absurd */
  .display-xl{font-size:clamp(40px,11vw,56px);}
  .display-lg{font-size:clamp(36px,9.5vw,52px);}
  .display-md{font-size:clamp(28px,7.4vw,40px);line-height:1.18;}
  .display-sm{font-size:clamp(24px,6.4vw,34px);line-height:1.22;}
  /* Pillar/quote elements */
  blockquote, .pillar-quote q, .problem-quote q, .feat-quote q{
    font-size:clamp(20px,5.5vw,26px);line-height:1.3;
  }
  /* Forms — full-width inputs on phones */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  select,
  textarea{
    width:100%;max-width:100%;
  }
  /* Tables become scrollable rather than blowing out layout */
  table{display:block;overflow-x:auto;max-width:100%;}
  /* Reduce excessive footer padding on phones */
  .footer-top{padding:48px 0 32px;}
}

/* ---- Small phone (≤400px) ---- */
@media (max-width:400px){
  .container{padding:0 16px;}
  .btn{padding:12px 20px;font-size:14px;}
  .btn.lg{padding:15px 24px;font-size:15px;}
  /* Header brand stays readable */
  .site-brand span{font-size:15px;}
}

/* ---- Mobile drawer (≤920px nav) — keep usable on small phones ---- */
@media (max-width:560px){
  .mobile-drawer-panel{max-width:88vw;}
}

/* ---- Nav caret/CTA in header at small sizes ---- */
@media (max-width:480px){
  .site-header{padding-left:16px;padding-right:16px;}
}