/* Lead Slugger — main.css
   Lifted verbatim from the approved design comp.
   Nothing in the theme hardcodes a hex value (BRAND-GUIDELINES 9.2).
   Change a token or a component here; never override downstream. */

/* ==========================================================================
   assets/css/main.css
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ls-white);color:var(--ls-ink);
  font-family:var(--ls-f-body);font-size:var(--ls-t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure,table{margin:0}
button{font:inherit}

:focus-visible{outline:2px solid var(--ls-gold);outline-offset:2px;border-radius:var(--ls-r-control)}
.ls-on-navy :focus-visible{outline-color:var(--ls-cream)}

.ls-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ls-skip{position:absolute;left:var(--ls-2);top:-100px;z-index:100;
  background:var(--ls-gold);color:var(--ls-ink);padding:var(--ls-3) var(--ls-5);
  border-radius:var(--ls-r-control);font-family:var(--ls-f-util);font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;text-decoration:none}
.ls-skip:focus{top:var(--ls-2)}

/* --- type roles — §3.3 Aleo is flat, solid, unadorned. Never arched,
       outlined, inlined, italicized, or set at 400. ---------------------- */
.ls-h1{font-family:var(--ls-f-display);font-weight:800;font-size:var(--ls-t-h1);
  line-height:1.05;letter-spacing:-.03em;max-width:16ch}
.ls-h2{font-family:var(--ls-f-display);font-weight:800;font-size:var(--ls-t-h2);
  line-height:1.12;letter-spacing:-.02em;max-width:20ch}
.ls-h3{font-family:var(--ls-f-display);font-weight:700;font-size:var(--ls-t-h3);
  line-height:1.2;letter-spacing:-.01em}
.ls-lede{font-size:var(--ls-t-lede);line-height:1.55;max-width:var(--ls-measure)}
.ls-small{font-size:var(--ls-t-small);line-height:1.55;color:var(--ls-slate)}
.ls-small--ink{color:var(--ls-ink)}
.ls-eyebrow{font-family:var(--ls-f-util);font-weight:600;font-size:var(--ls-t-eyebrow);
  text-transform:uppercase;letter-spacing:.16em;line-height:1.2;color:var(--ls-slate)}
.ls-on-navy .ls-eyebrow{color:var(--ls-cream);opacity:.8}

/* --- layout ---------------------------------------------------------- */
.ls-container{width:100%;max-width:var(--ls-container);margin-inline:auto;padding-inline:var(--ls-pad)}
.ls-container--narrow{max-width:760px}
.ls-section{padding-block:var(--ls-8)}
@media (min-width:768px){ .ls-section{padding-block:var(--ls-9)} }
.ls-section--band{padding-block:var(--ls-9)}
@media (min-width:768px){ .ls-section--band{padding-block:var(--ls-10)} }

.ls-surface-cream{background:var(--ls-cream)}
.ls-surface-cream-light{background:var(--ls-cream-light)}
.ls-surface-white{background:var(--ls-white)}
.ls-surface-navy{background:var(--ls-navy);color:var(--ls-cream)}
.ls-surface-navy-deep{background:var(--ls-navy-deep);color:var(--ls-cream)}
.ls-on-navy .ls-small{color:var(--ls-cream);opacity:.72}

.ls-stack>*+*{margin-top:var(--ls-5)}
.ls-stack-sm>*+*{margin-top:var(--ls-3)}

/* ==========================================================================
   DEVICES — §7
   ========================================================================== */
/* Pinstripe field. 1px cream, 12px intervals, 7% opacity. NAVY SURFACES ONLY. */
.ls-pinstripe{background-image:repeating-linear-gradient(90deg,
  rgba(244,235,218,.07) 0 1px, transparent 1px 12px)}

/* Keyline rule — 3px over 1px at 30% opacity. The most-used device. */
.ls-keyline{position:relative;padding-top:var(--ls-6)}
.ls-keyline::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--ls-navy)}
.ls-keyline::after{content:"";position:absolute;inset-inline:0;top:6px;height:1px;background:var(--ls-navy);opacity:.3}
.ls-on-navy .ls-keyline::before,.ls-on-navy .ls-keyline::after{background:var(--ls-cream)}

