/* =============================================================
   Brewco Marketing Group — Landing Template
   Brand palette + type pulled from brewco.com (Sept 2026).
     Logo navy   #0E103C  — the wordmark's own ink
     Brand navy  #25355A  — site buttons, links, section fills
     Body ink    #333333  — brewco.com body/heading text
     Grays       #F7F7F7 / #F2F2F2 — brewco.com section bands
     Typeface    Cero Pro Light — self-hosted on brewco.com via
                 /wp-content/uploads/useanyfont/ (see @font-face below)

   CONFIRM: --accent / --cta (copper #C6613F) is the one color NOT part of
   brewco.com's core navy/white/gray system — it is currently live only on
   the site's chat widget. It is used here for CTAs and two-tone heading
   accents because the core palette has no high-contrast call-to-action
   color. Confirm with the client, or repoint these two variables.

   NOTE ON BEAVER BUILDER: every rule below is scoped under generic
   class names. If you paste sections into BB HTML modules, load this
   file once globally (child theme or Code Snippets) so the classes
   resolve. Nothing here targets bare tags aggressively enough to
   fight the BB theme, but you can wrap the page in a parent class and
   prefix selectors if you want hard isolation.
   ============================================================= */

/* Cero Pro Light — served from the Brewco WordPress uploads directory.
   Same-origin, already licensed and hosted by the site (the "Use Any Font"
   plugin puts it there); this @font-face just guarantees it resolves on the
   landing template even if the global uaf.css is not enqueued. */
