/* ============================================================================
   X3WEB — HERO
   A full-viewport video plate with the copy left and a frosted panel right.
   The plate stretches to the viewport and never letterboxes; the foreground
   keeps its measured proportions.

   --uh is the hero's design unit: one reference pixel of a 1440x900 comp,
   clamped so the panel keeps its internal proportions without the type ever
   outrunning a narrow frame.
   ========================================================================== */

.hero,
.page-hero{
  --uh:clamp(0.62px, min(100vw / 1440, 100vh / 900), 1.18px);
  position:relative;
  display:flex;
  align-items:center;
  min-height:100vh;
  padding:calc(var(--header-h) + 40px) 0 56px;
  overflow:hidden;
  background-color:var(--brand);
  color:var(--on-dark);
  isolation:isolate;
}
@supports (min-height:100dvh){
  .hero,.page-hero{
    --uh:clamp(0.62px, min(100vw / 1440, 100dvh / 900), 1.18px);
    min-height:100dvh;
  }
}

/* ── The video plate ───────────────────────────────────────────────────── *
   The 2px bleed hides subpixel seams at the viewport edge. Deliberately no
   transform: a transform promotes the video to its own compositor layer,
   which can then present a frame before the main thread has painted the wash
   above it — the plate flashes undimmed for a beat on every navigation.

   The plate also starts hidden and is revealed only once it has frames to
   show, so the video and the wash always appear together rather than the
   video arriving first. Until then the hero sits on its navy base colour. */
.hero-bg-video,
.hero-bg-image{
  position:absolute;
  left:-2px;top:-2px;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  object-fit:cover;
  /* The plates are 16:9 and the hero is wider than that, so cover crops them
     vertically. Centring the crop pushed the subjects' heads up under the
     fixed header; biasing the crop towards the top of the source keeps the
     headroom that was shot above them and drops the subjects clear of it.
     A page can retune this by setting --hero-focus on its .page-hero. */
  object-position:50% var(--hero-focus);
  z-index:0;
  pointer-events:none;
}
.hero-bg-image{background-size:cover;background-position:50% var(--hero-focus)}

.js .hero-bg-video{opacity:0;transition:opacity var(--dur-plate) var(--ease-out)}
.js .hero-bg-video.is-ready{opacity:1}
/* Without JS the class is never added, so the plate must not be hidden. */
html:not(.js) .hero-bg-video{opacity:1}

/* Navy wash over the plate, so white type always clears the footage. */
.hero-tint{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:var(--hero-wash);
}

.hero .container,
.page-hero .container{position:relative;z-index:2;width:100%}
/* A centred hero gets the wider container: display type needs the extra
   measure to keep the longest headlines on two lines. */
.page-hero .container:has(.hero-layout.is-centred){max-width:var(--container-wide)}

/* ── Layout: copy left, panel right ────────────────────────────────────── */
.hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(32px,5vw,78px);
}
.hero-layout.no-panel{grid-template-columns:minmax(0,1fr)}
.hero-copy{max-width:min(100%,calc(820 * var(--uh)))}

/* Every page except the home page centres its hero copy.

   The headline gets nearly the full container: at display size a measure of
   ~780px pushed the longest headlines ("Professional E-commerce Websites for
   Medium to Large Businesses in South Africa", 79 characters) onto four
   lines. The lead paragraph keeps a shorter measure — it is reading text and
   would be uncomfortable at headline width. */
.hero-layout.is-centred{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero-layout.is-centred .hero-copy{max-width:100%}
.hero-layout.is-centred .hero-sub{max-width:min(100%,calc(760 * var(--uh)))}
.hero-layout.is-centred .hero-btns{justify-content:center}
.hero-layout.is-centred .breadcrumb{justify-content:center}

/* ── Eyebrow ───────────────────────────────────────────────────────────── */
.hero .section-label,
.page-hero .section-label{
  display:inline-block;
  font-size:clamp(11.5px,calc(13 * var(--uh)),13.5px);
  font-weight:var(--w-medium);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:calc(18 * var(--uh));
}

/* Pill variant, used where the page already had one. The plate is neutral
   glass rather than a tinted orange wash — an orange fill behind orange text
   reads as a glow around the label. The accent stays in the type. */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:8px 17px;
  margin-bottom:calc(22 * var(--uh));
  border-radius:var(--radius-pill);
  background:var(--on-dark-a09);
  border:1px solid var(--hairline-on-dark);
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:0.05em;
  color:var(--accent);
}
.hero-eyebrow i{font-size:var(--fs-2xs)}

