/* Quiet Hours — tokeni templata, scopovani na .sec-quiet-hours-header. */

/* ============================================================
   DESIGN TOKENS — Template 13 "Quiet Hours"
   Niche variant: L — Dental sleep medicine / snoring therapy
   >>> NEW variant, not in the original style guide. Rules and
       reasoning live in the BUILDER-LOG, §4i. <<<

   Deliberately NOT a night palette. The first reflex for a sleep
   subject is dark blue with a moon in it — that is a cliché, and
   T10 already runs a day-to-night scrub. This one is dawn: warm
   paper, slate and muted gold. Every photograph is morning light.

   Shape language: stacked layers — two thinner plates peeking out
   from under a card, like a small pile of paper.
   Change ONLY this file to re-skin the whole template.
   ============================================================ */

.sec-quiet-hours-header {
  /* ---------- Color ---------- */
  --c-bg:          #F5F4F1;   /* warm grey paper */
  --c-bg-alt:      #EBEAE5;
  --c-white:       #FFFFFF;
  --c-surface:     #E2E4E8;   /* cool slate tint for cards / fills */

  --c-primary:     #33465E;   /* muted slate blue — 8.9:1 on --c-bg */
  --c-primary-dk:  #22303F;   /* headings, dark sections */
  --c-primary-lt:  #7C8899;
  --c-primary-08:  rgba(51, 70, 94, 0.08);
  --c-primary-14:  rgba(51, 70, 94, 0.14);

  --c-accent:      #B8944D;   /* muted gold — icons, fills, rules */
  --c-accent-dk:   #7A6224;   /* AA-safe gold for TEXT (5.1:1) */
  --c-accent-soft: #F0E7D4;
  --c-accent-tint: rgba(184, 148, 77, 0.18);

  --c-text:        #1F2630;
  --c-text-muted:  #59616C;   /* 5.5:1 on --c-bg */
  --c-on-dark:     #F2F1ED;
  --c-on-dark-mu:  rgba(242, 241, 237, 0.76);

  --c-line:        rgba(31, 38, 48, 0.11);
  --c-line-strong: rgba(31, 38, 48, 0.22);
  --c-line-dark:   rgba(242, 241, 237, 0.22);

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

  /* ---------- Elevation — soft, never hard-edged ---------- */
  --sh-xs: 0 1px 2px rgba(34, 48, 63, 0.06);
  --sh-sm: 0 4px 16px -8px rgba(34, 48, 63, 0.18);
  --sh-md: 0 14px 34px -16px rgba(34, 48, 63, 0.26);
  --sh-lg: 0 26px 58px -22px rgba(34, 48, 63, 0.30);
  --sh-xl: 0 44px 92px -32px rgba(34, 48, 63, 0.34);

  /* ---------- Radius ---------- */
  --r-xs:  10px;
  --r-sm:  14px;
  --r-md:  18px;
  --r-lg:  24px;      /* the card radius the stack device is built on */
  --r-xl:  32px;
  --r-2xl: 44px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* Gallery tiles are pinned at 12px on purpose: the brief asks for
     10–15px there, crisper than the 18–44px used elsewhere so a
     contact sheet reads as a sheet and not as a row of pills. */
  --r-gallery: 12px;

  /* ---------- 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(64px, 8.5vw, 116px);
  --gutter:    clamp(20px, 5vw, 48px);
  --maxw:      1240px;

  /* ---------- Typography ---------- */
  --ff-display: "Epilogue", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.875rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-h4:   clamp(1.1875rem, 0.6vw + 1.05rem, 1.4375rem);
  --fs-h3:   clamp(1.4375rem, 1vw + 1.18rem, 1.875rem);
  --fs-h2:   clamp(2rem, 2.3vw + 1.42rem, 3.0625rem);
  --fs-h1:   clamp(2.375rem, 3.5vw + 1.4rem, 4rem);

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-body:  1.64;

  --ls-tight: -0.025em;
  --ls-label:  0.15em;

  /* ---------- Motion ---------- */
  --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: 150ms;
  --t-base: 270ms;
  --t-slow: 640ms;

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

  --tap: 44px;
}

@media (max-width: 900px) {
  .sec-quiet-hours-header { --header-h: 62px; }
}

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