@font-face{
  font-family:'Cero Pro';
  src:url('/wp-content/uploads/useanyfont/3247Cero-Pro-Light.woff2') format('woff2');
  font-weight:300 400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Brand */
  --blue:      #25355A;   /* primary brand navy (brewco.com buttons/links) */
  --navy:      #0E103C;   /* deep — the logo wordmark's ink */
  --navy-2:    #1B2742;   /* mid navy for gradients/hovers */
  --cta:       #B4552F;   /* CTA base — white text clears AA (4.9:1) */
  --cta-2:     #C6613F;   /* CTA hover / gradient stop */
  --steel:     #5A6B8C;   /* muted blue-gray */
  --accent:    #C6613F;   /* two-tone heading accent */
  --ink:       #333333;   /* brewco.com body text */
  --slate:     #333D5F;   /* Services band background */
  --accent-on-dark: #E08A63; /* copper lightened for dark grounds — the base
                               --accent is only 2.6:1 on --slate; this is 4.05:1 */
  --white:     #ffffff;
  --gray-50:   #f7f7f7;
  --gray-100:  #f2f2f2;
  --gray-200:  #e2e5ea;
  --gray-500:  #6b7280;

  /* Fonts — Cero Pro is brewco.com's typeface; it is a LIGHT weight, so
     headings below are deliberately set light rather than bold. */
  --font-body: 'Cero Pro', 'cero-pro-light', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-head: 'Cero Pro', 'cero-pro-light', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius: 18px;
  --radius-sm: 12px;
  /* Hero scrim. Lowered 2026-09-10 so more of the photography reads through.
     Raise these if a bright image makes the white headline hard to read. */
  --hero-scrim-top:    .22;   /* was .45 */
  --hero-scrim-bottom: .55;   /* was .85 */
  --hero-scrim-left:   .30;   /* was .55 */
  /* Top-only scrim behind the nav. The white logo and nav links sit over the
     raw photo now that the main scrim is lighter; this keeps them legible
     without darkening the image itself. Set to 0 to remove. */
  --hero-nav-scrim:    .38;
  --hero-nav-scrim-h: 190px;
  --hero-fade:      1200ms;   /* slideshow crossfade */

  /* Client logo bar. Logos arrive in every shape, so they share one height and
     a width cap. Full colour by default — recognisability was the point of
     switching to logos. For a quieter, uniform strip set --logo-filter to
     grayscale(1) and --logo-opacity to .6 (hover restores colour). */
  --logo-h:        55px;    /* was 44px  (+25%, 2026-09-11) */
  --logo-max-w:   212.5px;  /* was 170px (+25%) — must scale with --logo-h, or wide
                               logos already at the cap (KOHLER, AXE) cannot grow */
  --logo-gap:      70px;    /* was 56px  (+25%) */
  --logo-filter:   none;
  --logo-opacity:  1;

  --shadow: 0 18px 50px -20px rgba(14,16,60,.35);
  --shadow-sm: 0 8px 24px -12px rgba(14,16,60,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
/* The Beaver Builder theme sets html{font-size:10px}, which shrinks every
   rem-based size on this page. Force the standard 16px root so 1rem = 16px
   again. Scoped in effect because this stylesheet only loads on this template. */
html{font-size:16px !important}
html{scroll-behavior:smooth}
body{font-size:1rem}
/* Page is light-only — prevents browser/OS auto-dark from inverting the logo */
:root{color-scheme:light}

/* Lenis smooth scroll — required classes (matches the reference's Framer setup) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.1;margin:0;font-weight:400;color:var(--navy);letter-spacing:-.02em}
p{margin:0}

.brewco-container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.text-cta{color:var(--cta)}
/* Read by screen readers, not shown — e.g. which service a "Learn More" is for. */
.brewco-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.text-accent{color:var(--accent)}
.eyebrow{display:inline-block;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--blue)}
.section-head{max-width:640px;margin:0 auto clamp(32px,5vw,56px);text-align:center}
.section-head h2{font-size:clamp(1.8rem,4vw,2.9rem);margin-top:12px}

/* -------- Buttons -------- */
.btn{
  --bg:var(--navy);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.6em;border-radius:999px;font-weight:700;font-size:.98rem;
  background:var(--bg);color:var(--fg);border:2px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--cta{--bg:var(--cta);--fg:var(--white);background:linear-gradient(180deg,var(--cta),var(--cta-2))}
.btn--dark{--bg:var(--navy);--fg:#fff}
.btn--ghost-light{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}
.btn--lg{padding:1.05em 2em;font-size:1.05rem}
.btn--block{width:100%}

/* -------- Pills -------- */
.pill{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:.88rem;backdrop-filter:blur(6px)}
.pill--contact{background:var(--gray-100);color:var(--navy)}
.stars{color:var(--cta);letter-spacing:2px}

/* =============================================================
   01 — NAVBAR
   ============================================================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s var(--ease),box-shadow .35s var(--ease);}
.nav__inner{display:flex;align-items:center;gap:24px;height:100px}
.nav__logo-img{height:72px;width:auto}
.nav__logo-img--dark{display:none}
.nav__links{display:flex;gap:30px;margin-inline:auto;font-weight:600}
.nav__links a{color:#fff;opacity:.92;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.nav__cta{margin-left:8px}
/* Five links (FAQ added) wrapped "Who We Are", "What We Do", "Our Work" and the
   button text onto two lines between ~901px and 1024px, so keep every label on
   one line and tighten the link spacing until the menu collapses at 900px. */
.nav__links a,.nav__cta{white-space:nowrap}
@media (max-width:1100px){.nav__links{gap:20px}}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;margin-left:auto;cursor:pointer}
.nav__burger span{width:24px;height:2px;background:#fff;transition:.3s}
/* scrolled state (solid) */
.nav.is-scrolled{background:#fff;box-shadow:0 6px 24px -14px rgba(14,16,60,.4)}
.nav.is-scrolled .nav__logo-img--light{display:none}
.nav.is-scrolled .nav__logo-img--dark{display:block}
.nav.is-scrolled .nav__links a{color:var(--navy)}
.nav.is-scrolled .nav__burger span{background:var(--navy)}
/* mobile menu */
.nav__mobile{position:fixed;inset:100px 0 auto 0;background:#fff;display:none;flex-direction:column;gap:6px;
  padding:18px var(--gutter) 26px;box-shadow:var(--shadow);transform:translateY(-8px);opacity:0;
  transition:.28s var(--ease);pointer-events:none}
.nav__mobile a{color:var(--navy);font-weight:600;padding:12px 4px;border-bottom:1px solid var(--gray-100)}
.nav__mobile .btn{margin-top:10px}
.nav.is-open .nav__mobile{display:flex;opacity:1;transform:none;pointer-events:auto}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =============================================================
   02 — HERO
   ============================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img,.hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Slideshow: every slide is stacked; only .is-active is opaque. With a single
   slide this is inert — it ships with is-active already on it, so the hero
   still renders with JS off. */
.hero__slide{opacity:0;transition:opacity var(--hero-fade) linear}
.hero__slide.is-active{opacity:1}
.hero__overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,16,60,var(--hero-nav-scrim)),transparent var(--hero-nav-scrim-h)),
             linear-gradient(180deg,rgba(14,16,60,var(--hero-scrim-top)),rgba(14,16,60,var(--hero-scrim-bottom))),
             linear-gradient(90deg,rgba(14,16,60,var(--hero-scrim-left)),transparent 60%)}
/* two-column: headline left, copy + CTA right, aligned to the bottom */
/* single left-aligned column: badges, headline, copy, CTAs all stacked left */
/* The content is anchored to the bottom, so the extra bottom padding below lifts
   the headline: the full 100px on screens 800px tall and up, scaling down to
   nothing at 700px. Shorter screens already have the headline near the nav, and
   a flat 100px there made the hero taller than the screen. The first
   padding-bottom is the fallback where svh isn't supported; phones (max-width
   820px, below) set their own. */
.hero__grid{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:min(100%,640px);
  gap:22px;align-items:end;justify-content:start;padding-top:100px;padding-bottom:min(11vh,120px);
  padding-bottom:calc(min(11vh,120px) + clamp(0px, 100svh - 700px, 100px))}
/* rating shown as plain text (no filled chip), like the reference */
.hero__title{font-size:clamp(2.8rem,7.5vw,5.6rem);color:#fff;letter-spacing:-.03em;line-height:.98}
.hero__right{padding-bottom:8px}
/* No top margin: the buttons follow the headline directly, at the same gap the
   removed intro paragraph used. */
.hero__actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.hero__link{color:#fff;font-weight:700;opacity:.9;transition:opacity .2s}
.hero__link:hover{opacity:1}

/* =============================================================
   03 — CTA BAND
   ============================================================= */
.ctaband{background:var(--blue);color:#fff}
.ctaband__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:clamp(32px,5vw,52px)}
.ctaband h2{color:#fff;font-size:clamp(1.4rem,3vw,2rem);flex:1 1 320px}

/* =============================================================
   04 — LOGO BAR
   ============================================================= */
.logobar{padding-block:clamp(40px,6vw,64px);background:var(--white)}
.logobar__label{text-align:center;color:var(--gray-500);font-weight:600;margin-bottom:26px}
.logobar__logo{font-family:var(--font-head);font-weight:400;font-size:1.4rem;color:var(--gray-200);
  letter-spacing:.04em;padding-inline:34px;white-space:nowrap}
.logobar__item{display:flex;align-items:center;justify-content:center;flex:none;
  padding-inline:calc(var(--logo-gap) / 2);height:calc(var(--logo-h) + 12px)}
.logobar__img{display:block;height:var(--logo-h);width:auto;max-width:var(--logo-max-w);object-fit:contain;
  filter:var(--logo-filter);opacity:var(--logo-opacity);transition:filter .3s var(--ease),opacity .3s var(--ease)}
.logobar__item:hover .logobar__img{filter:none;opacity:1}

/* generic marquee */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;width:max-content;animation:marquee 34s linear infinite}
/* Deliberately no pause on hover: the strip keeps scrolling (2026-10-15). */
@keyframes marquee{to{transform:translateX(-50%)}}

/* =============================================================
   05 — ABOUT
   ============================================================= */
.about{padding-block:clamp(64px,9vw,120px);text-align:center;background:var(--gray-50)}
.about__inner{max-width:820px;margin-inline:auto}
.about__title{font-size:clamp(2rem,4.6vw,3.3rem);margin:16px 0 20px;letter-spacing:-.025em}
.about__text{color:var(--gray-500);font-size:1.1rem}

/* =============================================================
   06 — FLIP CARDS
   ============================================================= */
.flipcards{position:relative;padding-block:clamp(64px,9vw,120px);background:var(--gray-50);color:var(--navy);overflow:hidden}
.flipcards .eyebrow{color:var(--blue)}
.flipcards .section-head h2{color:var(--navy)}
.flipcards__bgtext{position:absolute;top:6%;left:50%;transform:translateX(-50%);font-size:clamp(6rem,22vw,20rem);
  color:rgba(14,16,60,.04);font-weight:400;pointer-events:none;margin:0;letter-spacing:.02em;user-select:none}
.flipcards__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.flip{perspective:1400px;min-height:340px}
.flip__inner{position:relative;width:100%;height:100%;min-height:340px;transition:transform .7s var(--ease);
  transform-style:preserve-3d}
.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
.flip__face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);
  padding:30px;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--gray-100);box-shadow:var(--shadow-sm)}
