/*
Theme Name:   HAVEN Child
Theme URI:    https://havenlogistics.at/
Description:  HAVEN Logistics & Transport — child theme of Hello Elementor. Carries the HAVEN design-token system (Brand Guidelines v2.0/2026), the accessibility corrections required by Architecture Part 7G, and the Homepage scrollytelling hero. No brand value is hardcoded outside the token block below.
Author:       Click4U Website Factory
Template:     hello-elementor
Version:      0.27.0
Text Domain:  haven-child
Requires PHP: 7.4
*/

/* =========================================================================
   0. MONTSERRAT — SELF-HOSTED (R-21, 2026-09-18)

   Montserrat used to come from fonts.googleapis.com, which sent every
   visitor's IP address to a third country on the very first request. For an
   Austrian audience that was a standing privacy exposure and a binding
   Production prerequisite. The font is now served from this theme, so the site
   makes ZERO requests to fonts.googleapis.com or fonts.gstatic.com.

   Provenance, licence and why there is no italic: assets/fonts/PROVENANCE.md.
   In short: OFL-1.1, copied from the installed `fonts-montserrat` system
   package (upstream github.com/JulietaUla/Montserrat), nothing downloaded.

   Three upright weights, exactly the 400/500/600 the Brand Guidelines §20
   allow and exactly what Google was asked for — so `<em>` keeps the
   browser-synthesised oblique it already had and nothing shifts.

   `font-display: swap` keeps the old behaviour: text paints immediately in the
   fallback stack and swaps when Montserrat arrives. WOFF2 first, WOFF for
   anything that cannot read it.
   ========================================================================= */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Montserrat-Regular.woff2') format('woff2'),
       url('assets/fonts/Montserrat-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Montserrat-Medium.woff2') format('woff2'),
       url('assets/fonts/Montserrat-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2'),
       url('assets/fonts/Montserrat-SemiBold.woff') format('woff');
}

/* =========================================================================
   1. DESIGN TOKENS
   Source of truth: HAVEN-Brand-Guidelines.pdf v2.0 / 2026 (APPROVED core
   palette, §16) and assets/palette/palette.json. HEX values are the
   definitive HAVEN digital values (Guidelines §19 — DIGITAL / APPROVED).
   Do not introduce a colour that is not defined here.
   ========================================================================= */
:root {
  /* --- APPROVED core palette (Guidelines §16) --- */
  --hvn-navy:        #223A57;
  --hvn-navy-deep:   #182A3F;
  --hvn-loden:       #5A6835;
  --hvn-tan:         #C08953;
  --hvn-red:         #B7232C;
  --hvn-paper:       #FDFDFD;

  /* --- DERIVED navy tint ramp (Guidelines §17) --- */
  --hvn-navy-80:     #4E6179;  /* 6.34:1 on white — body text OK */
  --hvn-navy-60:     #7A899A;  /* 3.58:1 — large text only        */
  --hvn-navy-40:     #A7B0BC;  /* never text                      */
  --hvn-navy-20:     #D3D8DD;
  --hvn-navy-10:     #E9EBEE;

  /* --- SEMANTIC ROLES (what the UI actually references) --- */
  --hvn-primary:          var(--hvn-navy);
  --hvn-primary-deep:     var(--hvn-navy-deep);
  --hvn-surface:          var(--hvn-paper);
  --hvn-surface-alt:      var(--hvn-navy-10);
  --hvn-surface-invert:   var(--hvn-navy);
  --hvn-text:             var(--hvn-navy);
  --hvn-text-secondary:   var(--hvn-navy-80);
  --hvn-text-invert:      #FFFFFF;
  --hvn-text-invert-soft: rgba(255,255,255,.82);
  --hvn-border:           var(--hvn-navy-20);
  --hvn-border-strong:    var(--hvn-navy-40);
  --hvn-accent:           var(--hvn-loden);   /* restrained, non-decorative */
  --hvn-danger:           var(--hvn-red);     /* error state only — NOT a brand colour */
  --hvn-focus-ring:       var(--hvn-navy);    /* 11.60:1 on paper */

  /* --- TYPOGRAPHY (Guidelines §20 — Montserrat, weights 400/500/600 only) --- */
  --hvn-font: 'Montserrat', 'Helvetica Neue', Arial, 'Segoe UI', Roboto, sans-serif;
  --hvn-fs-display: clamp(2.25rem, 1.15rem + 4.4vw, 4.5rem);
  --hvn-fs-h1:      clamp(1.875rem, 1.25rem + 2.6vw, 3rem);
  --hvn-fs-h2:      clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --hvn-fs-h3:      clamp(1.1875rem, 1.08rem + .5vw, 1.5rem);
  --hvn-fs-lede:    clamp(1.0625rem, 1rem + .38vw, 1.25rem);
  --hvn-fs-body:    clamp(1rem, .97rem + .14vw, 1.0625rem); /* floor 16px */
  --hvn-fs-small:   .875rem;
  --hvn-fs-label:   .75rem;
  --hvn-lh-tight:   1.08;
  --hvn-lh-heading: 1.18;
  --hvn-lh-body:    1.65;
  --hvn-tr-display: .02em;
  --hvn-tr-h2:      .01em;
  --hvn-tr-label:   .08em;

  /* --- SPACE / SHAPE / MOTION --- */
  --hvn-s1: .25rem; --hvn-s2: .5rem;  --hvn-s3: .75rem; --hvn-s4: 1rem;
  --hvn-s5: 1.5rem; --hvn-s6: 2rem;   --hvn-s7: 3rem;   --hvn-s8: 4rem;
  --hvn-s9: 6rem;   --hvn-s10: 8rem;
  --hvn-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --hvn-measure: 68ch;
  --hvn-wrap: 1240px;
  --hvn-radius: 2px;
  --hvn-radius-lg: 4px;
  --hvn-tap: 2.75rem;                 /* Part 7G minimum touch target */
  --hvn-dur: 180ms;
  --hvn-dur-slow: 420ms;
  --hvn-ease: cubic-bezier(.2,.6,.2,1);
}