/* ============================================================
   BASE — Template 13 "Quiet Hours"
   Signature device:
     .u-stack — two thinner plates peeking out from under a card,
                like a small pile of paper. Soft-edged by
                definition, which is what the style guide asks for,
                and it repeats none of T1–T12.
   ============================================================ */

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

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

.sec-quiet-hours-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-quiet-hours-header img, .sec-quiet-hours-header svg, .sec-quiet-hours-header video { display: block; max-width: 100%; }
.sec-quiet-hours-header img { height: auto; }

.sec-quiet-hours-header h1, .sec-quiet-hours-header h2, .sec-quiet-hours-header h3, .sec-quiet-hours-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-quiet-hours-header h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
.sec-quiet-hours-header h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 700; }
.sec-quiet-hours-header h3 { font-size: var(--fs-h3); }
.sec-quiet-hours-header h4 { font-size: var(--fs-h4); }

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

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

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

/* Times, hours and measurements line up in a column. */
.sec-quiet-hours-header .u-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

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

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

.sec-quiet-hours-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-quiet-hours-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-quiet-hours-header .u-skip-link:focus { transform: translateY(0); }

/* ============================================================
   DARK SCOPE
   A section on a brand-coloured background inherits the wrong
   text colours: h2 defaults to --c-primary-dk and .u-label to
   --c-accent-dk, both tuned for light backgrounds. Put .u-dark
   on the section and the whole subtree is corrected in one place.
   (BUILDER-LOG section 4 — this was missed in T6 and had to be
   fixed from a screenshot afterwards.)
   ============================================================ */
.sec-quiet-hours-header .u-dark { color: var(--c-on-dark); }
.sec-quiet-hours-header .u-dark h1, .sec-quiet-hours-header .u-dark h2, .sec-quiet-hours-header .u-dark h3, .sec-quiet-hours-header .u-dark h4 { color: var(--c-on-dark); }
.sec-quiet-hours-header .u-dark p { color: var(--c-on-dark-mu); }
.sec-quiet-hours-header .u-dark .u-label { color: var(--c-accent-soft); }
.sec-quiet-hours-header .u-dark .u-label::after { background: var(--c-accent-soft); }
.sec-quiet-hours-header .u-dark .u-head p { color: var(--c-on-dark-mu); }

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

.sec-quiet-hours-header .u-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-accent-dk);
}
/* Rule AFTER the word, not before — small thing, but it is the one
   detail of the eyebrow that differs from every earlier template. */
.sec-quiet-hours-header .u-label::after {
  content: "";
  width: 34px; height: 2px;
  background: var(--c-accent);
  flex: none;
}

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

/* Underlined word — the "smile arc" the style guide suggests,
   drawn as a soft curve under one word instead of a straight rule. */
.sec-quiet-hours-header .u-arc {
  position: relative;
  white-space: nowrap;
}
.sec-quiet-hours-header .u-arc::after {
  content: "";
  position: absolute; left: -2%; right: -2%; bottom: -0.16em;
  height: 0.3em;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  border-bottom: 5px solid var(--c-accent);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

/* ---------- Signature: stacked layers ----------

   Two thinner plates peek out from under the card, centred and
   progressively narrower — a small pile of paper. The card itself
   must have its own background, or the plates show through it.
   ---------------------------------------------------------------- */
.sec-quiet-hours-header .u-stack { position: relative; }
.sec-quiet-hours-header .u-stack::before, 
.sec-quiet-hours-header .u-stack::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  z-index: -1;
}
.sec-quiet-hours-header .u-stack::before {
  bottom: -7px;
  width: calc(100% - 26px);
  height: 20px;
  background: var(--stack-1, var(--c-surface));
}
.sec-quiet-hours-header .u-stack::after {
  bottom: -13px;
  width: calc(100% - 58px);
  height: 20px;
  background: var(--stack-2, var(--c-accent-tint));
}

/* Media frame used by about and results. */
.sec-quiet-hours-header .u-frame {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--r-xl);
}
.sec-quiet-hours-header .u-frame :is(img, video) { width: 100%; height: 100%; object-fit: cover; }

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

