/* ===========================================================
   Awesome Riding — shared stylesheet
   Design language: a sunlit training range. Concrete lot surface,
   painted lane markings, highway-signage type (Barlow, drawn from
   California road signage), traffic-cone orange for the advanced
   course, and the existing brand blue carried forward from the logo.
   =========================================================== */

:root{
  --concrete:      #E4E2DC;
  --concrete-deep: #D3D0C8;
  --concrete-soft: #EFEDE8;
  --ink:           #17191C;
  --ink-soft:      #43484F;
  --ink-faint:     #6E747C;
  --blue:          #0B3F8F;
  --blue-bright:   #1B5BC4;
  --blue-deep:     #082B61;
  --paint:         #F2B705;
  --cone:          #DD5B22;
  --line:          #C6C2B8;
  --white:         #FFFFFF;

  --wrap: 1140px;
  --r: 3px;

  --shadow: 0 1px 0 rgba(23,25,28,.08), 0 12px 28px -18px rgba(23,25,28,.55);
}

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

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

body{
  margin:0;
  background:var(--concrete);
  color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
a{color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px}

h1,h2,h3,h4{
  font-family:"Barlow Condensed","Barlow",sans-serif;
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.005em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.9rem,7.4vw,5.3rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.4rem,2.3vw,1.85rem)}
p{margin:0 0 1rem}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.narrow{max-width:760px}

/* ---------- painted lane divider: the signature device ---------- */
.range-rule{
  height:16px;
  background:
    repeating-linear-gradient(90deg,
      var(--paint) 0 46px,
      transparent 46px 92px);
  background-color:var(--ink);
  border-block:1px solid var(--ink);
}
.range-rule--thin{height:10px}

/* ---------- announcement + header ---------- */
.notice{
  background:var(--ink);
  color:var(--concrete-soft);
  font-size:.82rem;
  letter-spacing:.02em;
}
.notice .wrap{
  display:flex; gap:10px 26px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  padding-block:9px;
}
.notice a{color:var(--paint); text-decoration:none; font-weight:600}
.notice a:hover{text-decoration:underline}
.notice .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--paint); display:inline-block; margin-right:8px;
  vertical-align:1px;
}

