/* ==========================================================================
   Santa's Toy Run
   Hand-authored replacement for Elementor's generated CSS.
   Brand tokens taken from the site's own Elementor globals so nothing drifts.
   ========================================================================== */

:root{
  /* Brand, straight from the Elementor kit */
  --red-deep:#780000;
  --red:#D30000;
  --green:#2B8637;
  --green-deep:#0A4011;
  --gold:#F0CE68;
  --gold-deep:#D8AD3D;
  --navy:#12006A;
  --ink:#0A0A0A;
  --white:#FFFFFF;

  /* Warm neutrals, biased toward the brand red so greys never read cold */
  --paper:#FFFFFF;
  --paper-2:#FAF6F5;
  --paper-3:#F2ECEA;
  --line:#E5DAD7;
  --body:#3A3033;
  --muted:#6E6165;

  --grad-red:linear-gradient(-90deg, var(--red-deep) 0%, var(--red) 100%);
  --grad-green:linear-gradient(90deg, var(--green) 0%, var(--green-deep) 100%);

  /* The site's real faces, self-hosted. Roboto is the workhorse (586 of
     Elementor's per-element rules ask for it), Ubuntu sets most section
     headings, Pacifico is the hero script. */
  --font-body:"Roboto","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"Roboto","Segoe UI",system-ui,sans-serif;
  --font-alt:"Ubuntu","Roboto",system-ui,sans-serif;
  --font-script:"Pacifico","Brush Script MT",cursive;

  --wrap:1200px;
  --gap:20px;
  --radius:14px;
  --radius-pill:30px;
  --shadow-1:0 1px 2px rgba(10,10,10,.04), 0 8px 24px -14px rgba(10,10,10,.22);
  --shadow-2:0 2px 6px rgba(10,10,10,.06), 0 18px 44px -20px rgba(10,10,10,.32);
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--red-deep); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--gold-deep); outline-offset:2px; border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red-deep);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}

h1,h2,h3,h4{font-family:var(--font-alt); font-weight:700; line-height:1.08; margin:0; color:var(--ink); text-wrap:balance}
h1{font-size:clamp(2.3rem,1.5rem + 3vw,3.6rem)}
h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem)}
h3{font-size:1.35rem}
h4{font-size:1.1rem}
p{margin:0}

/* -------------------------------------------------------------- layout */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}

/* Elementor's container model, ported.
   tools/layout.py reads Elementor's own --flex-direction / --width / --gap
   and re-emits them as short inline properties. These rules consume them.
   The defaults matter: an Elementor container is COLUMN unless told
   otherwise, and a child sizes itself with --w. Get that backwards and
   every two-column row on the site collapses into a stack. */
/* Custom properties inherit, and that is a trap here: the hero band sets
   --mh:750px inline and every descendant group would read it through
   var(--mh,auto), inflating the whole tree (measured: card 750px tall).
   So each container re-declares the layout vars as `initial`, which makes
   var() take its fallback; an element's OWN inline style still wins over
   this rule, so declared values apply and inherited ones do not. */
.band,.group,.w{
  --d:initial; --fd:initial; --jc:initial; --ai:initial; --as:initial;
  --g:initial; --w:initial; --cw:initial; --mh:initial; --ta:initial;
  --gtc:initial; --gtr:initial; --gaf:initial;
  --mt:initial; --mr:initial; --mb:initial; --ml:initial;
  --pt:initial; --pr:initial; --pb:initial; --pl:initial;
  /* Card surfaces must not inherit either: a nested wrapper inside an org
     card was re-painting the parent's white fill, border and shadow around
     its logo. Each card consumes only its own inline values. */
  --cbg:initial; --cbgi:initial; --cbw:initial; --cbc:initial;
  --cbs:initial; --cbr:initial; --cp:initial; --csh:initial;
}

.band,.group{
  display:var(--d,flex);
  flex-direction:var(--fd,column);
  flex-wrap:var(--fw,nowrap);
  justify-content:var(--jc,flex-start);
  align-items:var(--ai,stretch);
  gap:var(--g,var(--gap));
  min-height:var(--mh,auto);
  text-align:var(--ta,inherit);
  margin:var(--mt,0) var(--mr,0) var(--mb,0) var(--ml,0);
  padding:var(--pt,10px) var(--pr,10px) var(--pb,10px) var(--pl,10px);
}
/* Elementor also offers grid containers; the homepage card row is one. */
.band[style*="--d:grid"],.group[style*="--d:grid"]{
  grid-template-columns:var(--gtc,1fr);
  grid-auto-flow:var(--gaf,row);
  align-items:var(--ai,stretch);
}
/* A child's own size, set by Elementor on the child itself.
   In a column container children are full width. In a row they share the
   space equally unless Elementor gave them a --w, in which case that
   becomes the flex basis. Do not add a competing `width` rule further down
   the sheet: same specificity, later wins, and the columns collapse. */
.band > *,.group > *{
  width:100%;
  align-self:var(--as,auto);
  min-width:0;
}
[style*="--fd:row"] > .group{flex:var(--w,1 1 0); width:auto}
/* Widgets in a row keep their content width (the live icon-box hugs at
   ~164px and never crushes to one word per line); images do the shrinking
   because their natural width is huge and meaningless. */
[style*="--fd:row"] > *:not(.group){flex:var(--w,0 0 auto); width:auto; max-width:100%; min-width:0}
[style*="--fd:row"] > .fig,
[style*="--fd:row"] > .w:has(> .fig){flex:0 1 auto; min-width:0}
[style*="--d:grid"] > *{width:auto}
/* An element Elementor aligned to one side hugs its content rather than
   filling the column. The eyebrow pill is the obvious case. */
[style*="--as:flex-start"],[style*="--as:center"],[style*="--as:flex-end"]{width:auto}

/* A band is a page section: vertical rhythm plus a boxed content width.
   Elementor wrapped boxed sections in an inner div; that wrapper is gone,
   so the band centres its own content with padding instead. Capping each
   child individually would break a two-column row. */
.band{position:relative}
.band.is-boxed{padding-inline:max(20px, (100% - var(--cw,var(--wrap))) / 2)}
.band.is-full{padding-inline:0}

/* A group is a nested container: no page padding, no width cap of its own. */
.group > *{padding-inline:0}

/* Rows wrap on small screens, the way Elementor's --flex-wrap-mobile does. */
@media (max-width:900px){
  .group[style*="--fd:row"]{flex-wrap:wrap}
  .group[style*="--fd:row"] > *{flex-basis:auto; width:100%}
  .band[style*="--d:grid"],.group[style*="--d:grid"]{grid-template-columns:1fr}
}
@media (min-width:901px) and (max-width:1100px){
  .band[style*="--gtc:repeat(3"],.group[style*="--gtc:repeat(3"]{grid-template-columns:repeat(2,1fr)}
}

