/* Haven — tokeni templata, scopovani na .sec-haven-header. */

/* ============================================================
   DESIGN TOKENS — Template 8 "Haven"
   Niche variant: G — anxious patients / sedation dentistry
   >>> NEW variant, not in the original style guide. Rules and
       reasoning live in the BUILDER-LOG, §4d. <<<

   Register: quiet, unhurried, never selling. The page talks to
   someone who has been avoiding this for years.
   Olive and oat carry the page, muted sky is the only accent.
   Shape language: leaf (vesica) media masks + concentric rings.
   Change ONLY this file to re-skin the whole template.
   ============================================================ */

.sec-haven-header {
  /* ---------- Color ---------- */
  --c-bg:          #F5F4EF;   /* warm oat, no pink cast */
  --c-bg-alt:      #EDEBE3;
  --c-white:       #FFFFFF;
  --c-surface:     #E3E5DA;   /* olive tint for cards / soft fills */

  --c-primary:     #45513F;   /* deep olive — 7.5:1 on --c-bg, safe for text */
  --c-primary-dk:  #2E3729;   /* headings, dark sections */
  --c-primary-lt:  #8B9682;
  --c-primary-08:  rgba(69, 81, 63, 0.08);
  --c-primary-14:  rgba(69, 81, 63, 0.14);

  --c-accent:      #8FB3C7;   /* muted sky — fills, icons, rings */
  --c-accent-dk:   #3E6379;   /* AA-safe sky for TEXT on light (5.8:1) */
  --c-accent-soft: #DCE8EF;
  --c-accent-tint: rgba(143, 179, 199, 0.24);

  --c-text:        #22271F;
  --c-text-muted:  #565C51;   /* 6.2:1 on --c-bg */
  --c-on-dark:     #F0F1EA;
  --c-on-dark-mu:  rgba(240, 241, 234, 0.76);

  --c-line:        rgba(34, 39, 31, 0.10);
  --c-line-strong: rgba(34, 39, 31, 0.20);
  --c-line-dark:   rgba(240, 241, 234, 0.22);

  --c-whatsapp:    #128C7E;
  --c-whatsapp-dk: #0E6F63;
  --c-star:        #C99A3C;

  /* No red or orange anywhere in this variant — for this audience those
     are not "alarm colours", they are a trigger. See BUILDER-LOG §4d. */

  /* ---------- Elevation — low and wide, nothing that pops ---------- */
  --sh-xs: 0 1px 2px rgba(34, 39, 31, 0.05);
  --sh-sm: 0 4px 16px -8px rgba(34, 39, 31, 0.16);
  --sh-md: 0 16px 36px -16px rgba(34, 39, 31, 0.24);
  --sh-lg: 0 30px 64px -22px rgba(34, 39, 31, 0.30);
  --sh-xl: 0 48px 96px -32px rgba(34, 39, 31, 0.36);

  /* ---------- Radius ---------- */
  --r-xs:  10px;
  --r-sm:  14px;
  --r-md:  18px;
  --r-lg:  26px;
  --r-xl:  36px;
  --r-2xl: 52px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* Gallery tiles: 14px, inside the 10–15px band the brief asks for. */
  --r-gallery: 14px;

  /* Leaf (vesica) mask — the signature silhouette. Two opposite corners
     are wide, two are gently rounded: a leaf, never a pointed shape. */
  --r-leaf:     48% 14% 48% 14% / 48% 14% 48% 14%;
  --r-leaf-alt: 14% 48% 14% 48% / 14% 48% 14% 48%;

  /* ---------- Spacing — 8px base ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9: 128px;

  --section-y: clamp(68px, 9vw, 124px);
  --gutter:    clamp(20px, 5vw, 48px);
  --maxw:      1200px;

  /* ---------- Typography ---------- */
  --ff-display: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.45vw + 1.04rem, 1.3125rem);
  --fs-h4:   clamp(1.1875rem, 0.6vw + 1.05rem, 1.4375rem);
  --fs-h3:   clamp(1.4375rem, 1vw + 1.18rem, 1.875rem);
  --fs-h2:   clamp(1.9375rem, 2.3vw + 1.38rem, 3rem);
  --fs-h1:   clamp(2.375rem, 3.6vw + 1.4rem, 4.125rem);

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-body:  1.66;   /* the longest line-height in the series: this copy
                         is read slowly, often by someone who is nervous */

  --ls-tight: -0.02em;
  --ls-label:  0.16em;

  /* ---------- Motion — everything here is slower than in T1–T7 ---------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast: 180ms;
  --t-base: 340ms;
  --t-slow: 760ms;

  /* ---------- Layout ---------- */
  --header-h: 80px;
  --z-header: 100;
  --z-mobilebar: 90;
  --z-menu: 95;
  --z-lightbox: 200;
}