.flip__front .flip__icon{font-size:2.4rem;color:var(--cta)}
.flip__front h3{color:var(--navy);margin:16px 0 10px;font-size:1.4rem}
.flip__front p{color:var(--gray-500)}
.flip__more,.flip__close{margin-top:auto;color:var(--blue);font-weight:700;cursor:pointer;padding-top:16px}
.flip__back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--blue),var(--navy-2));border-color:transparent}
.flip__back h4{color:#fff;margin-bottom:14px}
.flip__back ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.flip__back li{color:rgba(255,255,255,.82);font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px}
.flip__back strong{color:var(--cta)}

/* Feature cards — large stacked rows (text + big icon, alternating side) */
.features{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,120px);background:var(--slate)}
/* The band is dark, so flip only what sits directly on it. The service cards
   are white, so their contents keep the default dark styles — which is why this
   targets the section head and watermark rather than setting .features{color}. */
.features .section-head h2{color:var(--white)}
.features .section-head .text-accent{color:var(--accent-on-dark)}
.features .section-head .eyebrow{color:rgba(255,255,255,.72)}
.features .section-watermark{color:var(--white)}
.features>.brewco-container{position:relative;z-index:1}
.feature-list{display:grid;gap:22px;max-width:980px;margin-inline:auto}
/* No overflow:hidden here: on wide screens the images break out past the card's
   outer edge (see "Bigger images" below), so the scroll-driven slide is visible
   outside the card too. .features{overflow:hidden} still keeps it from widening
   the page. */
