/* ==========================================================
   Banner option 4 · Portal (index-slider4.html)
   --aw / --ah size the arched window. Motion: js/hero-slider4.js
   ========================================================== */
.hb {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: min(620px, 100vh);
  overflow: hidden;
  background: #1A120C;
  color: #FAF7F1;
}

.hb4 {
  --aw: min(30vw, 44vh);
  --ah: min(60vh, calc(30vw * 1.6), calc(100vh - max(92px, 12vh) - 150px));
  --base: max(92px, 12vh);
}

/* warm floor glow + horizon hairline */
.hb4__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 78%, rgba(241, 89, 34, 0.16), transparent 70%);
  pointer-events: none;
}

.hb4::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 162, 127, 0.5), transparent);
}

.hb4__clip {
  position: absolute;
  left: 0;
  right: 0;
  top: 110px;
  bottom: var(--base);
  overflow: hidden;
  pointer-events: none;
}

.hb4__anchor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
}

.hb4__ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  border: 1px solid rgba(232, 162, 127, 0.5);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  opacity: 0;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}

.hb4__ring:nth-child(1) {
  width: calc(var(--aw) + 56px);
  height: calc(var(--ah) + 28px);
}

.hb4__ring:nth-child(2) {
  width: calc(var(--aw) + 128px);
  height: calc(var(--ah) + 64px);
  border-color: rgba(232, 162, 127, 0.37);
}

.hb4__ring:nth-child(3) {
  width: calc(var(--aw) + 220px);
  height: calc(var(--ah) + 110px);
  border-color: rgba(232, 162, 127, 0.24);
}

.hb4__arch {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--aw);
  height: var(--ah);
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

.hb4__pic {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: 30% 50%;
  transform: scale(1.35);
  will-change: transform;
}

.hb4__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 18, 12, 0) 60%, rgba(26, 18, 12, 0.225));
}

.hb4__dim {
  position: absolute;
  inset: 0;
  background:
    /* half the design's darkness */
    linear-gradient(90deg, rgba(26, 18, 12, 0.3), rgba(26, 18, 12, 0.075) 50%, rgba(26, 18, 12, 0.325)),
    linear-gradient(180deg, rgba(26, 18, 12, 0.225) 0%, transparent 25%, transparent 60%, rgba(26, 18, 12, 0.35));
  opacity: 0;
}

/* "Where Tomorrow" / "Lives Better" slide out from behind the arch */
.hb4__sides {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--base);
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--aw) + 6vw) minmax(0, 1fr);
  align-items: center;
  padding: 0 clamp(20px, 4vw, 64px);
  pointer-events: none;
}

.hb4__side {
  display: flex;
  overflow: hidden;
  padding: 0.1em 0;
}

.hb4__side--l {
  justify-content: flex-end;
}

.hb4__side--r {
  justify-content: flex-start;
}

.hb4__l {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5.4vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FAF7F1;
}

.hb4__side--l .hb4__l {
  text-align: right;
  transform: translateX(105%);
}

.hb4__side--r .hb4__l {
  font-style: italic;
  color: var(--accent);
  transform: translateX(-105%);
}

/* bottom-left copy; the full headline unfolds into it once the arch
   has opened to full screen */
.hb4__copy {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 5vw, 88px);
  bottom: calc(var(--base) + 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: #FAF7F1;
  opacity: 0;
}

.hb4__copy p {
  max-width: 40ch;
  margin: 0;
}

/* the description line: wide enough that a one-sentence summary stays on
   a single line instead of wrapping */
.hb4__copy .hb4__sub {
  max-width: 56ch;
}

/* the stats bar: a tinted, sharp-edged strip of 2-3 figures under the
   description, each a bold accent number over a small muted label, divided
   by hairlines - a called-out fact block, not a third line of copy.
   align-self: shrinks the bar to its own content width, not the full
   .hb4__copy column */
.hb4__copy .hb4__stats {
  align-self: flex-start;
  display: flex;
  max-width: 56ch;
  margin-top: 6px;
  border: 1px solid rgba(241, 89, 34, 0.4);
  background: rgba(20, 14, 9, 0.35);
  backdrop-filter: blur(6px);
}

.hb4__stat {
  position: relative;
  padding: 12px 20px;
  text-align: center;
}

.hb4__stat + .hb4__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(250, 247, 241, 0.25);
}