@media (max-width: 900px) { .sec-haven-header { --header-h: 66px; } }

/* Haven — reset i zajedničke primitive (base.css). */

/* ============================================================
   BASE — Template 8 "Haven"
   Signature: leaf-shaped media masks (.u-leaf) and concentric
   rings (.u-rings) as the recurring device. Both are curves
   only — nothing on this page has a corner you could catch a
   finger on, which is the whole point for this audience.
   ============================================================ */

.sec-haven-header *, .sec-haven-header *::before, .sec-haven-header *::after { box-sizing: border-box; }

.sec-haven-header {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

.sec-haven-header {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

.sec-haven-header img, .sec-haven-header svg, .sec-haven-header video { display: block; max-width: 100%; }
.sec-haven-header img { height: auto; }

.sec-haven-header h1, .sec-haven-header h2, .sec-haven-header h3, .sec-haven-header h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--c-primary-dk);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
.sec-haven-header h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
.sec-haven-header h2 { font-size: var(--fs-h2); line-height: 1.12; }
.sec-haven-header h3 { font-size: var(--fs-h3); }
.sec-haven-header h4 { font-size: var(--fs-h4); }

.sec-haven-header p { margin: 0; text-wrap: pretty; }
.sec-haven-header ul, .sec-haven-header ol { margin: 0; padding: 0; list-style: none; }

.sec-haven-header a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.sec-haven-header button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.sec-haven-header :focus-visible { outline: 3px solid var(--c-accent-dk); outline-offset: 3px; border-radius: var(--r-xs); }
.sec-haven-header :focus:not(:focus-visible) { outline: none; }
.sec-haven-header ::selection { background: var(--c-accent-soft); color: var(--c-primary-dk); }

/* ---------- Layout primitives ---------- */

.sec-haven-header .u-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec-haven-header .u-section { position: relative; padding-block: var(--section-y); }
.sec-haven-header .u-section--alt { background: var(--c-bg-alt); }

.sec-haven-header .u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sec-haven-header .u-skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-200%);
  background: var(--c-primary-dk); color: var(--c-white);
  padding: 12px 22px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700;
}
.sec-haven-header .u-skip-link:focus { transform: translateY(0); }

/* ============================================================
   DARK SCOPE — put .u-dark on any section that sits on the
   olive, and headings, paragraphs and labels are corrected in
   one place instead of per element. (BUILDER-LOG §4.)
   ============================================================ */
.sec-haven-header .u-dark { color: var(--c-on-dark); }
.sec-haven-header .u-dark h1, .sec-haven-header .u-dark h2, .sec-haven-header .u-dark h3, .sec-haven-header .u-dark h4 { color: var(--c-on-dark); }
.sec-haven-header .u-dark p { color: var(--c-on-dark-mu); }
.sec-haven-header .u-dark .u-label { color: var(--c-accent); }
.sec-haven-header .u-dark .u-label::before { background: var(--c-accent); }
.sec-haven-header .u-dark .u-head p { color: var(--c-on-dark-mu); }

/* ---------- Eyebrow label + section head ---------- */

.sec-haven-header .u-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-accent-dk);
}
.sec-haven-header .u-label::before {
  content: "";
  width: 10px; height: 10px; border-radius: var(--r-circle);
  border: 2px solid currentColor;
  flex: none;
}

.sec-haven-header .u-head > * + * { margin-top: var(--sp-3); }
.sec-haven-header .u-head--center { text-align: center; margin-inline: auto; }
.sec-haven-header .u-head--center .u-label { justify-content: center; }
.sec-haven-header .u-head h2 { max-width: 21ch; }
.sec-haven-header .u-head--center h2 { margin-inline: auto; }
.sec-haven-header .u-head p { color: var(--c-text-muted); font-size: var(--fs-lg); max-width: 60ch; }
.sec-haven-header .u-head--center p { margin-inline: auto; }

/* ---------- Leaf (signature device) ---------- */

/* A media frame with two wide corners and two soft ones. Alternate
   .u-leaf and .u-leaf--alt down the page so the shape mirrors. */