/* Diamond bullet — 8px rotated square. Navy on light, gold on navy. */
.ls-bullets li{position:relative;padding-left:var(--ls-5)}
.ls-bullets li+li{margin-top:var(--ls-3)}
.ls-bullets li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  background:var(--ls-navy);transform:rotate(45deg)}
.ls-on-navy .ls-bullets li::before{background:var(--ls-gold)}

/* Scoreboard slab */
.ls-slab{background:var(--ls-navy-deep);border-top:4px solid var(--ls-gold);border-radius:var(--ls-r-slab)}
.ls-slab__grid{display:grid;gap:var(--ls-7)}
@media (min-width:768px){ .ls-slab__grid{grid-template-columns:repeat(3,1fr);gap:var(--ls-6)} }
.ls-slab__fig{display:flex;flex-direction:column}
.ls-slab__value{order:-1;margin:0;font-family:var(--ls-f-util);font-weight:600;
  font-size:var(--ls-t-stat);line-height:.95;letter-spacing:-.01em;color:var(--ls-gold)}
.ls-slab__label{margin-top:var(--ls-3);font-family:var(--ls-f-body);font-weight:600;
  font-size:var(--ls-t-small);text-transform:uppercase;letter-spacing:.08em;color:var(--ls-cream)}
.ls-slab__meta{display:block;font-weight:400;text-transform:none;letter-spacing:0;opacity:.7;margin-top:2px}
.ls-slab__sources{margin-top:var(--ls-7);padding-top:var(--ls-4);border-top:1px solid rgba(244,235,218,.2)}
.ls-slab__sources ol{list-style:decimal;padding-left:var(--ls-4);color:var(--ls-cream);opacity:.65;font-size:13px}
.ls-slab__sources li+li{margin-top:var(--ls-1)}

/* Roster card — cream field, 3px navy frame, 8px inset with hairline,
   navy banner in Oswald caps. */
/* v4: white field, not cream. §7 specs a cream field, but on a cream section
   cream-on-cream reads as a tint rather than a card. Amend §7 to "white field"
   so the device is surface-independent and reusable in phase-2 sections. */
.ls-roster{background:var(--ls-white);border:3px solid var(--ls-navy);padding:var(--ls-2);height:100%}
.ls-roster__inner{border:1px solid var(--ls-line-white);height:100%;display:flex;flex-direction:column}
.ls-roster__banner{background:var(--ls-navy);color:var(--ls-cream);font-family:var(--ls-f-util);
  font-weight:600;font-size:var(--ls-t-small);text-transform:uppercase;letter-spacing:.11em;
  line-height:1.2;padding:var(--ls-3) var(--ls-4)}
.ls-roster__body{padding:var(--ls-5) var(--ls-4);flex:1;display:flex;flex-direction:column;gap:var(--ls-3)}

/* Icon system — 24px grid, 1.75px stroke, butt caps, miter joins, no fills. */
.ls-icon{width:24px;height:24px;flex:none;stroke:var(--ls-navy);stroke-width:1.75;
  stroke-linecap:butt;stroke-linejoin:miter;fill:none}
.ls-on-navy .ls-icon{stroke:var(--ls-cream)}
.ls-icon--lg{width:32px;height:32px}

.ls-card{background:var(--ls-white);border:1px solid var(--ls-line-white);
  border-radius:var(--ls-r-surface);padding:var(--ls-6);height:100%}
.ls-surface-cream-light .ls-card{border-color:var(--ls-line-cream)}

