/* design-system.css — generated per build, PRESET-AWARE (mono-contrast).
   Tokens declared ONCE here; structural DNA is driven by the preset kit so no
   two samples read as the same template recolored. Enqueued site-wide via
   functions.php. Do not redeclare these tokens inside page templates. */
:root{
  --bg: #FFFFFF;
  --section-bg: #FFFFFF;
  --surface: #F1F1F1;
  --ink: #0A0A0A;
  --muted: color-mix(in srgb, #0A0A0A 62%, transparent);
  --border: color-mix(in srgb, #0A0A0A 14%, transparent);
  --accent: #8C8C8C;
  --accent-ink: #ffffff;
  --ink-contrast: #ffffff;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --maxw: 1180px;
  --radius: 0px;
  --shadow: 6px 6px 0 var(--ink);
  --space: clamp(2.6rem,5.5vw,4.8rem);
  --reveal-dy: 22px;
  --reveal-sc: 1;
  --reveal-ease: cubic-bezier(.2,.8,.2,1);
  --reveal-stag: 45ms;
  --reveal-dur: .5s;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:#FFFFFF;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.08; margin:0 0 .4em; }
h1{ font-size:clamp(2.8rem,8vw,6rem); font-weight:800; letter-spacing:-.04em; text-transform:none; }
h2{ font-size:clamp(2.1rem,4.8vw,3.4rem); font-weight:800; letter-spacing:-.03em; }
h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:800; letter-spacing:-0.005em; }
p{ margin:0 0 1rem; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
html,body{ max-width:100%; overflow-x:clip; }
body{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
h1,h2,h3,h4,h5,p,li,a,span,blockquote,figcaption,.eyebrow,.brand,.btn,.nav-cta{ overflow-wrap:break-word; }
h1,h2,h3{ text-wrap:balance; }
p,li{ text-wrap:pretty; }
img,svg,video,iframe,table,pre{ max-width:100%; }
.container>*,.hero>*,.site-header .container>*,[class*="grid"]>*,[class*="cols"]>*,[class*="row"]>*{ min-width:0; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
.section{ padding-block:var(--space); background:var(--section-bg); }
.eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; font-weight:600; font-family:ui-monospace,'SF Mono',Menlo,monospace; color:var(--accent); display:inline-block; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.6rem; border-radius:0px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:2px solid var(--border); transition:transform .15s ease, opacity .15s ease; cursor:pointer; }
.btn:hover{ transform:translateY(-1px); }
.btn-accent{ background:var(--ink); color:var(--ink-contrast); border-color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border); }
.section + .section{ border-top:4px solid var(--ink); }

/* ---- Site chrome (header / nav / footer) ---- */
.site-header{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-block:1rem; }
.brand{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-0.02em; }
.site-nav{ display:flex; gap:1.6rem; align-items:center; }
.site-nav a:not(.nav-cta){ font-weight:500; font-size:.97rem; color:var(--ink); opacity:.82; }
.site-nav a:not(.nav-cta):hover,.site-nav a:not(.nav-cta)[aria-current="page"]{ opacity:1; color:var(--accent); }
.site-footer{ background:var(--surface); border-top:1px solid var(--border); padding-block:3rem 2rem; }

/* ---- Footer variants (preset-aware) ---- */
.site-footer .brand{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer-nav a{ opacity:.8; font-size:.95rem; }
.footer-nav a:hover{ opacity:1; color:var(--accent); }
.foot-meta{ display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.92rem; margin-top:.4rem; }
.footer-legal{ width:100%; color:var(--muted); font-size:.85rem; }

/* minimal */
.foot-minimal .container{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.foot-minimal .footer-legal{ width:auto; margin-left:auto; }

/* columns */
.foot-columns .container{ display:grid; grid-template-columns:1.4fr 1fr; gap:2rem 3rem; }
.foot-columns .footer-nav{ flex-direction:column; gap:.55rem; }
.foot-columns .footer-legal{ border-top:1px solid var(--border); margin-top:1rem; padding-top:1.2rem; }

/* masthead */
.foot-masthead{ text-align:center; border-top:3px solid var(--ink); }
.foot-masthead .container{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.foot-masthead .brand{ font-size:2rem; }
.foot-masthead .footer-nav{ justify-content:center; }

/* bold-block — oversized band on the accent */
.foot-bold{ background:var(--accent); border-top:0; color:var(--accent-ink); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.foot-bold a,.foot-bold .foot-meta,.foot-bold .footer-legal{ color:var(--accent-ink); }
.foot-bold .foot-shout{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.foot-bold .foot-shout .brand{ font-size:clamp(2.2rem,6vw,4rem); line-height:1; }
.foot-bold .foot-row{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
.foot-bold .footer-legal{ opacity:.85; border-top:1px solid color-mix(in srgb, var(--accent-ink) 25%, transparent); margin-top:1.5rem; padding-top:1.2rem; }
.foot-bold .btn{ background:var(--bg); color:var(--ink); border-color:var(--bg); }

/* newsletter */
.foot-newsletter .foot-cols{ display:grid; grid-template-columns:1.2fr 1fr 1.3fr; gap:2.5rem; }
.foot-newsletter .footer-nav{ flex-direction:column; gap:.55rem; }
.foot-signup label{ display:block; font-weight:600; margin-bottom:.6rem; }
.foot-signup .foot-field{ display:flex; gap:.5rem; }
.foot-signup input{ flex:1; min-width:0; padding:.7rem .9rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--ink); font:inherit; }
.foot-newsletter .footer-legal{ border-top:1px solid var(--border); margin-top:1.8rem; padding-top:1.2rem; }

@media (max-width:760px){
  .foot-columns .container,.foot-newsletter .foot-cols{ grid-template-columns:1fr; }
}

/* ---- Mobile pop-out nav + animated hamburger + scroll-aware header ---- */
/* ---- header scroll state + nav CTA ---- */
.site-header{ transition:padding .2s ease, box-shadow .2s ease, background .2s ease; }
.site-header.scrolled{ box-shadow:0 10px 30px -20px color-mix(in srgb, var(--ink) 60%, transparent); }
.site-header.scrolled .container{ padding-block:.65rem; }
.nav-cta{ padding:.5rem 1.05rem !important; font-size:.9rem; }

/* ---- hamburger frame (open-state morph is per-kind) ---- */
.nav-toggle{ display:none; position:relative; width:30px; height:24px; padding:0; background:none; border:0; cursor:pointer; z-index:120; transition:transform .34s cubic-bezier(.16,1,.3,1); }
.nav-bars,.nav-bars::before,.nav-bars::after{ content:""; position:absolute; left:0; right:0; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .2s ease, background .2s ease, width .3s ease; }
.nav-bars{ top:50%; margin-top:-1px; }
.nav-bars::before{ top:-8px; }
.nav-bars::after{ top:8px; }

/* ---- scrim ---- */
.nav-scrim{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .3s ease; }
body.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
.nav-scrim[hidden]{ display:block; }
body.nav-open{ overflow:hidden; }
/* the drawer lives inside the sticky header (its own z:50 stacking context);
   lift that context above the root-level scrim (z:90) so links stay clickable */
body.nav-open .site-header{ z-index:100; }

/* ---- mobile nav: "right" drawer + matching hamburger morph ---- */
@media (max-width:860px){
  .nav-toggle{ display:block; }
  .site-nav{ position:fixed; top:0; right:0; z-index:100; height:100dvh; width:min(82vw,340px);
    flex-direction:column; align-items:stretch; gap:0; justify-content:flex-start;
    padding:5.5rem 1.6rem 2rem; background:var(--bg); border-left:1px solid var(--border);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);
    transform:translateX(100%); transition:transform .34s cubic-bezier(.16,1,.3,1); overflow-y:auto; }
  body.nav-open .site-nav{ transform:translateX(0); }
  .site-nav a:not(.nav-cta){ font-size:1.15rem; padding:.9rem .2rem; border-bottom:1px solid var(--border); }
  .site-nav a:not(.nav-cta):last-of-type{ border-bottom:0; }
  .nav-cta{ margin-top:1.2rem; justify-content:center; }
}
body.nav-open .nav-bars{ background:transparent; }
body.nav-open .nav-bars::before{ transform:translateY(8px) rotate(45deg); }
body.nav-open .nav-bars::after{ transform:translateY(-8px) rotate(-45deg); }

/* The drawer is position:fixed but lives inside .site-header. If a header
   ancestor carries backdrop-filter / transform / filter (e.g. the blur & float
   glass headers), IT becomes the fixed containing block and the drawer's
   bottom:0 / inset:0 anchors to the header pill instead of the viewport —
   pushing the links off-screen. Neutralise those on the header ancestors at
   mobile so the drawer always resolves against the viewport. (Targets the
   header only — the full-screen overlay's own blur lives on .site-nav and is
   untouched.) */
@media (max-width:860px){
  .site-header,.site-header .container{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; transform:none !important; filter:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .site-nav{ transition:none; }
  .nav-toggle,.nav-bars,.nav-bars::before,.nav-bars::after{ transition:none; }
}

/* ---- Motion: scroll-reveal + ken-burns (per-preset flavor) ---- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{ opacity:0; transform:translateY(var(--reveal-dy)) scale(var(--reveal-sc)); transition:opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); transition-delay:calc(var(--reveal-i,0) * var(--reveal-stag)); will-change:opacity,transform; }
  [data-reveal].is-visible{ opacity:1; transform:none; }
  .btn{ transition:transform .18s var(--reveal-ease), box-shadow .18s ease, opacity .15s ease; }
  
}

/* ---- Hero readability (HARD RULE) ----
   Any .hero with a background image MUST keep text readable. The overlay is
   baked in here so the model cannot ship an unreadable hero. The preset kit
   only changes the overlay's character, never removes it. */
.hero{ position:relative; isolation:isolate; color:#fff; padding-block:clamp(5rem,12vw,9rem); overflow:hidden; }
.hero > *{ position:relative; z-index:2; }
.hero img.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero::after{ content:""; position:absolute; inset:0; z-index:1; }
.hero h1, .hero p{ text-shadow:0 2px 18px rgba(0,0,0,.45); max-width:46ch; }
.hero .eyebrow{ color:#fff; opacity:.92; }
.hero::after{ background:color-mix(in srgb, var(--accent) 78%, rgba(0,0,0,.45)); mix-blend-mode:normal; }
.hero h1,.hero p{ text-shadow:none; color:var(--accent-ink); }
.hero .eyebrow{ color:var(--accent-ink); }
.hero .container{ text-align:left; } .hero h1,.hero p{ margin-inline:0; }

/* =====================================================================
   FlairFootball.ca — MONO BRAND OVERRIDE (black & white)
   Appended last so it wins the cascade. Removes the green accent and
   retunes every component for a clean, premium black-and-white look.
   ===================================================================== */
:root{
  --accent:#8C8C8C;                 /* silver-grey: reads on BOTH black + white */
  --accent-ink:#ffffff;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Cohesive mono imagery: grayscale every in-content photo.
   The logo lives in the header/footer chrome, so it is never touched. */
.site-main img,
.about-cta-bg,.gallery-cta-bg,.cta-banner-bg{ filter:grayscale(100%) contrast(1.03); }

/* Neutral (non-green) hero overlay for guaranteed text contrast */
.hero::after{ background:linear-gradient(180deg, rgba(10,10,10,.32) 0%, rgba(10,10,10,.62) 100%); }
.hero h1,.hero p{ color:#fff; }
.hero .eyebrow{ color:#fff; opacity:.85; }

/* ---- Brand logo (header + footer) ---- */
.brand{ display:inline-flex; align-items:center; gap:.55rem; }
.brand img{ height:40px; width:auto; display:block; }
.site-header.scrolled .brand img{ height:33px; transition:height .2s ease; }
.site-footer .brand img{ height:36px; }
@media(max-width:860px){ .brand img{ height:34px; } }

/* ---- Buttons: solid high-contrast, never grey ---- */
/* On dark sections -> white fill / black text */
.gallery-cta-btn,.svc-btn-primary,.home-btn-primary{
  background:#fff !important; color:#0A0A0A !important; border-color:#fff !important;
  box-shadow:4px 4px 0 rgba(255,255,255,.22) !important;
}
.gallery-cta-btn:hover{ box-shadow:6px 6px 0 rgba(255,255,255,.4) !important; transform:translate(-2px,-2px); }
.svc-btn-primary:hover,.home-btn-primary:hover{
  background:transparent !important; color:#fff !important; border-color:#fff !important;
}
/* About primary: black on the light hero, white on the dark CTA */
.about-btn-primary{
  background:#0A0A0A !important; color:#fff !important; border-color:#0A0A0A !important;
  box-shadow:4px 4px 0 rgba(10,10,10,.16) !important;
}
.about-cta-section .about-btn-primary{
  background:#fff !important; color:#0A0A0A !important; border-color:#fff !important;
  box-shadow:4px 4px 0 rgba(255,255,255,.25) !important;
}
/* Contact form submit: stay black, no green hover */
.form-submit-btn:hover{ background:#262626 !important; box-shadow:4px 4px 0 var(--ink) !important; }
.contact-detail-card a{ border-bottom-color:#0A0A0A !important; }
.contact-detail-card a:hover{ color:#555 !important; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:#0A0A0A !important; box-shadow:4px 4px 0 #0A0A0A !important; }

/* Heading accent words ("Flair." etc.) -> keep ink, differentiate by an underline tick */
.home-hero h1 span,.about-h1 span,.svc-hero-h1 span,.svc-cta-content h2 span{ color:#fff; }
.about-h1 span{ color:#0A0A0A; box-shadow:inset 0 -.12em 0 #0A0A0A; }

/* Footer keeps a clean light surface */
.foot-minimal .footer-nav a:hover,.footer-nav a:hover,.site-nav a:not(.nav-cta):hover{ color:#0A0A0A; opacity:1; }

/* visually-hidden brand text fallback (a11y) */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* force full grayscale on the partially-desaturated homepage images */
.home-hero-right img,.home-bento-img,.home-cta-img-wrap img{ filter:grayscale(100%) contrast(1.03) !important; }

/* =====================================================================
   FLAIR FOOTBALL — PREMIUM PERFORMANCE SYSTEM v2  (charcoal + gold)
   Authoritative final block. Dark chrome + homepage tokens live here so
   the brand reads as an elite performance facility, not a local academy.
   Inner pages keep their own tokens (untouched) until rebuilt.
   ===================================================================== */
:root{
  --fb-bg:#0B0B0C;          /* near-black charcoal base */
  --fb-bg-2:#101012;
  --fb-surface:#161619;     /* cards */
  --fb-surface-2:#1C1C21;   /* raised */
  --fb-ink:#F4F2EC;         /* cream text */
  --fb-muted:rgba(244,242,236,.60);
  --fb-faint:rgba(244,242,236,.40);
  --fb-line:rgba(244,242,236,.12);
  --fb-line-2:rgba(244,242,236,.20);
  --fb-gold:#E8B23A;        /* SIGNATURE accent — swap this one value to rebrand */
  --fb-gold-2:#F2C661;
  --fb-gold-ink:#0B0B0C;    /* text on gold */
  --fb-display:'Space Grotesk', sans-serif;
  --fb-body:'IBM Plex Sans', sans-serif;
  --fb-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fb-maxw:1240px;
}

/* ---------- DARK CHROME: header ---------- */
.site-header{ background:var(--fb-bg); border-bottom:1px solid var(--fb-line); }
.site-header.scrolled{ box-shadow:0 14px 40px -24px rgba(0,0,0,.9); }
@media(min-width:861px){
  .site-header.scrolled{ background:rgba(11,11,12,.78); -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px); }
}
/* logo shown in its true colours (transparent webp). */
.site-nav a:not(.nav-cta){ color:var(--fb-ink); opacity:.68; font-weight:500; letter-spacing:.01em; }
.site-nav a:not(.nav-cta):hover,.site-nav a:not(.nav-cta)[aria-current="page"]{ color:var(--fb-gold); opacity:1; }
.nav-cta.btn,.nav-cta{ background:var(--fb-gold) !important; color:var(--fb-gold-ink) !important; border-color:var(--fb-gold) !important; font-family:var(--fb-mono); font-weight:600; letter-spacing:.06em; }
.nav-cta:hover{ background:var(--fb-gold-2) !important; border-color:var(--fb-gold-2) !important; transform:translateY(-1px); }
.nav-bars,.nav-bars::before,.nav-bars::after{ background:var(--fb-ink); }
/* dark mobile drawer */
@media(max-width:860px){
  .site-nav{ background:var(--fb-bg-2); border-left:1px solid var(--fb-line); box-shadow:-30px 0 60px -30px rgba(0,0,0,.8); }
  .site-nav a:not(.nav-cta){ border-bottom-color:var(--fb-line); color:var(--fb-ink); opacity:.85; }
}

/* ---------- DARK CHROME: premium footer ---------- */
.fb-footer{ background:var(--fb-bg); border-top:1px solid var(--fb-line); color:var(--fb-ink); padding-block:clamp(3rem,6vw,4.5rem) 1.5rem; }
.fb-footer .container{ max-width:var(--fb-maxw); }
.fb-foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:2.5rem 3rem; align-items:start; }
.fb-foot-brand .brand{ display:inline-block; margin-bottom:1.1rem; }
.fb-foot-brand .brand img{ height:42px; }
.fb-foot-tag{ font-family:var(--fb-body); color:var(--fb-muted); max-width:34ch; line-height:1.6; margin:0 0 1.4rem; font-size:.98rem; }
.fb-foot-cta{ display:inline-flex; align-items:center; gap:.5rem; background:var(--fb-gold); color:var(--fb-gold-ink); font-family:var(--fb-mono); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; padding:.85rem 1.5rem; transition:background .15s, transform .15s; }
.fb-foot-cta:hover{ background:var(--fb-gold-2); transform:translateY(-1px); }
.fb-foot-col h4{ font-family:var(--fb-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fb-faint); margin:0 0 1rem; font-weight:500; }
.fb-foot-col a,.fb-foot-col p{ display:block; font-family:var(--fb-body); color:var(--fb-muted); font-size:.96rem; line-height:1.5; margin:0 0 .65rem; transition:color .15s; }
.fb-foot-col a:hover{ color:var(--fb-gold); }
.fb-foot-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--fb-line); }
.fb-foot-bottom p,.fb-foot-bottom a{ font-family:var(--fb-mono); font-size:.72rem; letter-spacing:.04em; color:var(--fb-faint); margin:0; }
.fb-foot-bottom a:hover{ color:var(--fb-gold); }
.fb-foot-legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }
@media(max-width:760px){ .fb-foot-top{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- STICKY MOBILE CTA ---------- */
.fb-mcta{ position:fixed; left:0; right:0; bottom:0; z-index:85; display:none; gap:.6rem; padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background:rgba(11,11,12,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--fb-line); }
.fb-mcta a{ flex:1; text-align:center; font-family:var(--fb-mono); font-weight:600; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; padding:.9rem 1rem; }
.fb-mcta .m-book{ background:var(--fb-gold); color:var(--fb-gold-ink); }
.fb-mcta .m-call{ background:transparent; color:var(--fb-ink); border:1px solid var(--fb-line-2); }
body.nav-open .fb-mcta{ display:none; }
@media(max-width:720px){ .fb-mcta{ display:flex; } body{ padding-bottom:4.5rem; } }

/* ---------- GLOBAL A11Y FOCUS ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible{ outline:2px solid var(--fb-gold); outline-offset:3px; border-radius:1px; }

/* homepage images opt OUT of the global grayscale rule (premium colour treatment instead) */
.flair-home img{ filter:none; }

/* =====================================================================
   FLAIR FOOTBALL — SHARED PREMIUM PRIMITIVES (site-wide)
   Lets Services / Contact (and any new page) reuse the exact homepage
   look. Add class "flair-home" to <main> on premium pages.
   ===================================================================== */
.flair-home{ background:var(--fb-bg); color:var(--fb-ink); font-family:var(--fb-body); overflow-x:clip; }
.flair-home .fb-wrap{ max-width:var(--fb-maxw); margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2.5rem); }
.flair-home h1,.flair-home h2,.flair-home h3{ font-family:var(--fb-display); letter-spacing:-.03em; line-height:1.02; margin:0; }
.flair-home p{ margin:0; }
.flair-home .fb-ey{ font-family:var(--fb-mono); font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--fb-gold); display:inline-flex; align-items:center; gap:.7rem; }
.flair-home .fb-ey::before{ content:""; width:26px; height:2px; background:var(--fb-gold); display:inline-block; }
.flair-home .fb-btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--fb-mono); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; padding:1rem 1.9rem; border:1.5px solid transparent; transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease; cursor:pointer; }
.flair-home .fb-btn-gold{ background:var(--fb-gold); color:var(--fb-gold-ink); border-color:var(--fb-gold); }
.flair-home .fb-btn-gold:hover{ background:var(--fb-gold-2); border-color:var(--fb-gold-2); transform:translateY(-2px); }
.flair-home .fb-btn-ghost{ background:transparent; color:var(--fb-ink); border-color:var(--fb-line-2); }
.flair-home .fb-btn-ghost:hover{ border-color:var(--fb-ink); transform:translateY(-2px); }
.flair-home .fb-btn .ar{ transition:transform .16s ease; }
.flair-home .fb-btn:hover .ar{ transform:translateX(3px); }
.flair-home .fb-sec{ padding-block:clamp(4.5rem,9vw,7.5rem); }
.flair-home .fb-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,4rem); }
.flair-home .fb-sec-head h2{ font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; max-width:16ch; }
.flair-home .fb-sec-head .lead{ color:var(--fb-muted); max-width:34ch; line-height:1.6; font-size:1.02rem; }
.flair-home .fb-sec-head .fb-ey{ margin-bottom:1.2rem; }
/* shared FINAL CTA (animation comes from flair-motion.css) */
.flair-home .fb-final{ background:var(--fb-gold); color:var(--fb-gold-ink); padding-block:clamp(4rem,8vw,6.5rem); text-align:center; }
.flair-home .fb-final .fb-ey{ color:var(--fb-gold-ink); justify-content:center; }
.flair-home .fb-final .fb-ey::before{ background:var(--fb-gold-ink); }
.flair-home .fb-final h2{ font-size:clamp(2.6rem,7vw,5.2rem); font-weight:800; letter-spacing:-.04em; margin:1.2rem auto; max-width:16ch; }
.flair-home .fb-final p{ color:rgba(11,11,12,.75); max-width:48ch; margin:0 auto 2.4rem; font-size:1.08rem; line-height:1.6; }
.flair-home .fb-final-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.flair-home .fb-final .fb-btn-dark{ background:var(--fb-gold-ink); color:var(--fb-gold); border-color:var(--fb-gold-ink); }
.flair-home .fb-final .fb-btn-dark:hover{ background:#000; transform:translateY(-2px); }
.flair-home .fb-final .fb-btn-line{ background:transparent; color:var(--fb-gold-ink); border-color:rgba(11,11,12,.4); }
.flair-home .fb-final .fb-btn-line:hover{ border-color:var(--fb-gold-ink); transform:translateY(-2px); }
.flair-home .fb-final small{ display:block; margin-top:1.6rem; font-family:var(--fb-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(11,11,12,.6); }
/* sub-hero shared (interior pages) */
.flair-home .fb-subhero{ position:relative; overflow:hidden; border-bottom:1px solid var(--fb-line); display:flex; align-items:flex-end; min-height:62svh; }
.flair-home .fb-subhero .bg{ position:absolute; inset:0; z-index:0; }
.flair-home .fb-subhero .bg img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(.9) brightness(.7); animation:fbKen2 24s ease-out infinite alternate; }
@keyframes fbKen2{ from{transform:scale(1.05)} to{transform:scale(1.13)} }
.flair-home .fb-subhero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,11,12,.5), rgba(11,11,12,.45) 50%, var(--fb-bg) 100%); }
.flair-home .fb-subhero .fb-wrap{ position:relative; z-index:2; padding-block:clamp(3rem,7vw,5rem); }
.flair-home .fb-subhero h1{ font-size:clamp(2.8rem,8vw,6rem); font-weight:800; margin:1.2rem 0 1.2rem; max-width:16ch; }
.flair-home .fb-subhero h1 span{ color:var(--fb-gold); }
.flair-home .fb-subhero .sub{ color:rgba(244,242,236,.82); max-width:52ch; line-height:1.6; font-size:clamp(1.02rem,1.5vw,1.2rem); margin-bottom:2rem; }
@media (prefers-reduced-motion: reduce){ .flair-home .fb-subhero .bg img{ animation:none; } }