.sec-quiet-hours-header .u-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  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;
  white-space: nowrap;
}
.sec-quiet-hours-header .u-pill--accent { --pill-bg: var(--c-accent-soft); --pill-bd: transparent; --pill-fg: var(--c-accent-dk); }
.sec-quiet-hours-header .u-pill--slate { --pill-bg: var(--c-surface); --pill-bd: transparent; --pill-fg: var(--c-primary-dk); }
.sec-quiet-hours-header .u-pill svg { width: 18px; height: 18px; flex: none; color: var(--c-accent-dk); }

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

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

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

.sec-quiet-hours-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: 52px;
  padding: 14px 28px;
  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-quiet-hours-header .u-btn svg { flex: none; width: 20px; height: 20px; }
.sec-quiet-hours-header .u-btn:hover { transform: translateY(-2px); }
.sec-quiet-hours-header .u-btn:active { transform: translateY(0) scale(0.995); transition-duration: 60ms; }

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

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

/* Gold carries dark text only (2.9:1 against white) — variant L rule. */
.sec-quiet-hours-header .u-btn--gold { --btn-bg: var(--c-accent); --btn-fg: #2A2007; box-shadow: var(--sh-md); }
.sec-quiet-hours-header .u-btn--gold:hover { --btn-bg: #A8853F; }

.sec-quiet-hours-header .u-btn--soft { --btn-bg: var(--c-accent-soft); --btn-fg: var(--c-accent-dk); }
.sec-quiet-hours-header .u-btn--soft:hover { --btn-bg: #E7DBC1; }

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

.sec-quiet-hours-header .u-btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-on-dark); --btn-bd: var(--c-line-dark); }
.sec-quiet-hours-header .u-btn--ghost:hover { --btn-bg: rgba(242, 241, 237, 0.14); --btn-bd: rgba(242, 241, 237, 0.5); }

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

.sec-quiet-hours-header .u-btn--lg { min-height: 60px; padding: 18px 34px; font-size: var(--fs-lg); }
.sec-quiet-hours-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-quiet-hours-header.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.sec-quiet-hours-header.has-js [data-reveal].is-in { opacity: 1; transform: none; }

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

@media print {
  .sec-quiet-hours-header .site-head, .sec-quiet-hours-header .mobile-bar, .sec-quiet-hours-header .stage { display: none !important; }
  .sec-quiet-hours-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.svg" width="1920" height="1080" alt="...">
     <video src="_shared/video/hero.mp4" poster="_shared/img/hero.svg"
            width="1920" height="1080" 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.

   The hero background is the obvious place for this: see
   hero/hero.html, where the swap is already written out.
   ============================================================ */

/* Baseline for slots that never sized their media explicitly. */
.sec-quiet-hours-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-quiet-hours-header .has-inline-video { position: relative; }

.sec-quiet-hours-header .u-mediactl {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.93);
  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-quiet-hours-header .u-mediactl:hover { background: #fff; }
.sec-quiet-hours-header .u-mediactl__ic { position: relative; width: 12px; height: 12px; flex: none; }
.sec-quiet-hours-header .u-mediactl__ic::before, 
.sec-quiet-hours-header .u-mediactl__ic::after {
  content: "";
  position: absolute; top: 0;
  width: 4px; height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.sec-quiet-hours-header .u-mediactl__ic::before { left: 0; }
.sec-quiet-hours-header .u-mediactl__ic::after { right: 0; }

/* paused -> the icon becomes a play triangle */
.sec-quiet-hours-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-quiet-hours-header .u-mediactl[aria-pressed="true"] .u-mediactl__ic::after { opacity: 0; }

/* Small slots (thumbnails) do not get room for a label. */
.sec-quiet-hours-header .u-mediactl--compact { padding: 0; width: var(--tap); justify-content: center; }
.sec-quiet-hours-header .u-mediactl--compact .u-mediactl__tx { display: none; }

/* Sekcija header. */

/* ============================================================
   HEADER — transparent over the hero media, solid on scroll,
   with a bottom sheet for the mobile menu
   ============================================================ */

.sec-quiet-hours-header .site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  transition: background-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Over the hero the bar has no background of its own, so it brings
   its own floor — same fix T8 needed, and for the same reason.

   The alpha is not a taste decision. Light text (#F2F1ED, relative
   luminance 0.877) needs a background at or below 0.156 to clear
   4.5:1, and against the worst case the client can upload — a white
   photograph — that takes an alpha of about 0.87. Anything softer
   looks better on the placeholder and fails on a bright picture,
   which is exactly the bug nobody spots on a screenshot.

   Below the bar the floor fades out over 22px, so the edge is soft
   without any text ever sitting in the faded part. */
.sec-quiet-hours-header .site-head::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  bottom: -22px;
  background: linear-gradient(180deg,
    rgba(34, 48, 63, 0.92) 0%,
    rgba(34, 48, 63, 0.9) calc(100% - 22px),
    rgba(34, 48, 63, 0) 100%);
  opacity: 1;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}

.sec-quiet-hours-header .site-head.is-stuck {
  background: color-mix(in srgb, var(--c-bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--c-line);
  box-shadow: var(--sh-sm);
}
@supports not (backdrop-filter: blur(4px)) {
  .sec-quiet-hours-header .site-head.is-stuck { background: var(--c-bg); }
}
.sec-quiet-hours-header .site-head.is-stuck::before { opacity: 0; }

.sec-quiet-hours-header .site-head__inner {
  position: relative;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

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

.sec-quiet-hours-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  flex: none;
}
.sec-quiet-hours-header .brand__mark { color: var(--c-primary); width: 38px; height: 38px; flex: none; }
.sec-quiet-hours-header .brand__mark svg { width: 100%; height: 100%; }
.sec-quiet-hours-header .brand__tx { display: flex; flex-direction: column; line-height: 1.15; }
.sec-quiet-hours-header .brand__tx strong {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-primary-dk);
}
.sec-quiet-hours-header .brand__tx small { font-size: var(--fs-xs); color: var(--c-text-muted); }

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

.sec-quiet-hours-header .site-nav { margin-inline: auto; }
.sec-quiet-hours-header .site-nav ul { display: flex; align-items: center; gap: clamp(2px, 0.6vw, 8px); }
/* Without flex: none the links get squeezed and their labels wrap to
   three lines, which quietly doubles the height of the bar.
   (Cost a debug cycle in T9; same rule, same reason.) */
.sec-quiet-hours-header .site-nav li { flex: none; }
.sec-quiet-hours-header .site-nav a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: var(--tap);
  padding: 9px 12px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-text);
}
.sec-quiet-hours-header .site-nav a:hover { background: var(--c-primary-08); color: var(--c-primary-dk); }

/* ---------- Actions ---------- */

.sec-quiet-hours-header .site-head__act { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.sec-quiet-hours-header .head-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-primary-dk);
}
.sec-quiet-hours-header .head-tel svg { width: 19px; height: 19px; flex: none; color: var(--c-accent-dk); }
.sec-quiet-hours-header .head-tel:hover { background: var(--c-accent-soft); }