/* ── Headline ──────────────────────────────────────────────────────────── */
/* 84px with the wider centred container keeps even the longest headline on
   the site (79 characters, on the e-commerce page) to two lines. */
.hero h1,
.page-hero h1{
  font-size:clamp(34px,calc(84 * var(--uh)),84px);
  font-weight:var(--w-display);
  line-height:0.98;
  letter-spacing:var(--ls-display);
  color:var(--on-dark);
  margin-bottom:calc(22 * var(--uh));
  text-wrap:balance;
}
.hero h2,
.page-hero h2,
.home-hero-secondary{
  font-size:clamp(20px,calc(38 * var(--uh)),40px);
  font-weight:var(--w-display);
  line-height:1.12;
  letter-spacing:var(--ls-h2);
  color:var(--on-dark-soft);
  margin-bottom:calc(22 * var(--uh));
}

/* The orange accent on emphasised words — the site's signature, kept. */
.hero-emphasis{
  color:var(--on-dark);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:3px;
  text-underline-offset:8px;
  text-decoration-skip-ink:auto;
}

.hero-sub,
.hero p.hero-sub,
.page-hero p.hero-sub{
  font-size:clamp(15.5px,calc(18.5 * var(--uh)),19px);
  font-weight:var(--w-regular);
  line-height:1.7;
  color:var(--on-dark-soft);
  max-width:calc(660 * var(--uh));
  margin-bottom:calc(32 * var(--uh));
}
.hero-layout.is-centred .hero-sub{margin-inline:auto}

.hero-btns{margin-top:calc(4 * var(--uh))}

/* Buttons over the plate pick up the media glass context. */
.hero .btn-white,.page-hero .btn-white{box-shadow:var(--shadow-md)}

/* ── The frosted panel ─────────────────────────────────────────────────── *
   Proportions follow the comp: a 275x271 plate, its contents measured in --uh
   so the panel scales as one object rather than reflowing.                  */
.hero-panel{
  /* The panel carries its own unit at twice the hero's, so every measurement
     inside it — padding, type, badge, meter — scales as one object rather
     than the box growing around unchanged contents. */
  --up:calc(var(--uh) * 2);
  position:relative;
  width:calc(302 * var(--up));
  min-width:300px;
  padding:calc(30 * var(--up)) calc(28 * var(--up)) calc(28 * var(--up));
  border-radius:calc(28 * var(--up));
  background:linear-gradient(135deg,var(--hero-panel-a),var(--hero-panel-b));
  border:1px solid var(--hero-panel-border);
  -webkit-backdrop-filter:blur(40px) saturate(120%);
  backdrop-filter:blur(40px) saturate(120%);
  box-shadow:
    inset 1px 1px 0 var(--hero-panel-hi),
    inset -1px -1px 0 var(--hero-panel-lo),
    var(--hero-panel-drop);
  color:var(--on-dark);
}
.hero-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:calc(14 * var(--up));
  margin-bottom:calc(18 * var(--up));
}
.hero-panel-title{
  display:flex;align-items:center;gap:calc(10 * var(--up));
  font-size:clamp(21px,calc(23 * var(--up)),34px);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-h3);
  line-height:1.1;
  color:var(--on-dark);
}
.hero-panel-dot{
  width:calc(9 * var(--up));height:calc(9 * var(--up));
  min-width:10px;min-height:10px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}