.ls-grid{display:grid;gap:var(--ls-5)}
.ls-grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Trade grid: explicit columns so an even count never leaves an orphan. */
.ls-grid--trades{grid-template-columns:1fr}
@media (min-width:560px){ .ls-grid--trades{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .ls-grid--trades{grid-template-columns:repeat(3,1fr)} }

/* ==========================================================================
   CALL TRACKING NUMBER
   One helper, one class, one data hook. Every instance on the page carries
   [data-ls-tel] so a DNI script (CallRail / WhatConverts / Invoca) can find and
   swap all of them from a single selector without touching templates.
   ========================================================================== */
.ls-tel{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1}
.ls-tel__label{font-family:var(--ls-f-util);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ls-slate)}
.ls-tel__num{font-family:var(--ls-f-util);font-weight:600;font-size:var(--ls-t-tel);
  letter-spacing:.01em;color:var(--ls-navy);margin-top:6px;
  transition:color .15s linear}
.ls-tel:hover .ls-tel__num{color:var(--ls-navy-deep)}
.ls-on-navy .ls-tel__label{color:var(--ls-cream);opacity:.7}
.ls-on-navy .ls-tel__num{color:var(--ls-white)}
.ls-on-navy .ls-tel:hover .ls-tel__num{color:var(--ls-gold)}
.ls-tel--inline{flex-direction:row;align-items:baseline;gap:var(--ls-3)}
.ls-tel--inline .ls-tel__num{margin-top:0}
.ls-tel--compact .ls-tel__num{font-size:19px;margin-top:0}
.ls-tel--compact .ls-tel__label{display:none}
/* Header treatment: glyph + numerals, no label. Oswald carries it without one. */
.ls-tel--head{flex-direction:row;align-items:center;gap:var(--ls-2)}
.ls-tel--head .ls-tel__label{display:none}
.ls-tel--head .ls-tel__num{margin-top:0;font-size:20px}
/* v4: glyph hidden on desktop — Oswald numerals already read as a phone number
   without it. The glyph is retained on the mobile .ls-telbtn tap target, where
   there is no room for the digits. */
.ls-tel--head .ls-icon{display:none}

/* Mobile: phone is a 44x44 tap target in the sticky bar. Highest-intent
   action for a contractor on a phone, so it sits left of the menu toggle. */
.ls-telbtn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--ls-line-white);
  border-radius:var(--ls-r-control);background:var(--ls-white)}
@media (min-width:1024px){ .ls-telbtn{display:none} }

/* ==========================================================================
   BUTTONS — §8.5. Gold is the only action color. Red never on a button.
   ========================================================================== */
.ls-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:14px 26px;border-radius:var(--ls-r-control);font-family:var(--ls-f-util);
  font-weight:600;font-size:var(--ls-t-button);text-transform:uppercase;
  letter-spacing:.11em;line-height:1;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background-color .15s linear,color .15s linear,border-color .15s linear}
.ls-btn--primary{background:var(--ls-gold);color:var(--ls-ink)}
.ls-btn--primary:hover{background:var(--ls-gold-deep)}
/* Solid gold on a light field is ~2:1 boundary contrast and fails WCAG 1.4.11,
   so it carries a 1px #C4841F border there. On navy it runs bare. */