.sec-quiet-hours-header .head-cta { min-height: var(--tap); padding: 12px 22px; font-size: var(--fs-sm); }

/* ---------- Over-media state ----------
   Until the page scrolls, everything in the bar is on the scrim, so
   it all goes light. The class is on the header, so one rule flips
   the whole bar and nothing can be left behind in dark-on-dark. */
.sec-quiet-hours-header .site-head:not(.is-stuck) .brand__mark { color: var(--c-on-dark); }
.sec-quiet-hours-header .site-head:not(.is-stuck) .brand__tx strong { color: var(--c-on-dark); }
.sec-quiet-hours-header .site-head:not(.is-stuck) .brand__tx small { color: var(--c-on-dark-mu); }
.sec-quiet-hours-header .site-head:not(.is-stuck) .site-nav a { color: var(--c-on-dark); }
.sec-quiet-hours-header .site-head:not(.is-stuck) .site-nav a:hover { background: rgba(242, 241, 237, 0.16); color: #fff; }
.sec-quiet-hours-header .site-head:not(.is-stuck) .head-tel { color: var(--c-on-dark); }
.sec-quiet-hours-header .site-head:not(.is-stuck) .head-tel svg { color: var(--c-accent); }
.sec-quiet-hours-header .site-head:not(.is-stuck) .head-tel:hover { background: rgba(242, 241, 237, 0.16); }
.sec-quiet-hours-header .site-head:not(.is-stuck) .head-cta {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-primary-dk);
}
.sec-quiet-hours-header .site-head:not(.is-stuck) .burger { background: rgba(242, 241, 237, 0.2); color: var(--c-on-dark); }

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