.hb4__stat strong {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent);
  white-space: nowrap;
}

.hb4__stat span {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #CFC6BC;
  white-space: nowrap;
}

.hb4__eye {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #E8A27F;
}

.hb4__eye > span:first-child {
  width: 28px;
  height: 1px;
  background: #E8A27F;
}

.hb4__h {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #FAF7F1;
}

.hb4__hl {
  display: block;
  padding-bottom: 0.06em;
}

.hb4__h em {
  font-style: italic;
  color: var(--accent);
  padding-bottom: 0.08em;
}

.hb__replay {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 4vw, 64px);
  bottom: calc(var(--base) + 28px);
  padding: 10px 18px;
  border: 1px solid rgba(250, 247, 241, 0.45);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FAF7F1;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hb__replay:hover {
  background: rgba(250, 247, 241, 0.12);
}

/* phones: smaller side words so they fit beside the narrow arch */
@media (max-width: 760px) {
  .hb4__l {
    /* small enough that "Tomorrow" fits beside the narrow arch */
    font-size: clamp(18px, 5.2vw, 30px);
  }

  .hb4__h {
    font-size: clamp(34px, 10vw, 44px);
  }

  .hb4__replay {
    right: 84px; /* clear of the floating WhatsApp button */
    bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb4__arch {
    clip-path: none;
  }

  .hb4__copy {
    opacity: 1;
  }

  .hb4__side--l .hb4__l,
  .hb4__side--r .hb4__l {
    transform: none;
  }

  .hb__replay {
    display: none;
  }
}

/* ---- slider: the previous slide's photo stays underneath while the next
   one makes its entrance ---- */
.hb__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.hb__backshade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.hb__back.is-on,
.hb__backshade.is-on {
  opacity: 1;
}

/* the overlay is half as dark as the design's, so a soft shadow keeps the
   copy legible on the brighter photos */
.hb .hb__eye,
.hb .hb__title,
.hb .hb__copy,
.hb .shero__tabs {
  text-shadow: 0 1px 2px rgba(14, 9, 6, 0.35), 0 2px 18px rgba(14, 9, 6, 0.45);
}

.hb4 .hb__backshade {
  background:
    linear-gradient(90deg, rgba(26, 18, 12, 0.3), rgba(26, 18, 12, 0.075) 50%, rgba(26, 18, 12, 0.325)),
    linear-gradient(180deg, rgba(26, 18, 12, 0.225) 0%, transparent 25%, transparent 60%, rgba(26, 18, 12, 0.35));
}

/* the side words wrap inside their columns (slide titles vary in length) */
.hb4__l {
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(14, 9, 6, 0.35), 0 2px 18px rgba(14, 9, 6, 0.45);
}

.hb4__copy {
  text-shadow: 0 1px 2px rgba(14, 9, 6, 0.35), 0 2px 18px rgba(14, 9, 6, 0.45);
}

/* same geometry as the opened arch photo, so the hand-over shows no jump */
.hb4 .hb__back {
  inset: -6%;
  width: 112%;
  height: 112%;
}

/* ==========================================================
   Slider navigation: a slim vertical rail on the right edge.
   Each slide is a node on a hairline track; the active node grows
   into a circle with its number and an orange ring that fills as
   the timer. Hovering a node shows its name. (Horizontal on phones.)
   ========================================================== */
.hb4nav {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 2.6vw, 40px);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translateY(-50%);
}

.hb4nav__track {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(250, 247, 241, 0.35) 15%, rgba(250, 247, 241, 0.35) 85%, transparent);
  pointer-events: none;
}

.hb4nav__node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  color: #FAF7F1;
  cursor: pointer;
}

.hb4nav__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(250, 247, 241, 0.55);
  box-shadow: 0 0 0 4px rgba(26, 18, 12, 0.35);
  transition: width 0.6s cubic-bezier(0.16, 0.84, 0.44, 1), height 0.6s cubic-bezier(0.16, 0.84, 0.44, 1), background 0.4s ease;
}

.hb4nav__node:hover .hb4nav__dot {
  background: #FAF7F1;
}