.sec-haven-header .u-leaf {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-leaf);
  background: var(--c-surface);
}
.sec-haven-header .u-leaf--alt { border-radius: var(--r-leaf-alt); }
.sec-haven-header .u-leaf :is(img, video) {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Concentric rings — background decoration, one per section at most. */
.sec-haven-header .u-rings {
  border-radius: var(--r-circle);
  background:
    radial-gradient(circle, transparent 0 32%, var(--ring-c, var(--c-primary-14)) 32% 33%, transparent 33%),
    radial-gradient(circle, transparent 0 54%, var(--ring-c, var(--c-primary-14)) 54% 55%, transparent 55%),
    radial-gradient(circle, transparent 0 76%, var(--ring-c, var(--c-primary-14)) 76% 77%, transparent 77%),
    radial-gradient(circle, transparent 0 98%, var(--ring-c, var(--c-primary-14)) 98% 99%, transparent 99%);
}

/* ---------- Pills ---------- */

.sec-haven-header .u-pill {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--pill-bg, var(--c-white));
  color: var(--pill-fg, var(--c-primary-dk));
  border: 1px solid var(--pill-bd, var(--c-line));
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
}
.sec-haven-header .u-pill--sky { --pill-bg: var(--c-accent-soft); --pill-bd: transparent; --pill-fg: var(--c-accent-dk); }
.sec-haven-header .u-pill--olive { --pill-bg: var(--c-surface); --pill-bd: transparent; --pill-fg: var(--c-primary-dk); }
.sec-haven-header .u-pill--ghost {
  --pill-bg: rgba(240, 241, 234, 0.14);
  --pill-bd: var(--c-line-dark);
  --pill-fg: var(--c-on-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sec-haven-header .u-pill svg { width: 18px; height: 18px; flex: none; }

/* ---------- Stars ---------- */

.sec-haven-header .u-stars { display: inline-flex; gap: 2px; }
.sec-haven-header .u-stars svg { width: 17px; height: 17px; color: var(--c-star); }
.sec-haven-header .u-stars--lg svg { width: 21px; height: 21px; }

/* ---------- Buttons ---------- */

.sec-haven-header .u-btn {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-white);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  padding: 15px 30px;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-display);
  font-size: var(--fs-md); font-weight: 600;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.sec-haven-header .u-btn svg { flex: none; width: 20px; height: 20px; }
/* Lift only, never a bounce: overshoot easing reads as "eager" and this
   page is not allowed to be eager. */
.sec-haven-header .u-btn:hover { transform: translateY(-2px); }
.sec-haven-header .u-btn:active { transform: translateY(0); transition-duration: 80ms; }

.sec-haven-header .u-btn--solid { box-shadow: var(--sh-md); }
.sec-haven-header .u-btn--solid:hover { --btn-bg: var(--c-primary-dk); box-shadow: var(--sh-lg); }

.sec-haven-header .u-btn--line { --btn-bg: transparent; --btn-fg: var(--c-primary-dk); --btn-bd: var(--c-line-strong); }
.sec-haven-header .u-btn--line:hover { --btn-bd: var(--c-primary); --btn-bg: var(--c-white); }

.sec-haven-header .u-btn--sky { --btn-bg: var(--c-accent-soft); --btn-fg: var(--c-accent-dk); }
.sec-haven-header .u-btn--sky:hover { --btn-bg: #CBDDE7; }

.sec-haven-header .u-btn--white { --btn-bg: var(--c-white); --btn-fg: var(--c-primary-dk); box-shadow: var(--sh-md); }
.sec-haven-header .u-btn--white:hover { --btn-bg: var(--c-bg-alt); }

.sec-haven-header .u-btn--ghost { --btn-bg: rgba(240, 241, 234, 0.1); --btn-fg: var(--c-on-dark); --btn-bd: var(--c-line-dark); }
.sec-haven-header .u-btn--ghost:hover { --btn-bg: rgba(240, 241, 234, 0.2); --btn-bd: rgba(240, 241, 234, 0.55); }

.sec-haven-header .u-btn--wa { --btn-bg: var(--c-whatsapp); --btn-fg: #fff; box-shadow: var(--sh-md); }
.sec-haven-header .u-btn--wa:hover { --btn-bg: var(--c-whatsapp-dk); box-shadow: var(--sh-lg); }

.sec-haven-header .u-btn--lg { min-height: 62px; padding: 19px 36px; font-size: var(--fs-lg); }
.sec-haven-header .u-btn--block { width: 100%; }

/* ---------- Scroll reveal ---------- */

/* Hidden start state gated on .has-js (set by app.js) so a script
   failure can never leave a blank hole where content should be. */
.sec-haven-header.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.sec-haven-header.has-js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sec-haven-header { scroll-behavior: auto; }
  .sec-haven-header *, .sec-haven-header *::before, .sec-haven-header *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sec-haven-header.has-js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .sec-haven-header .site-head, .sec-haven-header .mobile-bar, .sec-haven-header .cta, .sec-haven-header .scrub { display: none !important; }
  .sec-haven-header { background: #fff; }
}

/* ============================================================
   MEDIA SLOTS — every image slot also takes a <video>

   Each slot rule is written as `:is(img,video)`, so swapping the
   tag is the whole job — sizing, crop and radius stay identical:

     <img   src="_shared/img/hero-bg.svg" width="2400" height="1400" alt="...">
     <video src="_shared/video/hero.mp4" poster="_shared/img/hero-bg.svg"
            width="2400" height="1400" data-inline muted loop playsinline
            aria-label="..."></video>

   `data-inline` hands the element to app.js, which plays it only
   while it is on screen, pauses it when the tab is hidden, adds a
   pause control (WCAG 2.2.2) and skips autoplay entirely under
   prefers-reduced-motion — the poster stays in that case.

   Keep width/height (or let the slot aspect-ratio do it) so the
   layout does not shift while the file loads.
   ============================================================ */

/* Baseline for slots that never sized their <img> explicitly. */
.sec-haven-header video { width: 100%; height: auto; }

/* Parent of an inline video: only promoted when it is static, so a
   slot that already positions itself is left alone. */
.sec-haven-header .has-inline-video { position: relative; }

.sec-haven-header .u-mediactl {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-sm);
  color: var(--c-text);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease);
}
.sec-haven-header .u-mediactl:hover { background: #fff; }
.sec-haven-header .u-mediactl__ic { position: relative; width: 12px; height: 12px; flex: none; }
.sec-haven-header .u-mediactl__ic::before, 
.sec-haven-header .u-mediactl__ic::after {
  content: "";
  position: absolute; top: 0;
  width: 4px; height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.sec-haven-header .u-mediactl__ic::before { left: 0; }
.sec-haven-header .u-mediactl__ic::after { right: 0; }

/* paused -> the icon becomes a play triangle */
.sec-haven-header .u-mediactl[aria-pressed="true"] .u-mediactl__ic::before {
  left: 1px;
  width: 0; height: 0;
  border-radius: 0;
  background: none;
  border-left: 11px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.sec-haven-header .u-mediactl[aria-pressed="true"] .u-mediactl__ic::after { opacity: 0; }

/* Small slots (avatars, thumbnails) do not get room for a label. */
.sec-haven-header .u-mediactl--compact { padding: 0; width: 44px; justify-content: center; }
.sec-haven-header .u-mediactl--compact .u-mediactl__tx { display: none; }

/* Sekcija header. */

/* ============================================================
   SECTION: HEADER
   Fixed, not sticky: it has to float ON the full-bleed hero
   media, which means it must not take part in the flow at all.
   Light text while it is over the photograph, solid oat bar
   with dark text from the moment you scroll past the hero.
   ============================================================ */

.sec-haven-header .site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  isolation: isolate;
  color: var(--c-on-dark);
  transition: background-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
/* Contrast floor for the transparent state: a dark gradient that belongs
   to the header itself, so swapping in a bright photograph (or a video
   that brightens mid-loop) can never take the nav below AA. Fades out
   completely, so on a dark image it is invisible. */
.sec-haven-header .site-head::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: calc(var(--header-h) + 40px);
  background: linear-gradient(to bottom, rgba(28, 33, 25, 0.72), rgba(28, 33, 25, 0));
  opacity: 1;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.sec-haven-header .site-head.is-stuck::before { opacity: 0; }

.sec-haven-header .site-head.is-stuck {
  background: rgba(245, 244, 239, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-sm);
  color: var(--c-text);
}

.sec-haven-header .site-head__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--header-h);
}

/* ---------- Brand ---------- */

.sec-haven-header .brand { display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 44px; }
.sec-haven-header .brand__mark { width: 42px; height: 42px; color: var(--c-primary); flex: none; }
.sec-haven-header .brand__mark svg { width: 100%; height: 100%; }
/* over the photograph the mark needs its own contrast, not the page's */
.sec-haven-header .site-head:not(.is-stuck) .brand__mark { color: rgba(46, 55, 41, 0.55); }
.sec-haven-header .brand__tx { display: flex; flex-direction: column; line-height: 1.15; }
.sec-haven-header .brand__tx strong {
  font-family: var(--ff-display);
  font-size: 1.32rem; font-weight: 700;
  letter-spacing: -0.015em;
  color: currentColor;
}
.sec-haven-header .brand__tx small {
  font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.72;
}

/* ---------- Nav ---------- */

.sec-haven-header .site-nav { margin-left: auto; }
.sec-haven-header .site-nav ul { display: flex; align-items: center; gap: 2px; }
.sec-haven-header .site-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
  color: currentColor;
}
.sec-haven-header .site-nav a:hover { background: rgba(240, 241, 234, 0.16); }
.sec-haven-header .site-head.is-stuck .site-nav a:hover { background: var(--c-surface); }
/* set by header.js while that section is in view */
.sec-haven-header .site-nav a.is-current { background: rgba(240, 241, 234, 0.2); }
.sec-haven-header .site-head.is-stuck .site-nav a.is-current { background: var(--c-accent-soft); color: var(--c-accent-dk); }

.sec-haven-header .site-head__act { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.sec-haven-header .head-tel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
  color: currentColor;
}
.sec-haven-header .head-tel svg { width: 18px; height: 18px; }
.sec-haven-header .head-tel:hover { background: rgba(240, 241, 234, 0.16); }
.sec-haven-header .site-head.is-stuck .head-tel:hover { background: var(--c-accent-soft); }

.sec-haven-header .head-cta { min-height: 48px; padding: 12px 24px; font-size: var(--fs-sm); }
/* on the photograph the solid olive button would sink into the scrim */
.sec-haven-header .site-head:not(.is-stuck) .head-cta {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-primary-dk);
}

