/* ==========================================================================
   SCOTT IT SORTED — site stylesheet
   Built to the Scott It Sorted Brand Bible (Iconic Coaching, Aug 2026).

   Palette        Bitumen #2A1A20 45%   dominant ground, warm red undertone
                  Bone    #F6EFE8 20%   light ground, warmer + dirtier than white
                  Torch   #F0537C 15%   the hero — boxes, bars, chips, fills
                  Hi-Vis  #FF5A1F 10%   trade-facing punch — hazard rules, signage
                  Steel   #6E6A66  6%   concrete grey, stops the palette going all-warm
                  Rust    #C0442A  4%   bridge tone — stands in for pink on light grounds

   The one rule   Pink behind, never in front, on light backgrounds.
                  Torch type on Bone measures 2.96:1 and goes weak, so on Bone
                  it is only ever a fill with Bitumen type on top (4.87:1).
                  Where pink type is genuinely wanted on Bone, Rust stands in.

   Type           Champion HTF Lightweight — headings only, all caps, 0 tracking,
                  never below 18px. Archivo Bold — sub-headings, uppercase,
                  0.16em tracking. Archivo Regular — body, sentence case.
   ========================================================================== */

:root{
  /* brand */
  --bitumen:#2A1A20;
  --bone:#F6EFE8;
  --torch:#F0537C;
  --hivis:#FF5A1F;
  --steel:#6E6A66;
  --rust:#C0442A;

  /* working tints, derived from the six */
  --bitumen-surface:#35232A;   /* raised card on the dark ground   bone 12.9:1 */
  --bitumen-line:#43303A;
  --bone-surface:#EDE3D9;      /* alternating light band          bitumen 13.1:1 */
  --bone-line:#DFD2C6;
  --on-dark:#F6EFE8;
  --on-dark-muted:#C4B6B0;     /* 7.5:1 on bitumen */
  --on-light:#2A1A20;
  --on-light-muted:#6E6A66;    /* Steel — 4.7:1 on Bone */
  --on-surface-muted:#635E5B;  /* Steel, deepened — 5.05:1 on the Bone surface tint */
  --rust-ink:#AF3B22;          /* Rust, nudged to clear 4.5:1 on Bone for small type */
  --steel-on-dark:#918C86;     /* Steel, lifted to clear 4.5:1 on Bitumen (raw Steel is 3.09) */

  --display:'Champion HTF Lightweight','Haettenschweiler','Arial Narrow',
            'Helvetica Neue Condensed',sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,system-ui,sans-serif;

  --wrap:1180px;
  --pad:clamp(1.25rem,4vw,3rem);
  --nav-h:clamp(116px,10vw,150px);   /* tall enough for the stacked lockup */
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bitumen);
  color:var(--on-dark);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}

img{max-width:100%;height:auto;display:block;}
p,ul,ol,figure,table,blockquote{margin:0;}
a{color:inherit;}

h1,h2,h3{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:.92;
  text-wrap:balance;
}
h1{font-size:clamp(2.9rem,9vw,6.6rem);}
h2{font-size:clamp(2.1rem,5vw,3.6rem);}
h3{font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:.98;}

:focus-visible{outline:3px solid var(--hivis);outline-offset:3px;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
.narrow{max-width:70ch;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--torch);color:var(--bitumen);
  padding:.8rem 1.2rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:.78rem;text-decoration:none;
}
.skip:focus{left:0;}

/* visually hidden, still announced */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* spacing utilities, so pages carry no inline styles */
.mt-s{margin-top:1.4rem;}
.mt-m{margin-top:2rem;}
.mt-l{margin-top:2.4rem;}
.mt-xl{margin-top:2.6rem;}
.steps-stack{grid-template-columns:1fr;gap:1.4rem;}

/* ---------- shared bits ------------------------------------------------- */