.hb4nav__dot b {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hb4nav__ring {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 0.4s ease;
}

.hb4nav__ring circle {
  fill: none;
  stroke: rgba(250, 247, 241, 0.25);
  stroke-width: 2;
}

.hb4nav__ring .hb4nav__ring-fill {
  stroke: var(--accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
}

.hb4nav__node.is-active .hb4nav__dot {
  width: 40px;
  height: 40px;
  background: rgba(26, 18, 12, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hb4nav__node.is-active .hb4nav__dot b,
.hb4nav__node.is-active .hb4nav__ring {
  opacity: 1;
}

/* name tooltip, to the left of the rail */
.hb4nav__tip {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(26, 18, 12, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.hb4nav__node:hover .hb4nav__tip,
.hb4nav__node:focus-visible .hb4nav__tip {
  opacity: 1;
  transform: translate(0, -50%);
}

/* phones: the rail lies horizontally along the bottom, centred */
@media (max-width: 760px) {
  .hb4nav {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 26px;
    flex-direction: row;
    gap: 10px;
    transform: translateX(-50%);
  }

  .hb4nav__track {
    left: 6px;
    right: 6px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(250, 247, 241, 0.35) 15%, rgba(250, 247, 241, 0.35) 85%, transparent);
  }

  .hb4nav__tip {
    display: none;
  }

  .hb4nav__node.is-active .hb4nav__dot {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb4nav__dot,
  .hb4nav__tip {
    transition: none;
  }
}

/* ---- later slides: the next photo wipes across the screen ---- */
.hb4__wipe {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  pointer-events: none;
}

.hb4__wipe.is-on {
  visibility: visible;
}

.hb4__wipe-img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

/* the same half-strength darkening as the opened portal (dim + foot fade) */
.hb4__wipe-dim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 18, 12, 0) 60%, rgba(26, 18, 12, 0.225)),
    linear-gradient(90deg, rgba(26, 18, 12, 0.3), rgba(26, 18, 12, 0.075) 50%, rgba(26, 18, 12, 0.325)),
    linear-gradient(180deg, rgba(26, 18, 12, 0.225) 0%, transparent 25%, transparent 60%, rgba(26, 18, 12, 0.35));
}

/* a soft light edge leads the wipe */
.hb4__wipe::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--edge, 100%);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(255, 214, 170, 0.9) 30%, var(--accent) 50%, rgba(255, 214, 170, 0.9) 70%, transparent);
  box-shadow: 0 0 24px 6px rgba(241, 89, 34, 0.35);
  opacity: var(--edge-o, 0);
}

.hb4__copy,
.hb4nav {
  z-index: 3;
}

/* ==========================================================
   PHONES — static (≤760px). hero-slider4.js doesn't start on phones;
   the only motion is the photo rising into the arch on load (hb4-rise). The Portal's resting
   look, held still: the portrait mobile photo (images/hero-mobile.webp,
   via <picture>) in a tall arched window — round top corners, flat
   foot on a hairline horizon — with the three thin rings around it on
   the dark stage, and the copy centred below the arch. !important
   only where the desktop script writes inline styles (in case the
   window narrows after it ran).
   ========================================================== */