.ls-surface-white .ls-btn--primary,.ls-surface-cream .ls-btn--primary,
.ls-surface-cream-light .ls-btn--primary,.ls-masthead .ls-btn--primary,
.ls-stickybar .ls-btn--primary,.ls-drawer .ls-btn--primary{border-color:var(--ls-gold-deep)}
.ls-btn--secondary{background:var(--ls-navy);color:var(--ls-white)}
.ls-btn--secondary:hover{background:var(--ls-navy-deep)}
.ls-on-navy .ls-btn--secondary{background:transparent;color:var(--ls-cream);border-color:var(--ls-cream)}
.ls-link{color:var(--ls-navy);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.ls-on-navy .ls-link{color:var(--ls-cream)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.ls-masthead{background:var(--ls-white);border-bottom:1px solid var(--ls-line-white)}
.ls-masthead .ls-container{min-height:var(--ls-masthead-h);display:flex;align-items:center;
  justify-content:space-between;gap:var(--ls-6)}
.ls-masthead__logo img{width:var(--ls-logo-w);height:auto}
/* v3: single horizontal row. The two-row stack left a gap the 192px masthead
   couldn't justify. Vertical dead space is structural — 200px logo (§4 floor)
   plus 0.75X clear space (§3) — so it's distributed symmetrically instead. */
.ls-masthead__right{display:none;align-items:center;gap:var(--ls-6)}
@media (min-width:1024px){ .ls-masthead__right{display:flex} }
/* v3 FIX: mobile controls now live in the masthead too. Previously they existed
   only in the sticky bar, which is translated off-screen until you scroll past
   the masthead — so at scroll-top on a phone there were no controls at all. */
.ls-masthead__mobile{display:flex;align-items:center;gap:var(--ls-3)}
@media (min-width:1024px){ .ls-masthead__mobile{display:none} }
/* Below 400px the phone icon yields to the toggle rather than squeezing the
   logo under its 200px floor. Phone is one tap into the drawer and returns in
   the sticky bar on first scroll. Third time this floor has bitten — the real
   fix is drawing the solid-diamond horizontal for mobile. */
@media (max-width:399px){ .ls-masthead__mobile .ls-telbtn{display:none} }
.ls-nav ul{display:flex;gap:var(--ls-6);align-items:center}
.ls-nav a{text-decoration:none;font-weight:600;font-size:15px;color:var(--ls-ink);
  padding-block:var(--ls-2);border-bottom:2px solid transparent;
  transition:border-color .15s linear,color .15s linear}
.ls-nav a:hover{color:var(--ls-navy);border-bottom-color:var(--ls-gold)}

.ls-stickybar{position:fixed;inset-inline:0;top:0;z-index:50;background:var(--ls-white);
  box-shadow:var(--ls-shadow);transform:translateY(-100%);transition:transform .25s var(--ls-ease)}
.ls-stickybar[data-visible="true"]{transform:translateY(0)}
.ls-stickybar .ls-container{min-height:var(--ls-stickybar-h);display:flex;align-items:center;
  justify-content:space-between;gap:var(--ls-5)}
.ls-stickybar__mark img{width:48px;height:48px}
.ls-stickybar__right{display:none;align-items:center;gap:var(--ls-6)}
@media (min-width:1024px){ .ls-stickybar__right{display:flex} }
.ls-stickybar__mobile{display:flex;align-items:center;gap:var(--ls-2)}
@media (min-width:1024px){ .ls-stickybar__mobile{display:none} }

.ls-navtoggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:var(--ls-white);border:1px solid var(--ls-line-white);border-radius:var(--ls-r-control);cursor:pointer}
.ls-navtoggle i{display:block;width:20px;height:2px;background:var(--ls-ink);position:relative}
.ls-navtoggle i::before,.ls-navtoggle i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ls-ink)}
.ls-navtoggle i::before{top:-6px} .ls-navtoggle i::after{top:6px}

/* v3: full-screen overlay. Previously it hung off the sticky bar, which meant
   its position depended on which bar was on screen. Full-screen removes the
   coupling entirely and gives the nav room to be set in Aleo. */
.ls-drawer{position:fixed;inset:0;z-index:60;background:var(--ls-white);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.ls-drawer[hidden]{display:none}
.ls-drawer__bar{display:flex;align-items:center;justify-content:space-between;
  min-height:var(--ls-stickybar-h);border-bottom:1px solid var(--ls-line-white)}
.ls-drawer__bar img{width:48px;height:48px}
.ls-drawer__close{width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--ls-white);border:1px solid var(--ls-line-white);
  border-radius:var(--ls-r-control);cursor:pointer}
.ls-drawer__close svg{width:20px;height:20px;stroke:var(--ls-ink);stroke-width:1.75;fill:none}
.ls-drawer__body{padding-block:var(--ls-6) var(--ls-8)}
.ls-drawer ul{display:flex;flex-direction:column}
.ls-drawer__link{display:block;padding:var(--ls-4) 0;text-decoration:none;
  font-family:var(--ls-f-display);font-weight:700;font-size:var(--ls-t-h3);
  line-height:1.2;letter-spacing:-.01em;border-bottom:1px solid var(--ls-line-white)}
