/* ============================================================
   CHRISTMAS TREE COLLECTIONS - aw-wp-build skin
   AW Media & Marketing. Job 1967.

   Palette is closed and taken from the live Elementor site:
   red, dark green, gold, peach, white, black. Everything else
   is an alpha or a derived tint of those six.
   Face: Montserrat, self hosted (see fonts.css).
   ============================================================ */

:root{
  --red:#C52424;
  --green:#224932;
  --gold:#FFC72C;
  --peach:#FFBC7D;
  --white:#FFFFFF;
  --black:#000000;

  /* derived only from the six above */
  --red-deep:#9E1A1A;
  --green-deep:#173322;
  --green-soft:rgba(34,73,50,.08);
  --ink:#121A15;
  --ink-soft:rgba(18,26,21,.74);
  --ink-dim:rgba(18,26,21,.58);
  --line:rgba(18,26,21,.12);
  --line-soft:rgba(18,26,21,.07);
  --on-dark:rgba(255,255,255,.80);
  --on-dark-dim:rgba(255,255,255,.62);
  --dark-line:rgba(255,255,255,.16);
  --dark-card:rgba(255,255,255,.055);

  --r:14px;
  --r-lg:26px;
  --r-pill:999px;
  --shadow-1:0 1px 2px rgba(18,26,21,.06),0 6px 18px rgba(18,26,21,.07);
  --shadow-2:0 16px 46px rgba(18,26,21,.14);
  --shadow-3:0 30px 80px rgba(18,26,21,.26);

  --head:82px;
  --pad:clamp(20px,4.5vw,56px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;overscroll-behavior-x:none}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;overscroll-behavior-x:none;
}
img,svg,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:var(--green-deep);padding:12px 20px;font-weight:800;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- type ladder ---------- */
.eyebrow{
  font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.4;margin:0 0 14px;
}
h1,.h1{font-size:clamp(34px,5.4vw,64px);font-weight:900;letter-spacing:-.028em}
h2,.h2{font-size:clamp(27px,3.5vw,44px);font-weight:900;letter-spacing:-.024em}
h3,.h3{font-size:clamp(19px,2vw,24px);font-weight:800}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.66}
.measure{max-width:70ch}
.center{text-align:center}
.center .measure{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 32px;border-radius:var(--r-pill);
  font-weight:800;font-size:16px;letter-spacing:.01em;line-height:1;
  text-align:center;cursor:pointer;border:2px solid transparent;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s,border-color .22s,color .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-red{background:var(--red);color:var(--white);box-shadow:0 10px 26px rgba(197,36,36,.28)}
.btn-red:hover{background:var(--red-deep);box-shadow:0 16px 36px rgba(197,36,36,.34)}
.btn-gold{background:var(--gold);color:var(--green-deep);box-shadow:0 10px 26px rgba(255,199,44,.34)}
.btn-gold:hover{background:var(--peach)}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.btn-ghost-ink{background:transparent;color:var(--green);border-color:rgba(34,73,50,.35)}
.btn-ghost-ink:hover{background:var(--green-soft);border-color:var(--green)}
.btn[aria-disabled="true"],.btn.is-closed{
  background:var(--ink-dim);color:var(--white);box-shadow:none;cursor:default;
}
.btn[aria-disabled="true"]:hover,.btn.is-closed:hover{transform:none;background:var(--ink-dim)}
.btn-wide{width:100%;max-width:420px}

/* The red postcode note that sits under every Book a Collection button. */
.pcnote{
  margin:18px 0 0;font-size:15px;font-weight:700;line-height:1.5;color:var(--red);
}
.on-dark .pcnote{color:var(--gold)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:90;background:var(--white);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .25s,background-color .25s;
}
.hdr.stuck{box-shadow:0 6px 24px rgba(18,26,21,.10)}
.hdr-in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  min-height:var(--head);display:flex;align-items:center;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding:10px 0}
.brand img{height:52px;width:auto}
.nav{flex:1 1 auto;display:flex;justify-content:center}
.nav ul{display:flex;align-items:center;gap:4px}
.nav a{
  display:block;padding:10px 14px;border-radius:var(--r-pill);
  font-size:15px;font-weight:700;color:var(--ink-soft);
  transition:color .2s,background-color .2s;
}
.nav a:hover{color:var(--green);background:var(--green-soft)}
.nav a[aria-current="page"]{color:var(--green);background:var(--green-soft)}
.hdr-end{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.icon-link{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;
  border-radius:var(--r-pill);font-size:15px;font-weight:700;color:var(--ink-soft);
  transition:color .2s,background-color .2s;
}
.icon-link:hover{color:var(--green);background:var(--green-soft)}
.icon-link svg{width:20px;height:20px;flex:0 0 auto}
.basket{
  display:inline-flex;align-items:center;gap:10px;padding:10px 18px;
  border-radius:var(--r-pill);background:var(--green);color:var(--white);
  font-size:15px;font-weight:800;transition:background-color .2s,transform .2s var(--ease);
}
.basket:hover{background:var(--green-deep);transform:translateY(-1px)}
.basket svg{width:19px;height:19px}
.basket .count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--gold);color:var(--green-deep);font-size:12px;font-weight:900;
}
.burger{display:none;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center;color:var(--green)}
.burger:hover{background:var(--green-soft)}
.burger svg{width:26px;height:26px}