.masthead{
  position:sticky; top:0; z-index:60;
  background:rgba(239,237,232,.94);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{
  display:flex; align-items:center; gap:18px;
  min-height:74px; padding-block:10px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:0 0 auto}
.brand img{height:46px; width:auto; border-radius:2px}
.brand b{
  font-family:"Barlow Condensed",sans-serif; font-size:1.5rem;
  line-height:.94; letter-spacing:.01em; display:block;
}
.brand span{display:block; font-size:.72rem; color:var(--ink-faint); letter-spacing:.06em}

.nav{margin-left:auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a{
  color:var(--ink-soft); text-decoration:none; font-weight:500;
  font-size:.95rem; padding:9px 11px; border-radius:var(--r);
}
.nav a:not(.btn):hover{color:var(--ink); background:var(--concrete-deep)}
.nav a[aria-current="page"]:not(.btn){color:var(--ink); box-shadow:inset 0 -2px 0 var(--paint)}

/* the Enroll button lives inside .nav, so it needs to outrank `.nav a` */
.nav a.btn{color:#fff; padding:9px 18px}
.nav a.btn--primary{background:var(--blue); color:#fff}
.nav a.btn--primary:hover{background:var(--blue-deep); color:#fff}

.phone-link{
  font-family:"Barlow Condensed",sans-serif;
  font-size:1.28rem; font-weight:700; color:var(--ink);
  text-decoration:none; white-space:nowrap; padding-inline:8px;
}
.phone-link:hover{color:var(--blue)}

.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:var(--r); padding:9px 12px; font:inherit; font-weight:600; cursor:pointer;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:1.16rem; font-weight:700; letter-spacing:.015em;
  padding:13px 24px; border-radius:var(--r);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-deep)}
.btn--cone{background:var(--cone); color:#fff}
.btn--cone:hover{background:#BE4715}
.btn--paint{background:var(--paint); color:var(--ink)}
.btn--paint:hover{background:#D9A303}
.btn--ghost{border-color:currentColor; color:var(--ink); background:transparent}
.btn--ghost:hover{background:var(--ink); color:var(--concrete-soft); border-color:var(--ink)}
.btn--on-dark{border-color:rgba(255,255,255,.55); color:#fff}
.btn--on-dark:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn--sm{padding:9px 16px; font-size:1rem}
.btn--wide{width:100%}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--blue-bright); outline-offset:2px; border-radius:2px;
}

/* ---------- hero ---------- */
.hero{position:relative; background:transparent; color:#fff; overflow:hidden}
.hero__img{
  position:absolute; inset:0;
  background-size:cover; background-position:center 42%;
  opacity:1; filter:none; mix-blend-mode:normal;
}
/* The hero is the untouched photo with text directly over it. */
.hero::before,.hero::after,.hero__img::before,.hero__img::after{content:none; display:none}
.hero__text-legibility{}
.hero .wrap{
  position:relative; z-index:2; display:flex;
  min-height:clamp(640px,58vw,720px); padding-block:clamp(32px,4vw,48px);
}
.hero__inner{width:100%; max-width:none; display:flex; flex-direction:column; flex:1}
.hero h1{
  position:relative; top:clamp(-24px,-2vw,-12px);
  color:#fff; max-width:100%;
  font-size:clamp(2.2rem,4.4vw,3.55rem);
  white-space:nowrap; text-wrap:nowrap; letter-spacing:-.015em;
}
.hero h1,
.hero__lede,
.hero__trust{
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 2px 5px rgba(0,0,0,.85);
}
.hero__kicker{
  display:inline-block; font-family:"Barlow Condensed",sans-serif;
  font-size:1.05rem; font-weight:600; color:#fff;
  background:none; padding:0; border-radius:0;
  margin-bottom:20px; letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 5px rgba(0,0,0,.85);
}
.hero__lede{
  font-size:clamp(1.08rem,1.9vw,1.32rem); color:#fff;
  max-width:64ch; margin:auto auto 0; text-align:center;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}
.hero__trust{
  display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center;
  margin-top:38px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.45);
  font-size:.93rem; color:#fff;
}
.hero__trust b{color:#fff; font-weight:600}
.hero-support{background:var(--ink); color:#fff; padding:24px 0 28px}
.hero-support__inner{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px 32px}
.hero-support .hero__trust{
  margin:0; padding:0 0 0 32px;
  border-top:0; border-left:1px solid rgba(255,255,255,.32);
  text-shadow:none;
}

@media (prefers-reduced-motion: no-preference){
  .hero__inner > *{animation:rise .6s cubic-bezier(.2,.7,.3,1) backwards}
  .hero__inner > *:nth-child(1){animation-delay:.04s}
  .hero__inner > *:nth-child(2){animation-delay:.11s}
  .hero__inner > *:nth-child(3){animation-delay:.18s}
  .hero__inner > *:nth-child(4){animation-delay:.25s}
  .hero__inner > *:nth-child(5){animation-delay:.32s}
}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ---------- page banner (interior pages) ---------- */
.pagehead{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.pagehead .wrap{position:relative; z-index:2; padding-block:clamp(42px,6vw,70px)}
.pagehead h1{color:#fff; font-size:clamp(2.4rem,5.4vw,3.9rem)}
.pagehead p{color:#C6CCD5; max-width:60ch; margin:14px 0 0; font-size:1.06rem}
.pagehead__img{position:absolute; inset:0; background-size:cover; background-position:center 40%; opacity:.28}
.pagehead::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(8,17,32,.94),rgba(8,17,32,.6))}

/* ---------- sections ---------- */
.section{padding-block:clamp(52px,7vw,86px)}
.section--dark{background:var(--ink); color:#E6E9ED}
.section--dark h2,.section--dark h3{color:#fff}
.section--soft{background:var(--concrete-soft)}
.section__head{max-width:66ch; margin-bottom:38px}
/* wider heading block: lets a multi-line h2 keep its own line breaks */
.section__head--wide{max-width:960px}
.section__head--wide h2{line-height:1.08}
.section__head--wide p{max-width:66ch}
.section__head p{color:var(--ink-soft); font-size:1.06rem; margin-top:12px}
.section--dark .section__head p{color:#B9C0C9}

/* ---------- the two lanes (course chooser) ---------- */
.lanes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:24px}
.lane{
  background:var(--white); border:1px solid var(--line);
  border-top:6px solid var(--blue);
  border-radius:var(--r); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:var(--shadow);
}
.lane--adv{border-top-color:var(--cone)}
.lane__photo{aspect-ratio:16/9; object-fit:cover; width:100%; background:var(--concrete-deep)}

/* rotating course-card photos */
.lane__media{
  position:relative; width:min(calc(100% - 12px),520px); aspect-ratio:4/3;
  flex:0 0 auto; margin:6px auto 0; overflow:hidden;
  border-radius:3px; background:var(--concrete-deep);
}
.lane__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .55s ease;
}
.lane__media img.is-on{opacity:1}
.lane__dots{
  position:absolute; left:0; right:0; bottom:9px; z-index:2;
  display:flex; justify-content:center; gap:6px;
}
.lane__dots i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.45); box-shadow:0 0 3px rgba(0,0,0,.6);
  transition:background .3s ease;
}
.lane__dots i.is-on{background:#fff}
@media (prefers-reduced-motion: reduce){
  .lane__media img{transition:none}
  .lane__dots{display:none}
}
.lane__body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.lane__tag{
  font-size:.82rem; font-weight:700; color:var(--blue);
  letter-spacing:.05em; margin-bottom:8px;
}
.lane--adv .lane__tag{color:var(--cone)}
.lane h3{margin-bottom:6px}
.lane__who{color:var(--ink-soft); font-size:1rem; margin:0 0 18px}
.lane ul{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:11px}
.lane li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:.99rem; line-height:1.45}
.lane li svg{width:17px; height:17px; margin-top:4px; color:var(--blue)}
.lane--adv li svg{color:var(--cone)}
.lane__price{
  margin-top:auto; padding-top:18px; border-top:1px dashed var(--line);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:18px;
}
.lane__price b{font-family:"Barlow Condensed",sans-serif; font-size:2rem; line-height:1}
.lane__price span{color:var(--ink-faint); font-size:.9rem}
.lane__links{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:.92rem}

/* ---------- steps (a genuine sequence) ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); background:var(--white); border-radius:var(--r); overflow:hidden}
.step{padding:30px 26px 32px; border-right:1px solid var(--line); position:relative}
.step:last-child{border-right:0}
.step__n{
  font-family:"Barlow Condensed",sans-serif; font-size:3.1rem; line-height:.8;
  color:var(--concrete-deep); font-weight:700; display:block; margin-bottom:14px;
}
.step h3{font-size:1.32rem; margin-bottom:8px}
.step p{color:var(--ink-soft); font-size:.99rem; margin:0}

/* ---------- facts strip ---------- */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.fact b{
  display:block; font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(2.3rem,4vw,3.1rem); line-height:1; color:var(--paint);
}
.fact span{display:block; margin-top:9px; color:#B9C0C9; font-size:.98rem; line-height:1.4}

/* ---------- generic card grid ---------- */
.grid{display:grid; gap:22px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:24px;
}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}

/* ---------- fleet ---------- */
.fleet{
  list-style:none; margin:0; padding:0;
  columns:3; column-gap:38px; max-width:720px;
}
.fleet li{
  break-inside:avoid; padding:11px 0;
  border-bottom:1px solid #2E3238;
  font-size:1.05rem; color:#fff; font-weight:500;
}
.fleet li span{display:block; font-size:.86rem; color:#98A0AA; font-weight:400; margin-top:2px}
@media (max-width:820px){ .fleet{columns:2; column-gap:26px} }
@media (max-width:480px){ .fleet{columns:1} }

/* photo row under the fleet list */
.fleetshots{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin-top:30px; max-width:880px;
}
.fleetshots figure{margin:0}
.fleetshots img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  display:block; background:var(--concrete-deep);
}
.fleetshots figcaption{
  font-size:.85rem; color:#98A0AA; margin-top:8px; line-height:1.4;
  padding-right:14px;
}
/* stacked on phones */
@media (max-width:700px){
  .fleetshots{grid-template-columns:1fr; max-width:420px}
  .fleetshots figcaption{margin-bottom:18px; padding-right:0}
}

/* ---------- video ---------- */
.videos{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.video{background:#000; border-radius:var(--r); overflow:hidden}
.video iframe{width:100%; aspect-ratio:16/9; border:0; display:block}
.video figcaption{padding:13px 16px; font-size:.96rem; color:#C6CCD5; background:#101215}

/* ---------- reviews ---------- */
.featured-reviews{display:grid; gap:28px; margin-bottom:54px}
.featured-review{
  background:linear-gradient(135deg,#fff 0%,#fff 72%,#f5f8fc 100%);
  border:1px solid var(--line); border-left:8px solid var(--paint); border-radius:var(--r);
  padding:clamp(28px,4vw,44px); box-shadow:0 16px 38px rgba(8,17,32,.09);
}
.featured-review__eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  color:var(--paint-dark); font-family:"Barlow Condensed",sans-serif;
  font-size:.92rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.featured-review__eyebrow::before{content:""; width:24px; height:3px; background:var(--paint)}
.featured-review h2{font-size:clamp(1.7rem,3vw,2.25rem); margin-bottom:14px}
.featured-review__copy{max-width:100ch}
.featured-review__copy p{color:var(--ink-soft); font-size:1.03rem; margin-bottom:13px}
.featured-review__list{margin:0 0 15px 1.25rem; color:var(--ink-soft)}
.featured-review__list li{margin-bottom:7px; padding-left:4px}
.featured-review cite{
  display:block; margin-top:22px; padding-top:15px; border-top:1px solid var(--line);
  color:var(--ink-faint); font-size:.9rem; font-style:normal; font-weight:600;
}
.reviews-grid-title{margin-bottom:22px}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.quote{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 24px 22px; display:flex; flex-direction:column;
}
.quote h3{font-size:1.2rem; margin-bottom:10px}
.quote p{font-size:1rem; color:var(--ink-soft); margin-bottom:16px}
.quote cite{
  margin-top:auto; font-style:normal; font-size:.86rem; color:var(--ink-faint);
  padding-top:12px; border-top:1px solid var(--line);
}
.stars{color:var(--paint); font-size:.95rem; letter-spacing:2px; margin-bottom:10px}

/* ---------- locations ---------- */
.loc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.loc img{aspect-ratio:2/1; object-fit:cover; width:100%}
.loc__body{padding:24px; display:flex; flex-direction:column; flex:1}
.loc__body h3{margin-bottom:6px}
.loc address{font-style:normal; color:var(--ink-soft); margin-bottom:16px; line-height:1.55}
.loc__actions{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; padding-top:6px}

/* ---------- enroll picker ---------- */
.picker{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.pick{
  display:block; background:var(--white); border:1px solid var(--line);
  border-left:6px solid var(--blue); border-radius:var(--r);
  padding:24px; text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.pick:hover{border-color:var(--blue); transform:translateY(-2px)}
.pick--adv{border-left-color:var(--cone)}
.pick--adv:hover{border-color:var(--cone)}
.pick b{display:block; font-family:"Barlow Condensed",sans-serif; font-size:1.6rem; line-height:1.05}
.pick span{display:block; color:var(--ink-soft); font-size:.97rem; margin-top:7px}
.pick em{display:block; font-style:normal; margin-top:14px; font-weight:600; color:var(--blue)}
.pick--adv em{color:var(--cone)}

/* ---------- FAQ page switcher ---------- */
.faqtabs{background:var(--concrete-soft); border-bottom:1px solid var(--line)}
.faqtabs .wrap{display:flex; flex-wrap:wrap; gap:0; padding-inline:22px}
.faqtabs a{
  display:block; padding:17px 26px 15px; text-decoration:none;
  color:var(--ink-soft); border-bottom:3px solid transparent;
  border-right:1px solid var(--line);
}
.faqtabs a:first-child{border-left:1px solid var(--line)}
.faqtabs a:hover{background:var(--white); color:var(--ink)}
.faqtabs b{
  display:block; font-family:"Barlow Condensed",sans-serif;
  font-size:1.3rem; font-weight:700; line-height:1.1;
}
.faqtabs span{display:block; font-size:.87rem; margin-top:2px}
.faqtabs a[aria-current="page"]{
  background:var(--white); color:var(--ink); border-bottom-color:var(--blue);
}
.faqtabs a.is-adv[aria-current="page"]{border-bottom-color:var(--cone)}
@media (max-width:640px){
  .faqtabs .wrap{display:grid; grid-template-columns:1fr 1fr; padding-inline:0}
  .faqtabs a{padding:14px 16px 12px; border-right:0; border-left:0 !important; text-align:center}
  .faqtabs b{font-size:1.12rem}
  .faqtabs span{font-size:.79rem}
}

/* ---------- FAQ accordions ---------- */
.faq{border-top:1px solid var(--line); max-width:860px}
.faq details{border-bottom:1px solid var(--line); background:var(--white)}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 52px 19px 22px;
  font-family:"Barlow Condensed",sans-serif; font-size:1.32rem; font-weight:600;
  position:relative; line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-size:1.6rem; color:var(--blue); font-weight:400; line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{background:var(--concrete-soft)}
.faq__a{padding:4px 22px 24px; color:var(--ink-soft)}
.faq__a p:last-child{margin-bottom:0}
.faq__a ul{margin:0; padding-left:20px}
.faq__a li{margin-bottom:7px}

/* ---------- checklist ---------- */
.bring{
  background:var(--white); border:1px solid var(--line);
  border-left:6px solid var(--paint); border-radius:var(--r); padding:26px;
}
.bring ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.bring li{display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start}
.bring li::before{
  content:""; width:15px; height:15px; margin-top:5px;
  border:2px solid var(--ink-faint); border-radius:2px;
}
.bring .warn{
  margin-top:20px; padding-top:18px; border-top:1px dashed var(--line);
  font-size:.97rem; color:var(--ink-soft);
}

/* ---------- terms ---------- */
.legal{max-width:74ch}
.legal h2{font-size:1.7rem; margin:34px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink-soft)}
.legal ul{color:var(--ink-soft); padding-left:20px}
.legal li{margin-bottom:9px}
.legal .callout{
  background:var(--white); border:1px solid var(--line);
  border-left:6px solid var(--cone); padding:20px 22px; border-radius:var(--r);
  margin-bottom:26px; color:var(--ink);
}
.legal .callout p:last-child{margin-bottom:0}

/* ---------- shop ---------- */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.product{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.product__ph{
  aspect-ratio:1; background:var(--concrete-deep);
  display:grid; place-items:center; color:var(--ink-faint); font-size:.9rem; text-align:center; padding:20px;
}
.product__body{padding:20px; display:flex; flex-direction:column; flex:1}
.product__body h3{font-size:1.25rem; margin-bottom:6px}
.product__price{font-family:"Barlow Condensed",sans-serif; font-size:1.6rem; margin:8px 0 16px}
.product .btn{margin-top:auto}

/* ---------- contact / form ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.field{margin-bottom:16px}
.field label{display:block; font-weight:600; font-size:.94rem; margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; padding:12px 13px; font:inherit; font-size:1rem;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); color:var(--ink);
}
.field textarea{min-height:130px; resize:vertical}
.contact-list{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:16px}
.contact-list b{display:block; font-size:.86rem; color:var(--ink-faint); font-weight:600; margin-bottom:2px}
.contact-list a{font-family:"Barlow Condensed",sans-serif; font-size:1.5rem; font-weight:700; text-decoration:none; color:var(--ink)}
.contact-list a:hover{color:var(--blue)}

/* ---------- final CTA ---------- */
.finalcta{background:var(--blue); color:#fff; text-align:center}
.finalcta h2{color:#fff; margin-bottom:14px}
.finalcta p{color:#D3DEF2; max-width:56ch; margin:0 auto 26px; font-size:1.08rem}
.finalcta .btn{margin-inline:6px}

/* ---------- footer ---------- */
.footer{background:var(--ink); color:#9AA2AC; padding-block:52px 34px; font-size:.94rem}
.footer a{color:#C6CCD5; text-decoration:none}
.footer a:hover{color:#fff; text-decoration:underline}
.footer__cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:34px; margin-bottom:34px}
.footer h4{font-size:1.15rem; color:#fff; margin-bottom:14px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.footer__brand img{height:52px; border-radius:2px; margin-bottom:14px}
.footer__bar{
  border-top:1px solid #2C3036; padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.87rem;
}
.footer__bar ul{display:flex; gap:20px}
.footer__badges{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px}
.msf-badge{background:#fff; padding:8px; border-radius:2px; display:inline-block}
.msf-badge img{height:44px}

/* ---------- sticky mobile call bar ---------- */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--ink); border-top:2px solid var(--paint);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:9px;
}
.callbar .btn{flex:1; font-size:1.05rem; padding:12px 10px}

/* ---------- utilities ---------- */
.muted{color:var(--ink-faint)}
.center{text-align:center}
.mt-l{margin-top:34px}
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--paint); color:var(--ink); padding:12px 18px; border-radius:var(--r); font-weight:700}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:940px){
  .lanes,.videos,.contact-grid,.grid--2,.grid--3,.quotes,.products,.picker{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:0; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .facts{grid-template-columns:1fr 1fr; gap:22px}
  .footer__cols{grid-template-columns:1fr 1fr}
}

@media (max-width:700px){
  .hero .wrap{min-height:620px; padding-block:32px}
  .hero h1{font-size:clamp(2.5rem,12vw,3.4rem); white-space:normal; text-wrap:balance}
  .hero-support__inner{grid-template-columns:1fr}
  .hero-support .hero__trust{
    padding:22px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.32);
  }
}

@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--concrete-soft); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:10px 16px 18px; gap:2px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 8px; font-size:1.06rem; border-bottom:1px solid var(--line)}
  .nav a.btn{margin-top:14px; padding:14px 18px; font-size:1.14rem; text-align:center; justify-content:center}
  .masthead .wrap{position:relative; flex-wrap:wrap}
  .phone-link{margin-left:auto}
  .callbar{display:flex}
  body{padding-bottom:74px}
  .notice .wrap{justify-content:center; text-align:center}
}

@media (max-width:560px){
  .facts{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr}
  .brand span{display:none}
  .hero__cta .btn{width:100%}
}

@media print{
  .masthead,.notice,.callbar,.finalcta{display:none}
  body{background:#fff}
}


/* OPTIONAL: put the hero text in a contained panel instead of relying on
   text shadows. Photo stays completely untouched outside the panel.
   Turn on by adding class="hero__inner hero--panel" in index.html. */
.hero--panel{
  background:rgba(0,0,0,.62);
  padding:34px 38px 30px;
  border-radius:3px;
}
.hero--panel h1,
.hero--panel .hero__lede,
.hero--panel .hero__trust{text-shadow:none}
@media (max-width:600px){ .hero--panel{padding:24px 20px 22px} }