.ls-drawer .ls-btn{margin-top:var(--ls-6);width:100%}
.ls-drawer .ls-tel{margin-top:var(--ls-6)}
body.ls-locked{overflow:hidden}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
/* 1. Hero */
.ls-hero{padding-block:var(--ls-9) var(--ls-10)}
.ls-hero__inner{display:grid;gap:var(--ls-5);max-width:820px}
.ls-hero .ls-h1{color:var(--ls-white)}
.ls-hero .ls-lede{color:var(--ls-cream);max-width:56ch}

.ls-check{margin-top:var(--ls-4);background:rgba(18,50,83,.55);
  border:1px solid rgba(244,235,218,.28);border-radius:var(--ls-r-surface);padding:var(--ls-5)}
.ls-check__row{display:grid;gap:var(--ls-3)}
@media (min-width:640px){ .ls-check__row{grid-template-columns:1fr 1.2fr auto;align-items:end} }
.ls-field{display:flex;flex-direction:column;gap:var(--ls-2)}
.ls-field label{font-family:var(--ls-f-body);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ls-cream)}
.ls-input{min-height:44px;padding:0 var(--ls-3);background:var(--ls-white);color:var(--ls-ink);
  border:1px solid var(--ls-line-white);border-radius:var(--ls-r-control);
  font-family:var(--ls-f-body);font-size:16px}
.ls-check .ls-small{margin-top:var(--ls-3);color:var(--ls-cream);opacity:.7}

/* 2. Proof band — butts flush against the hero. The 4px gold rule is the only
   division between the two navies. This is the page's signature moment. */
.ls-proof{padding-block:var(--ls-8)}

/* 4. Comparison table */
.ls-compare{width:100%;border-collapse:collapse;margin-top:var(--ls-6);text-align:left}
.ls-compare th,.ls-compare td{padding:var(--ls-4);border-bottom:1px solid var(--ls-line-white);vertical-align:top}
.ls-compare thead th{background:var(--ls-navy);color:var(--ls-cream);font-family:var(--ls-f-util);
  font-weight:600;font-size:var(--ls-t-small);text-transform:uppercase;letter-spacing:.11em;border-bottom:none}
.ls-compare thead th:last-child{background:var(--ls-navy-deep)}
.ls-compare tbody th{font-weight:600;width:30%}
.ls-compare td:last-child{background:var(--ls-cream-light);font-weight:500}
.ls-compare__wrap{overflow-x:auto}

/* 6. Four-stage diamond sequence — §7 permits this ONLY for a genuine four-step
   ordered sequence. Locked to min 4 / max 4 in ACF.
   FIX (v2): ::before previously carried content:counter(step) AND rotate(45deg),
   painting a second numeral at 45 degrees behind the upright one. The pseudo-
   element is now the diamond only; .ls-step__n is the sole numeral. */
.ls-steps{display:grid;gap:var(--ls-7);margin-top:var(--ls-7)}
@media (min-width:900px){ .ls-steps{grid-template-columns:repeat(4,1fr);gap:var(--ls-5)} }
.ls-step{position:relative;padding-top:var(--ls-8)}
.ls-step::before{content:"";position:absolute;top:0;left:0;width:48px;height:48px;
  transform:rotate(45deg);background:var(--ls-navy);
  box-shadow:inset 0 0 0 2px var(--ls-navy), inset 0 0 0 4px var(--ls-cream)}
.ls-step::after{content:"";position:absolute;top:24px;left:56px;right:0;height:1px;
  background:var(--ls-navy);opacity:.3}
@media (max-width:899px){ .ls-step::after{display:none} }
.ls-steps li:last-child::after{display:none}
.ls-step__n{position:absolute;top:0;left:0;width:48px;height:48px;display:flex;
  align-items:center;justify-content:center;font-family:var(--ls-f-util);font-weight:600;
  font-size:18px;line-height:1;color:var(--ls-cream);pointer-events:none}

/* 7. Services — deliberately NOT another icon-card grid. Full-width rows with
   hairline rules give the section its own rhythm against sections 3 and 5. */
.ls-servicelist{margin-top:var(--ls-7)}
.ls-servicelist li{padding-block:var(--ls-6);border-top:1px solid var(--ls-line-cream);
  display:grid;gap:var(--ls-3)}
