/**
 * HERO Blocks — presentation for the finite controls.
 *
 * Every declaration reads an Elementor Kit variable with a NEUTRAL literal
 * fallback. The fallback is deliberately grey: one that looked like a brand
 * would hide a broken or unpopulated Kit, and the site would ship looking
 * plausible and wrong.
 *
 * Layout is driven entirely by the data attributes the widgets emit, so a
 * variant is a named value in saved settings rather than a pile of inline CSS.
 */

.hero-block {
  --hero-primary:    var(--e-global-color-primary,   #4a4a4a);
  --hero-secondary:  var(--e-global-color-secondary, #2e2e2e);
  --hero-text:       var(--e-global-color-text,      #333333);
  --hero-accent:     var(--e-global-color-accent,    #6b6b6b);

  /* The program's pinned custom globals. Ids are fixed across every program
     site so a preset harvested from the master resolves on a client site. */
  --hero-on-primary:    var(--e-global-color-53a5b1e, #ffffff);
  --hero-on-secondary:  var(--e-global-color-22f69d7, #ffffff);
  --hero-dark-heading:  var(--e-global-color-d5a0c60, #ffffff);
  --hero-dark-text:     var(--e-global-color-a16ac04, #f2f2f2);
  --hero-dark-bg:       var(--e-global-color-0794945, #2e2e2e);
  --hero-dark-cta-bg:   var(--e-global-color-896d929, #ffffff);
  --hero-dark-cta-text: var(--e-global-color-755f66e, #2e2e2e);
  --hero-surface-muted: var(--e-global-color-e0d3a3f, #ececec);

  /* ── Geometry: the design language a style pack swaps ──────────────────
     These were literals until now, which meant two client sites could differ
     in colour and typeface and still share identical proportions, corners and
     shadows - the thing a competitor comparing two of our sites would notice.
     Every value here is what the library already looked like, so declaring
     them changes nothing on its own; a pack overrides the block and every
     widget follows. Token NAMES are frozen like control names: rename one and
     every site carrying a pack silently loses that part of its styling. */
  --hero-gap: clamp(1.5rem, 4vw, 3.5rem);
  --hero-pad: clamp(3rem, 6vw, 5rem);
  --hero-card-pad: clamp(1.25rem, 2.5vw, 1.75rem);

  --hero-radius-card: 12px;
  --hero-radius-button: 6px;
  --hero-radius-pill: 999px;
  --hero-radius-frame: 16px;
  --hero-radius-panel: 14px;
  --hero-radius-media: 8px;

  --hero-shadow-card: 0 10px 30px rgba(0, 0, 0, .10);
  --hero-shadow-panel: 0 18px 50px rgba(0, 0, 0, .18);
  --hero-shadow-float: 0 24px 60px rgba(0, 0, 0, .20);

  --hero-width-boxed: 1140px;
  --hero-width-wide: 1440px;
  --hero-measure: 46rem;

  --hero-button-pad-y: .85em;
  --hero-button-pad-x: 1.75em;
  --hero-button-border: 2px;
  --hero-button-weight: 600;

  /* Texture. `surface` is the white a light band paints; `hairline` is every
     rule, divider and chip border in the library. They were four slightly
     different greys before, which no pack could have moved together. */
  --hero-surface: #ffffff;
  --hero-hairline: rgba(128, 128, 128, .28);
  /* Copy on a photo scrim. Always light, whatever the brand - the scrim is
     what makes it readable, so this follows the scrim and not the palette. */
  --hero-on-scrim: #ffffff;
  /* Review stars. A token so a pack can warm or cool the gold, NOT a brand
     colour: stars tinted to the client read as decoration, not as a rating. */
  --hero-star: #E8A317;

  /* Type.

     THE KIT OWNS FAMILY. THE PACK OWNS SCALE. That division is the whole rule,
     and it was got wrong first time round: this comment used to read "the Kit
     supplies family, size and weight for headings", which left headline size
     as the one thing a style pack could not touch. Three design options then
     rendered at identical type sizes no matter which pack they carried, which
     is most of why they read as one website.

     So headline scale, leading, tracking and case are tokens here, and the
     program Kit carries NO font sizes on its typography globals - a size on a
     Kit global becomes a font-size Elementor writes onto the element itself,
     at a specificity a token cannot reach, and the pack silently loses.
     `elementor-kit.ts` strips sizes on merge for program sites so this cannot
     drift back in by hand. */
  --hero-eyebrow-size: .8125rem;
  --hero-eyebrow-weight: 700;
  --hero-eyebrow-tracking: .08em;
  --hero-eyebrow-transform: uppercase;

  --hero-h1: clamp(2.25rem, 5vw, 3.5rem);
  --hero-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --hero-h3: clamp(1.25rem, 2vw, 1.5rem);
  --hero-body: 1rem;

  --hero-heading-weight: 700;
  --hero-heading-leading: 1.15;
  --hero-heading-tracking: -.01em;
  --hero-heading-transform: none;
  --hero-body-leading: 1.6;

  --hero-text-small: .875rem;
  --hero-text-label: .9375rem;
  --hero-text-card-title: 1.0625rem;
  --hero-text-lead: 1.25rem;

  /* Room a transparent site header needs above the first block. A token
     because a pack with a taller header needs a taller offset. */
  --hero-header-offset: 6rem;

  /* How dark a photo scrim is. A pack lever: how heavily a design language
     leans on photography is part of how it reads, and these were duplicated
     literals in two widget files before. */
  --hero-scrim-light: .25;
  --hero-scrim-medium: .45;
  --hero-scrim-heavy: .65;

  --hero-stat-medium: clamp(1.75rem, 4vw, 2.25rem);
  --hero-stat-large: clamp(2.25rem, 5vw, 3rem);
  --hero-stat-xl: clamp(2.75rem, 7vw, 4.25rem);

  color: var(--hero-text);
  font-size: var(--hero-body);
  line-height: var(--hero-body-leading);
  box-sizing: border-box;
}

.hero-block *,
.hero-block *::before,
.hero-block *::after { box-sizing: inherit; }

/* The heading scale.

   Selected by tag rather than by class: every widget emits a real h1, h2 or h3
   through its `heading_tag` control, so the size follows the semantics the page
   already declares and a heading demoted to h3 for outline reasons gets the h3
   size without a second control to keep in step.

   Specificity is deliberately low (0,1,1). A widget that has a reason to size a
   heading itself - `hero-cta[data-hero-format="bar"]`, where the heading sits
   inline on a bar and cannot be a headline - keeps winning. */
.hero-block h1 { font-size: var(--hero-h1); }
.hero-block h2 { font-size: var(--hero-h2); }
.hero-block h3 { font-size: var(--hero-h3); }

.hero-block h1,
.hero-block h2,
.hero-block h3 {
  font-weight: var(--hero-heading-weight);
  line-height: var(--hero-heading-leading);
  letter-spacing: var(--hero-heading-tracking);
  text-transform: var(--hero-heading-transform);
}

/* ── Bands ───────────────────────────────────────────────────────────────── */
.hero-block[data-hero-bg="surface"]   { background: var(--hero-surface); }
.hero-block[data-hero-bg="muted"]     { background: var(--hero-surface-muted); }
.hero-block[data-hero-bg="none"]      { background: transparent; }

.hero-block[data-hero-bg="dark"] {
  background: var(--hero-dark-bg);
  color: var(--hero-dark-text);
}
.hero-block[data-hero-bg="primary"] {
  background: var(--hero-primary);
  color: var(--hero-on-primary);
}
.hero-block[data-hero-bg="secondary"] {
  background: var(--hero-secondary);
  color: var(--hero-on-secondary);
}

/* A dark band needs its own heading colour, or the heading keeps the light-band
   colour and disappears. This is why dark-heading is a pinned global. */
.hero-block[data-hero-bg="dark"] :is(h1,h2,h3,h4,h5,h6),
.hero-block[data-hero-bg="dark"] .hero-split__heading   { color: var(--hero-dark-heading); }
.hero-block[data-hero-bg="primary"] :is(h1,h2,h3,h4,h5,h6),
.hero-block[data-hero-bg="primary"] .hero-split__heading { color: var(--hero-on-primary); }
.hero-block[data-hero-bg="secondary"] :is(h1,h2,h3,h4,h5,h6),
.hero-block[data-hero-bg="secondary"] .hero-split__heading { color: var(--hero-on-secondary); }

/* ── Vertical rhythm ─────────────────────────────────────────────────────── */
.hero-block[data-hero-pad="none"]     { padding-block: 0; }
.hero-block[data-hero-pad="compact"]  { padding-block: calc(var(--hero-pad) * 0.5); }
.hero-block[data-hero-pad="standard"] { padding-block: var(--hero-pad); }
.hero-block[data-hero-pad="roomy"]    { padding-block: calc(var(--hero-pad) * 1.6); }

/* ── Measure ─────────────────────────────────────────────────────────────── */
.hero-block__inner {
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.hero-block[data-hero-width="boxed"] .hero-block__inner { max-width: var(--hero-width-boxed); }
.hero-block[data-hero-width="wide"]  .hero-block__inner { max-width: var(--hero-width-wide); }
.hero-block[data-hero-width="full"]  .hero-block__inner { max-width: none; }

.hero-block[data-hero-align="center"] { text-align: center; }
.hero-block[data-hero-align="right"]  { text-align: right; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hero-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.hero-block[data-hero-align="center"] .hero-block__actions { justify-content: center; }
.hero-block[data-hero-align="right"]  .hero-block__actions { justify-content: flex-end; }

.hero-block__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.75em;
  font-weight: var(--hero-button-weight);
  line-height: 1.2;
  text-decoration: none;
  border: var(--hero-button-border) solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.hero-block__button[data-hero-shape="square"]  { border-radius: 0; }
.hero-block__button[data-hero-shape="rounded"] { border-radius: var(--hero-radius-button); }
.hero-block__button[data-hero-shape="pill"]    { border-radius: var(--hero-radius-pill); }

.hero-block__button[data-hero-style="solid"] {
  background: var(--hero-primary);
  color: var(--hero-on-primary);
  border-color: var(--hero-primary);
}
.hero-block__button[data-hero-style="solid"]:hover {
  background: var(--hero-secondary);
  border-color: var(--hero-secondary);
  color: var(--hero-on-secondary);
}
.hero-block__button[data-hero-style="outline"] {
  background: transparent;
  color: var(--hero-primary);
  border-color: currentColor;
}
.hero-block__button[data-hero-style="outline"]:hover {
  background: var(--hero-primary);
  color: var(--hero-on-primary);
}
.hero-block__button[data-hero-style="ghost"] {
  background: transparent;
  color: currentColor;
  border-color: transparent;
}
.hero-block__button[data-hero-style="ghost"]:hover { text-decoration: underline; }
.hero-block__button[data-hero-style="link"] {
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--hero-primary);
  text-decoration: underline;
}

/* On a dark band the solid button inverts, or it vanishes into the background. */
.hero-block[data-hero-bg="dark"] .hero-block__button[data-hero-style="solid"],
.hero-block[data-hero-bg="secondary"] .hero-block__button[data-hero-style="solid"] {
  background: var(--hero-dark-cta-bg);
  border-color: var(--hero-dark-cta-bg);
  color: var(--hero-dark-cta-text);
}
.hero-block[data-hero-bg="dark"] .hero-block__button[data-hero-style="outline"],
.hero-block[data-hero-bg="primary"] .hero-block__button[data-hero-style="outline"],
.hero-block[data-hero-bg="secondary"] .hero-block__button[data-hero-style="outline"] {
  color: currentColor;
}

/* ── Shared section head ─────────────────────────────────────────────────── */
.hero-block__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero-block__eyebrow {
  margin: 0 0 .5rem;
  font-size: var(--hero-eyebrow-size);
  font-weight: var(--hero-eyebrow-weight);
  letter-spacing: var(--hero-eyebrow-tracking);
  text-transform: var(--hero-eyebrow-transform);
  color: var(--hero-accent);
}
.hero-block[data-hero-align="center"] .hero-block__head { max-width: var(--hero-measure); margin-inline: auto; }

/* Card chrome, shared by cards and reviews so the same word looks the same. */
.hero-block[data-hero-card="bordered"] .hero-cards__card,
.hero-block[data-hero-card="bordered"] .hero-reviews__card {
  padding: var(--hero-card-pad); border: 1px solid rgba(0,0,0,.12); border-radius: var(--hero-radius-card);
}
.hero-block[data-hero-card="elevated"] .hero-cards__card,
.hero-block[data-hero-card="elevated"] .hero-reviews__card {
  padding: var(--hero-card-pad); border-radius: var(--hero-radius-card); background: #fff;
  box-shadow: var(--hero-shadow-card);
}
.hero-block[data-hero-card="filled"] .hero-cards__card,
.hero-block[data-hero-card="filled"] .hero-reviews__card {
  padding: var(--hero-card-pad); border-radius: var(--hero-radius-card); background: var(--hero-surface-muted);
}

/* ── Shared: hero-masthead and hero-banner, hero-site-header ──────────── */

/*
 * Room for a transparent site header, given only when there IS one.
 *
 * The offset used to hang off `hero-masthead[layout="transparent"]` alone, on
 * the assumption that the variant is only ever chosen under a transparent
 * header. It is not: no seeded header variant sets `transparent`, yet the Fleet
 * look picks this masthead - so every Fleet interior page reserved 6rem for a
 * header that is not floating, and the home page's banner, which needs the room
 * whenever the header IS transparent, never got it.
 *
 * Keyed on the header instead, which is the thing that actually decides. The
 * site header renders once per page, so `:has()` on the page root answers the
 * question for every block below it. `minimal` is the one banner layout with no
 * photo behind it; a transparent header over it is the pairing the engine
 * refuses, so it is not styled for here.
 */
/* A sticky transparent header is back IN the flow - it occupies its own height
   - so adding the offset on top of it gives every page a double gap. */
:root:has(.hero-site-header[data-hero-transparent="yes"]:not([data-hero-sticky="sticky"])) {
  --hero-header-present: var(--hero-header-offset);
}
.hero-masthead[data-hero-layout="transparent"],
.hero-banner:not([data-hero-layout="minimal"]) {
  padding-top: var(--hero-header-present, 0px);
}

/* ── Scrim depth ─────────────────────────────────────────────────────────── */
/*
 * Core, and keyed on `.hero-block`, because two widgets declare the same scale
 * and a third reads it. Declared per widget it was duplicated, unpackable, and
 * invisible on any page the declaring widget was absent from.
 */
.hero-block[data-hero-scrim="none"]   { --hero-scrim-alpha: 0; }
.hero-block[data-hero-scrim="light"]  { --hero-scrim-alpha: var(--hero-scrim-light); }
.hero-block[data-hero-scrim="medium"] { --hero-scrim-alpha: var(--hero-scrim-medium); }
.hero-block[data-hero-scrim="heavy"]  { --hero-scrim-alpha: var(--hero-scrim-heavy); }