@media (max-width: 760px) {
  /* arch width: 95vw (72vw + 20%, then + 10% — user asked), but on
     short phones smaller (never under 264px) so it still fits well */
  .hb4 {
    /* the last term is new: a ceiling that shrinks the arch just enough
       that arch + rings + the copy block underneath (eyebrow, heading,
       description, the stats bar) always finish within one screen -
       added once the stats bar made the original formula (sized to
       leave room for a shorter, stats-less copy block) run past 100svh
       on ordinary phones, not just unusually short ones */
    /* * 1.15: banner photo enlarged 15% (user asked) - the fit-ceiling
       term grows with it, tightened copy spacing below keeps everything
       inside one screen at the new, larger size */
    --aw: calc(min(95.04vw, 422px, max(264px, calc((100svh - 400px) / 1.42 * 1.32)), calc((105svh - 512px) / 1.42)) * 1.15);
    --ah: calc(var(--aw) * 1.42);
  }

  .hb {
    /* the banner itself (arch, rings, copy) is unchanged in style - the
       section is exactly one screen tall, and --aw above keeps the arch
       just small enough that the copy below it is never pushed out of
       view or clipped */
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    /* was 96px (clear of the header); moved up 10% of the screen
       height, then back down 5% (user asked) — the outer rings pass
       behind the header, the arch itself starts below it */
    padding-top: max(0px, calc(96px - 5svh));
  }

  /* the old theme's css/style.css reserves 136px here for ITS OWN
     (non-fixed, in-flow) mobile nav bar, used on every other page.
     The new homepage nav is a fixed overlay and never needed that
     space - but the old rule still fires here too, silently eating
     136px of this banner's one-screen budget before it even starts.
     :has(.hb4) scopes the fix to just this page, so other pages that
     still rely on that reserved space for their own nav are untouched */
  .mainWrapper:has(.hb4) {
    padding-top: 0;
  }

  .hb4::after,
  .hb4__sides,
  .hb4__wipe,
  .hb4__dim,
  .hb__replay {
    display: none;
  }

  /* the stage: tall enough for the outer ring above the arch; the arch
     and rings stand on its foot */
  .hb4__clip {
    position: relative;
    top: auto !important;
    bottom: auto !important;
    height: calc(var(--ah) + 96px);
    overflow: hidden;
  }

  /* hairline horizon under the arch */
  .hb4__clip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 162, 127, 0.5), transparent);
  }

  .hb4__ring {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }

  .hb4__ring:nth-child(1) {
    width: calc(var(--aw) + 36px);
    height: calc(var(--ah) + 18px);
  }

  .hb4__ring:nth-child(2) {
    width: calc(var(--aw) + 88px);
    height: calc(var(--ah) + 44px);
  }

  .hb4__ring:nth-child(3) {
    width: calc(var(--aw) + 150px);
    height: calc(var(--ah) + 75px);
  }

  .hb4__arch {
    width: var(--aw) !important;
    height: var(--ah) !important;
    border-radius: 999px 999px 0 0 !important;
    clip-path: none !important;
    will-change: auto;
  }

  .hb4__pic {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 50% 45% !important;
    transform: none !important;
    will-change: auto;
  }

  /* the one phone animation (user asked): on load the photo rises into
     the arch bottom to top — a clip that opens upward while the photo
     slides up into place. It runs on the <picture> wrapper (clip-path +
     the separate translate property), so it never fights the inline
     styles / !important rules above */
  .hb4__arch picture {
    position: absolute;
    inset: 0;
    display: block;
    animation: hb4-rise 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  /* copy: centred under the arch */
  .hb4__copy {
    position: relative;
    left: auto;
    bottom: auto;
    align-items: center;
    /* tightened from 12px/28px/40px: the larger arch above needs the
       room, and everything still needs to finish within one screen */
    gap: 8px;
    padding: 18px 20px 24px;
    /* text sizes: +15% on the first phone version, then -20%, then -15%
       (user asked) */
    font-size: 11.73px;
    text-align: center;
    opacity: 1 !important;
    transform: none !important;
  }

  .hb4__copy p {
    max-width: 30ch;
  }

  .hb4__copy .hb4__sub {
    max-width: none;
    white-space: nowrap;
  }

  .hb4__copy .hb4__stats {
    align-self: center;
    max-width: 100%;
  }

  /* equal-width columns (not content-sized) so three stats always divide
     the available width evenly, however long the admin-entered value/label
     text is; min-width: 0 lets a column shrink below its text's natural
     width instead of forcing the row to overflow */
  .hb4__stat {
    flex: 1 1 0;
    min-width: 0;
    /* horizontal padding doubled: ~20% wider bar overall (user asked) */
    padding: 9px 16px;
  }

  .hb4__stat strong {
    font-size: 13px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .hb4__stat span {
    font-size: 7.8px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .hb4__eye {
    justify-content: center;
    gap: 10px;
    font-size: 7.82px;
    letter-spacing: 0.26em;
  }

  /* a short rule on both sides of the place line */
  .hb4__eye::after {
    content: "";
    width: 22px;
    height: 1px;
    background: #E8A27F;
  }

  .hb4__eye > span:first-child {
    width: 22px;
  }

  .hb4__h {
    max-height: none !important;
    opacity: 1 !important;
    white-space: nowrap;
    font-size: clamp(26.52px, 8.21vw, 36.04px);
  }

  .hb4__hl {
    transform: none !important;
  }
}

@keyframes hb4-rise {
  from {
    clip-path: inset(100% 0 0 0);
    translate: 0 16%;
  }

  to {
    clip-path: inset(0 0 0 0);
    translate: 0 0;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hb4__arch picture {
    animation: none;
  }
}