.featurecard{--svc-img:330px;display:grid;grid-template-columns:1fr 220px;gap:clamp(24px,4vw,48px);align-items:center;
  background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:clamp(26px,4vw,44px);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.featurecard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.featurecard:nth-child(even){grid-template-columns:220px 1fr}
.featurecard:nth-child(even) .featurecard__body{order:2}
.featurecard__body h3{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:12px}
.featurecard__body p{color:var(--gray-500);margin-bottom:18px}
.featurecard__body .checklist{margin:0}
.featurecard__cta{margin-top:24px}
.featurecard__icon{display:grid;place-items:center;aspect-ratio:1;border-radius:20px;font-size:4.5rem;color:var(--cta);
  background:linear-gradient(160deg,#fff,var(--gray-100));border:1px solid var(--gray-100)}
/* Uploaded image in the square. "fill" crops a photo to the edges; "fit" keeps
   an icon or logo whole, with padding, on the same soft gradient. No border
   and no light fill behind a photo: with the images overlapping the dark
   section, the 1px border inset the photo and showed as a white rim, and a
   light fill bleeds through the anti-aliased rounded corners. */
.featurecard__icon--img{overflow:hidden;padding:0;border:0}
.featurecard__icon--img img{display:block;width:100%;height:100%}
.featurecard__icon--fill{background:transparent}
.featurecard__icon--fill img{object-fit:cover}
.featurecard__icon--fit img{object-fit:contain;padding:14%}
/* Scroll-driven slide. main.js sets the transform from the card's progress
   through the viewport; the direction comes from data-slide-in, so each image
   enters from the side it sits on (the cards alternate). No JS, or reduced
   motion, leaves it untransformed at its resting position. */
.featurecard__icon--img[data-slide-in]{will-change:transform}
/* Bigger images: 330px (--svc-img), up from 220px. From 1181px, the first width
   with ~100px of section beside the 980px card, an uploaded image keeps its
   220px column (so the text doesn't reflow) and grows outward past the card
   edge instead: 110px wider, less the card's 45px padding + border, is a 65px
   overhang. From 901-1180px there isn't room beside the card, so the column
   grows to hold the image inside it. Under 901px the stacked layout's 140px
   image is unchanged. */
@media (min-width:901px){
  .featurecard{grid-template-columns:1fr var(--svc-img)}
  .featurecard:nth-child(even){grid-template-columns:var(--svc-img) 1fr}
}
@media (min-width:1181px){
  .featurecard{grid-template-columns:1fr 220px}
  .featurecard:nth-child(even){grid-template-columns:220px 1fr}
  .featurecard__icon--img{width:var(--svc-img);margin-right:calc(220px - var(--svc-img));box-shadow:var(--shadow)}
  .featurecard:nth-child(even) .featurecard__icon--img{margin-right:0;margin-left:calc(220px - var(--svc-img))}
}

/* =============================================================
   07 — STATS
   ============================================================= */
.stats{background:var(--white);border-block:1px solid var(--gray-100);padding-block:clamp(56px,8vw,92px)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;max-width:820px;margin-inline:auto}
.stat{position:relative}
.stat+.stat::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:1px;height:56px;background:var(--gray-100)}
.stat__num{font-family:var(--font-head);font-weight:400;font-size:clamp(2.6rem,5.5vw,3.8rem);line-height:1;color:var(--blue)}
.stat:nth-child(2) .stat__num{color:var(--accent)}
.stat:nth-child(3) .stat__num{color:var(--navy)}
.stat__label{margin-top:12px;color:var(--gray-500);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
/* Headline sits above the figures, so its gap is below it. */
.stats__headline{text-align:center;max-width:640px;margin:0 auto clamp(38px,5vw,60px)}
.stats__headline h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:12px}
.stats__headline p{color:var(--gray-500);font-size:1.05rem}

/* =============================================================
   08 — PROGRAMS
   ============================================================= */
.programs{padding-block:clamp(64px,9vw,120px)}
.program{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;
  margin-bottom:clamp(48px,7vw,90px)}
.program:last-child{margin-bottom:0}
.program--reverse .program__media{order:2}
.program__media img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}
.program__body h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}
.program__body p{color:var(--gray-500);margin-bottom:20px}
.checklist{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:32px;font-weight:500}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--cta);color:var(--white);font-size:.8rem;font-weight:800;display:grid;place-items:center}

/* =============================================================
   09 — BLOG CARDS
   ============================================================= */
.blog{padding-block:clamp(64px,9vw,120px);background:var(--gray-50)}
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.blogcard{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.blogcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.blogcard__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.blogcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.blogcard:hover .blogcard__media img{transform:scale(1.06)}
.blogcard__grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,16,60,.35))}
.blogcard__body{padding:24px}
.tag{display:inline-block;background:var(--gray-100);color:var(--blue);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.blogcard__body h3{font-size:1.2rem;margin-bottom:10px}
.blogcard__body p{color:var(--gray-500);font-size:.95rem}

/* =============================================================
   10 — COMPARISON TABLE
   ============================================================= */
.compare{padding-block:clamp(64px,9vw,120px)}
.compare__table{max-width:760px;margin-inline:auto;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--gray-100)}
.compare__row{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:center}
.compare__row:not(:last-child){border-bottom:1px solid var(--gray-100)}
.compare__feature{padding:18px 22px;font-weight:600}
.compare__col{padding:18px;text-align:center;font-weight:700}
.compare__col--us{background:var(--navy);color:#fff}
.compare__row--head .compare__col--us{background:var(--cta);color:var(--white)}
.compare__row--head{background:var(--gray-50);font-family:var(--font-head)}
.yes{color:#25c26e;font-size:1.3rem}
.no{color:#d1495b;font-size:1.3rem}

/* =============================================================
   11 — PRICING
   ============================================================= */
.pricing{padding-block:clamp(64px,9vw,120px);background:var(--gray-50)}
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{position:relative;background:#fff;border-radius:var(--radius);padding:34px 30px;
  box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);display:flex;flex-direction:column}
.plan--featured{background:var(--navy);color:#fff;transform:scale(1.04);box-shadow:var(--shadow)}
.plan--featured .plan__name,.plan--featured .plan__price{color:#fff}
.plan--featured .checklist li{color:rgba(255,255,255,.9)}
.plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--cta);
  color:var(--navy);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  padding:6px 16px;border-radius:999px}
.plan__name{font-size:1.3rem;margin-bottom:8px}
.plan__price{font-family:var(--font-head);font-weight:400;font-size:3rem;line-height:1;margin-bottom:24px;color:var(--navy)}
.plan__cur{font-size:1.4rem;vertical-align:super;margin-right:2px}
.plan__per{font-size:1rem;font-weight:600;color:var(--gray-500)}
.plan--featured .plan__per{color:rgba(255,255,255,.6)}
.plan .checklist{margin-bottom:28px;flex:1}
.plan--featured .checklist li::before{background:var(--cta)}

/* =============================================================
   13 — TESTIMONIALS
   ============================================================= */
.testimonials{padding-block:clamp(64px,9vw,120px);background:var(--gray-50);color:var(--navy);overflow:hidden}
.testimonials .eyebrow{color:var(--blue)}
.testimonials .section-head h2{color:var(--navy)}
.review{flex:0 0 360px;max-width:360px;background:#fff;border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);
  border-radius:var(--radius);padding:28px;margin:0;display:flex;flex-direction:column;gap:14px}
.review blockquote{margin:0;color:var(--navy);font-size:1.02rem}
.review figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.review figcaption img{width:44px;height:44px;border-radius:50%}
.review figcaption span{display:flex;flex-direction:column;font-size:.9rem;color:var(--gray-500)}
.review figcaption strong{color:var(--navy)}

.trustbadge{margin-top:22px;color:var(--gray-500);font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;gap:8px}
.trustbadge .stars{color:var(--cta);letter-spacing:1px}

/* =============================================================
   15 — FOOTER
   ============================================================= */
.footer{background:var(--gray-50);color:var(--gray-500);border-top:1px solid var(--gray-100);
  padding-block:clamp(48px,7vw,80px) 30px}
.footer__features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:40px;
  border-bottom:1px solid var(--gray-200);margin-bottom:44px}
.feature{display:flex;align-items:center;gap:14px}
.feature__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--white);color:var(--blue);font-size:1.2rem;flex:none;box-shadow:var(--shadow-sm)}
.feature strong{display:block;color:var(--navy)}
.feature span{font-size:.9rem}
.footer__main{display:grid;grid-template-columns:1.4fr 2fr;gap:48px;margin-bottom:44px}
.footer__logo{height:60px;width:auto;margin-bottom:18px}
.footer__brand p{max-width:340px;margin-bottom:18px}
.footer__pills{display:flex;flex-wrap:wrap;gap:10px}
.footer__pills .pill{background:var(--white);color:var(--navy);border:1px solid var(--gray-100)}
.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.footer__nav h4{color:var(--navy);font-size:1rem;margin-bottom:16px}
.footer__nav a{display:block;padding:6px 0;transition:color .2s}
.footer__nav a:hover{color:var(--blue)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:26px;border-top:1px solid var(--gray-200);font-size:.88rem}