/* ---------- Burger ---------- */

.sec-haven-header .burger {
  display: none;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: rgba(240, 241, 234, 0.18);
  color: currentColor;
  place-items: center;
}
.sec-haven-header .site-head.is-stuck .burger { background: var(--c-surface); }
.sec-haven-header .burger > span { display: block; width: 20px; }
.sec-haven-header .burger i {
  display: block; height: 2.2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease), width var(--t-base) var(--ease);
}
.sec-haven-header .burger i + i { margin-top: 5px; }
.sec-haven-header .burger i:nth-child(3) { width: 12px; }
.sec-haven-header .burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
.sec-haven-header .burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.sec-haven-header .burger[aria-expanded="true"] i:nth-child(3) { width: 20px; transform: translateY(-7.2px) rotate(-45deg); }

@media (max-width: 1080px) {
  .sec-haven-header .site-nav { display: none; }
  .sec-haven-header .burger { display: grid; }
  .sec-haven-header .head-cta { display: none; }
}
@media (max-width: 560px) {
  .sec-haven-header .head-tel span { display: none; }
  .sec-haven-header .head-tel { padding: 12px; }
  .sec-haven-header .brand__tx small { display: none; }
}

/* ---------- Mobile bottom sheet ---------- */

.sec-haven-header .msheet { position: fixed; inset: 0; z-index: var(--z-menu); }
/* author display above beats the browser's [hidden] rule — without this
   the sheet stays in the layout and eats every click (BUILDER-LOG §4) */