/* Mobile drawer */
.mnav{
  position:fixed;inset:0;z-index:95;background:var(--green-deep);color:var(--white);
  padding:24px var(--pad) 40px;display:flex;flex-direction:column;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  overflow-y:auto;
}
.mnav.open{opacity:1;visibility:visible;transform:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mnav-top img{height:48px;width:auto}
.mnav-close{width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--white);border:1px solid var(--dark-line)}
.mnav-close svg{width:24px;height:24px}
.mnav a.ml{
  display:block;padding:15px 4px;border-bottom:1px solid var(--dark-line);
  font-size:19px;font-weight:800;color:var(--white);
}
.mnav .btn{margin-top:22px;width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green-deep);color:var(--white);
  padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,120px);
  text-align:center;
}
.hero-bg{
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(23,51,34,.72) 0%,rgba(23,51,34,.52) 45%,rgba(23,51,34,.86) 100%);
}
/* Two drifting snow layers, as on the live site, but gated on .js so a no-JS
   visitor never sees a frozen artefact, and frozen again in the editor. */
.snow{position:absolute;inset:-20% 0 -20%;z-index:-1;pointer-events:none;opacity:0}
.js .snow{opacity:1}
.snow i{
  position:absolute;inset:0;display:block;
  background-repeat:repeat;background-position:0 0;
}
.snow .s1{background-image:url("img/snow1.png");background-size:500px 500px;opacity:.55}
.snow .s2{background-image:url("img/snow2.png");background-size:289px 293px;opacity:.38}
.js .snow .s1{animation:snowfall 26s linear infinite}
.js .snow .s2{animation:snowfall 44s linear infinite}
@keyframes snowfall{from{transform:translate3d(0,-500px,0)}to{transform:translate3d(0,500px,0)}}

.hero-in{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.hero h1{text-shadow:0 2px 26px rgba(0,0,0,.42)}
.hero h1 .ln{display:block}
.hero-charity{
  margin:22px auto 0;max-width:58ch;font-size:clamp(16px,1.5vw,19px);
  color:var(--on-dark);line-height:1.6;
}
.hero-creators{
  margin:14px auto 0;max-width:62ch;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-dim);line-height:1.6;
}
.hero-date{
  display:inline-block;margin:30px auto 0;padding:13px 26px;
  border-radius:var(--r-pill);background:var(--red);color:var(--white);
  font-size:clamp(15px,1.5vw,18px);font-weight:800;line-height:1.35;
  box-shadow:0 12px 32px rgba(197,36,36,.34);
}
.hero-cta{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:4px}

/* ============================================================
   TREELINE DIVIDER + STATUS STRIP
   ============================================================ */
