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

/* ============================================================
   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-results {
  /* ---------- 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-results { --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-results *, .sec-haven-results *::before, .sec-haven-results *::after { box-sizing: border-box; }

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

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

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

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

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

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

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

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

.sec-haven-results .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-results .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-results .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-results .u-dark { color: var(--c-on-dark); }
.sec-haven-results .u-dark h1, .sec-haven-results .u-dark h2, .sec-haven-results .u-dark h3, .sec-haven-results .u-dark h4 { color: var(--c-on-dark); }
.sec-haven-results .u-dark p { color: var(--c-on-dark-mu); }
.sec-haven-results .u-dark .u-label { color: var(--c-accent); }
.sec-haven-results .u-dark .u-label::before { background: var(--c-accent); }
.sec-haven-results .u-dark .u-head p { color: var(--c-on-dark-mu); }

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

.sec-haven-results .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-results .u-label::before {
  content: "";
  width: 10px; height: 10px; border-radius: var(--r-circle);
  border: 2px solid currentColor;
  flex: none;
}

.sec-haven-results .u-head > * + * { margin-top: var(--sp-3); }
.sec-haven-results .u-head--center { text-align: center; margin-inline: auto; }
.sec-haven-results .u-head--center .u-label { justify-content: center; }
.sec-haven-results .u-head h2 { max-width: 21ch; }
.sec-haven-results .u-head--center h2 { margin-inline: auto; }
.sec-haven-results .u-head p { color: var(--c-text-muted); font-size: var(--fs-lg); max-width: 60ch; }
.sec-haven-results .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-results .u-leaf {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-leaf);
  background: var(--c-surface);
}
.sec-haven-results .u-leaf--alt { border-radius: var(--r-leaf-alt); }
.sec-haven-results .u-leaf :is(img, video) {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Concentric rings — background decoration, one per section at most. */
.sec-haven-results .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-results .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-results .u-pill--sky { --pill-bg: var(--c-accent-soft); --pill-bd: transparent; --pill-fg: var(--c-accent-dk); }
.sec-haven-results .u-pill--olive { --pill-bg: var(--c-surface); --pill-bd: transparent; --pill-fg: var(--c-primary-dk); }
.sec-haven-results .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-results .u-pill svg { width: 18px; height: 18px; flex: none; }

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

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

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

.sec-haven-results .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-results .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-results .u-btn:hover { transform: translateY(-2px); }
.sec-haven-results .u-btn:active { transform: translateY(0); transition-duration: 80ms; }

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

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

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

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

.sec-haven-results .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-results .u-btn--ghost:hover { --btn-bg: rgba(240, 241, 234, 0.2); --btn-bd: rgba(240, 241, 234, 0.55); }

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

.sec-haven-results .u-btn--lg { min-height: 62px; padding: 19px 36px; font-size: var(--fs-lg); }
.sec-haven-results .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-results.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-results.has-js [data-reveal].is-in { opacity: 1; transform: none; }

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

@media print {
  .sec-haven-results .site-head, .sec-haven-results .mobile-bar, .sec-haven-results .cta, .sec-haven-results .scrub { display: none !important; }
  .sec-haven-results { 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-results 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-results .has-inline-video { position: relative; }

.sec-haven-results .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-results .u-mediactl:hover { background: #fff; }
.sec-haven-results .u-mediactl__ic { position: relative; width: 12px; height: 12px; flex: none; }
.sec-haven-results .u-mediactl__ic::before, 
.sec-haven-results .u-mediactl__ic::after {
  content: "";
  position: absolute; top: 0;
  width: 4px; height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.sec-haven-results .u-mediactl__ic::before { left: 0; }
.sec-haven-results .u-mediactl__ic::after { right: 0; }

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

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

/* Sekcija results. */

/* ============================================================
   SECTION: RESULTS
   Desktop: the pair sits side by side, same size, same moment.
   Phone: results.js stacks them into one frame and shows the
   Before / After toggle — but only when JS is alive, so without
   it the two photographs simply run underneath each other and
   nothing is hidden.
   ============================================================ */

.sec-haven-results .ba { overflow: hidden; }   /* the alternating layout must not widen the page */
.sec-haven-results .ba__head h2 { max-width: 20ch; }

.sec-haven-results .ba__cases {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  margin-top: clamp(36px, 4vw, 60px);
}

.sec-haven-results .bcase {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
/* Alternate which side the text sits on, so a column of cases does
   not read as a form. The TRACK WIDTHS swap along with the content:
   without that, the even row would drop its photo pair into the
   narrow 0.75fr track and the second case would render visibly
   smaller than the first. Same size every row, mirrored position. */
.sec-haven-results .bcase:nth-child(even) {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
}
.sec-haven-results .bcase:nth-child(even) .bcase__pair { order: 2; }

.sec-haven-results .bcase__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sec-haven-results .bimg {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}
.sec-haven-results .bimg :is(img, video) {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.sec-haven-results .bimg figcaption {
  position: absolute;
  left: 10px; top: 10px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-primary-dk);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Toggle (phone only, set up by results.js) ---------- */

.sec-haven-results .bcase__toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--c-bg-alt);
}
.sec-haven-results .bcase__toggle[hidden] { display: none; }
.sec-haven-results .bcase__toggle button {
  flex: 1;
  min-height: 46px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-text-muted);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sec-haven-results .bcase__toggle button[aria-pressed="true"] {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: var(--sh-sm);
}

/* ---------- Text ---------- */

.sec-haven-results .bcase__tx h3 { max-width: 20ch; }
.sec-haven-results .bcase__tx p { margin-top: var(--sp-3); color: var(--c-text-muted); }

.sec-haven-results .bcase__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--sp-4);
}
.sec-haven-results .bcase__meta li {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  color: var(--c-primary-dk);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .sec-haven-results .bcase, 
.sec-haven-results .bcase:nth-child(even) { grid-template-columns: 1fr; }
  .sec-haven-results .bcase:nth-child(even) .bcase__pair { order: 0; }
}

/* One frame + toggle. Gated on .has-js: without the script the two
   photographs stay stacked and visible, which is the whole point of
   never hiding content behind JS. */
@media (max-width: 620px) {
  .sec-haven-results.has-js .bcase__pair { grid-template-columns: 1fr; }
  .sec-haven-results.has-js .bcase__pair > * { grid-area: 1 / 1; }
  .sec-haven-results.has-js .bimg {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease);
  }
  .sec-haven-results.has-js .bcase.is-before .bimg.is-before, 
.sec-haven-results.has-js .bcase:not(.is-before) .bimg.is-after { opacity: 1; visibility: visible; }
}