.sec-haven-header .msheet[hidden] { display: none; }

.sec-haven-header .msheet__scrim {
  position: absolute; inset: 0;
  background: rgba(34, 39, 31, 0.5);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.sec-haven-header .msheet.is-open .msheet__scrim { opacity: 1; }

.sec-haven-header .msheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  overflow-y: auto;
  padding: 12px var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--c-bg);
  box-shadow: var(--sh-xl);
  transform: translateY(102%);
  transition: transform var(--t-base) var(--ease-out);
}
.sec-haven-header .msheet.is-open .msheet__panel { transform: none; }

.sec-haven-header .msheet__grip {
  display: block;
  width: 44px; height: 5px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-line-strong);
}

.sec-haven-header .msheet__list { margin-bottom: var(--sp-4); }
.sec-haven-header .msheet__list a {
  display: flex; align-items: center;
  min-height: 54px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--ff-display);
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--c-primary-dk);
}
.sec-haven-header .msheet__list li:last-child a { border-bottom: 0; }

.sec-haven-header .msheet__foot { display: grid; gap: 12px; }
.sec-haven-header .msheet__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec-haven-header .msheet__note {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ---------- Sticky mobile action bar ---------- */

.sec-haven-header .mobile-bar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-mobilebar);
  display: none;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(245, 244, 239, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-lg);
  transform: translateY(150%);
  transition: transform var(--t-base) var(--ease-out);
}
.sec-haven-header .mobile-bar.is-visible { transform: none; }

.sec-haven-header .mobile-bar__i {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-primary-dk);
}
.sec-haven-header .mobile-bar__i svg { width: 19px; height: 19px; }
.sec-haven-header .mobile-bar__i--wa { color: var(--c-whatsapp-dk); }
.sec-haven-header .mobile-bar__i--cta { background: var(--c-primary); color: var(--c-white); }

@media (max-width: 900px) {
  .sec-haven-header .mobile-bar { display: grid; }
}
@media (max-width: 380px) {
  .sec-haven-header .mobile-bar__i span { display: none; }
}