.treeline{
  position:relative;background:var(--white);padding:0 0 clamp(36px,5vw,56px);text-align:center;
}
.treeline-img{
  width:100%;height:auto;margin-top:-1px;
  display:block;object-fit:cover;object-position:center top;
}
.status{
  margin:clamp(28px,4vw,44px) auto 0;
  font-size:clamp(20px,2.6vw,32px);font-weight:900;letter-spacing:.02em;
  text-transform:uppercase;color:var(--red);line-height:1.2;
}

/* ============================================================
   BANDS
   ============================================================ */
.band{padding:clamp(56px,7.5vw,104px) 0}
.band-white{background:var(--white)}
.band-green{background:var(--green);color:var(--white)}
.band-red{background:var(--red);color:var(--white)}
.band-wash{background:linear-gradient(180deg,var(--white) 0%,rgba(34,73,50,.05) 100%)}
.band-green .eyebrow,.band-red .eyebrow{color:var(--gold)}
.band-white .eyebrow,.band-wash .eyebrow{color:var(--red)}
.band-green p,.band-red p{color:var(--on-dark)}
.band-green a:not(.btn),.band-red a:not(.btn){color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* Two column: copy beside a picture */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.split-rev{direction:rtl}
.split-rev > *{direction:ltr}
.shot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-3);background:var(--green-deep);
}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.copy > * + *{margin-top:20px}

/* ============================================================
   COVERAGE: postcode checker + district pills
   ============================================================ */
.cover-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:clamp(26px,3.6vw,46px);
  max-width:860px;margin-inline:auto;
}
.pcform{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.pcform label{
  flex:1 1 100%;font-size:13px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px;
}
.pcform input{
  flex:1 1 220px;min-height:56px;padding:0 20px;border-radius:var(--r-pill);
  border:2px solid var(--line);background:var(--white);color:var(--ink);
  font:inherit;font-size:17px;font-weight:700;text-transform:uppercase;
  outline:none;transition:border-color .2s;
}
.pcform input:focus{border-color:var(--green)}
.pcform input::placeholder{font-weight:500;text-transform:none;color:var(--ink-dim)}
.pcresult{
  margin:18px 0 0;padding:16px 22px;border-radius:var(--r);
  font-size:16px;font-weight:700;line-height:1.5;display:none;
}
.pcresult.show{display:block}
.pcresult.yes{background:rgba(34,73,50,.10);color:var(--green);border:1px solid rgba(34,73,50,.28)}
.pcresult.no{background:rgba(197,36,36,.08);color:var(--red);border:1px solid rgba(197,36,36,.26)}
.pcresult.huh{background:rgba(18,26,21,.05);color:var(--ink-soft);border:1px solid var(--line)}

.districts{
  display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;justify-content:center;
}
.districts li{
  padding:8px 17px;border-radius:var(--r-pill);
  background:var(--green-soft);border:1px solid rgba(34,73,50,.18);
  font-size:14px;font-weight:800;letter-spacing:.03em;color:var(--green);
  transition:background-color .2s,color .2s,transform .2s var(--ease);
}
.districts li.hit{background:var(--green);color:var(--white);transform:translateY(-2px) scale(1.06)}

/* ============================================================
   PROCESS BAND
   ============================================================ */
.band-red .fb{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);color:var(--white);
  transition:background-color .2s,transform .2s var(--ease);
}
.band-red .fb:hover{background:var(--white);color:var(--red);transform:translateY(-2px)}
.band-red .fb svg{width:26px;height:26px}

/* Numbered steps, the interactive version of the process copy */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);margin-top:clamp(32px,4vw,52px)}
.step{
  background:var(--dark-card);border:1px solid var(--dark-line);
  border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);
  transition:background-color .25s,transform .25s var(--ease),border-color .25s;
}
.step:hover{background:rgba(255,255,255,.10);transform:translateY(-4px);border-color:rgba(255,255,255,.30)}
.step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:var(--r-pill);
  background:var(--gold);color:var(--green-deep);
  font-size:19px;font-weight:900;margin-bottom:18px;
}
.step h3{margin-bottom:10px}
.step p{font-size:15.5px;line-height:1.62}