/* Archivo Bold sub-heading / label */
.eyebrow{
  font-size:clamp(.6rem,2.05vw,.735rem);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;gap:.7rem;color:var(--torch);margin:0;
}
.eyebrow::before{content:"";width:26px;height:4px;background:var(--torch);flex:none;}
@media (max-width:560px){
  .eyebrow{gap:.5rem;letter-spacing:.11em;}
  .eyebrow::before{width:16px;height:3px;}
}
/* On the narrowest phones the longest eyebrow needs the whole line, so the
   Torch bar steps aside rather than the label wrapping. */
@media (max-width:430px){
  .eyebrow{gap:0;letter-spacing:.08em;}
  .eyebrow::before{display:none;}
}
.on-light .eyebrow,.light .eyebrow,.light-surface .eyebrow{color:var(--rust-ink);}
.on-light .eyebrow::before,.light .eyebrow::before,
.light-surface .eyebrow::before{background:var(--torch);}

/* Hi-Vis hazard rule — the site's one piece of signage */
.hazard{
  height:10px;background-color:var(--bitumen);
  background-image:repeating-linear-gradient(115deg,var(--hivis) 0 18px,transparent 18px 36px);
}
.hazard-thin{height:5px;background-size:auto;}
.hazard-onlight{background-color:var(--bone);}

.rule{height:1px;background:var(--bitumen-line);border:0;margin:0;}
.light .rule{background:var(--bone-line);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-size:.82rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;
  padding:1.05rem 1.5rem;border:2px solid var(--torch);background:var(--torch);
  color:var(--bitumen);text-decoration:none;cursor:pointer;
  transition:transform .15s,background .18s,color .18s,border-color .18s;
}
.btn:hover{background:var(--hivis);border-color:var(--hivis);color:var(--bitumen);transform:translateY(-2px);}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit;}
.btn-ghost:hover{background:var(--torch);border-color:var(--torch);color:var(--bitumen);}
.btn-sm{padding:.7rem 1.05rem;font-size:.72rem;letter-spacing:.13em;}
.btn-block{width:100%;}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none;} }

.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem;}

.lede{font-size:clamp(1.1rem,1.02rem + .4vw,1.3rem);max-width:60ch;}
.section-head{display:flex;flex-direction:column;gap:1.15rem;max-width:34ch;}

section{padding-block:clamp(3.5rem,8vw,6rem);}
.dark{background:var(--bitumen);color:var(--on-dark);}
.dark-surface{background:var(--bitumen-surface);color:var(--on-dark);}
.light{background:var(--bone);color:var(--on-light);}
.light-surface{background:var(--bone-surface);color:var(--on-light);}
.light p,.light li{color:var(--on-light-muted);}
.light-surface p,.light-surface li{color:var(--on-surface-muted);}
.light .lead-para,.light strong{color:var(--on-light);}
.dark p,.dark li,.dark-surface p{color:var(--on-dark-muted);}
.dark .lead-para,.dark strong{color:var(--on-dark);}

/* ---------- header / navigation ----------------------------------------- */

.nav{position:sticky;top:0;z-index:80;background:var(--bitumen);}
.nav-inner{display:flex;align-items:center;gap:1.4rem;min-height:var(--nav-h);
  padding-block:.6rem;}

.brandmark{display:block;margin-right:auto;flex:none;text-decoration:none;line-height:0;}
.brandmark img{width:clamp(128px,11vw,176px);height:auto;}  /* stays above the
   Brand Bible's 30mm minimum, below which the tagline should be dropped */

.navlinks{display:flex;gap:1.7rem;align-items:center;}
.navlinks a{
  text-decoration:none;font-size:.79rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-muted);
  padding-block:.45rem;border-bottom:3px solid transparent;
  transition:color .18s,border-color .18s;
}
.navlinks a:hover{color:var(--bone);border-bottom-color:var(--hivis);}
.navlinks a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--torch);}

.navphone{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-size:.85rem;font-weight:700;letter-spacing:.03em;color:var(--bone);
  white-space:nowrap;transition:color .18s;
}
.navphone svg{color:var(--torch);flex:none;}
.navphone:hover{color:var(--torch);}