.hero-panel-badge{
  width:calc(64 * var(--up));height:calc(64 * var(--up));
  min-width:76px;min-height:76px;
  flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--hero-badge-bg);
  color:var(--brand);
  font-size:calc(24 * var(--up));
  box-shadow:0 0 calc(26 * var(--up)) calc(9 * var(--up)) var(--hero-badge-halo),
             var(--hero-badge-drop);
}
.hero-panel-badge i{color:var(--brand)}
.hero-panel-sub{
  font-size:clamp(16px,calc(16.5 * var(--up)),23px);
  font-weight:var(--w-regular);
  line-height:1.45;
  color:var(--on-dark-soft);
  margin-bottom:calc(26 * var(--up));
}
/* Ticked bullet list inside the panel. The tick is drawn from two borders so
   it needs no icon font and picks up the accent directly. */
.hero-panel-list{
  display:flex;
  flex-direction:column;
  gap:calc(11 * var(--up));
}
.hero-panel-list li{
  position:relative;
  padding-left:calc(26 * var(--up));
  font-size:clamp(14px,calc(15.5 * var(--up)),21px);
  font-weight:var(--w-regular);
  line-height:1.45;
  color:var(--on-dark-soft);
}
.hero-panel-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.42em;
  width:calc(12 * var(--up));
  height:calc(6.5 * var(--up));
  min-width:11px;min-height:6px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.hero-panel-scale{
  display:flex;justify-content:space-between;
  font-size:clamp(13px,calc(14 * var(--up)),19px);
  font-weight:var(--w-regular);
  letter-spacing:-0.02em;
  color:var(--on-dark-mute);
  margin-bottom:calc(11 * var(--up));
}
.hero-panel-track{
  height:calc(8 * var(--up));
  min-height:10px;
  border-radius:var(--radius-pill);
  background:var(--on-dark-a22);
  overflow:hidden;
}
.hero-panel-track i{
  display:block;height:100%;
  width:var(--fill,62%);
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
  transform-origin:left center;
}
.hero-panel-note{
  margin-top:calc(14 * var(--up));
  font-size:clamp(13px,calc(13 * var(--up)),18px);
  color:var(--on-dark-mute);
}

/* ── Cinematic scale ───────────────────────────────────────────────────── *
   Opt-in on the home page only (.hero-cinematic, set via $hero_extra_class),
   so the one signature headline on the site can run bigger than the shared
   84px ceiling every other hero uses, without moving that shared ceiling. */
.page-hero.hero-cinematic h1{
  font-size:clamp(42px,calc(112 * var(--uh)),128px);
  letter-spacing:-0.04em;
}
.page-hero.hero-cinematic .hero-sub{
  font-size:clamp(16.5px,calc(20 * var(--uh)),21px);
}

/* ── Scroll cue ────────────────────────────────────────────────────────── */
.hero-scroll-cue{
  position:absolute;
  left:50%;bottom:26px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  font-size:var(--fs-2xs);
  font-weight:var(--w-medium);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--on-dark-faint);
}
.hero-scroll-cue::after{
  content:"";
  width:1px;height:34px;
  background:linear-gradient(to bottom,var(--on-dark-a22),transparent);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-layout{grid-template-columns:minmax(0,1fr);gap:var(--gap-lg)}
  .hero-panel{width:100%;max-width:620px}
  .hero-scroll-cue{display:none}
}

@media (max-width:860px){
  .hero,.page-hero{
    min-height:auto;
    padding:calc(var(--header-h) + 64px) 0 64px;
  }
  @supports (min-height:100dvh){
    .hero,.page-hero{min-height:auto}
  }
  .hero h1,.page-hero h1{font-size:clamp(30px,8.2vw,46px);line-height:1.04}
  .page-hero.hero-cinematic h1{font-size:clamp(32px,9vw,52px)}
  .hero-emphasis{text-decoration-thickness:2px;text-underline-offset:6px}
  .hero-sub{max-width:none}
  .hero-panel{max-width:none}
}

@media (max-width:560px){
  .hero,.page-hero{padding:calc(var(--header-h) + 48px) 0 52px}
  .hero-panel{padding:22px 20px 20px;border-radius:var(--radius-xl)}
}