/* ============================================================
   GUIDELINES (The Process page)
   ============================================================ */
.guides{counter-reset:g;margin-top:clamp(26px,3.4vw,40px);display:grid;gap:14px}
.guide{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-left:5px solid var(--red);border-radius:var(--r);
  padding:22px 26px 22px 62px;box-shadow:var(--shadow-1);
  transition:box-shadow .25s,transform .25s var(--ease);
}
.guide:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.guide::before{
  counter-increment:g;content:counter(g);
  position:absolute;left:20px;top:22px;
  width:28px;height:28px;border-radius:var(--r-pill);
  background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;
}
/* Joel asked for every guideline point in bold. The weight lives here, not in a
   <strong> inside the copy, so a client editing the text cannot lose it. */
.guide p{font-weight:700;line-height:1.62}

.panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:clamp(28px,4vw,56px);
}
.panel > * + *{margin-top:20px}
.callout{
  background:rgba(255,199,44,.14);border:1px solid rgba(255,199,44,.5);
  border-radius:var(--r);padding:20px 24px;font-weight:700;line-height:1.6;
}
.signoff{margin-top:26px;font-weight:800;color:var(--green)}

/* ============================================================
   STORY PHOTO ROWS (About Us)
   ============================================================ */
.yearcap{
  margin:clamp(34px,4.4vw,52px) 0 18px;
  font-size:clamp(19px,2.2vw,26px);font-weight:900;color:var(--green);
}
.photos{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.photos.three{grid-template-columns:repeat(3,1fr)}
.photos figure{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1);background:var(--green-soft)}
.photos img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .5s var(--ease)}
.photos figure:hover img{transform:scale(1.05)}

/* The raised figure, counted up on first view. */
.raised{
  font-size:clamp(38px,6vw,76px);font-weight:900;letter-spacing:-.03em;
  color:var(--red);line-height:1;display:block;
}
.raised-sub{margin-top:10px;font-size:16px;font-weight:700;color:var(--ink-soft)}

/* ============================================================
   SPONSORS
   ============================================================ */
.sponsors{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,30px);
  align-items:center;margin-top:clamp(30px,4vw,48px);
}
.sponsors a,.sponsors span.sp{
  display:flex;align-items:center;justify-content:center;
  padding:18px;border-radius:var(--r);background:var(--white);
  border:1px solid var(--line-soft);min-height:108px;
  transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);
}
.sponsors a:hover{border-color:var(--line);box-shadow:var(--shadow-1);transform:translateY(-3px)}
.sponsors img{
  max-height:66px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.68;transition:filter .3s,opacity .3s;
}
.sponsors a:hover img{filter:none;opacity:1}

/* ============================================================
   SHEFFIELD CHILDREN'S HOSPITAL CHARITY BAND
   ============================================================ */