/* burger */
.burger{
  display:none;width:48px;height:44px;flex:none;
  background:transparent;border:2px solid var(--bitumen-line);cursor:pointer;
  padding:0;position:relative;transition:border-color .18s,background .18s;
}
.burger:hover{border-color:var(--torch);}
.burger span{
  display:block;position:absolute;left:11px;right:11px;height:3px;background:var(--bone);
  transition:transform .22s ease,opacity .16s ease;
}
.burger span:nth-child(1){top:13px;}
.burger span:nth-child(2){top:20px;}
.burger span:nth-child(3){top:27px;}
.burger[aria-expanded="true"]{border-color:var(--torch);}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (prefers-reduced-motion:reduce){ .burger span{transition:none;} }

/* Hamburger takes over on phones AND iPad — portrait and landscape.
   iPad landscape is 1024px wide, so the desktop bar starts at 1025px. */
@media (max-width:1024px){
  .navlinks,.nav-cta{display:none;}
  .burger{display:block;}
}
@media (max-width:560px){
  .navphone span{display:none;}
}

/* slide-down drawer */
.drawer{
  position:fixed;inset:calc(var(--nav-h) + 5px) 0 0 0;z-index:70;  /* +5px clears the hazard rule */
  background:var(--bitumen);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.5rem,5vw,2.5rem) 0 3rem;
  transform:translateY(-8px);opacity:0;
  transition:transform .22s ease,opacity .18s ease;
}
.drawer[hidden]{display:none;}
.drawer.is-open{transform:none;opacity:1;}
@media (prefers-reduced-motion:reduce){ .drawer{transition:none;} }
@media (min-width:1025px){ .drawer{display:none !important;} }

.drawer-links{display:flex;flex-direction:column;}
.drawer-links a{
  font-family:var(--display);text-transform:uppercase;text-decoration:none;
  font-size:clamp(2.4rem,11vw,3.4rem);line-height:1;color:var(--bone);
  padding:.5em 0 .42em;border-bottom:1px solid var(--bitumen-line);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.drawer-links a[aria-current="page"]{color:var(--torch);}
.drawer-links a::after{
  content:"";width:14px;height:14px;background:var(--torch);flex:none;
  align-self:center;opacity:0;transition:opacity .18s;
}
.drawer-links a[aria-current="page"]::after,.drawer-links a:hover::after{opacity:1;}

.drawer-foot{margin-top:2.2rem;display:flex;flex-direction:column;gap:1.1rem;}
.drawer-foot .direct a{font-size:clamp(1.15rem,4.4vw,1.5rem);}

/* ---------- hero --------------------------------------------------------- */

.hero{background:var(--bitumen);position:relative;overflow:hidden;padding-block:0;}
.hero::after{
  content:"";position:absolute;inset:auto -12% -45% 52%;height:78%;
  background-image:repeating-linear-gradient(115deg,rgba(240,83,124,.14) 0 26px,transparent 26px 52px);
  transform:rotate(-8deg);pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(3rem,8vw,5.5rem);}
.hero h1{margin:1.1rem 0 0;max-width:15ch;font-size:clamp(2.7rem,7.8vw,5.8rem);}
.hero h1 em{font-style:normal;color:var(--torch);}
.hero .lede{margin-top:1.6rem;color:var(--on-dark-muted);}
.hero .eyebrow{color:var(--steel-on-dark);}   /* Steel; the Torch bar stays as the accent */
.hero-note{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--bitumen-line);
  display:flex;align-items:center;gap:.75rem;max-width:48ch;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-muted);line-height:1.5;
}
.note-mark{flex:none;width:auto;height:1.95em;}  /* Hi-Vis SiS monogram */