.sec-quiet-hours-header .burger {
  display: none;
  width: var(--tap); height: var(--tap);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-primary-dk);
}
.sec-quiet-hours-header .burger span { display: grid; gap: 5px; justify-items: center; }
.sec-quiet-hours-header .burger i { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; }

/* ---------- Bottom sheet ---------- */

.sec-quiet-hours-header .sheet { position: fixed; inset: 0; z-index: var(--z-menu); }
/* Without this the panel keeps its own display and stays clickable. */
.sec-quiet-hours-header .sheet[hidden] { display: none; }

.sec-quiet-hours-header .sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(31, 38, 48, 0.5);
  animation: quiet-hours-header-sheet-fade var(--t-base) var(--ease) both;
}
@keyframes quiet-hours-header-sheet-fade { from { opacity: 0; } to { opacity: 1; } }

.sec-quiet-hours-header .sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: min(88dvh, 720px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 12px var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--c-bg);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: var(--sh-xl);
  animation: quiet-hours-header-sheet-up var(--t-base) var(--ease-out) both;
}
@keyframes quiet-hours-header-sheet-up { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* The grab handle is decoration — the sheet is not draggable, and
   pretending it is would be a promise the code does not keep. */
.sec-quiet-hours-header .sheet__grab {
  width: 46px; height: 5px;
  margin: 2px auto 4px;
  border-radius: var(--r-pill);
  background: var(--c-line-strong);
  flex: none;
}

.sec-quiet-hours-header .sheet__x {
  position: absolute;
  top: 14px; right: 14px;
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border-radius: var(--r-circle);
  background: var(--c-surface);
  color: var(--c-primary-dk);
}
.sec-quiet-hours-header .sheet__x svg { width: 22px; height: 22px; }

.sec-quiet-hours-header .sheet__list { display: grid; gap: 2px; }
.sec-quiet-hours-header .sheet__list a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-family: var(--ff-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--c-primary-dk);
}
.sec-quiet-hours-header .sheet__list a:hover { background: var(--c-surface); }

.sec-quiet-hours-header .sheet__foot { margin-top: auto; display: grid; gap: 12px; }
.sec-quiet-hours-header .sheet__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sec-quiet-hours-header .sheet__hours {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-text-muted);
  text-align: center;
}

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

.sec-quiet-hours-header .mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-mobilebar);
  display: none;
  gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-bg) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line);
  transform: translateY(110%);
  transition: transform var(--t-base) var(--ease-out);
}
.sec-quiet-hours-header .mobile-bar.is-on { transform: none; }

.sec-quiet-hours-header .mobile-bar__i {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 12px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--c-surface);
  color: var(--c-primary-dk);
}
.sec-quiet-hours-header .mobile-bar__i svg { width: 20px; height: 20px; flex: none; }
.sec-quiet-hours-header .mobile-bar__i--wa { background: var(--c-whatsapp); color: #fff; }
.sec-quiet-hours-header .mobile-bar__i--cta { background: var(--c-primary); color: var(--c-white); }

/* ---------- Breakpoints ----------
   Four nav labels instead of five, so the bar has room to spare at
   every width it is shown — measured against the container's inner
   edge, not the viewport, because a header like this never overflows
   the window even when it overflows its column. (T9, T11.) */

/* Measured with Epilogue loaded: brand + four links + the number +
   two 32px gaps need ~999px, and the container offers viewport minus
   96px of gutter. So the links go at 1120, not at a round 1080 —
   at 1080 the bar was already 20px past the container's inner edge
   while still overflowing nothing in the window, which is the exact
   bug T9 and T11 both had to be measured for. A scrollbar eats
   another 15px of that budget, so the breakpoint sits at 1160 with
   room to spare rather than at the number that only just fits. */
@media (max-width: 1160px) {
  .sec-quiet-hours-header .site-nav { display: none; }
  .sec-quiet-hours-header .burger { display: grid; place-items: center; }
  .sec-quiet-hours-header .site-head__act { margin-left: auto; }
}

@media (max-width: 760px) {
  .sec-quiet-hours-header .head-tel span { display: none; }
  .sec-quiet-hours-header .head-tel { padding: 10px; }
  .sec-quiet-hours-header .head-cta { display: none; }
  .sec-quiet-hours-header .mobile-bar { display: flex; }
}

@media (max-width: 400px) {
  .sec-quiet-hours-header .brand__tx small { display: none; }
}