.schc{
  position:relative;isolation:isolate;overflow:hidden;color:var(--white);
  background:
    radial-gradient(1100px 520px at 18% 12%, rgba(255,199,44,.16), transparent 62%),
    radial-gradient(900px 460px at 82% 86%, rgba(255,188,125,.14), transparent 60%),
    linear-gradient(180deg,#0E2A4A 0%,#0A1E38 100%);
  padding:clamp(56px,7.5vw,100px) 0;
}
/* Starfield, drawn in CSS so there is no extra image request. */
.schc::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 62%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 46% 26%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 63% 71%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 77% 34%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 78%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 36% 88%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 57% 12%, #fff, transparent);
}
.js .schc::before{animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.32}to{opacity:.62}}
.schc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:center}
.schc-art{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:16px}
.schc-art img.sleigh{max-width:min(340px,80%);height:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.42))}
.js .schc-art img.sleigh{animation:bob 6.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.schc-wordmark{max-width:min(420px,100%);height:auto;margin-bottom:22px}
.schc-logo{max-width:220px;height:auto;margin-top:26px}
.schc p{color:rgba(255,255,255,.80)}
.schc p + p{margin-top:16px}
.schc .btn{margin-top:28px}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.phero{
  position:relative;isolation:isolate;overflow:hidden;color:var(--white);
  background:var(--green-deep);
  padding:clamp(54px,7vw,96px) 0;text-align:center;
}
.phero-bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.phero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(23,51,34,.74),rgba(23,51,34,.88))}
.phero-in{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.phero h1{text-shadow:0 2px 24px rgba(0,0,0,.4)}
.phero p{margin:18px auto 0;max-width:62ch;color:var(--on-dark);font-size:clamp(16px,1.5vw,19px)}
.crumbs{
  display:flex;justify-content:center;gap:10px;margin:0 0 18px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:rgba(255,255,255,.35)}

/* ============================================================
   LEAD FORM
   The engine prints its own <style> AFTER this sheet, so every override here
   is written one step more specific than the engine's own selector
   (.formwrap.ccform ... beats .ccform ...). Changing these to .ccform alone
   silently loses to the engine's own defaults.
   ============================================================ */
.formband{background:var(--white)}
.formcard{
  max-width:900px;margin-inline:auto;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:clamp(26px,4vw,52px);
}
.formwrap.ccform{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.formwrap.ccform .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.formwrap.ccform .field.full{grid-column:1 / -1}
.formwrap.ccform label{
  font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-dim);
}
.formwrap.ccform input.inp,.formwrap.ccform textarea.inp{
  width:100%;height:56px;border:2px solid var(--line);border-radius:var(--r);
  background:var(--white);color:var(--ink);font:inherit;font-size:16.5px;
  padding:0 18px;transition:border-color .22s,box-shadow .22s;
}
.formwrap.ccform textarea.inp.area{height:140px;padding:16px 18px;line-height:1.6}
.formwrap.ccform input.inp:focus,.formwrap.ccform textarea.inp:focus{
  border-color:var(--green);box-shadow:0 0 0 4px rgba(34,73,50,.10);
}
.formwrap.ccform input.inp::placeholder,.formwrap.ccform textarea.inp::placeholder{color:var(--ink-dim)}
.formwrap.ccform .pills{display:flex;flex-wrap:wrap;gap:10px}
.formwrap.ccform .pill{
  padding:12px 20px;border-radius:var(--r-pill);
  border:2px solid var(--line);background:var(--white);color:var(--ink-soft);
  font-size:15px;font-weight:700;line-height:1;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.formwrap.ccform .pill:hover{border-color:rgba(34,73,50,.35);color:var(--green)}
.formwrap.ccform .pill.on{background:var(--green);border-color:var(--green);color:var(--white)}
.formwrap.ccform button.btn{min-height:60px;font-size:17px}
.ccform-msg{
  max-width:900px;margin:18px auto 0;border-radius:var(--r);
  font-size:16px;font-weight:700;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--green-deep);color:var(--white);padding:clamp(40px,5vw,64px) 0 clamp(26px,3vw,36px)}
.ftr-in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
}
.ftr img.flogo{height:84px;width:auto}
.ftr .fb-round{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:var(--r-pill);
  border:1px solid var(--dark-line);color:var(--white);
  transition:background-color .22s,color .22s,transform .22s var(--ease);
}
.ftr .fb-round:hover{background:var(--white);color:var(--green-deep);transform:translateY(-2px)}
.ftr .fb-round svg{width:24px;height:24px}
.ftr-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:15px;font-weight:700}
.ftr-links a{color:var(--on-dark)}
.ftr-links a:hover{color:var(--gold)}
.ftr-base{
  width:100%;margin-top:8px;padding-top:22px;border-top:1px solid var(--dark-line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  font-size:13.5px;color:var(--on-dark-dim);
}
.ftr-base a:hover{color:var(--gold)}

/* ============================================================
   MOTION (part of the design, not decoration bolted on)
   Gated on .js so no-JS visitors never meet a hidden section, and force
   revealed under html.static so the client can see and click everything in
   the locked editor.
   ============================================================ */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.08s}