/* page masthead (inner pages + legals) */
.masthead{background:var(--bitumen);color:var(--on-dark);}
.masthead .wrap{padding-block:clamp(2.6rem,6vw,4.4rem);}
.masthead h1{margin:1rem 0 0;font-size:clamp(2.6rem,7.5vw,5rem);max-width:16ch;}
.masthead p{margin-top:1.4rem;color:var(--on-dark-muted);max-width:56ch;}
.masthead .meta{
  margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 2rem;color:var(--on-dark-muted);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* Trades carousel — a Torch fill with Bitumen type on top, per the one rule.
   The list is rendered twice and the track slides exactly half its width, so
   the loop is seamless with no JavaScript. Hovering or tabbing into it pauses. */
.ticker{
  background:var(--torch);color:var(--bitumen);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.ticker-track{display:flex;width:max-content;animation:ticker 46s linear infinite;}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused;}
.ticker-group{display:flex;align-items:center;flex:none;padding-block:1.15rem;}
.ticker-group span{
  display:inline-flex;align-items:center;gap:1.7rem;padding-right:1.7rem;white-space:nowrap;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.ticker-group span::after{
  content:"";width:5px;height:5px;background:var(--bitumen);transform:rotate(45deg);flex:none;
}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;}
  .ticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
}

/* ---------- content blocks ---------------------------------------------- */

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.split > *{min-width:0;}
@media (max-width:880px){ .split{grid-template-columns:1fr;} }

.prose{display:flex;flex-direction:column;gap:1.15rem;}
.prose .lead-para{font-size:1.14rem;font-weight:500;}
.prose a{color:inherit;text-decoration:underline;text-decoration-color:var(--torch);
  text-decoration-thickness:2px;text-underline-offset:3px;}
.light .prose a:hover{color:var(--rust-ink);}
.dark .prose a:hover{color:var(--torch);}

.kicker{
  margin-top:.6rem;padding-top:1.5rem;border-top:1px solid var(--bitumen-line);
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.3rem,2.8vw,1.9rem);line-height:1.05;color:var(--on-dark);
}
.light .kicker{border-top-color:var(--bone-line);color:var(--on-light);}
.kicker b{color:var(--torch);font-weight:400;}
.light .kicker b{color:var(--rust-ink);}

/* service checklist */
.svc-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:0 clamp(1.5rem,4vw,3.5rem);
  border-top:1px solid var(--bone-line);margin:0;padding:0;
}
.dark .svc-list,.dark-surface .svc-list{border-top-color:var(--bitumen-line);}
.svc-list li{
  list-style:none;display:flex;align-items:center;gap:.85rem;
  padding:.95rem .4rem;border-bottom:1px solid var(--bone-line);
  font-weight:500;color:inherit;transition:padding-left .18s;
}
.dark .svc-list li,.dark-surface .svc-list li{border-bottom-color:var(--bitumen-line);}
.svc-list li:hover{padding-left:.9rem;}
.svc-list li svg{flex:none;color:var(--rust-ink);}
.dark .svc-list li svg,.dark-surface .svc-list li svg{color:var(--torch);}
@media (prefers-reduced-motion:reduce){ .svc-list li:hover{padding-left:.4rem;} }


/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.5rem,3vw,2.4rem);margin-top:2.8rem;}
.steps article{display:flex;flex-direction:column;gap:.7rem;}
.steps .num{
  font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--bitumen);
  background:var(--torch);width:2.4rem;height:2.4rem;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.steps h3{font-family:var(--display);text-transform:uppercase;color:inherit;}

/* why-us grid */
.why-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:1px;background:var(--bitumen-line);border:1px solid var(--bitumen-line);margin-top:2.8rem;
}
.why-grid article{background:var(--bitumen);padding:1.9rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;}
.why-grid h3{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;}
.why-grid p{font-size:.97rem;line-height:1.55;}
.why-grid .tick{width:24px;height:4px;background:var(--hivis);margin-bottom:.75rem;}
.light .why-grid,.light-surface .why-grid{background:var(--bone-line);border-color:var(--bone-line);}
.light .why-grid article,.light-surface .why-grid article{background:var(--bone);}
.light-surface .why-grid article{background:var(--bone);}