.ls-servicelist li:last-child{border-bottom:1px solid var(--ls-line-cream)}
@media (min-width:768px){
  .ls-servicelist li{grid-template-columns:32px 280px 1fr;gap:var(--ls-6);align-items:start}
}

/* 8. Pricing */
.ls-pricecols{display:grid;gap:var(--ls-7);margin-top:var(--ls-7)}
@media (min-width:900px){ .ls-pricecols{grid-template-columns:repeat(3,1fr);gap:var(--ls-6)} }

/* 9. Closing CTA — THE ONE CENTERED BLOCK ON THE PAGE (§3.3) */
.ls-cta{text-align:center}
.ls-cta .ls-h2,.ls-cta .ls-lede{margin-inline:auto}
.ls-cta .ls-h2{max-width:22ch;color:var(--ls-white)}
.ls-cta__form{margin-top:var(--ls-7);text-align:left;background:rgba(18,50,83,.55);
  border:1px solid rgba(244,235,218,.28);border-radius:var(--ls-r-surface);padding:var(--ls-6)}
.ls-cta__grid{display:grid;gap:var(--ls-4)}
@media (min-width:640px){ .ls-cta__grid{grid-template-columns:1fr 1fr} }
.ls-field--full{grid-column:1/-1}
.ls-consent{display:flex;gap:var(--ls-3);align-items:flex-start;grid-column:1/-1;
  padding-top:var(--ls-3);border-top:1px solid rgba(244,235,218,.2)}
.ls-consent input{margin-top:4px;width:20px;height:20px;flex:none}
.ls-consent label{font-size:13px;line-height:1.5;color:var(--ls-cream);opacity:.85}
.ls-cta__or{display:flex;flex-direction:column;align-items:center;gap:var(--ls-3);margin-top:var(--ls-7)}

/* 10. Footer */
.ls-footer{padding-block:var(--ls-8)}
.ls-footer__top{display:grid;gap:var(--ls-7)}
@media (min-width:900px){ .ls-footer__top{grid-template-columns:260px 1fr 1fr;gap:var(--ls-8)} }
/* v2: cream knockout lockup, no panel. Derived from logostackednavy by
   recovering alpha from the flattened source. Comp asset, not a master. */
.ls-footer__logo img{width:200px;height:auto}
.ls-footer__nav ul{display:flex;flex-direction:column;gap:var(--ls-3)}
.ls-footer__nav a{text-decoration:none;font-weight:500}
.ls-footer__nav a:hover{text-decoration:underline;text-underline-offset:3px}
.ls-footer address{font-style:normal;display:flex;flex-direction:column;gap:var(--ls-4)}
.ls-footer__bottom{margin-top:var(--ls-8);padding-top:var(--ls-5);
  border-top:1px solid rgba(244,235,218,.2);display:flex;flex-wrap:wrap;gap:var(--ls-5);
  justify-content:space-between;align-items:center}
.ls-footer__legal ul{display:flex;flex-wrap:wrap;gap:var(--ls-5)}
.ls-footer__legal a{font-size:var(--ls-t-small)}

/* ==========================================================================
   MOTION — §8.6
   ========================================================================== */
[data-rise]{opacity:0;transform:translateY(16px);
  transition:opacity .4s var(--ls-ease),transform .4s var(--ls-ease)}