.js .rv-d2{transition-delay:.16s}
.js .rv-d3{transition-delay:.24s}
.js .rv-d4{transition-delay:.32s}

html.static .rv,
html.static .rv-d1,
html.static .rv-d2,
html.static .rv-d3,
html.static .rv-d4{opacity:1 !important;transform:none !important;transition:none !important}
html.static .snow{opacity:1 !important}
html.static .snow i{animation:none !important}
html.static .schc::before{animation:none !important}
html.static .schc-art img.sleigh{animation:none !important}
html.static .hdr{position:static !important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .snow i,.schc::before,.schc-art img.sleigh{animation:none !important}
  .btn:hover,.step:hover,.guide:hover,.photos figure:hover img,.sponsors a:hover{transform:none}
}

/* ============================================================
   WIDE SCREENS (house standard, mandatory)
   Above 1920 the engine widens a plain .wrap on its own. Every container
   below caps its own width at higher specificity, so the engine rule cannot
   reach it. Each one widens here, keeping the relationship it has at 1440.
   ============================================================ */
@media (min-width:1921px){
  .hdr-in,
  .hero-in,
  .phero-in,
  .ftr-in{max-width:min(1800px,82vw)}

  /* Reading measures stay narrow on purpose: long lines are harder to read,
     so the frame widens and the text does not. */
  .cover-card{max-width:1040px}
  .formcard,.ccform-msg{max-width:1100px}
  .sponsors{gap:40px}
  .steps{gap:34px}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .steps{grid-template-columns:1fr 1fr}
  .sponsors{grid-template-columns:repeat(3,1fr)}
  .schc-grid{grid-template-columns:1fr;text-align:center}
  .schc-art{order:-1}
  .schc .measure{margin-inline:auto}
}
@media (max-width:900px){
  .nav,.hdr-end .icon-link{display:none}
  .burger{display:inline-flex}
  .hdr-in{gap:12px;justify-content:space-between}
  .brand img{height:46px}
  .split{grid-template-columns:1fr;gap:30px}
  .split-rev{direction:ltr}
  .photos{grid-template-columns:repeat(2,1fr)}
  .photos.three{grid-template-columns:repeat(2,1fr)}
  .formwrap.ccform{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .steps{grid-template-columns:1fr}
  .sponsors{grid-template-columns:repeat(2,1fr)}
  .guide{padding:20px 20px 20px 56px}
  .guide::before{left:16px;top:20px}
  .btn{width:100%;padding:0 22px}
  .hdr-end .basket{padding:10px 14px}
  .pcform input{flex:1 1 100%}
  .pcform .btn{width:100%}
}

/* ============================================================
   PRIVACY POLICY
   Stacked panels. The body here is reading copy, so it keeps a
   narrow measure and normal weight, unlike the .guide cards on
   The Process page.
   ============================================================ */
.policy{display:grid;gap:18px;margin-top:clamp(26px,3.4vw,40px)}
.policy .panel{padding:clamp(24px,3vw,44px)}
.policy h2{font-size:clamp(21px,2.1vw,27px);margin-bottom:4px}
.policy p,.policy li{font-size:16px;line-height:1.72;max-width:72ch}
.policy ul{margin-top:14px;padding-left:22px;list-style:disc}
.policy li + li{margin-top:8px}
.policy a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.policy a:hover{color:var(--red)}
.policy .updated{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* ============================================================
   FORMAT-BAR HIGHLIGHTS
   The three colours the locked editor offers on selected text.
   Declared in brief.json "highlights"; these are the classes it writes.
   ============================================================ */
.hl{color:var(--red)}
.hl.hl-green{color:var(--green)}
.hl.hl-gold{color:var(--gold)}
.on-dark .hl,.band-green .hl,.band-red .hl,.schc .hl{color:var(--gold)}
.on-dark .hl.hl-green,.band-green .hl.hl-green,.band-red .hl.hl-green,.schc .hl.hl-green{color:var(--peach)}
.on-dark .hl.hl-gold,.band-green .hl.hl-gold,.band-red .hl.hl-gold,.schc .hl.hl-gold{color:var(--gold)}