/* portrait + quote */
.portrait{position:relative;margin:0 0 1.9rem;max-width:340px;}
.portrait img{width:100%;position:relative;z-index:1;}
.portrait::after{content:"";position:absolute;inset:auto -14px -14px auto;width:76px;height:76px;background:var(--torch);z-index:0;}
@media (max-width:880px){ .portrait{max-width:270px;} }

.quote{
  border-left:5px solid var(--torch);padding:.2rem 0 .2rem 1.4rem;
  font-family:var(--display);text-transform:uppercase;line-height:1.05;
  font-size:clamp(1.4rem,3vw,2.05rem);margin-top:1.9rem;
}
.quote cite{
  display:block;font-family:var(--body);font-style:normal;font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin-top:1rem;
}
.light .quote cite{color:var(--on-light-muted);}

/* direct contact list */
.direct{margin-top:2rem;display:flex;flex-direction:column;gap:.9rem;}
.direct a{
  text-decoration:none;display:flex;align-items:center;gap:.8rem;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(1.15rem,2.4vw,1.55rem);
  color:var(--bone);border-bottom:1px solid var(--bitumen-line);padding-bottom:.8rem;
  transition:color .18s;overflow-wrap:anywhere;
}
.direct a:hover{color:var(--torch);}
.direct a svg{flex:none;color:var(--torch);}

/* CTA band */
.cta-band{background:var(--torch);color:var(--bitumen);}
.cta-band .wrap{padding-block:clamp(2.8rem,6vw,4.2rem);display:flex;flex-wrap:wrap;
  gap:1.6rem 2.5rem;align-items:center;justify-content:space-between;}
.cta-band h2{max-width:18ch;font-size:clamp(1.9rem,4.4vw,3rem);}
.cta-band p{color:var(--bitumen);max-width:44ch;margin-top:.6rem;font-weight:500;}
.cta-band .btn{background:var(--bitumen);border-color:var(--bitumen);color:var(--bone);}
.cta-band .btn:hover{background:transparent;color:var(--bitumen);border-color:var(--bitumen);}

/* ---------- form --------------------------------------------------------- */

form{display:flex;flex-direction:column;gap:1rem;background:var(--bitumen-surface);
  padding:clamp(1.4rem,3vw,2rem);border:1px solid var(--bitumen-line);}
.field{display:flex;flex-direction:column;gap:.45rem;}
label{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted);}
input,textarea,select{
  font-family:var(--body);font-size:1rem;color:var(--bone);
  background:var(--bitumen);border:1px solid var(--bitumen-line);padding:.85rem .9rem;
  border-radius:0;width:100%;transition:border-color .18s,box-shadow .18s;
}
input:hover,textarea:hover,select:hover{border-color:var(--steel);}
input:focus,textarea:focus,select:focus{border-color:var(--torch);outline:none;box-shadow:0 0 0 2px rgba(240,83,124,.3);}
textarea{resize:vertical;min-height:130px;}
.note{font-size:.82rem;color:var(--on-dark-muted);line-height:1.5;}
.note.is-alert{color:var(--hivis);font-weight:600;}

/* ---------- footer ------------------------------------------------------- */

.site-footer{background:var(--bitumen);border-top:1px solid var(--bitumen-line);}
.foot-grid{
  padding-block:clamp(2.6rem,5vw,3.6rem);
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  gap:2.4rem clamp(1.5rem,4vw,3rem);align-items:start;
}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr;} .foot-brand{grid-column:1/-1;} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr;} }
.foot-brand img{width:min(260px,80%);}
.foot-brand p{margin-top:1.1rem;color:var(--on-dark-muted);font-size:.9rem;max-width:34ch;}
.foot-col h2{
  font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--torch);margin:0 0 1rem;
}
.foot-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.foot-col a{
  text-decoration:none;color:var(--on-dark-muted);font-size:.92rem;
  transition:color .18s;overflow-wrap:anywhere;
}
.foot-col a:hover{color:var(--bone);}
.foot-bottom{
  border-top:1px solid var(--bitumen-line);padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--on-dark-muted);
}
.foot-bottom a{text-decoration:none;border-bottom:2px solid var(--torch);padding-bottom:1px;color:var(--bone);}
.foot-bottom a:hover{color:var(--torch);}
.foot-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;}