.band > h1,.band > h2,.band > .eyebrow{margin-bottom:.2em}

/* ------------------------------------------------------------ eyebrow */
/* The red gradient pill the site uses above almost every heading. */
.eyebrow{
  display:inline-block; width:auto;
  font-family:var(--font-display); font-size:.82rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:#fff;
  background-image:var(--grad-red);
  padding:7px 20px; border-radius:var(--radius-pill);
  box-shadow:0 0 10px rgba(0,0,0,.22);
}
.eyebrow a{color:#fff}
.band > .eyebrow{margin-inline:auto; display:table}

/* -------------------------------------------------------------- prose */
.prose{max-width:70ch}
.prose > * + *{margin-top:1em}
.prose p{margin:0}
.prose h2,.prose h3,.prose h4{margin-top:1.4em}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0; padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--red)}
.prose strong{color:inherit}
.prose img{border-radius:var(--radius); margin-block:1em}
.band > .prose{margin-inline:auto}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:.04em; text-transform:uppercase; text-align:center;
  padding:13px 28px; border-radius:var(--radius-pill); border:0;
  background-image:var(--grad-red); color:#fff; cursor:pointer;
  box-shadow:0 0 10px rgba(0,0,0,.2);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{text-decoration:none; filter:brightness(1.08); transform:translateY(-1px); box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-gold{background-image:none; background:var(--gold); color:var(--ink)}
.btn-ghost{background-image:none; background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-navy{background-image:none; background:var(--navy); color:#fff}

/* ----------------------------------------------------------- icon box */
.icon-box{
  display:flex; flex-direction:column; gap:10px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px;
  box-shadow:var(--shadow-1); height:100%;
}
a.icon-box{color:inherit}
a.icon-box:hover{text-decoration:none; border-color:var(--red); box-shadow:var(--shadow-2)}
.ib-icon{display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center;
  border-radius:12px; background:var(--paper-3); color:var(--red-deep); flex:none}
.ib-icon svg{width:24px;height:24px}
.ib-title{font-size:1.2rem}
.ib-text{color:var(--muted); font-size:.97rem}
.ib-text p{margin:0}
.ib-text p + p{margin-top:.6em}

/* Icon box sitting directly on a dark band */
.is-dark .icon-box{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
.is-dark .ib-title{color:#fff}
.is-dark .ib-text{color:rgba(255,255,255,.82)}
.is-dark .ib-icon{background:rgba(255,255,255,.12); color:var(--gold)}

/* ---------------------------------------------------------- icon list */
.icon-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.icon-list li{display:flex; gap:12px; align-items:flex-start}
.icon-list svg{width:20px;height:20px;flex:none;color:var(--green);margin-top:.25em}
.std-icon{display:inline-flex; color:var(--ic-c,var(--red-deep)); font-size:var(--ic-fs,32px)}
.std-icon svg{width:1em; height:1em}
.std-icon.view-stacked{background:var(--ic-bg,var(--red-deep)); color:var(--ic-c,#fff);
  padding:var(--ic-p,15px); border-radius:var(--ic-br,15px)}
.ic{width:1em;height:1em}

/* --------------------------------------------------------------- stat */
.stat{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:8px 12px}
.stat-num{font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);
  line-height:1; color:var(--red-deep); font-variant-numeric:tabular-nums}
.stat-label{font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500}
.is-dark .stat-num{color:var(--gold)}
.is-dark .stat-label{color:rgba(255,255,255,.8)}

/* ------------------------------------------------------------- figure */
.fig{margin:0}
.fig img{border-radius:var(--radius); width:100%}
.fig figcaption{font-size:.88rem; color:var(--muted); margin-top:.6em; text-align:center}

.rule{border:0; border-top:1px solid var(--line); margin-block:8px; width:100%}

/* ---------------------------------------------------------------- cta */
.cta{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); height:100%}
.cta-media img{width:100%; aspect-ratio:16/9; object-fit:cover}
.cta-body{padding:22px 24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.cta-title{font-size:1.25rem}
.cta-text{color:var(--muted); font-size:.97rem}

/* ------------------------------------------------------------- images */
/* The one image box on the site sits in a card row beside three icon-box
   cards. Left at its natural 216px the host logo ran the whole row 150px
   taller than its content needed, so cap it to about the height of the
   tallest neighbour and centre it the way an icon chip sits. */
.image-box{display:flex; flex-direction:column; gap:12px}
.ibx-img{display:flex; justify-content:center}
.ibx-img img{border-radius:var(--radius); width:auto; max-width:var(--ibx-w,130px); height:auto}
.ibx-text{color:var(--muted)}

/* Elementor's gallery: three across on desktop, two on tablet, one on
   phones, 3:2 tiles, its own gap. Values from the widget's own settings. */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.gallery .gal-item{display:block; border-radius:var(--radius); overflow:hidden;
  background:var(--paper-3); line-height:0}
.gallery .gal-item img{width:100%; height:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:0; transition:transform .35s ease}
.gallery .gal-item:hover img{transform:scale(1.06)}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr); gap:10px}}
@media (max-width:620px){.gallery{grid-template-columns:1fr}}
.gal-item{display:block; border-radius:var(--radius); overflow:hidden}
.gal-item img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .3s ease}
.gal-item:hover img{transform:scale(1.04)}

.carousel{list-style:none; margin:0; padding:0 0 12px; display:flex; gap:var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin}
.carousel-item{flex:0 0 min(78vw,420px); scroll-snap-align:center}
.carousel-item img{width:100%; border-radius:var(--radius)}

/* ---------------------------------------------------------- countdown */
.countdown{display:flex; flex-wrap:wrap; gap:11px; justify-content:center}
.cd-cell{min-width:112px; padding:26px 16px; border-radius:20px; text-align:center;
  background:rgba(148,91,93,.29); border:0}
.cd-num{display:block; font-family:var(--font-display); font-weight:700; font-size:2.2rem;
  line-height:1; color:var(--red-deep); font-variant-numeric:tabular-nums}
.cd-label{display:block; margin-top:6px; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}

/* ---------------------------------------------------------- accordion */
.accordion{display:flex; flex-direction:column; gap:10px; width:100%}
.acc-item{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); overflow:hidden}
.acc-item summary{cursor:pointer; list-style:none; padding:16px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink)}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary::after{content:""; width:10px; height:10px; flex:none; border-right:2px solid var(--red);
  border-bottom:2px solid var(--red); transform:rotate(45deg); transition:transform .2s ease; margin-top:-4px}
.acc-item[open] summary::after{transform:rotate(-135deg); margin-top:4px}
.acc-item summary:hover{background:var(--paper-2)}
.acc-body{padding:0 22px 20px; color:var(--muted)}
.acc-body > * + *{margin-top:.8em}

/* ------------------------------------------------------- youtube facade */
.yt-facade{position:relative; border-radius:var(--radius); overflow:hidden; background:#000; aspect-ratio:16/9; width:100%}
.yt-facade iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt-play{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer}
.yt-play img{width:100%; height:100%; object-fit:cover; opacity:.86}
.yt-btn{position:absolute; left:50%; top:50%; width:74px; height:52px; transform:translate(-50%,-50%);
  border-radius:12px; background:rgba(190,0,0,.92); transition:background .2s ease}
.yt-btn::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-42%,-50%);
  border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff}
.yt-play:hover .yt-btn{background:#c00}

/* ------------------------------------------------------------- header */
.site-head{position:sticky; top:0; z-index:50; background:var(--paper); color:var(--ink);
  box-shadow:0 1px 0 var(--line), 0 4px 18px rgba(10,10,10,.06)}
.head-inner{display:flex; align-items:center; gap:18px; padding-block:4px}
.brand{flex:none}
.brand img{width:168px; height:auto}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:22px}
.nav-list{list-style:none; display:flex; align-items:center; gap:4px; margin:0; padding:0}
.nav-list > li{position:relative}
.nav-list > li > a{display:block; padding:13px 12px; line-height:1.25; color:var(--ink); font-family:var(--font-body);
  font-weight:600; font-size:16px; border-radius:8px}
/* Caret on items that open a dropdown, like the live menu. */
.has-sub > a::after{content:""; display:inline-block; width:7px; height:7px; margin-left:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.nav-list > li > a:hover{background:var(--paper-3); color:var(--red-deep); text-decoration:none}
.has-sub > .sub-toggle{display:none}
.sub-list{list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0; min-width:250px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-2); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s}
.has-sub:hover > .sub-list,.has-sub:focus-within > .sub-list{opacity:1; visibility:visible; transform:translateY(0)}
.sub-list a{display:block; padding:9px 12px; color:var(--ink); border-radius:8px; font-size:.95rem}
.sub-list a:hover{background:var(--paper-3); color:var(--red-deep); text-decoration:none}
.nav-cta{display:flex; gap:8px; flex:none}
.nav-cta .btn{padding:10px 18px; font-size:.88rem}
.nav-toggle{display:none; margin-left:auto; width:44px; height:44px; border:0; border-radius:10px;
  background:var(--paper-3); cursor:pointer; position:relative}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{position:absolute; left:50%; width:20px;
  height:2px; background:var(--ink); transform:translateX(-50%); transition:transform .2s ease, opacity .2s ease}
.nav-toggle-bars{top:50%; margin-top:-1px}
.nav-toggle-bars::before{content:""; top:-6px; left:50%}
.nav-toggle-bars::after{content:""; top:6px; left:50%}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateX(-50%) translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateX(-50%) translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------------- footer */
.site-foot{
  /* Live: the presents tile (1200x673, horizontally seamless) under a deep
     green wash, drifting one full tile every 25s ("slideloop", carried over
     verbatim). The gradient layer holds still; only the tile moves. Paused
     until the footer is actually on screen, which live never bothered with. */
  background:
    linear-gradient(rgba(11,32,21,.93), rgba(11,32,21,.93)),
    url('/wp-content/uploads/2020/12/background-presents.webp') left top repeat,
    #0B2015;
  color:rgba(255,255,255,.85); padding-top:52px;
  animation:slideloop 25s linear infinite;
  animation-play-state:paused;
}
.site-foot.is-drifting{animation-play-state:running}
@keyframes slideloop{to{background-position:0 0, 1200px 0}}
.foot-top{display:grid; grid-template-columns:minmax(240px,1fr) 2fr; gap:40px; padding-bottom:40px}
.foot-brand img{width:150px; border-radius:8px; background:#fff; padding:5px}
.foot-brand p{margin-top:16px; font-size:.95rem; max-width:38ch}
.foot-social{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  margin-top:16px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff}
.foot-social:hover{background:var(--red)}
.foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:28px}
.foot-col h2{font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.foot-col a{color:rgba(255,255,255,.78); font-size:.95rem}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  border-top:1px solid rgba(255,255,255,.14); padding-block:20px; font-size:.85rem}
.foot-bottom a{color:rgba(255,255,255,.78)}
.foot-bottom a:hover{color:#fff}

/* -------------------------------------------------------------- forms */
.str-form{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-1); max-width:720px; margin-inline:auto; width:100%}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field > label{font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--ink)}
.field .req{color:var(--red)}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number],.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%;
}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red); background:var(--paper)}
/* Short fields pair up so a form is not one long column. */
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media (max-width:620px){.field-grid{grid-template-columns:1fr}}

/* A form already sitting in a card does not draw a second box inside it.
   The contact page nests its form a couple of levels down, the donate and
   ride-along pages put it straight in the card. */
.page-contact .str-form,
.group--card > .str-form{background:none; border:0; box-shadow:none; padding:0; max-width:none}
/* And a card holding nothing but a form does not need the whole column. */
.group--card.form-card{max-width:720px; margin-inline:auto; width:100%}

.field-hint{font-size:.87rem; color:var(--muted)}
.field-error{font-size:.87rem; color:var(--red); font-weight:600}
/* Choice groups are buttons, not rings of radio dots. Values come from
   STR-Volunteer-Form.css, the stylesheet the live sign-up form runs on.
   The real input stays in the label so the whole button is the hit target
   and assistive tech still meets an ordinary radio or checkbox group. */
.choices{display:flex; flex-wrap:wrap; gap:.55rem}
.choice{position:relative; display:inline-block}
/* The input covers its own button rather than collapsing to nothing, so the
   whole pill is the hit target. Same shape .amounts already uses. */
.choice > input{position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer; appearance:none}
.choice > label{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; cursor:pointer;
  border:1.5px solid var(--line); background:var(--paper); border-radius:11px;
  padding:.62rem 1rem; font-size:.96rem; font-weight:600; color:var(--ink);
  transition:border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.choice > input:hover + label{border-color:var(--red)}
.choice > input:checked + label{
  border-color:var(--red); background:#FFF2F4; color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red);
}
.choice > input:focus-visible + label{outline:3px solid var(--gold); outline-offset:2px}

/* A single opt-in keeps a real checkbox: it is a statement to agree with,
   not one option among several. */
.consent .consent-line{display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem;
  font-weight:400; color:var(--body); cursor:pointer}
.consent .consent-line input{width:18px; height:18px; margin:.15rem 0 0; accent-color:var(--red); flex:none}

/* First and last name share a row, each with its own small caption. */
.name-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.name-pair > span{display:flex; flex-direction:column; gap:5px}
.name-pair label{font-size:.85rem; color:var(--muted); font-weight:400; order:2}
.field > .field-label{font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--ink)}
@media (max-width:520px){.name-pair{grid-template-columns:1fr}}

/* A conditional field is only hidden once the script has taken charge of it;
   with no JavaScript it stays on the page and stays optional. */
.field[data-show-when][hidden]{display:none}
.amounts{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px}
.amounts label{position:relative; display:block}
.amounts input{position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0; cursor:pointer}
.amounts span{display:block; text-align:center; padding:14px 8px; border-radius:12px;
  border:2px solid var(--line); background:var(--paper-2); font-family:var(--font-display);
  font-weight:700; font-size:1.25rem; color:var(--ink); cursor:pointer; transition:.15s ease}
.amounts input:checked + span{border-color:var(--red); background:#fff; color:var(--red-deep);
  box-shadow:0 0 0 3px rgba(211,0,0,.12)}
.amounts input:focus-visible + span{outline:3px solid var(--gold-deep); outline-offset:2px}
.form-total{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:16px 0; border-top:1px solid var(--line); margin-top:6px}
.form-total .lbl{font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink)}
.form-total .amt{font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--green);
  font-variant-numeric:tabular-nums}
.form-note{font-size:.86rem; color:var(--muted); text-align:center; margin-top:14px}
.form-submit{width:100%; margin-top:6px}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

/* ------------------------------------------------------------ utility */
.is-dark{background:var(--ink); color:rgba(255,255,255,.85)}
.is-dark h1,.is-dark h2,.is-dark h3,.is-dark h4{color:#fff}
.is-dark .prose{color:rgba(255,255,255,.85)}
.is-dark a{color:var(--gold)}

/* --------------------------------------------------------- responsive */
@media (max-width:1080px){
  .nav-list > li > a{padding:10px 9px; font-size:.95rem}
  .nav-cta .btn{padding:9px 14px; font-size:.82rem}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(88vw,360px);
    background:var(--ink); flex-direction:column; align-items:stretch; gap:0;
    padding:88px 20px 28px; overflow-y:auto; margin-left:0;
    transform:translateX(100%); transition:transform .25s ease;
    box-shadow:-8px 0 40px rgba(0,0,0,.45);
  }
  .site-nav.is-open{transform:translateX(0)}
  .nav-list{flex-direction:column; align-items:stretch; gap:2px}
  .nav-list > li > a{padding:13px 14px; font-size:1.05rem}
  .has-sub{display:grid; grid-template-columns:1fr auto}
  .has-sub > .sub-toggle{display:block; width:46px; border:0; background:none; cursor:pointer; position:relative}
  .has-sub > .sub-toggle::after{content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
    border-right:2px solid #fff; border-bottom:2px solid #fff; transform:translate(-50%,-70%) rotate(45deg);
    transition:transform .2s ease}
  .has-sub > .sub-toggle[aria-expanded="true"]::after{transform:translate(-50%,-30%) rotate(-135deg)}
  .sub-list{position:static; opacity:1; visibility:visible; transform:none; grid-column:1/-1;
    border:0; box-shadow:none; background:rgba(255,255,255,.05); border-radius:10px;
    display:none; margin:2px 0 6px}
  .has-sub.is-open > .sub-list{display:block}
  .nav-cta{flex-direction:column; margin-top:20px}
  .nav-cta .btn{width:100%; padding:13px 18px; font-size:.95rem}
  .foot-top{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .band{padding-block:36px}
  .icon-box{padding:22px 20px}
  .group{gap:14px}
  .group > .group{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}

@media print{
  .site-head,.site-foot,.nav-toggle,.skip{display:none}
  body{font-size:12pt}
}

/* ----------------------------------------------------- map + sitemap */
.map-embed{width:100%}
.map-embed iframe{width:100%; aspect-ratio:16/9; min-height:320px; border:0;
  border-radius:var(--radius); box-shadow:var(--shadow-1)}
.sitemap-list{columns:2; column-gap:40px; max-width:640px}
.sitemap-list li{break-inside:avoid; padding:6px 0; border-bottom:1px solid var(--line)}
.sitemap-list svg{display:none}
@media (max-width:560px){.sitemap-list{columns:1}}

/* ------------------------------------------------------ form details */
fieldset.field{border:0; margin:0 0 18px; padding:0; min-width:0}
fieldset.field legend{font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:var(--ink); padding:0; margin-bottom:7px}
details.field{border:1px solid var(--line); border-radius:10px; padding:0; background:var(--paper-2)}
details.field > summary{cursor:pointer; padding:12px 14px; font-family:var(--font-display);
  font-weight:600; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center}
details.field > summary::-webkit-details-marker{display:none}
details.field > summary::after{content:"+"; font-size:1.3rem; line-height:1; color:var(--red)}
details.field[open] > summary::after{content:"\2212"}
details.field > .field{padding-inline:14px}
details.field > .field:last-child{padding-bottom:14px}
.field[hidden]{display:none}

/* ==========================================================================
   Section treatments
   Elementor painted each top-level container; tools/layout.py classifies
   what it painted into one of four kinds and hands the real values over as
   custom properties. Everything about how a kind looks is decided here.
   ========================================================================== */

.band--hero,
.band--gradient,
.band--dark{color:rgba(255,255,255,.88)}
.band--hero h1,.band--hero h2,.band--hero h3,.band--hero h4,
.band--gradient h1,.band--gradient h2,.band--gradient h3,.band--gradient h4,
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{color:#fff}
.band--hero .prose,.band--gradient .prose,.band--dark .prose{color:rgba(255,255,255,.88)}
.band--hero .prose a,.band--gradient .prose a,.band--dark .prose a{color:var(--gold)}
.band--hero .stat-num,.band--gradient .stat-num,.band--dark .stat-num{color:var(--gold)}
.band--hero .stat-label,.band--gradient .stat-label,.band--dark .stat-label{color:rgba(255,255,255,.8)}
.band--hero .icon-list svg,.band--gradient .icon-list svg,.band--dark .icon-list svg{color:var(--gold)}

/* Hero: the photo, a legibility scrim, then Elementor's own colour wash. */
.band--hero{
  position:relative; isolation:isolate;
  padding-block:clamp(56px,7vw,104px);
  background-image:var(--band-image);
  background-position:var(--band-pos,center center);
  background-size:cover;
  background-repeat:no-repeat;
}
.band--hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--band-overlay, linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.78)));
  opacity:var(--band-overlay-opacity,.86);
}
/* A scrim under the wash so text stays legible whatever the photo does. */
.band--hero::after{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(10,10,10,.35), rgba(10,10,10,.55));
}

.band--gradient{background-image:var(--band-image); padding-block:clamp(44px,5.5vw,80px)}
.band--dark{background:var(--band-bg,var(--ink)); padding-block:clamp(44px,5.5vw,80px)}
/* A card painting its own dark fill needs light text. CSS cannot read the
   luminance of a captured gradient, so the class is set on the card. Unlike
   .is-dark this imposes no background of its own: the captured fill stays. */
.group--card.on-dark{color:rgba(255,255,255,.88)}
.group--card.on-dark h1,.group--card.on-dark h2,
.group--card.on-dark h3,.group--card.on-dark h4{color:#fff}
.group--card.on-dark .prose,.group--card.on-dark .prose p,
.group--card.on-dark .ib-text{color:rgba(255,255,255,.88)}
.group--card.on-dark a{color:var(--gold)}

/* A tint can carry an overlay gradient too. The contact form's section is a
   grey base with a fade to white at the bottom; classifying that as a dark
   gradient band turned its headings white on a light ground. */
.band--tint{background-color:var(--band-bg,var(--paper-2)); background-image:var(--band-image,none);
  padding-block:clamp(44px,5.5vw,80px)}

/* Elementor's alignment for the section carries over. */
.band--hero,.band--gradient,.band--dark,.band--tint{text-align:var(--band-align,inherit)}
.band[style*="--band-align:center"] .prose,
.band[style*="--band-align:center"] .icon-list{margin-inline:auto}
.band[style*="--band-align:center"] .icon-list li{justify-content:center}
.band[style*="--band-align:center"] .group{justify-content:center}

/* Text on dark sections stays legible; surfaces come only from captured
   Elementor chrome, never from the section kind (that painted a second
   pill behind the hero eyebrow). */
.band--hero .ib-title,.band--gradient .ib-title,.band--dark .ib-title{color:var(--bt-c,#fff)}
.band--hero .ib-text,.band--gradient .ib-text,.band--dark .ib-text{color:var(--bd-c,rgba(255,255,255,.82))}
.band--hero .cd-num,.band--gradient .cd-num,.band--dark .cd-num{color:var(--gold)}
.band--hero .cd-label,.band--gradient .cd-label,.band--dark .cd-label{color:rgba(255,255,255,.85)}
.band--hero .btn-ghost,.band--gradient .btn-ghost,.band--dark .btn-ghost{color:#fff}
.band--hero .rule,.band--gradient .rule,.band--dark .rule{border-top-color:rgba(255,255,255,.22)}

/* An eyebrow on a dark section reads better as gold than as another red pill. */
.band--hero > .eyebrow,.band--gradient > .eyebrow,.band--dark > .eyebrow{
  background-image:none; background:var(--gold); color:var(--ink);
}

/* --------------------------------------------------------------- images */
/* Elementor sized images per element. Without those rules a decorative
   image will happily fill the whole band, so cap them and let a figure
   sitting alone in a section behave like art rather than a billboard. */
.fig{max-width:100%}

/* A card with only an icon and a title is a label, not a panel: let it size
   to its content instead of stretching to match a tall sibling. */
.icon-box:not(:has(.ib-text)){align-self:flex-start; height:auto}

/* ------------------------------------------------------------- cards */
/* On this site the card is the container, not the widget inside it. The
   values come straight from Elementor: a coloured top stripe, a radius,
   padding and a tinted fill. */
.group--card{
  background:var(--cbg,transparent);
  background-image:var(--cbgi,none);
  border-style:var(--cbs,none);
  border-width:var(--cbw,0);
  border-color:var(--cbc,transparent);
  border-radius:var(--cbr,0);
  padding:var(--cp,10px);
  box-shadow:var(--csh,none);
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Only real cards lift on hover; a pill-styled widget stays put. */
.group.group--card:hover{transform:translateY(-6px); box-shadow:var(--shadow-2)}

/* The icon-box widget is then just a stack: no surface of its own, or it
   would paint a second card inside the first. */
.icon-box{background:none; border:0; border-radius:0; padding:0; box-shadow:none; height:auto}
a.icon-box:hover{border:0; box-shadow:none}
.group--card .icon-box{gap:12px}

/* ==========================================================================
   Captured typography
   tools/layout.py reads each widget's real font stack, size, weight and
   colour off Elementor's rules and emits them as custom properties on a
   wrapper. These consume them, with the design tokens as fallbacks so an
   uncaptured widget still looks deliberate rather than unstyled.
   ========================================================================== */
.hd{
  font-family:var(--h-ff,var(--font-alt));
  font-weight:var(--h-fw,700);
  line-height:var(--h-lh,1.15);
  letter-spacing:var(--h-ls,normal);
  text-transform:var(--h-tt,none);
  color:var(--h-c,inherit);
}
h1.hd{font-size:var(--h-fs,clamp(34px,3vw + 20px,50px))}
h2.hd{font-size:var(--h-fs,clamp(30px,2vw + 18px,40px))}
h3.hd{font-size:var(--h-fs,1.35rem)}
h4.hd{font-size:var(--h-fs,1.1rem)}
h5.hd{font-size:var(--h-fs,20px); line-height:var(--h-lh,1.55)}
h6.hd{font-size:var(--h-fs,.9rem)}
/* Pacifico is a script face: it needs air that a condensed sans does not. */
.hd[style*="Pacifico"],[style*="--h-ff:'Pacifico'"] .hd{line-height:var(--h-lh,1.25)}

.ib-title{
  font-family:var(--bt-ff,var(--font-alt));
  font-size:var(--bt-fs,1.2rem);
  font-weight:var(--bt-fw,700);
  line-height:var(--bt-lh,1.25);
  letter-spacing:var(--bt-ls,normal);
  text-transform:var(--bt-tt,none);
  color:var(--bt-c,var(--ink));
}
.ib-text,.ib-text p{
  font-family:var(--bd-ff,var(--font-body));
  font-size:var(--bd-fs,.97rem);
  font-weight:var(--bd-fw,400);
  line-height:var(--bd-lh,1.6);
  font-style:var(--bd-fst,normal);
  color:var(--bd-c,var(--muted));
}
/* A heading inside the body text (the event schedule's "Gates Open" under
   its time) is squeezed between the title above and the copy below, so it
   gets a little air on both sides. Headings reset to margin:0 globally. */
.ib-text h4{margin:5px 0}
.btn{
  font-family:var(--b-ff,var(--font-body));
  font-size:var(--b-fs,1rem);
  font-weight:var(--b-fw,600);
  letter-spacing:var(--b-ls,.02em);
  text-transform:var(--b-tt,none);
}
.stat-num{
  font-family:var(--cn-ff,var(--font-alt));
  font-size:var(--cn-fs,clamp(2.2rem,1.4rem + 3vw,3.4rem));
  font-weight:var(--cn-fw,700);
  color:var(--cn-c,var(--red-deep));
}
.stat-label{
  font-family:var(--ct-ff,var(--font-body));
  font-size:var(--ct-fs,.9rem);
  font-weight:var(--ct-fw,500);
  text-transform:var(--ct-tt,none);
  letter-spacing:normal;
  color:var(--ct-c,var(--muted));
}
.cd-num{
  font-family:var(--cdn-ff,var(--font-alt));
  font-size:var(--cdn-fs,2.2rem);
  font-weight:var(--cdn-fw,700);
  color:var(--cdn-c,var(--red-deep));
}
.cd-label{
  font-family:var(--cdl-ff,"Roboto Slab",serif);
  font-size:var(--cdl-fs,12px);
  text-transform:var(--cdl-tt,none);
  letter-spacing:normal;
  color:var(--cdl-c,#fff);
}
.prose,.prose p{
  font-family:var(--te-ff,var(--font-body));
  font-size:var(--te-fs,1rem);
  font-weight:var(--te-fw,400);
  line-height:var(--te-lh,1.7);
  color:var(--te-c,inherit);
}
.icon-list li > span{
  font-family:var(--lt-ff,var(--font-body));
  font-size:var(--lt-fs,1rem);
  font-weight:var(--lt-fw,400);
  color:var(--lt-c,inherit);
}

/* Header CTAs, matching the live site's colour coding. */
.btn-green{background-image:none; background:var(--green); color:#fff}
.btn-red{background-image:none; background:#B81C35; color:#fff}
.nav-cta .btn{padding:10px 16px; font-size:.95rem; font-weight:600; line-height:1.15;
  text-transform:none; letter-spacing:0; box-shadow:none; border-radius:10px}
.nav-cta .btn .ic{width:17px; height:17px}
/* The mobile drawer stays dark for contrast against the page behind it. */
@media (max-width:900px){
  .site-nav{background:var(--ink)}
  .nav-list > li > a{color:#fff}
  .nav-list > li > a:hover{background:rgba(255,255,255,.12); color:#fff}
  .sub-list{background:rgba(255,255,255,.05); border:0}
  .sub-list a{color:#fff}
}

/* Icon boxes sit icon-beside-text or icon-above, per Elementor's own
   position class. Most of this site is icon-beside. */
/* Icon beside or above its content; title and text travel together in
   .ib-body so they can never drift apart (the Email Us card bug). */
.icon-box{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.icon-box > .ib-icon{align-self:flex-start}
[style*="--ta:center"] .icon-box{align-items:center}
[style*="--ta:center"] .icon-box > .ib-icon{align-self:center}
.icon-box .ib-body{align-items:inherit; text-align:inherit; width:100%}
.icon-box.is-inline{flex-direction:row; align-items:center; gap:13px}
.ib-body{display:flex; flex-direction:column; gap:3px; min-width:0}

/* Header nav must not wrap onto two lines. */
.nav-list > li > a{white-space:nowrap}
.nav-cta .btn{white-space:nowrap}

/* Image sizing, straight from Elementor's own img rule. */
.fig img{
  width:var(--img-w,auto);
  border-radius:var(--img-br,var(--radius));
  box-shadow:var(--img-sh,none);
  opacity:var(--img-op,1);
  max-height:none;
}
.band > .fig,.group > .fig{display:flex; justify-content:center}

/* Buttons and icon chips keep the fill Elementor gave them. */
.btn{
  background-image:var(--b-bgi,var(--grad-red));
  background-color:var(--b-bg,transparent);
  border-radius:var(--b-br,var(--radius-pill));
  color:var(--b-c,#fff);
  padding:var(--b-pad,13px 28px);
}
.btn[style*="--b-bg:"],[style*="--b-bg:"] .btn{background-image:none}
.ib-icon{background:var(--bi-bg,var(--paper-3)); color:var(--bi-c,var(--red-deep));
  border-radius:var(--bi-br,12px)}

/* The colour modifiers must beat the generic .btn fill above, which is
   declared later in the sheet and would otherwise repaint them red. */
.btn-gold,.btn-green,.btn-red,.btn-navy,.btn-ghost{background-image:none}
.btn-gold{background-color:var(--gold); color:var(--ink)}
.btn-green{background-color:var(--green); color:#fff}
.btn-red{background-color:#B81C35; color:#fff}
.btn-navy{background-color:var(--navy); color:#fff}
.btn-ghost{background-color:transparent}

/* Icon chips, in Elementor's three view modes. */
.ib-icon{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  font-size:var(--ic-fs,23px);
  color:var(--ic-c,var(--red-deep));
  background:none; border:0; border-radius:var(--ic-br,12px);
  width:auto; height:auto; padding:0;
}
.ib-icon svg{width:1em; height:1em}
.view-stacked > .ib-icon{
  background:var(--ic-bg,var(--red-deep));
  color:var(--ic-c,#fff);
  padding:.5em; border-radius:var(--ic-br,12px);
}
.view-framed > .ib-icon{
  border:var(--ic-bw,2px) solid var(--ic-bc,currentColor);
  padding:.45em; border-radius:var(--ic-br,12px);
}
.icon-box.is-inline{align-items:center}
.icon-box.is-inline:has(.ib-text){align-items:start}

/* A grid child stretches by default; the chip must hug its glyph. */
.ib-icon{justify-self:start}
.icon-box[style*="--ta:center"] > .ib-icon,
[style*="--ta:center"] .icon-box > .ib-icon{justify-self:center}

/* --------------------------------------------------------- button rows */
/* Elementor's own alignment classes, carried over: justify = full width. */
.btn-row{display:block; width:100%; text-align:inherit}
.btn-row.align-center{text-align:center}
.btn-row.align-right{text-align:right}
.btn-row.align-justify > .btn{display:flex; width:100%}

/* ------------------------------------------------- carousel slide count */
.carousel{gap:var(--sp,20px)}
.carousel-item{flex:0 0 calc((100% - (var(--n,1) - 1) * var(--sp,20px)) / var(--n,1))}
.carousel-item img{width:100%; height:auto; object-fit:contain; border-radius:0}
@media (max-width:900px){
  .carousel-item{flex-basis:calc((100% - var(--sp,20px)) / 2)}
}

/* ----------------------------------------------------- eyebrow variants */
/* Pills carry their own gradient sometimes (GET IN TOUCH is green). The
   captured values sit on the wrapper; custom properties inherit, so the
   eyebrow reads them with the red gradient as the fallback. The wrapper
   itself must then NOT paint, or the pill renders twice. */
.eyebrow{
  background-image:var(--cbgi,var(--grad-red));
  background-color:var(--cbg,transparent);
  border-radius:var(--cbr,var(--radius-pill));
  padding:var(--cp,7px 20px);
  color:var(--bt-c,#fff);
}
.w.group--card:has(> .eyebrow){
  background:none; border:0; box-shadow:none; padding:0; border-radius:0;
}

/* --------------------------------------------------- punch-list details */
/* Kit heading sizes: the live kit sets h1 50px / h2 40px. */
h1{font-size:clamp(34px, 3vw + 20px, 50px)}
h2{font-size:clamp(30px, 2vw + 18px, 40px)}

/* Inside a real card, nested pill wrappers add nothing: one translucent
   surface for the whole countdown card, plain text lines within. */
/* Only title-only pill wrappers lose their chrome inside a card (the
   countdown lines); a wrapper with real text keeps its captured surface,
   like the grey Join Our Mission quote box. */
.group--card .w.group--card:has(> .icon-box:not(:has(.ib-text))){
  background:none; border:0; box-shadow:none; padding:2px 0; border-radius:0}
/* The quote pattern, matched to live: a narrower centred box, large gold
   marks vertically centred at the left, italic text centred beside them. */
.w.group--card[style*="--bd-fst:italic"]:has(> .icon-box:not(:has(.ib-title)) .ib-text){max-width:720px; margin-inline:auto; width:100%}
.w.group--card[style*="--bd-fst:italic"] > .icon-box.is-inline:not(:has(.ib-title)){align-items:center; gap:22px}
.w.group--card[style*="--bd-fst:italic"] > .icon-box.is-inline:not(:has(.ib-title)) > .ib-icon{font-size:var(--ic-fs,46px)}
.w.group--card[style*="--bd-fst:italic"] > .icon-box.is-inline:not(:has(.ib-title)) > .ib-body{text-align:center; flex:1}

/* Elementor's default 10px container padding is already applied via vars;
   bands that captured nothing keep a sane floor so sections never touch. */
.band{padding-top:var(--pt,clamp(24px,3vw,48px)); padding-bottom:var(--pb,clamp(24px,3vw,48px))}

/* Every SVG in a button now declares its own fill in the markup: the
   extractor stamps fill="currentColor" on Elementor's arrows, and Lucide
   ships fill="none". A blanket .btn svg{fill:currentColor} beat the
   presentation attribute and solid-filled the header's outline icons. */

/* Who We Help: logos centred in their slides, no scrollbar, dot nav. */
.carousel{align-items:center; scrollbar-width:none; padding-bottom:0}
.carousel::-webkit-scrollbar{display:none}
.carousel-item{display:flex; align-items:center; justify-content:center; min-height:96px}
.carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:14px}
.carousel-dots button{width:9px; height:9px; border-radius:50%; border:0; padding:0;
  background:var(--line); cursor:pointer; transition:background .2s ease, transform .2s ease}
.carousel-dots button.is-on{background:var(--red); transform:scale(1.25)}
.carousel-dots button:focus-visible{outline:2px solid var(--gold-deep); outline-offset:2px}

/* Widget wrappers carry Elementor's alignment and margins too. */
.w{text-align:var(--ta,inherit); margin:var(--mt,0) var(--mr,0) var(--mb,0) var(--ml,0)}

/* Centered sections centre their prose column too, not just the text. */
.w[style*="--ta:center"] > .prose,
.band[style*="--ta:center"] .prose{margin-inline:auto}

/* Uncaptured icon colour on a dark band reads gold, never near-black. */
.band--hero .std-icon,.band--gradient .std-icon,.band--dark .std-icon{color:var(--ic-c,var(--gold))}

/* Rows must still stack on phones even though desktop never wraps. */
@media (max-width:900px){
  .band[style*="--fd:row"],.group[style*="--fd:row"]{flex-wrap:wrap}
}

/* The button that follows the logo strip sits centred on the live site. */
.carousel-dots + .w .btn-row,
.carousel + .w .btn-row{text-align:center}

/* --------------------------------------------------- hero card motion */
/* The gift floats on live: custom keyframes carried over verbatim. */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}
.fig img{animation:var(--img-anim,none)}

/* Images centre in their column, Elementor's default for this site. */
.w > .fig{display:flex; justify-content:center}

/* Breathing room inside the countdown card: applies only to the
   title-only pill lines, never to real content boxes like the mission
   quote (whose captured 40px padding must win). */
.countdown{margin-top:14px}
.group--card .w.group--card:has(> .icon-box:not(:has(.ib-text))){padding:3px 0}

/* Icon widgets centre by default, like Elementor's. */
.w:has(> .std-icon){text-align:var(--ta,center)}

/* Snow particle layer (PowerPack bg-effects on live), drawn by site.js. */
.has-snow{position:relative}
.has-snow > .snow-canvas{position:absolute; inset:0; z-index:0; pointer-events:none}
.has-snow > *:not(.snow-canvas){position:relative; z-index:1}
.fig.is-floaty img{animation:floaty 6s ease-in-out infinite}

/* A light card keeps dark text even on a dark band; dark cards declare
   their own captured colours (the raffle hero's cream stat cards were
   inheriting the dark-band white fallback and vanishing). */
.group--card .ib-title{color:var(--bt-c,var(--ink))}
.group--card .ib-text{color:var(--bd-c,var(--muted))}

/* ------------------------------------------------ timeline media rows */
/* A row pairing an image with a card (the About history timeline): the
   image becomes the flexible half and fills the row height, cropping like
   a column background; the card keeps its content width instead of being
   crushed to a word per line. */
/* Matched to the live 2007 row: the image is a fixed ~38% column that
   fills the row height (cropping like a background), and the card is the
   wide flexible half. Rows of side-by-side cards (the event schedule)
   share space equally under the same rule. */
[style*="--fd:row"]:has(> .group--card) > .w[style*="--img-br"]:has(> .fig){
  flex:0 0 38%; min-width:0; align-self:stretch; display:flex}
[style*="--fd:row"]:has(> .group--card) > .w[style*="--img-br"] > .fig img{
  width:100%; height:100%; object-fit:cover}
[style*="--fd:row"]:has(> .group--card) > .w[style*="--img-br"] > .fig{flex:1; width:100%}
[style*="--fd:row"] > .group.group--card{flex:var(--w,1 1 0); min-width:0}

/* ------------------------------------------------------- hero centring */
/* Owner call, applied site-wide: interior hero content centres. The
   homepage's hero is a two-column row and keeps its own layout. */
main > .band--hero:first-child:not([style*="--fd:row"]){text-align:center}
/* About Us only: the photo shows through a lighter wash. */
.page-about-us main > .band--hero:first-child::before{opacity:.8}

/* ------------------------------------------------ sponsor tier furniture */
/* Tier labels become compact centred badges: their captured per-tier
   gradients stay, the shape is ours (the owner disliked live's full bar). */
.w.group--card[style*="--bd-tt:uppercase"]:has(> .icon-box){
  width:fit-content; margin-inline:auto; border-radius:999px;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}
.w.group--card[style*="--bd-tt:uppercase"] .ib-text{letter-spacing:.08em; font-weight:700}
.w.group--card[style*="--bd-tt:uppercase"] .icon-box.is-inline{gap:10px}

/* Clear air between the tier sections on the sponsors page. */
.page-sponsors .band--tint + .band--tint{margin-top:26px}

/* The Most Popular pill straddles the top edge of its tier card. */
.group--card > .w.group--card:first-child:has(> .eyebrow){
  margin-top:-46px; position:relative; z-index:2;
}

/* Containers that carry a photo background of their own. */
.group--media{
  background-image:var(--gimg);
  background-size:cover;
  background-position:var(--gpos,center);
  border-radius:var(--cbr,20px);
  min-height:320px;
  align-self:stretch;
}

/* -------------------------------------------------- raffle page pieces */
/* The hero's three headline figures were spanning the whole content width,
   which left each card mostly empty air. Pull the row in and centre it. */
.group.hero-stats{max-width:1000px; margin-inline:auto; width:100%}

/* The Experience and Requirements rows are four icon cards each. Their chips
   inherited the icon-box's left edge while the card's own copy reads centred,
   so every icon sat off to one side of the block it labels. Same fix as the
   numbered steps: centre the chip, leave the copy alone. */
.icon-cards .icon-box > .ib-icon{align-self:center}

/* A prose block in a row is text, not a widget: it wraps to the space
   left over instead of holding its max-content width. Without this the
   homepage mission cards pushed 150px past their own border and took the
   whole document sideways with them. */
[style*="--fd:row"] > .prose{flex:0 1 auto; min-width:0}

/* An explicit --w on a row child wins, figures included. The rule above
   that makes a figure shrink from its natural width is right by default,
   but it also overrode any width Elementor had set: on the ride-along page
   the Super Chicken photo carries a 1200px natural basis and ate the whole
   row, collapsing the feature column beside it to nothing. */
[style*="--fd:row"] > .w[style*="--w:"],
[style*="--fd:row"] > .fig[style*="--w:"],
[style*="--fd:row"] > .group[style*="--w:"]{flex:var(--w); width:auto}

/* A footnote strip under a card row does not need the whole column: the
   live page runs it narrow and centred rather than edge to edge. */
.band > .w.note-strip{width:50%; margin-inline:auto}
@media (max-width:900px){ .band > .w.note-strip{width:100%} }

/* A section with an emblem behind it, the firebird on the ride-along page.
   Contained and centred rather than cover, so the whole bird reads, on its
   own layer under the content. The values, including the mobile size, come
   from the live page's own background-overlay settings. */
.band--emblem{position:relative; isolation:isolate; background:var(--band-bg,var(--paper))}
.band--emblem::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--band-emblem);
  background-position:var(--band-emblem-pos,center center);
  background-repeat:no-repeat;
  background-size:var(--band-emblem-size,contain);
  opacity:var(--band-emblem-opacity,.8);
}
@media (max-width:767px){
  .band--emblem::before{background-size:var(--band-emblem-size-sm,537px auto)}
}

/* ------------------------------------------------------- partner logos */
/* A row of partner marks. Their natural pixel sizes say nothing about how
   big they should look: the NASA-SE wordmark ships at 2048px and the
   Michelin Raceway badge at 401px, so letting flex share the row by
   natural width gave one a five-fold advantage over the other. Size them
   by height instead, per logo, and let the width follow the ratio.
   An explicit height rather than max-height because the Michelin file is
   an SVG, and max-height leaves it computing a zero-width box. */
.group.logo-row{justify-content:center; align-items:center; flex-wrap:wrap;
  gap:clamp(16px,3vw,34px)}
.logo-row .fig img{
  width:auto; max-width:100%;
  height:var(--logo-h,clamp(24px,3.4vw,42px));
  object-fit:contain;
}

/* A hero whose wash is a flat colour rather than a darkened photo (the
   partnership commitment band). The black scrim underneath would only
   muddy the red, so it goes; white heading and light body text come from
   the base hero rules. Numerals shrink so 501(c)(3) and 100% fit a line. */
.band--hero.is-tint-hero::after{content:none}
.band--hero.is-tint-hero .stat-num{font-size:var(--cn-fs-sm,clamp(24px,1.6vw + 14px,34px))}

/* -------------------------------------------------------------- phones
   Elementor's own phone default, which the port never carried. Below
   768px every container takes the full width of its row and rows wrap,
   so a desktop row becomes a stack, while widgets keep their own size
   and wrap. Elementor's per-element phone values live in the @media
   blocks that tools/layout.py strips, so this applies the default
   everywhere. The !important flags are deliberate: the desktop sizing
   rules above are more specific by design (cards, sized widgets), and
   on a phone none of them should hold. Measured on live at 390px,
   2026-10-24: every multi-column row stacks, text columns run 306 to
   370px wide, h1 sits at 40 to 60px. */
@media (max-width:767px){
  .band[style*="--fd:row"],.group[style*="--fd:row"]{flex-wrap:wrap}
  [style*="--fd:row"] > .group{flex:0 0 100% !important; width:100% !important; max-width:100%}
  [style*="--fd:row"] > *:not(.group){flex:0 1 auto !important; max-width:100% !important}
  /* Desktop gutters inside nested containers shrink to a phone gutter. */
  .group{padding-left:min(var(--pl,10px),20px); padding-right:min(var(--pr,10px),20px)}
  .band:not(.is-boxed){padding-left:min(var(--pl,10px),20px); padding-right:min(var(--pr,10px),20px)}
  /* Long unbroken strings (Ron's email address) wrap instead of clipping,
     and long button labels wrap inside the button. */
  .ib-text a,.prose a{overflow-wrap:anywhere}
  .btn{white-space:normal; max-width:100%}
  h1.hd{font-size:min(var(--h-fs,clamp(34px,3vw + 20px,50px)),13vw)}
}

/* Phone header: Donate stays in view beside the menu button, as on live. */
.head-donate{display:none}
@media (max-width:900px){
  .head-donate{display:inline-flex; align-items:center; gap:6px; margin-left:auto;
    padding:8px 14px; border-radius:var(--radius-pill); background-image:var(--grad-red);
    color:#fff; font-family:var(--font-display); font-weight:700; font-size:.82rem;
    letter-spacing:.04em; text-transform:uppercase; box-shadow:0 0 8px rgba(0,0,0,.18)}
  .head-donate:hover{text-decoration:none; filter:brightness(1.08)}
  .head-donate svg{width:1.05em; height:1.05em; flex:none}
  .head-donate + .nav-toggle{margin-left:8px}
}
/* The closed menu sits just off the right edge, and its shadow used to
   bleed back in as a grey strip down the side of every phone page. */
@media (max-width:900px){
  .site-nav:not(.is-open){box-shadow:none}
}