/* Inverted surfaces re-point the roles rather than overriding each colour. */
.hvn-invert {
  --hvn-surface:        var(--hvn-navy);
  --hvn-surface-alt:    var(--hvn-navy-deep);
  --hvn-text:           #FFFFFF;
  --hvn-text-secondary: rgba(255,255,255,.78);
  --hvn-border:         rgba(255,255,255,.22);
  --hvn-border-strong:  rgba(255,255,255,.42);
  --hvn-focus-ring:     #FFFFFF;      /* 11.40:1 on HAVEN Navy */
  background: var(--hvn-navy);
  color: #FFFFFF;
}

/* =========================================================================
   2. BASE
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--hvn-font);
  font-size: var(--hvn-fs-body);
  line-height: var(--hvn-lh-body);
  color: var(--hvn-text);
  background: var(--hvn-surface);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hvn-font);
  color: var(--hvn-text);
  line-height: var(--hvn-lh-heading);
  margin: 0 0 var(--hvn-s4);
  text-wrap: balance;
}
h1 { font-size: var(--hvn-fs-h1); font-weight: 600; letter-spacing: var(--hvn-tr-display); }
h2 { font-size: var(--hvn-fs-h2); font-weight: 500; letter-spacing: var(--hvn-tr-h2); }
h3 { font-size: var(--hvn-fs-h3); font-weight: 600; }
p  { margin: 0 0 var(--hvn-s4); max-width: var(--hvn-measure); }
a  { color: var(--hvn-primary); text-underline-offset: .18em; }
.hvn-invert a { color: #FFFFFF; }
img, svg { max-width: 100%; height: auto; }

/* --- Focus. Elementor and Hello both suppress outlines; Part 7G requires a
       visible focus indicator on every focusable element. Corrected, not accepted. --- */
:focus { outline: none; }
:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, .elementor-button:focus-visible {
  outline: 3px solid var(--hvn-focus-ring) !important;
  outline-offset: 2px !important;
  border-radius: var(--hvn-radius);
}
/* Keyboard users on browsers without :focus-visible still get a ring. */
.no-focus-visible a:focus, .no-focus-visible button:focus {
  outline: 3px solid var(--hvn-focus-ring) !important;
  outline-offset: 2px !important;
}

.hvn-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--hvn-navy); color: #fff; padding: var(--hvn-s3) var(--hvn-s5);
  font-weight: 600; text-decoration: none;
}
.hvn-skip-link:focus { left: 0; }

/* Hello Elementor prints its own skip link to the same target. One skip link
   is correct; the duplicate is suppressed rather than left to double up. */