/* ---------- legal pages (privacy / terms) -------------------------------- */

.layout{
  display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(2rem,5vw,4rem);
  align-items:start;padding-block:clamp(2.5rem,6vw,4rem);
  background:var(--bone);color:var(--on-light);
}
.layout > *{min-width:0;}
.legal-page{background:var(--bone);}
@media (max-width:900px){ .layout{grid-template-columns:1fr;} }

.toc{position:sticky;top:calc(var(--nav-h) + 18px);font-size:.87rem;}
@media (max-width:900px){ .toc{position:static;border-bottom:1px solid var(--bone-line);padding-bottom:1.5rem;} }
.toc h2{
  font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-light-muted);margin:0 0 .9rem;
}
.toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.1rem;}
.toc a{
  display:block;text-decoration:none;color:var(--on-light-muted);
  padding:.32rem 0 .32rem .8rem;border-left:2px solid var(--bone-line);line-height:1.35;
  transition:color .18s,border-color .18s;
}
.toc a:hover{color:var(--on-light);border-left-color:var(--torch);}

/* NOTE: every rule below is scoped to .legal-page. The main pages use <article>
   for card grids, so unscoped `article ...` selectors would leak into them and
   knock Champion off the card headings. */
.legal-page article{max-width:72ch;min-width:0;display:flex;flex-direction:column;gap:2.4rem;}
.legal-page article > section{display:flex;flex-direction:column;gap:1rem;padding-block:0;
  scroll-margin-top:calc(var(--nav-h) + 20px);}
.legal-page article h2{font-size:clamp(1.5rem,3vw,2.1rem);}
.legal-page article h3{font-family:var(--body);font-size:1.02rem;font-weight:700;margin:.5rem 0 -.4rem;
  text-transform:none;letter-spacing:0;line-height:1.4;}
.legal-page article p,.legal-page article li{color:var(--on-light-muted);}
.legal-page article > section > p:first-of-type{color:var(--on-light);}
.legal-page article ul,.legal-page article ol{padding-left:1.25rem;display:flex;flex-direction:column;gap:.5rem;}
.legal-page article li::marker{color:var(--rust-ink);}
.legal-page article strong{color:var(--on-light);font-weight:700;}
.legal-page article a{color:var(--on-light);text-decoration:underline;text-decoration-color:var(--torch);
  text-decoration-thickness:2px;text-underline-offset:3px;}
.legal-page article a:hover{color:var(--rust-ink);}

.callout{border-left:5px solid var(--torch);background:var(--bone-surface);
  padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;}
.callout p,.callout li{color:var(--on-light);font-size:.96rem;}
/* these boxes sit on the Bone surface tint, so they need the deeper muted tone —
   and enough specificity to beat `.legal-page article p`. */
.legal-page article .callout p,.legal-page article .callout li{color:var(--on-light);}

.contactbox{border:1px solid var(--bone-line);background:var(--bone-surface);
  padding:1.4rem;display:flex;flex-direction:column;gap:.55rem;}
.contactbox p,.contactbox li,
.legal-page article .contactbox p,.legal-page article .contactbox li{color:var(--on-surface-muted);}
.contactbox a{font-weight:700;color:var(--on-light);}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:32rem;}
th,td{text-align:left;padding:.65rem .8rem;border:1px solid var(--bone-line);}
th{background:var(--bone-surface);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light);}
td{color:var(--on-light-muted);font-variant-numeric:tabular-nums;}

/* ---------- scroll reveal ------------------------------------------------ */

.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }