/* ============================================================
   HERO B (index-b.html): framed light stage + division cards.
   Alternative to the reel hero. Same light theme, accent and
   print texture as Hero A (taste 4.11 page theme lock).
   ============================================================ */

:root { --r-surface: 16px; } /* shape lock: page-wide radius for B, frame = surface + gutter */

.hb {
  --hb-bg: #eef1fc;          /* logo blue at ~7% on white */
  --hb-ink: var(--text);     /* #0f1638 navy */
  --hb-dim: var(--text-dim);
  --hb-soft: #636b89;        /* second headline line, 4.6:1 on --hb-bg */
  --hb-line: rgba(15, 22, 56, 0.1);
  --hb-glass: rgba(255, 255, 255, 0.72);
  --hb-blue: var(--accent);
  --hb-blue-hi: var(--accent);
  --card-w: clamp(170px, min(16.5vw, 30dvh), 260px);
  position: relative;
  padding: 0;
}
.hb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hb-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: min(calc(100dvh - 12px), 1000px);
  /* no bottom edge: the frame fades into the SEMA photo below (see .sema-fade) */
  background:
    radial-gradient(70% 50% at 50% 110%, rgba(36, 64, 216, 0.16), transparent 70%),
    radial-gradient(50% 40% at 50% -10%, rgba(255, 255, 255, 0.9), transparent 70%),
    var(--hb-bg);
  color: var(--hb-ink);
}
.hb-frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  z-index: -1;
  pointer-events: none;
  /* eased ramp: flat at the very bottom so it meets the SEMA fade with no visible edge */
  background: linear-gradient(180deg, rgba(238, 241, 252, 0.000) 0%, rgba(238, 241, 252, 0.034) 11%, rgba(238, 241, 252, 0.126) 22%, rgba(238, 241, 252, 0.259) 33%, rgba(238, 241, 252, 0.417) 44%, rgba(238, 241, 252, 0.583) 56%, rgba(238, 241, 252, 0.741) 67%, rgba(238, 241, 252, 0.874) 78%, rgba(238, 241, 252, 0.966) 89%, rgba(238, 241, 252, 1.000) 100%);
}
/* same print texture as Hero A: paper grain + logo-blue ink flecks */
.hb-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("assets/img/texture-print.svg");
}

/* ---------- nav inside the frame ---------- */
.hb-nav {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 12px clamp(18px, 3vw, 36px); /* taste nav cap: <= 80px tall */
}
.hb-logo img { height: 30px; width: auto; }
.hb-links {
  display: flex;
  gap: 2px;
  padding: 5px;
  background: var(--hb-glass);
  border: 1px solid var(--hb-line);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.hb-links a {
  padding: 0.55em 1.05em;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hb-dim);
  transition: color 0.2s, background 0.2s;
}
.hb-links a:hover { color: var(--hb-ink); background: rgba(15, 22, 56, 0.05); }
.hb-links a[aria-current="page"] {
  background: #fff;
  color: var(--hb-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 22, 56, 0.08), 0 4px 12px -6px rgba(15, 22, 56, 0.25);
}
/* Lifestyle submenu: the link still goes to the page; hover (pointer devices), keyboard focus or the
   caret button opens a small panel with the businesses inside Lifestyle. Phone menu: listed inline. */
.hb-sub { position: relative; display: flex; align-items: center; border-radius: 999px; }
.hb-links .hb-sub > a { padding-right: 0.25em; }
.hb-sub:has(> a[aria-current="page"]) {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 22, 56, 0.08), 0 4px 12px -6px rgba(15, 22, 56, 0.25);
}
.hb-links .hb-sub > a[aria-current="page"] { background: none; box-shadow: none; }
.hb-sub-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 0.35em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--hb-dim);
  font-size: 0.8rem;
  cursor: pointer;
}
.hb-sub-toggle .ph { transition: rotate 0.2s; }
.hb-sub-toggle:focus-visible { outline: 2px solid var(--accent, #2440d8); outline-offset: 1px; }
.hb-sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 10;
  display: grid;
  gap: 2px;
  min-width: 270px;
  padding: 6px;
  border: 1px solid rgba(15, 22, 56, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px -16px rgba(15, 22, 56, 0.35);
  opacity: 0;
  visibility: hidden;
  translate: -50% -4px;
  transition: opacity 0.18s, visibility 0.18s, translate 0.18s;
}
.hb-sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge over the gap */
.hb-links .hb-sub-menu a {
  display: grid;
  gap: 1px;
  padding: 0.7em 0.9em;
  border-radius: 12px;
  color: var(--text, #0f1638);
  font-size: 0.92rem;
}
.hb-sub-menu b { font-weight: 600; }
.hb-sub-menu span { font-size: 0.82rem; color: var(--text-dim, #525a78); }
.hb-sub.is-open .hb-sub-menu,
.hb-sub:has(:focus-visible) .hb-sub-menu { opacity: 1; visibility: visible; translate: -50% 0; }
.hb-sub.is-open .hb-sub-toggle .ph { rotate: 180deg; }
.hb-sub { transition: background 0.2s; }
.hb-links .hb-sub > a:hover { background: none; } /* the whole pill (word + caret) takes the hover, not the word alone */
@media (hover: hover) {
  /* hover intent: open only after the pointer rests ~0.15s, so passing over on the way to a
     neighbour does not flash the panel; leaving closes at once (base rule has no delay) */
  .hb-sub:hover .hb-sub-menu { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0.15s; }
  .hb-sub:hover:not(:has(> a[aria-current="page"])) { background: rgba(15, 22, 56, 0.05); }
  .hb-sub:hover > a, .hb-sub:hover .hb-sub-toggle { color: var(--hb-ink); }
  .hb-links .hb-sub-menu a:hover { background: var(--bg-2, #f2f4fd); }
}
@media (prefers-reduced-motion: reduce) {
  .hb-sub-menu, .hb-sub-toggle .ph { transition: none; }
}
.hb-actions { justify-self: end; display: flex; align-items: center; gap: 0.5rem; }
.hb-lang {
  display: inline-grid;
  place-items: center;
  height: 42px;
  min-width: 42px; /* a circle the size of the menu button; the pill buttons match its height */
  padding: 0 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: var(--hb-glass);
  border: 1px solid var(--hb-line);
  color: var(--hb-ink);
  transition: background 0.2s;
}
.hb-lang:hover { background: #fff; }
.hb-actions .hb-btn { height: 42px; padding-block: 0; } /* one height across EN, contact and menu */
.hb-toggle { display: none; }

.hb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.7em 1.35em;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.hb-btn--primary { background: var(--accent-fill); color: #fff; }
.hb-btn--primary:hover { background: var(--accent-deep); }
.hb-btn--line { border: 1px solid rgba(15, 22, 56, 0.28); color: var(--hb-ink); background: var(--hb-glass); }
.hb-btn--line:hover { background: #fff; border-color: var(--hb-ink); }
.hb-btn:active { transform: scale(0.98); }

/* ---------- copy ---------- */
.hb-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding: clamp(1rem, 4vh, 3rem) 1.25rem 0;
}
.hb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(36, 64, 216, 0.28);
  background: var(--hb-glass);
  font-size: 0.85rem;
  color: var(--hb-dim);
  transition: border-color 0.2s, background 0.2s;
}
.hb-pill:hover { border-color: var(--accent); background: #fff; }
.hb-pill-link { display: inline-flex; align-items: center; gap: 0.3em; color: var(--accent); font-weight: 600; }
.hb h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem); /* taste 4.7: 4-word headline, text-7xl max */
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hb h1 > span { display: block; }
.hb-h-soft { color: var(--hb-soft); font-size: 0.62em; letter-spacing: -0.02em; margin-top: 0.2em; }
@media (max-width: 600px) { .hb-h-soft { font-size: 0.5em; line-height: 1.15; margin-top: 0.35em; } }
.hb-copy p { max-width: 34em; color: var(--hb-dim); font-size: clamp(1rem, 1.2vw, 1.1rem); text-wrap: pretty; }
.hb-cta { margin-top: 0.4rem; padding: 0.45em 0.5em 0.45em 1.35em; }
.hb-cta-dot {
  display: grid;
  place-items: center;
  width: 2em; height: 2em;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  transition: transform 0.2s;
}
.hb-cta:hover .hb-cta-dot { transform: translateY(2px); }

/* ---------- stage: tilted division cards cut by the frame edge ---------- */
.hb-stage {
  position: relative;
  flex: 1;
  min-height: calc(var(--card-w) * 1.62);
  margin-top: clamp(1.25rem, 3.5vh, 2.5rem);
}
.hb-card {
  position: absolute;
  left: 50%;
  bottom: calc(var(--card-w) * 0.14);
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border-radius: var(--r-surface);
}

.hb-card {
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  color: #fff;
  background: var(--hb-blue);
  box-shadow: 0 30px 60px -24px rgba(15, 22, 56, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 0.45s, opacity 0.3s;
}
/* five-card fan: each card sets its offset (--x, in card widths), drop (--y) and tilt (--r) */
.hb-card {
  --x: 0; --y: 0px; --r: 0deg;
  transform: translateX(calc(-50% + var(--x) * var(--card-w))) translateY(var(--y)) rotate(var(--r));
}
.hb-card:hover { transform: translateX(calc(-50% + var(--x) * var(--card-w))) translateY(calc(var(--y) - 16px)) rotate(calc(var(--r) * 0.6)); }
.hb-card--l2 { --x: -2.02; --y: 20px; --r: -9deg; z-index: 2; background: #1a2fa8; }
.hb-card--l1 { --x: -1.04; --y: 8px;  --r: -4.5deg;  z-index: 3; background: #2440d8; }
.hb-card--c  { --x: 0;     --y: 0px;  --r: 0deg;   z-index: 4; }
.hb-card--r1 { --x: 1.04;  --y: 8px;  --r: 4.5deg;   z-index: 3; background: #3553ff; }
.hb-card--r2 { --x: 2.02;  --y: 20px; --r: 9deg;  z-index: 2; background: #1a2fa8; }

/* real colour photo; scrims top and bottom keep the white text readable (taste 4.5 contrast) */
.hb-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hb-card { isolation: isolate; }
.hb-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9, 14, 40, 0.5) 0%, rgba(9, 14, 40, 0) 26%, rgba(9, 14, 40, 0) 52%, rgba(9, 14, 40, 0.78) 100%);
}

.hb-card-top { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; line-height: 1.1; }
.hb-card-top img { height: 18px; width: auto; filter: brightness(0) invert(1); }
.hb-card-top b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.hb-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}
.hb-card-go {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  transition: background 0.2s;
}
.hb-card:hover .hb-card-go { background: #fff; color: var(--accent); }

/* ---------- fan controls (tablet + phone; desktop shows all five) ---------- */
.hb-ctrl { display: none; }

/* ---------- background art (data-bg on .hb) ----------
   gradient: soft blue grain gradient supplied by the client (default)
   halftone: riso dot gradient, the logo's print texture scaled up
   photo:    blue duotone workshop photo washed into the paper
   paper:    texture only, with the drifting speed lines */
.hb-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* the client's gradient, de-grained and upscaled; fresh vector grain on top stays sharp at any size */
.hb[data-bg="gradient"] .hb-art { background: url("assets/img/hero-gradient.webp") center / cover; }
.hb[data-bg="gradient"] .hb-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/grain.svg");
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.hb[data-bg="halftone"] .hb-art {
  background: url("assets/img/halftone-fade.svg") bottom center / auto 100% repeat-x;
  opacity: 0.36;
}
.hb[data-bg="photo"] .hb-art::before,
.hb[data-bg="photo"] .hb-art::after { content: ""; position: absolute; inset: 0; }
.hb[data-bg="photo"] .hb-art::before {
  background: url("https://picsum.photos/seed/passato-workshop/1600/1000?grayscale") center 60% / cover;
  filter: grayscale(1) sepia(1) hue-rotate(188deg) saturate(2.2) contrast(0.95) brightness(1.05);
  opacity: 0.6;
}
.hb[data-bg="photo"] .hb-art::after {
  background: linear-gradient(180deg, var(--hb-bg) 8%, rgba(238, 241, 252, 0.78) 48%, rgba(238, 241, 252, 0.25) 100%);
}
.hb:not([data-bg="paper"]) .hb-streaks { display: none; }

/* ---------- light streaks: blurred speed lines in logo blues ---------- */
.hb-streaks { position: absolute; inset: 45% 0 0; z-index: 0; pointer-events: none; }
.hb-streaks i {
  position: absolute;
  height: 5px;
  border-radius: 999px;
  filter: blur(3px);
  opacity: 0.45;
  background: linear-gradient(90deg, transparent, var(--c, #7d8fff) 35%, var(--c, #7d8fff) 65%, transparent);
  animation: hb-drift var(--d, 7s) ease-in-out infinite alternate;
}
.hb-streaks i:nth-child(1) { top: 18%; left: -4%;  width: 22%; --c: #7d8fff; --d: 7s; }
.hb-streaks i:nth-child(2) { top: 30%; left: 6%;   width: 14%; --c: #9aa9ff; --d: 9s; opacity: 0.45; height: 3px; }
.hb-streaks i:nth-child(3) { top: 46%; left: -6%;  width: 26%; --c: #2440d8; --d: 8s; height: 8px; }
.hb-streaks i:nth-child(4) { top: 62%; left: 2%;   width: 18%; --c: #a9b6ff; --d: 6s; }
.hb-streaks i:nth-child(5) { top: 22%; right: -5%; width: 24%; --c: #2440d8; --d: 8.5s; height: 7px; }
.hb-streaks i:nth-child(6) { top: 38%; right: 4%;  width: 16%; --c: #9aa9ff; --d: 6.5s; opacity: 0.45; height: 3px; }
.hb-streaks i:nth-child(7) { top: 54%; right: -8%; width: 28%; --c: #7d8fff; --d: 9.5s; }
.hb-streaks i:nth-child(8) { top: 72%; right: 6%;  width: 15%; --c: #a9b6ff; --d: 7.5s; height: 3px; }
@keyframes hb-drift { from { transform: translateX(-4vw); } to { transform: translateX(4vw); } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hb-nav { grid-template-columns: auto 1fr; } /* links collapse into the menu: two columns, so the buttons sit on the same edge as the logo */
  .hb-links { display: none; }
  .hb-toggle {
    display: block;
    position: relative;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--hb-glass);
    border: 1px solid var(--hb-line);
  }
  .hb-toggle span, .hb-toggle span::before, .hb-toggle span::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px;
    height: 2px;
    background: var(--hb-ink);
    transition: transform 0.25s;
  }
  .hb-toggle span { top: 20px; }
  .hb-toggle span::before { left: 0; right: 0; top: -6px; }
  .hb-toggle span::after { left: 0; right: 0; top: 6px; }
  .hb-nav.open .hb-toggle span { background: transparent; }
  .hb-nav.open .hb-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .hb-nav.open .hb-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
  .hb-nav.open .hb-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% - 6px);
    left: clamp(18px, 3vw, 36px);
    right: clamp(18px, 3vw, 36px);
    padding: 8px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgba(15, 22, 56, 0.3);
  }
  .hb-nav.open .hb-links a { padding: 0.8em 1em; }
  /* phone menu: Lifestyle row with its own caret on the right; the two entries start collapsed */
  .hb-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .hb-sub:has(> a[aria-current="page"]) { background: none; box-shadow: none; }
  .hb-links .hb-sub > a { flex: 1; display: block; }
  .hb-sub-toggle { width: 40px; height: 40px; margin-right: 0.3em; font-size: 1rem; }
  .hb-sub-menu,
  .hb-sub.is-open .hb-sub-menu,
  .hb-sub:has(:focus-visible) .hb-sub-menu {
    position: static;
    display: none;
    flex-basis: 100%;
    min-width: 0;
    padding: 0 0 0.25rem 1rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    translate: none;
  }
  .hb-sub.is-open .hb-sub-menu { display: grid; }
  .hb-sub-menu::before { display: none; }
  .hb-nav.open .hb-links .hb-sub-menu a { padding: 0.55em 1em; }
}
@media (max-width: 1080px) {
  /* tablets and phones: same fan, three cards visible; hero-b.js rotates the five through it
     (data-o = offset from the active card) on swipe or tap */
  .hb { --card-w: clamp(170px, min(36vw, 34dvh), 300px); }
  .hb-frame { min-height: 0; } /* tablets hug the content; phones go full screen below */
  /* hang the fan a fixed step under the CTA instead of pinning it to the frame floor,
     so spare height never opens a gap between the button and the cards it points to */
  .hb-stage { flex: 1 0 auto; margin-top: clamp(1.75rem, 4dvh, 2.5rem); min-height: calc(var(--card-w) * 1.5); touch-action: pan-y; }
  .hb-card { top: 0; bottom: auto; }
  .hb-stage { flex: 0 0 auto; }
  .hb-ctrl {
    display: grid;
    grid-template-columns: 44px 9.5rem 44px; /* fixed middle column: arrows never shift with name length */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: auto 0;             /* sits centred in whatever height is left under the fan */
    padding: 0.75rem 0 1rem;
  }
  .hb-now {
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--hb-ink);
  }
  .hb-ctrl button {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(15, 22, 56, 0.28);
    background: var(--hb-glass);
    color: var(--hb-ink);
    font-size: 1.1rem;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  }
  .hb-ctrl button:hover { background: var(--hb-ink); border-color: var(--hb-ink); color: #fff; }
  .hb-ctrl button:active { transform: scale(0.96); }
  .hb-card { padding: 14px; }
  .hb-card-top { gap: 0.45rem; }
  .hb-card-top img { height: 13px; }
  .hb-card-top b { font-size: 0.92rem; white-space: nowrap; }
  .hb-card[data-o="0"]  { --x: 0;     --y: 0px;  --r: 0deg;  z-index: 4; }
  .hb-card[data-o="-1"] { --x: -0.8;  --y: 26px; --r: -8deg; z-index: 3; }
  .hb-card[data-o="1"]  { --x: 0.8;   --y: 26px; --r: 8deg;  z-index: 3; }
  .hb-card[data-o="-2"] { --x: -1.5;  --y: 60px; --r: -14deg; z-index: 2; opacity: 0; pointer-events: none; }
  .hb-card[data-o="2"]  { --x: 1.5;   --y: 60px; --r: 14deg;  z-index: 2; opacity: 0; pointer-events: none; }
  .hb-card:hover { transform: translateX(calc(-50% + var(--x) * var(--card-w))) translateY(var(--y)) rotate(var(--r)); }
}
@media (max-width: 640px) {
  .hb { --card-w: min(68vw, 40dvh); }

  .hb[data-bg="gradient"] .hb-art { background-image: url("assets/img/hero-gradient-portrait.webp"); }
  .hb-frame { min-height: 100dvh; } /* phones: full screen */
  .hb-actions .hb-btn { display: none; }
  .hb-card-foot { font-size: 0.88rem; }
  .hb-pill { font-size: 0.8rem; }
  .hb-pill-link { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .hb-links, .hb-card-go, .hb-pill, .hb-btn--line { backdrop-filter: none; background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-streaks i { animation: none; }
  .hb-card, .hb-cta-dot { transition: none; }
}


/* ---------- inner-page hero (.hb--page) ----------
   Same framed gradient stage + in-frame nav as the home hero, sized to content:
   copy on the left, one photo on the right. Pages fill .hb-page; nothing else changes. */
.hb--page .hb-frame { min-height: 0; }
.hb-page {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(18px, 3vw, 36px) clamp(3rem, 6vw, 5rem);
}
.hb-page-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.hb-page h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hb-page-lead { color: var(--hb-dim); font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 40ch; }
.hb-page-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.hb-page-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-surface);
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -30px rgba(15, 22, 56, 0.5);
  background: var(--bg-3);
}
.hb-page-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) {
  .hb-page { grid-template-columns: minmax(0, 1fr); padding-top: 1rem; }
  .hb-page-media { aspect-ratio: 16 / 11; }
}

/* inner pages: the next section is white, so the frame's eased ramp lands on white */
.hb--page .hb-frame::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 22%, rgba(255, 255, 255, 0.42) 44%, rgba(255, 255, 255, 0.74) 67%, rgba(255, 255, 255, 0.97) 89%, #fff 100%);
}
/* inner pages: hero copy lines up with the .wrap column the sections below use */
.hb--page .hb-page {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* phone menu: the "Hubungi Kami" button hides below 640px, so the menu carries it instead */
.hb-links .hb-links-contact { display: none; }
@media (max-width: 640px) {
  .hb-nav.open .hb-links .hb-links-contact { display: block; color: var(--accent); font-weight: 600; }
}

/* ---------- division poster hero (.hb-poster) ----------
   Division pages open on a full-screen photo: the shared nav and the copy sit
   in the photo's headroom, a navy scrim only where the copy is.
   Pages set the photo focus with --poster-pos. .hb-poster--light is for
   photos with a pale sky: navy type, blue logo, a paper-blue wash instead. */
.hb-poster .hb-frame {
  min-height: min(100dvh, max(62vw, 48rem)); /* the 16:9 photo, never taller than the screen */
  background: rgb(var(--scrim));
}
.hb-poster .hb-frame::before,
.hb-poster .hb-frame::after { display: none; } /* no paper texture or bottom ramp over a photo */
.hb-poster-photo, .hb-poster-photo img { position: absolute; inset: 0; z-index: -2; }
.hb-poster-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--poster-pos, 50% 60%); }
/* scrim: darkens only the headroom under the nav and copy, the subject stays untouched */
.hb-poster-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--scrim), 0.35) 0%, rgba(var(--scrim), 0.42) 24%, rgba(var(--scrim), 0.25) 44%, rgba(var(--scrim), 0) 58%),
    linear-gradient(90deg, rgba(var(--scrim), 0.5) 0%, rgba(var(--scrim), 0) 55%);
}
.hb-poster .hb-nav { z-index: 5; }
.hb-poster .hb-logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(var(--scrim), 0.35)); }
.hb-poster-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: clamp(0.75rem, 3.5vh, 3.5rem);
  padding-bottom: var(--s4);
  color: #fff;
}
.hb-poster-copy h1 {
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, min(5.2vw, 8vh), 4.6rem); /* scales with height too: the copy must end above the roof */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(var(--scrim), 0.35);
}
.hb-poster-lead {
  margin-top: 1.1rem;
  max-width: 38ch;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}
.hb-poster-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1rem, 2.6vh, 1.6rem); }
/* secondary CTA on a photo: frosted glass with a white stroke so it reads on sky or road */
.hb-btn--glass {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hb-btn--glass:hover { background: rgba(255, 255, 255, 0.26); border-color: #fff; }
.hb-poster .hb-btn .ph { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) {
  .hb-poster .hb-btn--primary:hover .ph { transform: translateY(2px); }
}
/* entry: headline first, then lead and actions (hierarchy, once on load) */
@media (prefers-reduced-motion: no-preference) {
  .hb-poster-copy > * { animation: hb-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hb-poster-copy > :nth-child(2) { animation-delay: 0.07s; }
  .hb-poster-copy > :nth-child(3) { animation-delay: 0.14s; }
}
@keyframes hb-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* phones and portrait tablets: a portrait crop, headroom above the subject for the copy */
@media (max-width: 700px), (max-aspect-ratio: 3/4) {
  .hb-poster .hb-frame { min-height: min(100dvh, 170vw); }
  .hb-poster-photo img { object-position: 50% 50%; }
  .hb-poster-photo::after {
    background: linear-gradient(180deg, rgba(var(--scrim), 0.4) 0%, rgba(var(--scrim), 0.55) 20%, rgba(var(--scrim), 0.3) 38%, rgba(var(--scrim), 0) 50%);
  }
}
@media (max-width: 640px) {
  .hb-poster .hb-frame { min-height: 100dvh; } /* phones: full screen, the subject sits below the copy */
  .hb-poster-copy { padding-top: 1.25rem; }
  .hb-poster-copy h1 { font-size: clamp(2.3rem, 10vw, 2.9rem); }
}
@media (prefers-reduced-transparency: reduce) {
  .hb-btn--glass { backdrop-filter: none; background: rgba(var(--scrim), 0.7); }
}

/* busy photos (racks, palms): a deeper scrim behind the copy column */
.hb-poster--busy .hb-poster-photo::after {
  background:
    linear-gradient(180deg, rgba(var(--scrim), 0.5) 0%, rgba(var(--scrim), 0.5) 30%, rgba(var(--scrim), 0.2) 55%, rgba(var(--scrim), 0) 70%),
    linear-gradient(90deg, rgba(var(--scrim), 0.72) 0%, rgba(var(--scrim), 0.45) 35%, rgba(var(--scrim), 0) 62%);
}
@media (max-width: 700px), (max-aspect-ratio: 3/4) {
  .hb-poster--busy .hb-poster-photo::after {
    background: linear-gradient(180deg, rgba(var(--scrim), 0.6) 0%, rgba(var(--scrim), 0.62) 38%, rgba(var(--scrim), 0.2) 58%, rgba(var(--scrim), 0) 70%);
  }
}

/* light variant */
.hb-poster--light .hb-frame { background: var(--hb-bg); }
.hb-poster--light .hb-logo img { filter: none; }
.hb-poster--light .hb-poster-photo::after {
  background: linear-gradient(180deg, rgba(238, 241, 252, 0.7) 0%, rgba(238, 241, 252, 0.45) 26%, rgba(238, 241, 252, 0) 48%);
}
.hb-poster--light .hb-poster-copy { color: var(--text); }
.hb-poster--light .hb-poster-copy h1 { text-shadow: none; }
.hb-poster--light .hb-poster-lead { color: var(--text-dim); }
@media (max-width: 700px), (max-aspect-ratio: 3/4) {
  .hb-poster--light .hb-poster-photo::after {
    background: linear-gradient(180deg, rgba(238, 241, 252, 0.72) 0%, rgba(238, 241, 252, 0.4) 22%, rgba(238, 241, 252, 0) 40%);
  }
}

/* ---------- sticky nav (hero-b.js): the same nav, floating once the hero's nav scrolls away ---------- */
.hb-nav-slot { position: relative; z-index: 5; }
.hb-nav.is-stuck {
  --hb-ink: var(--text);
  --hb-dim: var(--text-dim);
  --hb-line: rgba(15, 22, 56, 0.1);
  --hb-glass: rgba(255, 255, 255, 0.72);
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 100;
  width: min(calc(100% - 20px), 1240px);
  padding: 6px 8px 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(15, 22, 56, 0.08);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 12px 32px -14px rgba(15, 22, 56, 0.3);
  color: var(--text);
  transform: translateX(-50%);
}
.hb-nav.is-stuck .hb-logo img { height: 26px; filter: none; }
.hb-nav.is-stuck .hb-links { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hb-nav.is-stuck { animation: hb-nav-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
}
@keyframes hb-nav-in { from { transform: translate(-50%, -130%); } to { transform: translateX(-50%); } }
@media (max-width: 1080px) {
  .hb-nav.is-stuck { padding: 6px 6px 6px 16px; }
  .hb-nav.is-stuck.open .hb-links {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(15, 22, 56, 0.08);
  }
  .hb-nav.is-stuck .hb-toggle { width: 38px; height: 38px; }
  .hb-nav.is-stuck .hb-lang { height: 38px; min-width: 38px; }
  .hb-nav.is-stuck .hb-actions .hb-btn { height: 38px; }
  .hb-nav.is-stuck .hb-toggle span { top: 18px; left: 11px; right: 11px; }
}
@media (prefers-reduced-transparency: reduce) {
  .hb-nav.is-stuck { backdrop-filter: none; background: #fff; }
}