[data-rise].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-rise]{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   UTILITIES
   A deliberately tiny set. These exist only so template parts do not carry
   inline styles; they are not the start of a utility framework. Values come
   from the spacing scale (§8.2) — no arbitrary numbers.
   ========================================================================== */
.ls-mt-3{margin-top:var(--ls-3)}
.ls-mt-4{margin-top:var(--ls-4)}
.ls-mt-7{margin-top:var(--ls-7)}
.ls-btn--block{width:100%}

/* Visible only if a logo option is unset — makes the misconfiguration obvious
   in staging rather than shipping a silently empty header. */
.ls-logo-missing{font-family:var(--ls-f-display);font-weight:800;font-size:20px;color:var(--ls-navy)}

/* ==========================================================================
   GRAVITY FORMS
   GF's own stylesheet is dequeued (gform_disable_css), so these rules are the
   entire form appearance. Field wrappers get .ls-field and inputs get
   .ls-input from filters in inc/gravityforms.php; what remains is resetting
   GF's structural markup and the validation states it prints inline.
   ========================================================================== */
.gform_wrapper .gform_fields{display:grid;gap:var(--ls-4);grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media (min-width:640px){ .gform_wrapper .gform_fields{grid-template-columns:1fr 1fr} }
.gform_wrapper .ls-field--full{grid-column:1/-1}
.gform_wrapper .gfield_label{font-family:var(--ls-f-body);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ls-cream);display:block;margin-bottom:var(--ls-2)}
.gform_wrapper .gfield_required{color:var(--ls-gold);margin-left:4px}
.gform_wrapper .ginput_container{display:block}
.gform_wrapper textarea.ls-input{min-height:120px;padding:var(--ls-3);line-height:1.55}
.gform_wrapper .gfield_description{font-size:13px;line-height:1.5;color:var(--ls-cream);opacity:.75;margin-top:var(--ls-2)}

/* Consent field: unticked by default, adjacent to submit, never hidden. */
.gform_wrapper .ls-consent .ginput_container_consent{display:flex;gap:var(--ls-3);align-items:flex-start}
.gform_wrapper .ls-consent input[type="checkbox"]{margin-top:4px;width:20px;height:20px;flex:none}
.gform_wrapper .ls-consent label{font-size:13px;line-height:1.5;color:var(--ls-cream);opacity:.85;
  text-transform:none;letter-spacing:0;font-weight:400}

.gform_wrapper .gform_footer{margin-top:var(--ls-5)}
.gform_wrapper .gfield_error .ls-input{border-color:var(--ls-gold);border-width:2px}
.gform_wrapper .validation_message{font-size:13px;color:var(--ls-gold);margin-top:var(--ls-2)}
/* Red never appears on a control (§2.3), so validation uses gold — the same
   attention colour the rest of the interface uses for action. */
.gform_wrapper .gform_validation_errors{background:rgba(229,164,49,.12);border:1px solid var(--ls-gold);
  border-radius:var(--ls-r-control);padding:var(--ls-4);margin-bottom:var(--ls-5);color:var(--ls-cream)}
.gform_confirmation_message{color:var(--ls-cream);font-size:var(--ls-t-lede);line-height:1.55}
.gform_wrapper .gform_hidden,.gform_wrapper .gf_invisible{display:none}

/* ==========================================================================
   PROSE — long-form pages (privacy, terms) and FAQ answers.
   Reading column capped at 70ch regardless of container width (§8.1).
   ========================================================================== */
.ls-prose{max-width:var(--ls-measure)}
.ls-prose>*+*{margin-top:var(--ls-5)}
.ls-prose h2{font-family:var(--ls-f-display);font-weight:800;font-size:var(--ls-t-h3);
  line-height:1.2;letter-spacing:-.01em;margin-top:var(--ls-8)}
.ls-prose h3{font-family:var(--ls-f-body);font-weight:600;font-size:var(--ls-t-h4);margin-top:var(--ls-7)}
.ls-prose ul,.ls-prose ol{padding-left:var(--ls-5)}
.ls-prose ul{list-style:disc}
.ls-prose ol{list-style:decimal}
.ls-prose li+li{margin-top:var(--ls-2)}
.ls-prose a{color:var(--ls-navy);text-decoration:underline;text-underline-offset:3px}
.ls-prose strong{font-weight:600}

/* ==========================================================================
   PHASE 2 COMPONENTS
   Built now so the layouts render correctly the day content is added.
   ========================================================================== */

/* Results — roster card with a photograph above the body.
   Square on full-bleed, 4px radius on cards, never a drop shadow (§6.1, §8.3). */
.ls-roster__photo{width:100%;height:auto;display:block;border-radius:0}
.ls-minifigs{display:grid;gap:var(--ls-3);margin-top:var(--ls-4);
  padding-top:var(--ls-4);border-top:1px solid var(--ls-line-white)}
.ls-minifigs>div{display:flex;flex-direction:column}
.ls-minifigs dt{order:1;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ls-slate);margin-top:2px}
.ls-minifigs dd{order:0;margin:0;font-family:var(--ls-f-util);font-weight:600;
  font-size:24px;line-height:1;color:var(--ls-navy)}