/* =============================================================
   ANIMATION — scroll reveal base states (JS adds .is-in)
   ============================================================= */
[data-reveal]{opacity:0;transform:translateY(42px);filter:blur(8px);
  transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none;filter:none}

/* =============================================================
   NEW SECTIONS (reference-matched): showcase, photo CTA, chart, product
   ============================================================= */
.eyebrow--light{color:rgba(255,255,255,.85)}

/* 05 — PRODUCT SHOWCASE (card rotates on scroll) */
.showcase{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,120px);background:var(--white)}
.showcase__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,72px);align-items:center}
.showcase__stage{perspective:1600px;display:flex;justify-content:center}
.showcase__card{width:min(100%,400px);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);
  transform:rotateY(-18deg);transform-style:preserve-3d;will-change:transform}
.showcase__card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.showcase__body h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:16px}
.showcase__body p{color:var(--gray-500);margin-bottom:22px;font-size:1.08rem}
.showcase__body .checklist{margin-bottom:28px}

/* 08 — PHOTO CTA */
/* 200px taller than the original 70vh, with the content centered vertically.
   min-height carries the extra where 70vh is the taller of the two, and 100px
   more padding above and below the content carries it where the content is, so
   the section gains the full 200px at any screen size and the text stays
   centered either way. The image zooms on scroll via [data-scroll-zoom] in
   main.js. */
.photocta{position:relative;min-height:calc(70vh + 200px);display:flex;align-items:center;overflow:hidden;color:#fff}
.photocta__bg{position:absolute;inset:-12% 0;z-index:0}
.photocta__bg img{width:100%;height:100%;object-fit:cover;will-change:transform;transform-origin:center}
.photocta__overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,16,60,.88),rgba(14,16,60,.2) 65%),
             linear-gradient(180deg,transparent,rgba(14,16,60,.55))}
/* The element carries .brewco-container too. It used to set max-width:620px
   here, which overrode the container's 1180px and — combined with the
   container's margin-inline:auto — shrank the box and CENTRED it, so the text
   sat ~280px in from the page's left edge and "days." wrapped onto a third
   line. Now the container keeps its normal width (aligned with every other
   section) and only the text is capped, wide enough that "Thousands of event
   days." (667px at full size) holds one line. */
.photocta__content{position:relative;z-index:1;padding-block:calc(clamp(56px,9vw,110px) + 100px)}
.photocta__content h2,.photocta__content p{max-width:760px}
.photocta__content p{text-wrap:pretty}
.photocta__content h2{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;margin:14px 0 16px}
.photocta__content p{color:rgba(255,255,255,.85);margin-bottom:28px;font-size:1.1rem}

