/* Flair Training – shared styles. Phone-first. */
:root{
  --navy:#0A2659;
  --navy-deep:#061A40;
  --red:#C11926;
  --red-dark:#9E1420;
  --white:#FFFFFF;
  --road:#EEF1F6;
  --line:#D5DBE6;
  --ink:#13203B;
  --muted:#4D5A73;
  --radius:10px;
  --font-display:'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body:'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --gutter:16px;
  --max:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;padding-bottom:72px}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 14px;z-index:50}
.skip:focus{left:8px;top:8px}

h1,h2,h3{font-family:var(--font-display);font-stretch:112%;line-height:1.08;margin:0;color:var(--navy)}
h1{font-size:clamp(28px,7.4vw,54px);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(25px,6.4vw,38px);font-weight:800}
h3{font-size:20px;font-weight:700;font-stretch:105%}
p{margin:0 0 1em}

/* Header */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand img{width:40px;height:auto}
.brand b{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:19px;letter-spacing:.12em;line-height:1}
.brand small{display:block;font-family:var(--font-display);font-stretch:112%;font-weight:600;color:var(--red);font-size:11.5px;letter-spacing:.24em;margin-top:3px}
.nav{display:none}
.nav a{font-weight:700;text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:6px}
.nav a:hover{background:var(--road)}
.header-call{display:none;font-weight:700;text-decoration:none;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;white-space:nowrap;font-size:15px}
.menu-btn{background:none;border:2px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-weight:700;color:var(--navy);cursor:pointer}
.header-actions{display:flex;gap:8px;align-items:center}
.mobile-nav{display:none;border-top:1px solid var(--line);background:#fff}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:14px var(--gutter);text-decoration:none;font-weight:700;color:var(--ink);border-bottom:1px solid var(--road)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:var(--radius);font-weight:700;font-size:17px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-line{border-color:var(--navy);color:var(--navy);background:#fff}
.btn-line:hover{background:var(--road)}

/* Hero */
.hero{padding:28px 0 0}
.hero-lede{font-size:18.5px;color:var(--muted);max-width:36em;margin:16px 0 22px}
.board{background:var(--navy);color:#fff;border-radius:14px;overflow:hidden;position:relative}
.board-head{padding:16px 18px 6px;font-family:var(--font-display);font-stretch:112%;font-weight:700;font-size:15px;color:#C9D3E8}
.board ul{list-style:none;margin:0;padding:0 8px 8px}
.board li a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:14px 10px;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.14)}
.board li:first-child a{border-top:0}
.board li a:hover{background:rgba(255,255,255,.06);border-radius:8px}
.route{font-weight:700;font-size:17px}
.route-sub{grid-column:1;font-size:14px;color:#C9D3E8}
.price{grid-row:1 / span 2;grid-column:2;font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:30px;letter-spacing:-.01em}
.board-foot{background:var(--navy-deep);padding:12px 18px;font-size:14.5px;color:#C9D3E8}
.board-foot a{color:#fff;font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.hero-actions .btn{flex:1 1 220px}
.hero .hero-actions{display:none}
.board{margin-top:4px}
.two-col > * + *{margin-top:26px}

/* Livery band – the one bold device, taken from the trailer graphics */
.livery{position:relative;margin-top:44px;padding:46px 0 50px;overflow:hidden;color:#fff;
  background:linear-gradient(118deg,var(--navy) 0 76%,#fff 76% 78.5%,var(--red) 78.5% 88%,#fff 88% 90%,var(--navy) 90%)}
.livery{clip-path:polygon(0 20px,100% 0,100% calc(100% - 20px),0 100%)}
.livery::before,.livery::after{content:"";position:absolute;left:0;right:0;height:30px;background:var(--red);z-index:2}
.livery::before{top:0;clip-path:polygon(0 20px,100% 0,100% 9px,0 29px)}
.livery::after{bottom:0;clip-path:polygon(0 21px,100% 1px,100% 10px,0 30px)}
.livery .wrap{position:relative;z-index:3}

/* Facts (inside the livery band) */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;max-width:80%}
.fact b{display:block;font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:26px;color:#fff;line-height:1.1}
.fact span{display:block;font-size:15px;line-height:1.35;color:#C9D3E8;margin-top:4px}
.fact a{color:#fff}

/* Sections */
.section{padding:52px 0 0}
.section-intro{color:var(--muted);max-width:38em;margin:12px 0 22px}
.tint{background:var(--road);margin-top:52px;padding:44px 0 48px}
.tint .section{padding-top:0}

/* Steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:0 0 22px 56px}
.steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.steps li::after{content:"";position:absolute;left:19px;top:42px;bottom:4px;width:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:4px}
.steps p{margin:0;color:var(--muted)}

/* Courses list */
.courses{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.courses li{border-bottom:1px solid var(--line)}
.courses a{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:16px 2px;text-decoration:none;color:var(--ink)}
.courses a:hover h3{text-decoration:underline}
.courses p{grid-column:1;margin:0;color:var(--muted);font-size:15.5px}
.courses .from{grid-row:1 / span 2;grid-column:2;align-self:center;text-align:right;font-weight:700;color:var(--navy);font-size:15px}
.courses .from strong{display:block;font-family:var(--font-display);font-stretch:118%;font-size:22px}

/* Retest cover */
.cover{display:grid;gap:12px}
.cover-option{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:18px}
.cover-option.best{border-color:var(--navy)}
.cover-option h3{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cover-option h3 span{font-stretch:118%;font-size:26px;color:var(--red)}
.cover-option p{margin:8px 0 0;color:var(--muted)}
.small{font-size:14.5px;color:var(--muted)}

/* Where */
.where{display:grid;gap:18px}
.where-list{list-style:none;padding:0;margin:0}
.where-list li{padding:12px 0;border-bottom:1px solid var(--line)}
.where-list b{color:var(--navy)}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:700;font-size:17.5px;color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:26px;font-weight:400;color:var(--red)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 16px;color:var(--muted);max-width:40em}

/* Closing CTA */
.closer{background:var(--navy);color:#fff;margin-top:56px;padding:40px 0;position:relative;overflow:hidden}
.closer::before{display:none;content:"";position:absolute;right:-60px;top:0;bottom:0;width:120px;background:var(--red);transform:skewX(-18deg);box-shadow:-34px 0 0 0 #fff}
.closer h2{color:#fff;max-width:13em}
.closer p{color:#C9D3E8;max-width:30em;margin:12px 0 20px}
.closer .wrap{position:relative;z-index:1}
.closer .btn-line{background:transparent;color:#fff;border-color:#fff}

/* Footer */
.site-footer{background:var(--navy-deep);color:#C9D3E8;padding:36px 0 28px;font-size:15px}
.site-footer a{color:#fff}
.footer-grid{display:grid;gap:24px}
.site-footer h3{color:#fff;font-size:16px;margin-bottom:8px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:6px 0}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:26px;padding-top:16px;font-size:13.5px}

/* Phone action bar */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr 1.3fr;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(10,38,89,.10);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px}
.action-bar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:8px;font-weight:700;text-decoration:none;font-size:15.5px}
.ab-call{background:var(--road);color:var(--navy)}
.ab-wa{background:var(--road);color:#11713A}
.ab-price{background:var(--red);color:#fff}
.action-bar svg{width:18px;height:18px;flex:none}

@media (min-width:760px){
  body{padding-bottom:0;font-size:18px}
  .action-bar{display:none}
  .nav{display:flex;gap:2px}
  .header-call{display:inline-block}
  .hero .hero-actions{display:flex}
  .two-col > * + *{margin-top:0}
  .closer::before{display:block}
  .board{margin-top:0}
  .menu-btn{display:inline-block}
  .hero{padding-top:56px}
  .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
  .hero-actions .btn{flex:0 0 auto}
  .facts{grid-template-columns:repeat(4,1fr);max-width:80%}
  .livery{padding:56px 0 60px}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .cover{grid-template-columns:1fr 1fr}
  .where{grid-template-columns:1.2fr 1fr;gap:48px}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Recent passes strip */
.passes-track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(16px, env(safe-area-inset-left, 0px));-webkit-overflow-scrolling:touch;padding-bottom:6px}
.passes-track ul{list-style:none;margin:0;display:flex;gap:12px;padding-block:0;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));width:max-content}
.passes-track li{scroll-snap-align:start;width:min(62vw,240px);flex:none}
.passes-track img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);background:var(--road)}
.passes-track span{display:block;margin-top:8px;color:var(--muted);font-size:15px}
.passes-track b{color:var(--ink)}
@media (min-width:760px){.passes-track ul{padding-left:max(16px, calc((100vw - var(--max))/2 + 16px))}.passes-track{scroll-padding-left:max(16px, calc((100vw - var(--max))/2 + 16px))}}
/* Inner pages */
.page-hero{padding-bottom:4px}
.page-hero .hero-lede{margin-bottom:0}
.nav a[aria-current="page"]{color:var(--red)}
/* Quote builder frame */
.qb-wrap{max-width:720px;margin:0 auto}
.qb-frame{display:block;width:100%;height:760px;border:0;background:#fff}
/* Price cards */
.price-cards{display:grid;gap:14px}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px}
.price-card header{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:start}
.price-card h3{grid-column:1}
.price-card header p{grid-column:1;margin:0;color:var(--muted);font-size:15px}
.price-card header strong{grid-column:2;grid-row:1 / span 2;font-family:var(--font-display);font-stretch:118%;font-size:28px;color:var(--navy);line-height:1}
.price-lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.price-lines li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--road);font-size:15.5px}
.price-lines li span:last-child{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-card .btn{align-self:flex-start;min-height:44px;font-size:16px}
.addon-list{list-style:none;margin:0;padding:0}
.addon-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.addon-list b{display:block;color:var(--navy);font-size:17.5px}
.addon-list span{display:block;color:var(--muted);margin-top:2px}
@media (min-width:760px){.price-cards{grid-template-columns:repeat(2,1fr)}}

/* Course pages */
.course-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:22px 0 4px}
.course-facts div{background:#fff;padding:12px 14px}
.course-facts b{display:block;font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:24px;color:var(--navy);line-height:1.1}
.course-facts span{display:block;font-size:14.5px;color:var(--muted);line-height:1.35;margin-top:3px}
.price-lines li.total{border-bottom:0;border-top:2px solid var(--navy);font-weight:700;color:var(--navy);font-size:17px}
@media (min-width:760px){.course-facts{grid-template-columns:repeat(4,1fr)}}

/* CPC-only form */
.cpc-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:grid;gap:14px}
.cpc-form fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.cpc-form legend{font-weight:700;color:var(--navy);margin-bottom:6px}
.cpc-choice label,.cpc-contact label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:2px solid var(--line);border-radius:10px;cursor:pointer;font-weight:600}
.cpc-choice label:has(input:checked){border-color:var(--navy);background:var(--road)}
.cpc-contact{grid-template-columns:repeat(3,1fr)}
.cpc-contact label{padding:10px;justify-content:center;font-size:15px}
.cpc-form input[type=radio],.cpc-form input[type=checkbox]{width:20px;height:20px;accent-color:var(--navy);flex:none}
.cpc-total{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;border-radius:10px;padding:14px 16px;font-weight:600}
.cpc-total strong{font-family:var(--font-display);font-stretch:118%;font-size:30px}
.cpc-fields{display:grid;gap:12px}
.cpc-fields label{display:grid;gap:6px;font-weight:700;color:var(--ink);font-size:15px}
.cpc-fields .opt{font-weight:400;color:var(--muted)}
.cpc-fields input,.cpc-fields textarea{font:inherit;font-weight:400;padding:12px 14px;border:2px solid var(--line);border-radius:10px;width:100%;background:#fff;color:var(--ink)}
.cpc-fields input:focus,.cpc-fields textarea:focus{outline:none;border-color:var(--navy)}
.cpc-error{color:var(--red);font-weight:600;margin:0}
.cpc-done h3{margin-bottom:6px}

[hidden]{display:none!important}

/* Full menu on wide screens */
@media (min-width:760px){
  .mobile-nav.open{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;padding:12px max(16px, calc((100vw - var(--max))/2 + 16px)) 20px}
  .mobile-nav.open a{padding:10px 0}
}
@media (min-width:760px) and (max-width:1020px){
  .nav a{padding:8px 6px;font-size:.95rem}
}
