/* ============================================================
   site-wide enhancement layer — loaded after each page's own
   inline <style>, so these rules win on equal specificity.
   covers: nav rollup, floating cards/pills, graceful transitions,
   test-tube scroll cue.
   ============================================================ */

/* ── nav: about hover dropdown (contact, faq) ── */
.eyebrow .dot,.hero-eyebrow .dot{display:none!important}
.nav-has-dropdown{position:relative;display:inline-flex}
.nav-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease;z-index:50}
.nav-has-dropdown:hover .nav-dropdown,.nav-has-dropdown:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto}
.nav-dropdown-inner{min-width:140px;background:var(--panel,#322c25);border:1px solid var(--line-s,rgba(241,236,227,.16));border-radius:14px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.32)}
.nav-dropdown a{display:block;padding:9px 14px;font-size:11px;letter-spacing:.04em;color:var(--muted,#a9a094);border-radius:9px;text-transform:lowercase;transition:background .15s,color .15s}
.nav-dropdown a:hover{background:var(--panel-2,#3a332b);color:var(--ink,#f1ece3)}

/* ── nav: uniform width + rhs group across all pages ── */
.nav{max-width:1120px!important}
.nav:has(.nav-inner){
  position:sticky!important;
  top:12px!important;
  z-index:200!important;
  width:calc(100% - 24px)!important;
  max-width:1120px!important;
  height:auto!important;
  display:block!important;
  margin:12px auto 0!important;
  background:rgba(42,37,32,.9)!important;
  backdrop-filter:blur(16px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3)!important;
  border:1px solid var(--line-s,rgba(241,236,227,.16))!important;
  border-radius:100px!important;
  box-shadow:0 12px 40px rgba(0,0,0,.28)!important;
}
.nav:has(.nav-inner) .nav-inner{height:56px!important;padding:0 10px 0 22px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;width:auto!important}
.nav:has(.nav-inner) .nav-logo{height:40px!important;width:auto!important;display:block!important;margin:0!important;align-self:center!important;object-fit:contain!important}
.nav:has(.nav-inner) .nav-links{padding:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;margin-left:auto!important;width:auto!important;flex:0 0 auto!important}
.nav:has(.nav-inner) .nav-dot{display:none!important}
.nav-link.active{color:var(--ink,#f1ece3)!important;border-color:var(--line-s,rgba(241,236,227,.18))!important;background:rgba(198,122,74,.12)!important}
.nav:has(.nav-inner) .nav-dot-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.nav-rhs{display:flex!important;align-items:center;gap:8px}
.lang-select{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;color:var(--muted);background:transparent;border:1px solid var(--line-s);border-radius:999px;padding:7px 28px 7px 12px;cursor:pointer;transition:all .15s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a9a094' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:62px}
.lang-select:hover{color:var(--ink);border-color:var(--ink)}
.lang-select:focus{outline:2px solid var(--terra);outline-offset:2px}
.lang-select option{background:var(--panel);color:var(--ink)}

/* language control — a clear, compact pill rather than a navigation dot */
.nav-dot-wrap .lang-select.nav-dot-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  min-width:36px;
  width:36px;
  height:36px;
  padding:0 3px;
  border:0;
  border-radius:50%;
  background:var(--terra);
  background-image:none;
  color:var(--ink);
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  text-align-last:center;
  cursor:pointer;
  animation:none;
}
.nav-dot-wrap .lang-select.nav-dot-select:hover,
.nav-dot-wrap .lang-select.nav-dot-select:focus{
  background:#2a2520;
  color:#f1ece3;
}
.nav-dot-wrap .lang-select.nav-dot-select:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.nav-dot-wrap .lang-select.nav-dot-select option{background:#2a2520;color:#f1ece3}

.nav-links{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;margin-left:auto!important;width:auto!important;flex:0 0 auto!important}
.nav-links .nav-dot{display:none!important}
.nav-menu-pill{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 18px;
  border:1px solid var(--terra);
  border-radius:999px;
  background:var(--terra);
  color:var(--ink,#f1ece3);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:lowercase;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.nav-menu-pill:hover,
.nav-menu-pill:focus-visible,
.nav-menu-pill.open{
  background:var(--ink,#f1ece3);
  border-color:var(--ink,#f1ece3);
  color:var(--deep,#1f1b16);
  transform:translateY(-1px);
}
.nav-menu-pill:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.nav-hamburger{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  width:auto;
  padding:9px 16px 9px 14px;
  border:1px solid var(--terra);
  border-radius:999px;
  background:var(--terra);
  color:var(--deep);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:lowercase;
  transition:all .2s cubic-bezier(.22,1,.36,1);
}
.nav-hamburger:hover{background:var(--ink);border-color:var(--ink);color:var(--deep);transform:translateY(-1px)}
.nav-hamburger svg{width:16px;height:16px;display:block;transition:transform .3s cubic-bezier(.22,1,.36,1)}

/* ── section color rhythm: soft accent washes so the site doesn't read as one flat field ── */
section:is(
  #build-priorities,
  #priorities,
  #how-we-work,
  #what-this-is,
  #give,
  #contact
){
  background:
    radial-gradient(circle at 50% 0%,rgba(198,122,74,.15),transparent 42%),
    linear-gradient(180deg,rgba(241,236,227,.045),rgba(241,236,227,.012) 62%,transparent)!important;
}
section:is(
  #build-happysunday,
  #believe,
  #platform-happysunday,
  #who-bring,
  #fund-flow,
  #faq
){
  background:
    radial-gradient(circle at 18% 22%,rgba(184,145,42,.14),transparent 38%),
    linear-gradient(135deg,rgba(184,145,42,.07),rgba(241,236,227,.018) 54%,transparent)!important;
}
section:is(
  #build-softerbread,
  #where,
  #platform-softerbread,
  #where-facts,
  #tax-info
){
  background:
    radial-gradient(circle at 82% 18%,rgba(184,145,42,.16),transparent 38%),
    linear-gradient(225deg,rgba(184,145,42,.075),rgba(241,236,227,.018) 58%,transparent)!important;
}
section:is(
  #build-mmaadd,
  #experiments,
  #platform-mmaadd,
  #get-involved
){
  background:
    radial-gradient(circle at 12% 18%,rgba(198,122,74,.16),transparent 40%),
    linear-gradient(115deg,rgba(198,122,74,.08),rgba(241,236,227,.016) 56%,transparent)!important;
}
.nav-hamburger.open svg{transform:rotate(90deg)}
.nav-hamburger::after{
  content:'menu';
  order:-1;
}
.nav-drawer{
  display:none;
  position:absolute!important;
  top:66px!important;
  right:12px!important;
  background:var(--panel)!important;
  border:1px solid var(--line-s)!important;
  border-radius:16px!important;
  padding:8px!important;
  box-shadow:0 16px 48px rgba(0,0,0,.4)!important;
  min-width:200px!important;
  z-index:210!important;
  transform-origin:top right;
}
.nav-drawer.open{
  display:block!important;
  animation:drawerIn .22s cubic-bezier(.22,1,.36,1) both;
}
.nav-drawer a,.nav-drawer .nd-cta{
  display:block!important;
  padding:11px 16px!important;
  font-size:13px!important;
  color:var(--muted)!important;
  border-radius:10px!important;
  transition:background .15s,color .15s;
}
.nav-drawer a:hover{background:var(--panel-2)!important;color:var(--ink)!important}
.nav-drawer .nd-sep{height:1px;background:var(--line);margin:6px 8px}
.nav-drawer .nd-cta{color:var(--terra)!important}
@keyframes drawerIn{from{opacity:0;transform:scale(.94) translateY(-6px)}to{opacity:1;transform:none}}

/* ── generous whitespace pass: more air between eyebrow/headline/body/CTA ── */
.eyebrow{margin-bottom:18px!important}
.h1,.h2{margin-bottom:18px!important}
.body,.slide-body{margin-bottom:20px!important}
.btns,.actions{margin-top:32px!important}

/* ── width discipline: prevent content from stretching just because a row is wide ── */
html,body{max-width:100%;overflow-x:hidden}
.wrap,.container{max-width:1120px}
.narrow,.slide--text .wrap{max-width:760px!important}
.body,.slide-body,.hero-sub,.intro{max-width:62ch}
.h1,.h2,h1,h2,.slide-h2-sentence{max-width:18ch}

/* cards/tiles should read as cards, not full-width slabs, unless a page intentionally overrides */
.card,.give-card,.band,.plat,.lane-card,.trust-item,.impact-tile,.fact,.role,.doc-item,.field-card,.exp,
.gift-card,.tax-box{
  max-width:100%;
}
.form-card{width:min(640px,calc(100% - 40px))!important;max-width:640px!important;margin-left:auto!important;margin-right:auto!important}
.form-wrap{width:min(720px,calc(100% - 40px))!important;max-width:720px!important;margin-left:auto!important;margin-right:auto!important}
.card,.band,.plat,.lane-card,.trust-item,.impact-tile,.fact,.role,.doc-item,.field-card,.exp{
  overflow-wrap:anywhere;
}

/* compact controls: short inputs, selects, pill rows, and buttons do not need to fill long rows */
form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
form select{
  max-width:420px;
}
form textarea{
  max-width:620px;
}
form .field:not(.field-full):not(.full),
form .pf-field:not(.pf-full),
form .cf-field:not(.cf-full){
  max-width:320px;
}
form .choice-pills,
form .amounts,
form .freq-pills,
form .a-pills,
form .region-pills,
form .desig-grid{
  max-width:640px;
}
form .give-mode,
form .custom-wrap{
  width:max-content!important;
  max-width:100%;
}
form button[type="submit"],
form .btn[type="submit"]{
  width:auto!important;
  max-width:380px!important;
}
.progress-step{transition:opacity .22s ease,transform .22s ease}
.progress-step[hidden]{display:none!important}
form[data-progressive]{
  align-items:start;
  justify-content:center;
}
form[data-progressive] .actions,
form[data-progressive] .form-status,
form[data-progressive] .status{
  justify-self:start;
}
form[data-progressive] textarea{
  min-height:120px;
}
form[data-progressive] .field-full,
form[data-progressive] .full,
form[data-progressive] .pf-full,
form[data-progressive] .cf-full{
  width:100%;
  max-width:620px!important;
}
form[data-progressive] .field-full input,
form[data-progressive] .field-full select,
form[data-progressive] .full input,
form[data-progressive] .full select,
form[data-progressive] .pf-full input,
form[data-progressive] .pf-full select,
form[data-progressive] .cf-full input,
form[data-progressive] .cf-full select{
  max-width:420px!important;
}
form[data-progressive] .field-full textarea,
form[data-progressive] .full textarea,
form[data-progressive] .pf-full textarea,
form[data-progressive] .cf-full textarea{
  max-width:620px!important;
}
@media(max-width:700px){
  form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  form select,
  form textarea,
  form .field,
  form .pf-field,
  form .cf-field,
  form button[type="submit"],
  form .btn[type="submit"]{
    max-width:100%!important;
    width:100%!important;
  }
  form .choice-pills,
  form .amounts,
  form .freq-pills,
  form .a-pills,
  form .region-pills,
  form .desig-grid{
    max-width:100%;
  }
}

/* ── graceful base transitions ── */
a,button,.btn,.card,.give-card,.d-pill,.a-pill,.freq-pill,.r-pill,.chip,.ppill,
.mini-cta,.amount,.give-mode button,.band,.role,.trust-item,.impact-tile,
.fact,.step,.doc-item,.faq-item,.acc,.plat,.lane-card,.field-card,.cluster,
.exp,.geo-row,.move,.bring-col{
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1),
             border-color .3s ease,
             background .3s ease,
             color .3s ease;
}

/* ── graceful floating: cards + pills drift gently, staggered ── */
@keyframes gentleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.card,.give-card,.band,.plat,.lane-card,.trust-item,.impact-tile,.fact,
.role,.doc-item,.field-card,.exp{
  animation:gentleFloat 6.5s ease-in-out infinite;
}
.chip,.ppill,.mini-cta,.d-pill,.a-pill,.freq-pill,.r-pill,.amount,
.give-mode button{
  animation:gentleFloat 5.5s ease-in-out infinite;
}
/* stagger via nth-child so a row doesn't bob in lockstep */
.card:nth-child(2n),.give-card:nth-child(2n),.band:nth-child(2n),
.plat:nth-child(2n),.lane-card:nth-child(2n),.trust-item:nth-child(2n),
.impact-tile:nth-child(2n),.fact:nth-child(2n),.role:nth-child(2n),
.doc-item:nth-child(2n),.field-card:nth-child(2n),.exp:nth-child(2n),
.chip:nth-child(2n),.ppill:nth-child(2n),.mini-cta:nth-child(2n),
.d-pill:nth-child(2n),.a-pill:nth-child(2n),.freq-pill:nth-child(2n),
.r-pill:nth-child(2n),.amount:nth-child(2n),.give-mode button:nth-child(2n){
  animation-delay:.9s;
}
.card:nth-child(3n),.give-card:nth-child(3n),.band:nth-child(3n),
.plat:nth-child(3n),.lane-card:nth-child(3n),.trust-item:nth-child(3n),
.impact-tile:nth-child(3n),.fact:nth-child(3n),.role:nth-child(3n),
.doc-item:nth-child(3n),.field-card:nth-child(3n),.exp:nth-child(3n),
.chip:nth-child(3n),.ppill:nth-child(3n),.mini-cta:nth-child(3n),
.d-pill:nth-child(3n),.a-pill:nth-child(3n),.freq-pill:nth-child(3n),
.r-pill:nth-child(3n),.amount:nth-child(3n),.give-mode button:nth-child(3n){
  animation-delay:1.8s;
}
/* pause the float on hover/active/open states so interaction reads cleanly */
.card:hover,.give-card:hover,.give-card.active,.band:hover,.plat:hover,
.lane-card:hover,.role:hover,.doc-item:hover,.exp:hover,
.chip:hover,.ppill:hover,.ppill.active,.mini-cta:hover,
.d-pill:hover,.d-pill.on,.a-pill:hover,.a-pill.on,
.freq-pill:hover,.freq-pill.on,.r-pill:hover,.r-pill.on,
.amount:hover,.amount.active,.give-mode button:hover,.give-mode button.active{
  animation-play-state:paused;
}

@media(prefers-reduced-motion:reduce){
  .card,.give-card,.band,.plat,.lane-card,.trust-item,.impact-tile,.fact,
  .role,.doc-item,.field-card,.exp,.chip,.ppill,.mini-cta,.d-pill,.a-pill,
  .freq-pill,.r-pill,.amount,.give-mode button{
    animation:none!important;
  }
}

/* ── test-tube scroll cue ── */
.tt-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin:clamp(28px,5vw,52px) auto 0;
  cursor:pointer;
  background:none;
  border:none;
  padding:6px;
  color:var(--soft);
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.tt-cue:hover{color:var(--muted)}
.tt-cue svg{width:30px;height:44px;display:block;transform-origin:50% 88%;animation:ttFloat 3.2s ease-in-out infinite}
.tt-cue:hover svg{animation:ttFloat 3.2s ease-in-out infinite,ttNudge .5s ease-in-out infinite}
@keyframes ttFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes ttNudge{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(1px) rotate(3deg)}}
.tt-cue.shaking svg{animation:ttShake .68s cubic-bezier(.36,.07,.19,.97) both}
@keyframes ttShake{
  10%,90%{transform:translate(-1px,0) rotate(-3deg)}
  20%,80%{transform:translate(2px,-2px) rotate(10deg)}
  30%,50%,70%{transform:translate(-4px,-4px) rotate(-16deg)}
  40%,60%{transform:translate(4px,-4px) rotate(16deg)}
}
.tt-liquid{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tt-cue.shaking .tt-liquid{transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){
  .tt-cue svg,.tt-cue.shaking svg{animation:none}
}

/* ── canonical footer ── */
.footer{padding:clamp(72px,10.5vw,132px) 0 44px!important;background:#a85f38!important;color:#fff!important}
.footer .wrap,.footer .container,.footer .footer-inner{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px}
.footer-brand{font-family:'IBM Plex Mono',monospace;font-size:clamp(2rem,4vw,3rem);font-weight:300;letter-spacing:-.03em!important;color:#fff!important}
.footer-creed{font-family:'IBM Plex Mono',monospace;font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:#fff!important}
.footer-links{display:flex!important;gap:18px;flex-wrap:wrap;margin-top:34px!important;font-size:12px!important;color:#fff!important}
.footer-links a{color:#fff!important;transition:opacity .15s}.footer-links a:hover{color:#fff!important;opacity:.72}
.footer-meta{display:flex!important;gap:24px;flex-wrap:wrap;margin-top:22px!important;font-size:10.5px!important;letter-spacing:.06em;color:#fff!important}
.footer a{color:#fff!important}

/* ── shared floating shortcut pills ── */
.site-shortcuts{position:fixed;left:50%;bottom:20px;z-index:460;display:grid;grid-template-columns:repeat(4,max-content);gap:7px;width:max-content;max-width:calc(100% - 32px);transform:translateX(-50%);transition:opacity .2s ease,transform .2s ease}
.site-shortcuts a{display:flex;min-height:44px;align-items:center;justify-content:center;padding:10px 13px;border:1px solid rgba(224,207,185,.5);border-radius:999px;background:#b9aea1;box-shadow:0 10px 28px rgba(0,0,0,.26);color:#201811!important;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;line-height:1.18;text-align:center;text-decoration:none!important;transition:transform .18s ease,background .18s ease}
.site-shortcuts a:hover{background:#d6bd9e;transform:translateY(-2px)}
.site-shortcuts.is-hidden{opacity:0;transform:translate(-50%,16px);pointer-events:none}
@media(max-width:720px){.site-shortcuts{bottom:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:min(270px,calc(100% - 24px))}.site-shortcuts a{min-height:40px;padding:8px;font-size:9px}}

/* ── final balance pass: centered, intentionally narrow forms/cards ── */
body.give-page .tax-box{
  width:min(520px,calc(100% - 48px))!important;
  max-width:520px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body:has(#contact-form) main.wrap{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
body:has(#contact-form) .hero,
body:has(#contact-form) .form-card{
  margin-left:auto!important;
  margin-right:auto!important;
}
body:has(#contact-form) .hero{text-align:center!important}
body:has(#contact-form) .intro{margin-left:auto!important;margin-right:auto!important}

/* ── large section icons ── */
.sec-icon{
  width:clamp(40px,5vw,56px);
  height:clamp(40px,5vw,56px);
  color:var(--terra);
  margin-bottom:14px;
  opacity:.92;
  animation:gentleFloat 7s ease-in-out infinite;
}
.sec-icon svg{width:100%;height:100%;display:block}
@media(prefers-reduced-motion:reduce){.sec-icon{animation:none}}