/* 09 — COMPARISON CHART */
.compare{padding-block:clamp(64px,9vw,120px)}
.chart{max-width:860px;margin-inline:auto;background:#fff;border:1px solid var(--gray-100);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:clamp(20px,4vw,36px)}
.chart__svg{width:100%;height:auto;display:block}
.chart__grid line{stroke:var(--gray-100);stroke-width:1.5}
.chart__line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1300;stroke-dashoffset:1300;transition:stroke-dashoffset 1.9s var(--ease)}
.chart.is-in .chart__line{stroke-dashoffset:0}
.chart__line--us{stroke:var(--accent)}
.chart__line--them{stroke:#c3cfd8}
.chart__dot{opacity:0;transition:opacity .4s ease 1.5s}
.chart.is-in .chart__dot{opacity:1}
.chart__dot--us{fill:var(--accent)}
.chart__dot--them{fill:#c3cfd8}
.chart__legend{display:flex;gap:26px;justify-content:center;margin-top:20px;font-weight:600;font-size:.95rem}
.chart__key{display:flex;align-items:center;gap:8px;color:var(--gray-500)}
.chart__key::before{content:"";width:14px;height:14px;border-radius:4px;background:currentColor}
.chart__key--us::before{background:var(--accent)}
.chart__key--them::before{background:#c3cfd8}
.chart__axis{fill:var(--gray-500);font-size:14px;font-weight:600;font-family:var(--font-body)}
.chart__lbl{font-size:15px;font-weight:600;font-family:var(--font-head)}
.chart__lbl--us{fill:var(--accent)}
.chart__lbl--them{fill:#9fb0bb}

/* 10 — PRICING (single product) */
.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center;
  background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(24px,4vw,48px);max-width:940px;margin-inline:auto}
.product__media{display:flex;justify-content:center}
.product__media img{width:100%;max-width:360px;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-sm)}
.product__badge{display:inline-block;background:var(--cta);color:var(--white);font-weight:800;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.06em;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.product__name{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:6px}
.product__price{font-family:var(--font-head);font-weight:400;font-size:clamp(2.6rem,6vw,3.6rem);
  line-height:1;color:var(--navy);margin-bottom:22px}
.product__card .checklist{margin-bottom:26px}
.product__note{margin-top:14px;color:var(--gray-500);font-size:.88rem;text-align:center}
.product__was{font-family:var(--font-body);font-size:1.2rem;font-weight:600;color:var(--gray-500);
  text-decoration:line-through;margin-left:12px;vertical-align:middle}

@media (max-width:820px){
  .hero{align-items:center}
  .hero__grid{grid-template-columns:1fr;align-items:start;gap:26px;padding-bottom:14vh}
  .hero__right{padding-bottom:0}
  .showcase__grid,.product{grid-template-columns:1fr}
  .showcase__stage{order:-1}
  .product__media img{max-width:280px}
}

/* =============================================================
   DEPTH / LAYERING / BACKGROUND ELEMENTS
   (moves the design toward the reference's layered, parallax feel)
   ============================================================= */

/* Large watermark text sitting behind a section's content */
.section-watermark{position:absolute;left:50%;top:6%;transform:translateX(-50%);
  font-family:var(--font-head);font-weight:400;font-size:clamp(5rem,17vw,15rem);
  line-height:1;color:currentColor;opacity:.05;pointer-events:none;user-select:none;
  white-space:nowrap;z-index:0;letter-spacing:-.02em}

/* Soft radial glow blob for decorating dark sections */
.glow-blob{position:absolute;width:520px;height:520px;border-radius:50%;
  filter:blur(40px);opacity:.28;pointer-events:none;z-index:0}
.glow-blob--cta{background:radial-gradient(circle,var(--cta),transparent 62%)}
.glow-blob--sky{background:radial-gradient(circle,var(--steel),transparent 62%)}

.flipcards,.testimonials{position:relative;overflow:hidden}
.flipcards .brewco-container,.testimonials .brewco-container{position:relative;z-index:1}

/* HERO — parallax background + gentle zoom (driven by JS), scroll cue */
.hero__bg img,.hero__bg video{will-change:transform;transform-origin:center}
.hero__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;display:grid;justify-items:center}
.hero__cue::before{content:"";width:4px;height:8px;margin-top:7px;border-radius:2px;
  background:rgba(255,255,255,.8);animation:cue 1.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* PROGRAMS — watermark + layered glow/shadow behind each image */
.programs{position:relative;overflow:hidden}
.programs>.brewco-container{position:relative;z-index:1}
.program__media{position:relative}
.program__media::before{content:"";position:absolute;z-index:0;left:-24px;bottom:-24px;
  width:70%;height:80%;border-radius:var(--radius);
  background:linear-gradient(150deg,var(--cta),transparent 70%);opacity:.55;filter:blur(34px)}
.program__media img{position:relative;z-index:1}
.program--reverse .program__media::before{left:auto;right:-24px}

/* ABOUT — subtle watermark */
.about{position:relative;overflow:hidden}
.about>.brewco-container{position:relative;z-index:1}

/* =============================================================
   MINIMUM TEXT SIZE — nothing below 12pt (16px = 1rem)
   ============================================================= */
.eyebrow,.stat__label,.tag,.plan__badge,.product__badge,
.footer__bottom,.feature span,.review figcaption span,.product__note,
.chart__key,.pill,.btn,.footer__nav a,.footer__pills .pill{
  font-size:1rem}
.chart__axis,.chart__lbl{font-size:16px}
/* keep the uppercase micro-labels legible but not oversized at the 16px floor */
.eyebrow{letter-spacing:.1em}
.stat__label{letter-spacing:.08em}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .flipcards__grid,.blog__grid,.pricing__grid{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(3,1fr)}
  .featurecard,.featurecard:nth-child(even){grid-template-columns:1fr;text-align:center}
  .featurecard__body,.featurecard:nth-child(even) .featurecard__body{order:0}
  .featurecard__icon{max-width:140px;margin-inline:auto;font-size:3.4rem;order:-1}
  .featurecard__icon--img[data-slide-in]{transform:none !important}
  .featurecard .checklist{display:inline-grid;text-align:left}
  .program{grid-template-columns:1fr}
  .program--reverse .program__media{order:0}
  .footer__main{grid-template-columns:1fr;gap:32px}
  .plan--featured{transform:none}
}
@media (max-width:560px){
  .footer__features,.footer__nav{grid-template-columns:1fr}
  .compare__row{grid-template-columns:1.5fr 1fr 1fr}
  .review{flex-basis:280px}
  .stats__grid{grid-template-columns:1fr;gap:32px}
  .stat+.stat::before{display:none}
}

@media (max-width:700px){
  .program__media::before{display:none}
}

/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  .marquee__track,.hero__cue::before{animation:none}
  .hero__bg img,.hero__bg video,.photocta__bg img{transform:none !important}
  .faq__q::after{transition:none}
  .faq__item::details-content{transition:none}
  .storycard__img,.storycard__arrow,.storycar__dot::before{transition:none}
  .storycard:hover .storycard__img,.storycard:hover .storycard__arrow{transform:none}
  .featurecard__icon--img[data-slide-in]{transform:none !important}
  *{scroll-behavior:auto}
}

/* =============================================================
   16 — BREWCO SECTIONS
   Components for the sections that replaced the template's
   comparison chart, pricing card and testimonial marquee.
   ============================================================= */

/* Optional sub-line under a section heading */
.section-head__sub{max-width:640px;margin:14px auto 0;color:var(--gray-500);font-size:1.02rem}
.section-head{text-align:center}

/* --- FLEET (tag grid) ------------------------------------------------ */
.fleet{padding-block:clamp(64px,9vw,120px);background:var(--white)}
.taggrid{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.taggrid .tag{margin-bottom:0;font-size:.82rem;padding:11px 20px;background:var(--white);
  border:1px solid var(--gray-200);color:var(--navy);letter-spacing:.06em;
  transition:border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
/* Only LINKED pills react. The lift used to apply to every pill while none of
   them were clickable — hinting at an action that wasn't there. */
.taggrid a.tag:hover,.taggrid a.tag:focus-visible{border-color:var(--cta);color:var(--cta);transform:translateY(-2px)}
.taggrid a.tag:focus-visible{outline:2px solid var(--cta);outline-offset:3px}

/* --- QUOTE / CONTACT -------------------------------------------------- */
/* White, not gray: this section now sits last, between the gray partner stories
   and the gray footer, and a gray band here would merge all three. */
.quote{padding-block:clamp(64px,9vw,120px);background:var(--white)}
/* Heading and button only; the section-head's usual gap below is dropped since
   nothing follows it. */
.quote .section-head{margin-bottom:0}
.quote__cta{margin-top:clamp(24px,3vw,32px)}

/* --- OUR WORK (partner-story carousel) -------------------------------- */
/* Big photo slides in a native horizontal scroller, like Jack Morton's
   "Additional Experiences": the row starts in line with the page content and
   runs off the right edge, so the next slide peeks in. Scroll-snap lands swipes
   and trackpad gestures on a slide without JS; main.js adds mouse drag, arrows
   and dots. --story-start is the content's left edge, from the same --maxw and
   --gutter as .brewco-container (100% here is the carousel's width). */
.stories{padding-block:clamp(64px,9vw,120px);background:var(--gray-50);color:var(--navy);overflow:hidden}
.stories .eyebrow{color:var(--blue)}
.stories .section-head h2{color:var(--navy)}
.storycar{--story-start:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)))}
.storycar__track{position:relative;display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--story-start);padding-inline:var(--story-start);
  padding-block:4px 8px;scrollbar-width:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.storycar__track::-webkit-scrollbar{display:none}