/* FAQ — native disclosure, no JS. */
.ls-faq__item{border-top:1px solid var(--ls-line-cream)}
.ls-faq__item:last-child{border-bottom:1px solid var(--ls-line-cream)}
.ls-faq__q{cursor:pointer;list-style:none;padding:var(--ls-5) var(--ls-7) var(--ls-5) 0;
  position:relative;font-family:var(--ls-f-display);font-weight:700;
  font-size:var(--ls-t-h4);line-height:1.3}
.ls-faq__q::-webkit-details-marker{display:none}
/* Marker is the diamond, the only shape the system permits here (§7). */
.ls-faq__q::after{content:"";position:absolute;right:var(--ls-2);top:50%;
  width:10px;height:10px;background:var(--ls-navy);transform:translateY(-50%) rotate(45deg);
  transition:transform .15s linear}
.ls-faq__item[open] .ls-faq__q::after{transform:translateY(-50%) rotate(225deg)}
.ls-faq__a{padding-bottom:var(--ls-6)}

/* Team — documentary portraits, 4:5 crop. */
.ls-person__photo{width:100%;height:auto;display:block;border-radius:var(--ls-r-surface)}
.ls-person .ls-h3{color:var(--ls-white)}

/* Result-card source notes. Required field, so it must reach the page —
   a figure without visible attribution is what §5.2 rules out. */
.ls-minifigs__sources{list-style:decimal;padding-left:var(--ls-4);margin-top:var(--ls-3)}
.ls-minifigs__sources li+li{margin-top:2px}


/* ==========================================================================
   GRAVITY FORMS — corrections against live GF markup
   ========================================================================== */

/* 1. HONEYPOT. GF renders the anti-spam field as a real grid item, so with
   GF's own CSS dequeued it becomes visible and eats a column. Positioned
   off-screen rather than display:none, which is what GF does itself — a bot
   that skips display:none fields will still fill this one, which is the
   entire point of the trap. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper li.gform_validation_container{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* 2. CONTROLS FILL THEIR COLUMN. Without GF's stylesheet, inputs fall back to
   the browser's default intrinsic width and sit narrower than the grid cell,
   which is what makes the two columns look ragged and uneven. */
.gform_wrapper .ginput_container{width:100%}
.gform_wrapper .gfield input:not([type="checkbox"]):not([type="radio"]),
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea{width:100%;max-width:100%}

/* 3. CONSENT FIELDSET. GF wraps consent in a <fieldset> with a <legend>,
   which carries a browser default border and an indented label. Reset the
   fieldset everywhere; hide the legend only on consent, where the checkbox's
   own label already carries the text. */
.gform_wrapper fieldset{border:0;padding:0;margin:0;min-width:0}
.gform_wrapper legend{padding:0;display:block}
.gform_wrapper .ls-consent legend.gfield_label,
.gform_wrapper .ls-consent .gfield_label{display:none}

/* 4. REQUIRED INDICATOR. It inherits the label's uppercase and letter-spacing,
   which makes "(Required)" read almost as loud as the label itself. */
.gform_wrapper .gfield_required{
  font-family:var(--ls-f-body);
  font-size:11px;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  color:var(--ls-gold);
  margin-left:6px;
  opacity:.9;
}

/* 5. CHARACTER COUNTER. Same treatment as a field description. */
.gform_wrapper .ginput_counter,
.gform_wrapper .charleft{
  font-size:12px;line-height:1.4;color:var(--ls-cream);opacity:.6;
  margin-top:var(--ls-2);
}

.gform_wrapper .ls-consent{
  padding-top:var(--ls-4);
  border-top:1px solid rgba(244,235,218,.2);
}