.skip-link.screen-reader-text { display: none !important; }
main#content:focus { outline: none; }

.hvn-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */
.hvn-wrap { width: 100%; max-width: var(--hvn-wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.hvn-section { padding-block: var(--hvn-section-y); background: var(--hvn-surface); color: var(--hvn-text); }
.hvn-section--alt { background: var(--hvn-surface-alt); }
.hvn-stack > * + * { margin-top: var(--hvn-s4); }

.hvn-eyebrow {
  font-size: var(--hvn-fs-label); font-weight: 600; letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase; color: var(--hvn-text-secondary); margin: 0 0 var(--hvn-s3);
}
.hvn-lede { font-size: var(--hvn-fs-lede); color: var(--hvn-text-secondary); max-width: 58ch; }
.hvn-rule { width: 3.5rem; height: 2px; background: var(--hvn-primary); border: 0; margin: 0 0 var(--hvn-s5); }
.hvn-invert .hvn-rule { background: #fff; }

/* =========================================================================
   4. BUTTONS
   ========================================================================= */
.hvn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: var(--hvn-tap); padding: .8em 1.6em;
  font-family: var(--hvn-font); font-size: 1rem; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; border-radius: var(--hvn-radius); border: 2px solid transparent;
  cursor: pointer; transition: background-color var(--hvn-dur) var(--hvn-ease),
                              color var(--hvn-dur) var(--hvn-ease),
                              border-color var(--hvn-dur) var(--hvn-ease);
}
.hvn-btn--primary { background: var(--hvn-primary); color: #fff; border-color: var(--hvn-primary); }
.hvn-btn--primary:hover { background: var(--hvn-primary-deep); border-color: var(--hvn-primary-deep); color: #fff; }
.hvn-btn--ghost { background: transparent; color: var(--hvn-text); border-color: var(--hvn-border-strong); }
/* For use over navy artwork. The plain ghost variant inherits --hvn-text, which
   is navy — invisible on a navy field. This one is explicit. */
.hvn-btn--ondark { background: transparent; color: #fff; border-color: rgba(255,255,255,.62); }
.hvn-btn--ondark:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.hvn-btn--ghost:hover { border-color: var(--hvn-primary); color: var(--hvn-primary); }
.hvn-invert .hvn-btn--primary { background: #fff; color: var(--hvn-navy); border-color: #fff; }
.hvn-invert .hvn-btn--primary:hover { background: var(--hvn-navy-10); border-color: var(--hvn-navy-10); color: var(--hvn-navy); }
.hvn-invert .hvn-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hvn-invert .hvn-btn--ghost:hover { border-color: #fff; color: #fff; }
.hvn-btn__icon { width: 1.15em; height: 1.15em; flex: none; }

.hvn-actions { display: flex; flex-wrap: wrap; gap: var(--hvn-s3); }

/* =========================================================================
   5. HERO — Visual Fidelity Pass 2 (tracking shot)
   Vehicle anchored; the world streams past it at three depths. Conversion
   sweeps across the vehicle first, then the road is redrawn in place at
   identical geometry. Only transform, opacity and mask-position animate.
   ========================================================================= */
.hvn-h3 {
  --depth: 0;   /* late-arriving graphical structure */
  --sx: 0px;      /* stream offset, written once per frame by the engine */
  --conv: 0;      /* vehicle conversion 0..1 (leads the world)           */
  --world: 0;     /* world conversion 0..1 (follows)                     */
  --dolly: 1;     /* camera scale during the late graphical phase        */
  --type: 0;      /* headline reveal                                     */
  --cue: 1;
  position: relative;
  /* True full-bleed: escapes any centred container regardless of its width. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--hvn-navy-deep);
}
.hvn-h3__track { height: 520vh; }
.hvn-h3__pin {
  position: sticky; top: 0; height: 100svh; min-height: 30rem;
  overflow: hidden; background: var(--hvn-navy-deep);
}
.hvn-h3__stage {
  position: absolute; inset: 0; overflow: hidden;
  transform: scale(var(--dolly));
  transform-origin: 50% 62%;
}

/* --- streaming depth layers ---------------------------------------------
   Each strip is 3200px of a 2x-wide tile, repeated horizontally. The engine
   writes one --sx; each layer multiplies it by its own parallax factor, so
   far layers crawl and the road races. That difference is the depth cue. */
.hvn-h3__layer {
  position: absolute; left: -50%; right: -50%; top: 0; bottom: 0;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: calc(var(--sx) * var(--f, 1)) center;
  will-change: background-position;
}
.hvn-h3__layer--sky     { --f: 0.16; background-image: url('assets/img/h3-sky.webp'); }
.hvn-h3__layer--barrier { --f: 0.52; background-image: url('assets/img/h3-barrier.webp'); }
.hvn-h3__layer--road    { --f: 1.00; background-image: url('assets/img/h3-road.webp'); }
.hvn-h3__layer--groad   { --f: 1.00; background-image: url('assets/img/h3-groad.webp'); opacity: var(--world); }
/* Structure that ARRIVES during the pull-back rather than being present in the
   first graphical frame — §13's progressive density. Neutral depot vocabulary
   only: trusses, bays, gantries. It streams slower than the road, which is the
   parallax cue that it is further away. */
.hvn-h3__layer--depot   { --f: 0.34; background-image: url('assets/img/h3-depot.webp'); opacity: var(--depth); z-index: 2; }

/* The navy floods in behind the graphical road as the world converts. */
.hvn-h3__stage::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--hvn-navy-deep);
  opacity: var(--world);
}
.hvn-h3__layer--groad { z-index: 2; }
.hvn-h3__shadow, .hvn-h3__veh { z-index: 3; }

/* --- ground contact ------------------------------------------------------ */
/* Anchored to the road, not to the top of the stage.
   The road strip is sized `auto 100%`, so its contact line always sits at
   80% of stage height. The plate is 2576x1103 with the wheels at y=1080, so
   the plate bottom hangs 2.1% of its own height below the contact line.
   width 80% -> plate height = 80vw * 1103/2576 = 34.25vw -> overhang 0.72vw. */
.hvn-h3__shadow {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 80%; aspect-ratio: 2576 / 1103;
  bottom: calc(20% - 0.72vw);
  background: url('assets/img/h3-shadow.webp') center/contain no-repeat;
  opacity: calc(1 - var(--world) * 0.8);
}

/* --- vehicle: anchored, two states, one geometry -------------------------
   72% of viewport width. The reference truck is a 4.11:1 tractor-trailer at
   85% width; the Sprinter is 2.37:1, so matching both its width and its
   height share is geometrically impossible. Width dominance is kept. */
.hvn-h3__veh {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 80%; aspect-ratio: 2576 / 1103;
  bottom: calc(20% - 0.72vw);
}
.hvn-h3__veh img {
  position: absolute; inset: 0; width: 100%; height: auto; display: block;
}
/* The conversion is a soft-edged sweep travelling front-to-back across the
   vehicle — the reference converts the cab first, then the body. */
/* Mask is 300% wide: black in its left third, transparent beyond 40%.
   At position 0% the element sits entirely in the black third (fully opaque);
   at 100% entirely in the transparent zone (fully hidden). In between, the
   element's RIGHT edge reaches the transparent zone first, so the cab converts
   before the body — the order the reference shows. */
.hvn-h3__photo {
  -webkit-mask-image: linear-gradient(to right, #000 0 33.3%, transparent 40% 100%);
          mask-image: linear-gradient(to right, #000 0 33.3%, transparent 40% 100%);
  -webkit-mask-size: 300% 100%;  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: calc(var(--conv) * 100%) 0;
          mask-position: calc(var(--conv) * 100%) 0;
}
.hvn-h3__wire { opacity: var(--conv); }
/* the luminous leading edge of the conversion */
.hvn-h3__sweep {
  position: absolute; top: -3%; bottom: -3%; width: 12%;
  left: calc(100% - var(--conv) * 112%);
  background: linear-gradient(to right,
    rgba(253,253,253,0) 0%, rgba(253,253,253,.55) 46%,
    rgba(253,253,253,.9) 62%, rgba(253,253,253,0) 100%);
  filter: blur(6px);
  opacity: calc(var(--conv) * (1 - var(--conv)) * 3.6);
  pointer-events: none;
}

/* --- headline ------------------------------------------------------------ */
.hvn-h3__type {
  position: absolute; left: 0; right: 0; bottom: 15%; z-index: 4;
  display: flex; justify-content: center; pointer-events: none;
}
.hvn-h3__type h1 {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: .34rem;
  text-align: center;
}
.hvn-h3__type span {
  display: inline-block;
  clip-path: inset(0 calc(100% - var(--type) * 100%) 0 0);
  background: var(--hvn-paper); color: var(--hvn-navy-deep);
  font-size: clamp(1.2rem, .5rem + 2.1vw, 2.7rem);
  font-weight: 600; letter-spacing: var(--hvn-tr-display); line-height: 1.16;
  padding: .18em .5em;
}

/* --- scroll affordance --------------------------------------------------- */
.hvn-h3__scroll {
  position: absolute; z-index: 4;
  right: clamp(1rem, 3vw, 2.75rem); bottom: clamp(1rem, 3vw, 2.25rem);
  display: inline-flex; align-items: center; gap: .5em;
  min-height: var(--hvn-tap); padding: .5em 1em;
  background: rgba(24,42,63,.72); color: #fff; text-decoration: none;
  font-size: var(--hvn-fs-label); font-weight: 600;
  letter-spacing: var(--hvn-tr-label); text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--hvn-radius);
  opacity: var(--cue); transition: opacity .3s linear;
}
.hvn-h3__scroll:hover { background: var(--hvn-navy); }

/* --- reduced motion / no JS ---------------------------------------------- */
.hvn-h3__static { display: none; background: var(--hvn-navy-deep); padding-block: var(--hvn-s7) var(--hvn-s8); }
.hvn-h3__static h2 { color: #fff; max-width: 22ch; }

@media (prefers-reduced-motion: reduce) {
  .hvn-h3__track { height: auto; }
  .hvn-h3__pin { position: static; height: auto; min-height: 0; }
  .hvn-h3__stage { position: relative; height: clamp(14rem, 40vw, 26rem); transform: none; }
  .hvn-h3__layer--groad, .hvn-h3__wire, .hvn-h3__sweep { display: none; }
  .hvn-h3__stage::before { display: none; }
  .hvn-h3__photo { -webkit-mask-image: none; mask-image: none; }
  .hvn-h3__type, .hvn-h3__scroll { display: none; }
  .hvn-h3__static { display: block; }
}

/* Step 1 is a desktop acceptance target; small screens only need to be safe. */
@media (max-width: 767px) {
  .hvn-h3__track { height: 380vh; }
  .hvn-h3__veh, .hvn-h3__shadow { width: 132%; bottom: calc(24% - 1.2vw); }
  .hvn-h3__type { bottom: 12%; }
}

/* =========================================================================
   6. CARDS / SERVICE GRID / FACTS
   ========================================================================= */
.hvn-grid { display: grid; gap: var(--hvn-s5); }
.hvn-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hvn-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.hvn-card {
  background: var(--hvn-paper); border: 1px solid var(--hvn-border);
  border-radius: var(--hvn-radius-lg); padding: var(--hvn-s5);
}
.hvn-card h3 { margin-bottom: var(--hvn-s2); }
.hvn-card h3 a { color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--hvn-tap); }
.hvn-card--link { transition: border-color var(--hvn-dur) var(--hvn-ease); }
.hvn-card--link:hover { border-color: var(--hvn-primary); }
.hvn-card--link h3 a::after { content: ' \2192'; }
.hvn-card--link h3 a:hover { text-decoration: underline; }
.hvn-card p  { color: var(--hvn-text-secondary); margin: 0; font-size: var(--hvn-fs-small); }
/* Navy 60 is large-text-only per Guidelines §17 (3.58:1); at label size the
   number must use Navy 80, which clears 4.5:1. */
.hvn-card__num {
  display: block; font-size: var(--hvn-fs-label); font-weight: 600;
  letter-spacing: var(--hvn-tr-label); color: var(--hvn-text-secondary); margin-bottom: var(--hvn-s3);
}

.hvn-facts { display: grid; gap: var(--hvn-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin: 0; }
.hvn-facts div { border-top: 2px solid var(--hvn-border-strong); padding-top: var(--hvn-s3); }
.hvn-facts dt { font-size: var(--hvn-fs-label); font-weight: 600; letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase; color: var(--hvn-text-secondary); margin-bottom: var(--hvn-s2); }
.hvn-facts dd { margin: 0; font-size: var(--hvn-fs-h3); font-weight: 600; color: var(--hvn-text); }
.hvn-facts dd small { display: block; font-size: var(--hvn-fs-small); font-weight: 400; color: var(--hvn-text-secondary); margin-top: var(--hvn-s1); }

/* =========================================================================
   7. VEHICLE SECTION
   ========================================================================= */
.hvn-vehicle { display: grid; gap: var(--hvn-s7); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.hvn-vehicle figure { margin: 0; }
.hvn-vehicle img { width: 100%; height: auto; display: block; border-radius: var(--hvn-radius-lg); }
.hvn-vehicle figcaption { font-size: var(--hvn-fs-small); color: var(--hvn-text-secondary); margin-top: var(--hvn-s3); }
.hvn-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hvn-s3); margin-top: var(--hvn-s3); }

/* =========================================================================
   8. FAQ — native <details>, no JavaScript, no Pro widget
   ========================================================================= */
.hvn-faq { border-top: 1px solid var(--hvn-border); max-width: var(--hvn-measure); }
.hvn-faq details { border-bottom: 1px solid var(--hvn-border); }
.hvn-faq summary {
  cursor: pointer; list-style: none; padding: var(--hvn-s4) 2.5rem var(--hvn-s4) 0;
  font-weight: 600; font-size: var(--hvn-fs-h3); position: relative; min-height: var(--hvn-tap);
  display: flex; align-items: center;
}
.hvn-faq summary::-webkit-details-marker { display: none; }
.hvn-faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%; width: .7rem; height: .7rem;
  border-right: 2px solid var(--hvn-primary); border-bottom: 2px solid var(--hvn-primary);
  transform: translateY(-60%) rotate(45deg); transition: transform var(--hvn-dur) var(--hvn-ease);
}
.hvn-faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.hvn-faq p { color: var(--hvn-text-secondary); padding-bottom: var(--hvn-s4); }

/* =========================================================================
   9. HEADER / FOOTER (Hello Elementor markup, HAVEN tokens)
   ========================================================================= */
.hvn-header {
  background: var(--hvn-paper); border-bottom: 1px solid var(--hvn-border);
  position: relative; z-index: 50;
}
.hvn-header__inner {
  display: flex; align-items: center; gap: var(--hvn-s5);
  min-height: 4.5rem; padding-block: var(--hvn-s2);
}
.hvn-header__brand { display: inline-flex; align-items: center; flex: none; min-height: var(--hvn-tap); }
.hvn-header__logo { height: 5.5rem; width: auto; max-height: 5.5rem; }
.hvn-header__nav { margin-inline-start: auto; }
.hvn-header__nav ul { display: flex; gap: var(--hvn-s5); list-style: none; margin: 0; padding: 0; }
.hvn-header__nav a {
  display: inline-flex; align-items: center; min-height: var(--hvn-tap);
  font-weight: 500; font-size: .9375rem; letter-spacing: .01em;
  color: var(--hvn-text); text-decoration: none;
}
.hvn-header__nav a:hover { text-decoration: underline; }
.hvn-header__actions { display: flex; align-items: center; gap: var(--hvn-s4); flex: none; }
.hvn-header__tel {
  display: inline-flex; align-items: center; min-height: var(--hvn-tap);
  font-weight: 600; font-size: .9375rem; color: var(--hvn-text); text-decoration: none;
}
.hvn-header__tel:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .hvn-header__nav { display: none; }        /* nav lives in the page and footer at this width */
  .hvn-header__tel { display: none; }
  .hvn-header__inner { gap: var(--hvn-s3); }
  .hvn-header__actions { margin-inline-start: auto; }
  .hvn-header__logo { height: 4rem; }
  .hvn-header__cta { padding: .7em 1.1em; font-size: .9375rem; }
}

.hvn-footer { background: var(--hvn-navy); color: #fff; padding-block: var(--hvn-s8) var(--hvn-s6); }
.hvn-footer a { color: #fff; }
.hvn-footer__logo { width: 12rem; height: auto; margin-bottom: var(--hvn-s5); }
.hvn-footer__grid { display: grid; gap: var(--hvn-s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.hvn-footer__note { margin-top: var(--hvn-s7); padding-top: var(--hvn-s4); border-top: 1px solid rgba(255,255,255,.2);
  font-size: var(--hvn-fs-small); color: rgba(255,255,255,.72); }
.hvn-footer h2 { font-size: var(--hvn-fs-label); letter-spacing: var(--hvn-tr-label); text-transform: uppercase;
  color: rgba(255,255,255,.72); font-weight: 600; margin-bottom: var(--hvn-s3); }
.hvn-footer ul { list-style: none; margin: 0; padding: 0; }
.hvn-footer li { display: flex; }
.hvn-footer li a, .hvn-footer li > span { display: inline-flex; align-items: center; min-height: var(--hvn-tap); }
.hvn-footer li + li { margin-top: var(--hvn-s1); }
.hvn-footer__addr { font-style: normal; color: rgba(255,255,255,.86); line-height: 1.7; }

/* Non-production banner. Test/Lab only — removed at Staging promotion. */
.hvn-lab-banner {
  background: var(--hvn-red); color: #fff; text-align: center;
  font-size: var(--hvn-fs-label); font-weight: 600; letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase; padding: var(--hvn-s2) var(--hvn-s4);
}

/* =========================================================================
   10. ELEMENTOR INTEROP
   Keep Elementor's own defaults from fighting the token system.
   ========================================================================= */
.elementor-widget-container > :last-child { margin-bottom: 0; }
.elementor-button { font-family: var(--hvn-font); border-radius: var(--hvn-radius); min-height: var(--hvn-tap); }
.e-con, .e-con-inner { --container-max-width: var(--hvn-wrap); }

/* =========================================================================
   11. SERVICE PAGES
   One system, parameterised. The remaining five service pages reuse every
   rule below; none of it is specific to clearance.
   ========================================================================= */
.hvn-shero {
  position: relative; background: var(--hvn-navy-deep); color: #fff;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  overflow: hidden;
}
.hvn-shero__media { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.hvn-shero__media svg { width: 100%; height: 100%; display: block; }
/* The scrim is a sibling overlay painted after the artwork, not a negative
   z-index pseudo-element on the copy: `z-index: -1` there drops it *behind*
   the artwork layer, which is what made this copy unreadable. */
.hvn-shero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left,
    rgba(24,42,63,0)   0,
    rgba(24,42,63,.55) 26%,
    rgba(24,42,63,.92) 44%,
    var(--hvn-navy-deep) 60%);
}
.hvn-shero__inner { position: relative; z-index: 1; }
.hvn-shero h1 { color: #fff; max-width: 20ch; }
.hvn-shero .hvn-eyebrow { color: rgba(255,255,255,.86); }
.hvn-shero__lede { font-size: var(--hvn-fs-lede); color: rgba(255,255,255,.9); max-width: 52ch; margin-bottom: var(--hvn-s6); }

.hvn-split { display: grid; gap: var(--hvn-s7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }

.hvn-ticks { list-style: none; margin: 0; padding: 0; }
.hvn-ticks li {
  position: relative; padding: var(--hvn-s3) 0 var(--hvn-s3) 2.25rem;
  border-bottom: 1px solid var(--hvn-border); font-size: var(--hvn-fs-body);
}
.hvn-ticks li::before {
  content: ''; position: absolute; left: .25rem; top: 1.35rem;
  width: .7rem; height: .4rem;
  border-left: 2px solid var(--hvn-primary); border-bottom: 2px solid var(--hvn-primary);
  transform: rotate(-45deg);
}
.hvn-care__h { max-width: 26ch; }

.hvn-steps { list-style: none; margin: var(--hvn-s7) 0 0; padding: 0;
  display: grid; gap: var(--hvn-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.hvn-steps li { border-top: 2px solid var(--hvn-border-strong); padding-top: var(--hvn-s4); }
.hvn-steps__no { display: block; font-size: var(--hvn-fs-label); font-weight: 600;
  letter-spacing: var(--hvn-tr-label); color: var(--hvn-text-secondary); margin-bottom: var(--hvn-s2); }
.hvn-steps h3 { font-size: var(--hvn-fs-h3); margin-bottom: var(--hvn-s2); }
.hvn-steps p { font-size: var(--hvn-fs-small); color: var(--hvn-text-secondary); margin: 0; }

@media (max-width: 767px) {
  .hvn-shero::after {
    background: linear-gradient(to top,
      var(--hvn-navy-deep) 0,
      rgba(24,42,63,.94) 52%,
      rgba(24,42,63,.66) 78%,
      rgba(24,42,63,.35) 100%);
  }
  .hvn-shero__media { opacity: .34; }
}