.storycar__track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.storycar__track:focus-visible{outline:2px solid var(--cta);outline-offset:4px;border-radius:var(--radius)}
/* Slide: photo, scrim, then the text pinned bottom-left. The title link's ::after
   covers the whole slide, so a click anywhere opens the case study. */
.storycard{position:relative;display:flex;align-items:flex-end;flex:0 0 clamp(280px,74vw,1080px);aspect-ratio:3/2;
  scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(155deg,#3A4E7A,#0E103C)}
.storycard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease);-webkit-user-drag:none}
.storycard::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(14,16,60,.9),rgba(14,16,60,.35) 50%,rgba(14,16,60,.05)),
             linear-gradient(90deg,rgba(14,16,60,.45),transparent 65%)}
.storycard--noimg::before{background:radial-gradient(circle at 85% 10%,rgba(224,138,99,.28),transparent 45%)}
.storycard__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:760px;padding:clamp(22px,4vw,48px)}
.storycard__logo{display:inline-flex;align-items:center;padding:8px 12px;border-radius:10px;background:#fff;box-shadow:var(--shadow-sm)}
.storycard__logo img{display:block;height:32px;width:auto;max-width:140px;object-fit:contain}
.storycard__title{margin:0;color:#fff;font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.02;letter-spacing:-.02em}
/* Repeated for :hover and :focus because the theme's a:hover / a:focus underline
   (and colour) outrank a single class, and the whole slide is this link. */
.storycard__link,.storycard__link:hover,.storycard__link:focus{color:inherit;text-decoration:none}
.storycard__link::after{content:"";position:absolute;inset:0;z-index:1}
/* Focus. Beaver Builder's theme puts an orange outline on a:focus, which showed
   around the title after any mouse click or drag. Drop it, and draw the keyboard
   ring on the link's full-slide ::after instead: that layer sits above the
   photo, whereas a ring on the card itself was painted underneath and never seen. */
.storycard__link:focus{outline:none}
.storycard__link:focus-visible::after{box-shadow:inset 0 0 0 3px var(--accent-on-dark);border-radius:var(--radius)}
.storycar__track:focus:not(:focus-visible),.storycar__btn:focus:not(:focus-visible),.storycar__dot:focus:not(:focus-visible){outline:none}
.storycard__text{margin:0;max-width:620px;color:rgba(255,255,255,.88);font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6}
.storycard__cta{display:inline-flex;align-items:center;gap:10px;margin-top:4px;color:#fff;font-weight:700}
.storycard__arrow{display:inline-block;color:var(--accent-on-dark);transition:transform .3s var(--ease)}
.storycard:hover .storycard__img{transform:scale(1.04)}
.storycard:hover .storycard__arrow{transform:translateX(6px)}
/* Controls: dots left, arrows right, lined up with the page content. Each dot
   is a 24px button around a 10px pill, so it's a comfortable tap target. */
.storycar__controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(20px,3vw,32px)}
.storycar__controls[hidden]{display:none}
.storycar__dots{display:flex;flex-wrap:wrap;gap:4px}
.storycar__dot{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.storycar__dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:999px;
  background:var(--gray-200);transform:translate(-50%,-50%);transition:width .3s var(--ease),background-color .3s var(--ease)}
.storycar__dot[aria-current="true"]::before{width:26px;background:var(--cta)}
.storycar__dot:focus-visible{outline:2px solid var(--cta);outline-offset:1px;border-radius:6px}
.storycar__arrows{display:flex;gap:12px}
.storycar__btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid var(--gray-200);background:#fff;color:var(--navy);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.storycar__btn:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
.storycar__btn:disabled{opacity:.4;cursor:default}
.storycar__btn:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
/* View More Work: centred under the carousel, leading to the full /our-work/ page. */
.storycar__more{display:flex;justify-content:center;margin-top:clamp(28px,4vw,44px)}
/* Phones: a taller slide that grows with its text instead of cropping it. */
@media (max-width:700px){
  .storycard{flex-basis:86vw;aspect-ratio:auto;min-height:clamp(420px,118vw,540px)}
  .storycar__btn{width:46px;height:46px}
}

/* --- FAQ -------------------------------------------------------------- */
/* Slate, like Services: the FAQ sits between the gray partner stories and the
   white quote section, so either light colour would merge with a neighbour. The
   heading flips the same way Services does. */
.faq{padding-block:clamp(64px,9vw,120px);background:var(--slate)}
.faq .section-head h2{color:var(--white)}
.faq .section-head .text-accent{color:var(--accent-on-dark)}
.faq .section-head .eyebrow{color:rgba(255,255,255,.72)}
.faq__list{max-width:820px;margin-inline:auto;border-top:1px solid rgba(255,255,255,.18)}
.faq__item{border-bottom:1px solid rgba(255,255,255,.18)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 4px;cursor:pointer;list-style:none;color:var(--white)}
.faq__q::-webkit-details-marker{display:none}
.faq__q h3{margin:0;color:var(--white);font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.3}
/* Chevron: points down when closed, up when open. */
.faq__q::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-right:4px;
  border-right:2px solid var(--accent-on-dark);border-bottom:2px solid var(--accent-on-dark);
  transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.faq__item[open] .faq__q::after{transform:translateY(3px) rotate(-135deg)}
.faq__q:hover h3{color:var(--accent-on-dark)}
.faq__q:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:4px;border-radius:4px}
.faq__a{padding:0 4px 26px}
.faq__a p{margin:0;max-width:720px;color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.65}
/* A link inside an answer: underlined, since copper on slate alone is not enough
   to mark it. The theme underlines focused links too, hence the :focus rules. */
.faq__a a,.faq__a a:focus{color:var(--accent-on-dark);text-decoration:underline;text-underline-offset:3px}
.faq__a a:hover{color:var(--white)}
.faq__a a:focus{outline:none}
.faq__a a:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:3px;border-radius:3px}
/* Smooth open/close where the browser can animate to height:auto; elsewhere the
   panel just opens instantly, which is fine. */
@supports (interpolate-size:allow-keywords){
  .faq__item{interpolate-size:allow-keywords}
  .faq__item::details-content{height:0;overflow:clip;
    transition:height .3s var(--ease),content-visibility .3s allow-discrete}
  .faq__item[open]::details-content{height:auto}
}

/* --- FOOTER SOCIAL ---------------------------------------------------- */
.footer__social{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px}
.footer__social a{font-size:.88rem;color:var(--gray-500);transition:color .2s var(--ease)}
.footer__social a:hover{color:var(--cta)}
.footer__nav span{display:block;font-size:.92rem;line-height:1.9}