:root {
  --dim: rgba(61, 163, 93, 0.18);
  --bright: #eafff0;
  --accent: #6fe3a0;
  --green: #3DA35D;
  --green-dark: #1F6B39;
  --ink: #f2f6f4;
  --muted: rgba(242, 246, 244, 0.6);
  --header-h: 76px;
  /* The reserved band around dead-center, where the spark always sits.
     Every panel leaves this exact height empty (see .panel-gap) so no
     content block ever occupies the same space as the line or spark. */
  --center-gap: clamp(110px, 15vh, 170px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

h1, h2 { font-family: 'Sora', sans-serif; margin: 0; }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--header-h);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink);
  opacity: 0.9;
  flex-shrink: 0;
  text-decoration: none;
}
.wordmark svg { color: var(--green); flex-shrink: 0; }
.wordmark-short { display: none; }
/* Matches the real letterhead: "ABZA" in brand green, the rest in ink. */
.wordmark-brand { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
}
.nav a {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
  pointer-events: auto;
}
.nav a:hover { color: var(--ink); }

.call-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(242, 246, 244, 0.25);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
  flex-shrink: 0;
}
.call-chip svg { color: var(--accent); }
.call-chip:hover { border-color: var(--accent); transform: translateY(-1px); }

/* Two plain SVG icons swapped via display, instead of animating
   pseudo-elements with rotate/translate transforms — the transform-based
   version rendered unreliably (inconsistent paints of the "closed" X
   state across checks), so this trades the crossfade for something that
   always unambiguously shows one icon or the other. */
.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
  position: relative;
  flex-shrink: 0;
  pointer-events: auto;
}
.nav-toggle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-hamburger { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  flex-direction: column;
  gap: 2px;
  padding: 10px 20px 18px;
  /* Solid, not translucent — a semi-transparent background here showed
     the animated hero content bleeding through on some renders (a
     backdrop-filter/compositing quirk with the fixed-position header),
     so this removes any transparency for the dropdown to show through. */
  background: #05080a;
  pointer-events: auto;
}
.mobile-nav a {
  padding: 12px 4px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(242,246,244,0.08);
}
.mobile-nav.open { display: flex; }

/* ---------- scroll track (drives progress; height set in JS) ---------- */
.scroll-track { width: 100%; }

/* ---------- pinned stage ---------- */
.stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  z-index: 1;
}

.scale-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  transform-origin: 0 0;
  will-change: transform;
}

.world {
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 6800px;
  will-change: transform;
}

.wire-svg { position: absolute; top: 0; left: 0; overflow: visible; }

.wire-dim {
  stroke: var(--dim);
  stroke-width: 2;
  stroke-linecap: round;
}

.wire-bright {
  stroke: var(--bright);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.9;
}

.spark { fill: var(--bright); }

/* Each scene's circuit icon is built from three generic part types, so
   every icon (battery, camera, resistor, capacitor, ...) shares the same
   dim → lit → flash behaviour regardless of its own shape:
   - .ic-lead: the plain connecting wire stubs either side
   - .ic-part: the component's own outline (line/polyline/rect)
   - .ic-dot:  a filled circular element (lens, LED) where used
   Dim (like the unlit wire) until the spark reaches it, then lights up
   and stays lit — same reveal logic as the bright wire trail, driven by
   script.js toggling .lit once the spark's path length passes the icon's
   fixed anchor. */
.circuit-icon .ic-lead {
  fill: none;
  stroke: var(--dim);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke 0.5s ease;
}
.circuit-icon .ic-part {
  fill: none;
  stroke: var(--dim);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.5s ease, filter 0.5s ease;
}
.circuit-icon .ic-dot {
  fill: rgba(61, 163, 93, 0.16);
  stroke: var(--dim);
  stroke-width: 4;
  transition: fill 0.5s ease, stroke 0.5s ease, filter 0.5s ease;
}
.circuit-icon.lit .ic-lead,
.circuit-icon.lit .ic-part {
  stroke: var(--bright);
}
.circuit-icon.lit .ic-part {
  filter: url(#sparkGlow);
}
.circuit-icon.lit .ic-dot {
  fill: var(--bright);
  stroke: var(--accent);
  filter: url(#sparkGlow);
}

/* A brighter flash exactly while the spark is passing through the icon
   (script.js toggles .flash based on proximity, independent of .lit) —
   settles back to the calmer steady glow once the spark moves on.
   Re-triggers on every pass, not just the first. The whole icon (not
   each part separately, which looked disjointed for multi-part icons
   like the batteries) pops together as one unit via .icon-shape. */
.circuit-icon.flash .ic-lead,
.circuit-icon.flash .ic-part {
  stroke: #ffffff;
}
.circuit-icon.flash .ic-part,
.circuit-icon.flash .ic-dot {
  filter: url(#sparkGlow);
}
.circuit-icon.flash .ic-dot {
  fill: #ffffff;
  stroke: #ffffff;
}
.circuit-icon .icon-shape {
  transform-box: fill-box;
  transform-origin: center;
}
.circuit-icon.flash .icon-shape {
  animation: circuitPop 0.5s ease;
}
@keyframes circuitPop {
  0% { transform: scale(0.55); }
  55% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-icon.flash .icon-shape { animation: none; }
  .circuit-switch .switch-blade { transition: stroke 0.4s ease, filter 0.4s ease; }
}

/* A simple switch symbol for the final scene — open (blade raised, hinged
   at the left terminal) by default, swinging flat/closed exactly as the
   spark reaches the true end of the path. Deliberately larger and with
   a wider swing than the other icons, since this is the one moment the
   whole animation builds to. */
.circuit-switch .switch-terminal {
  fill: var(--dim);
  stroke: var(--dim);
  stroke-width: 3;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
.circuit-switch .switch-blade {
  stroke: var(--dim);
  stroke-width: 7;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: rotate(-52deg);
  /* Slow, deliberate swing down onto the right terminal — a gentle
     ease-out with only a very slight settle at the end, not a snap. */
  transition: stroke 0.5s ease, transform 1.6s cubic-bezier(0.22, 0.9, 0.34, 1.05), filter 0.5s ease;
}
.circuit-switch.lit .switch-terminal {
  fill: var(--bright);
  stroke: var(--accent);
}
.circuit-switch.lit .switch-blade {
  stroke: var(--bright);
  transform: rotate(0deg);
  filter: url(#sparkGlow);
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%);
}

/* Closed to a pinpoint at the spark's fixed screen position (always
   dead-center) by default; body.finale (toggled in script.js the moment
   Contact becomes current) opens it into a full white flood. Reversible —
   scrolling back out of Contact closes it the same way it opened. */
.light-burst {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #ffffff;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.1s cubic-bezier(0.16, 0.8, 0.24, 1);
  pointer-events: none;
}
body.finale .light-burst {
  clip-path: circle(150% at 50% 50%);
}

/* ---------- content panels ---------- */
/* The spark's screen anchor is always dead-center (see script.js) — the
   camera moves, not the spark. So every panel is split into a top half
   and a bottom half around a fixed-height .panel-gap that sits exactly
   on that center point and never contains anything. No block can ever
   occupy the same pixels as the line or spark, because nothing is ever
   placed there in the first place. */
.panels {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 20px) clamp(24px, 6vw, 90px) 56px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
/* Every content element fades both in and out. Only the active panel
   should ever be clickable — pointer-events is re-enabled here (not just
   on .panel-contact) so links like the About section's "Learn more" work
   in every panel, not only Contact's buttons. */
.panel.active {
  opacity: 1;
  pointer-events: auto;
}

/* Content hugs the gap from its own side (bottom slot aligns to its top
   edge, top slot to its bottom edge) rather than floating centered within
   an oversized half — otherwise text ends up drifting toward the bottom
   of the viewport instead of reading as anchored, left-aligned copy. */
.panel-slot {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.panel-slot-top { justify-content: flex-end; }
.panel-slot-bottom { justify-content: flex-start; }
.panel-gap {
  flex: 0 0 auto;
  height: var(--center-gap);
}

.eyebrow {
  margin: 0 0 14px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}

.panel h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--ink);
}

.panel .lead {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

/* ---------- hero ---------- */
/* Split the same way as the image panels: heading hugs the gap from
   above, lead hugs it from below — nothing crosses the center. */
.panel-hero {
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
}
.panel-hero h1 {
  font-size: clamp(46px, 8vw, 108px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  color: var(--ink);
}
.panel-hero .lead { font-size: clamp(18px, 2vw, 26px); max-width: 34ch; }
.hero-note {
  margin: 18px 0 0;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- image + copy panels (About .. Why Us) ---------- */
/* .panel-split is just a static layout wrapper — its own children
   (.panel-media, .panel-copy) carry the real active/opacity state, so it
   must stay visible always. Left at the base .panel opacity:0, it would
   never get its own .active class and would hide both children forever
   regardless of their own opacity. */
.panel-split {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  opacity: 1;
}

/* The image half fades in AND out (a supporting element); margin:0 resets
   the browser's default <figure> margin (1em 40px), which otherwise
   silently shifts everything and skews any spacing measurement. */
.panel-media {
  width: 100%;
  max-width: 820px;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.panel-media.active { opacity: 1; }
.panel-media img {
  display: block;
  width: 100%;
  height: min(34vh, 440px);
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(242, 246, 244, 0.14);
}
.panel-media figcaption {
  margin-top: 18px;
  display: flex;
  gap: 24px;
  align-items: baseline;
}
.media-label {
  flex: 0 0 150px;
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
/* Hard-capped at 2 lines regardless of copy length, so the card's height
   stays predictable. */
.media-text {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

/* The copy half — fades both in and out, same as everything else now. */
.panel-copy {
  width: 100%;
  max-width: 680px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.panel-copy.active {
  opacity: 1;
  pointer-events: auto;
}

.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.learn-more span { transition: transform 0.25s ease; }
.learn-more:hover span { transform: translateX(4px); }

.bullets {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.bullets li {
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 500;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
}
.bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* ---------- contact ---------- */
.panel-contact {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  /* A short delay before fading in (and none removing it, so it still
     fades out promptly) — this is the panel whose text turns black on
     the light-burst's white, so it needs the burst to already be mostly
     open before it appears, not racing it from a black background. */
  transition: opacity 0.6s ease 0.35s;
}
.panel-contact.active {
  pointer-events: auto;
  transition: opacity 0.6s ease;
}

/* Sits in the contact panel's bottom slot, hugging the gap the same way
   an image or heading does in every other panel — a quick trust signal
   right under the "get in touch" details above it. Gated behind the
   switch closing, same as .contact-grid. */
.contact-highlights {
  margin: 0;
  padding: 28px 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 28px;
  width: 100%;
  max-width: 1160px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.switch-on .contact-highlights {
  opacity: 1;
}
.contact-highlights li {
  padding-left: 20px;
  border-left: 1px solid rgba(242, 246, 244, 0.16);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-highlights li:first-child { padding-left: 0; border-left: none; }
.highlight-num {
  font-family: 'Sora', sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--accent);
}
.highlight-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Stays hidden even once the Contact scene itself is active — only
   appears once the switch (see .circuit-switch in script.js) has
   actually closed, first in the normal dark theme, then recoloured once
   body.finale lands a couple of seconds later. */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0 70px;
  align-items: center;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
body.switch-on .contact-grid {
  opacity: 1;
  pointer-events: auto;
}
.contact-details {
  margin: 0;
  padding: 6px 0 0 40px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 1px solid rgba(242, 246, 244, 0.16);
}
.contact-details li {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--muted);
  line-height: 1.5;
}
.contact-details span {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.contact-details a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(242,246,244,0.3); }

.contact-cta { display: flex; gap: 14px; margin-top: 32px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-primary { background: var(--green); color: #0B1120; }
.btn-primary:hover { background: var(--accent); transform: translateY(-2px); }
.btn-ghost { color: var(--ink); border: 1px solid rgba(242, 246, 244, 0.28); }
.btn-ghost:hover { border-color: rgba(242, 246, 244, 0.6); transform: translateY(-2px); }

/* A small glowing dot that travels endlessly around the button's own
   border. The wrapper's padding sets the ring's thickness; the mask
   (border-box minus content-box) reveals only that thin band, and
   clips the traveling dot to it too, so it reads as light moving along
   the edge rather than a dot sliding across the button's face. */
.btn-glow { position: relative; }
.btn-glow-ring {
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.btn-glow-ring::before {
  content: '';
  position: absolute;
  width: 26px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--accent) 55%, transparent 100%);
  offset-path: rect(0 auto auto 0 round 999px);
  animation: btnGlowTravel 3s linear infinite;
}
@keyframes btnGlowTravel {
  to { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow-ring::before { animation: none; }
}

/* ---------- finale (Contact, once the light-burst opens) ---------- */
/* body.finale is set the instant Contact becomes the active scene (see
   updateActiveScene in script.js) and cleared the instant it stops being
   active — so this reverses cleanly if the user scrolls back out. Only
   the header and the contact panel need color overrides; everything
   else is already hidden (opacity 0) while Contact is current. */
body.finale .site-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
}
body.finale .wordmark { color: #10151a; }
body.finale .wordmark-brand { color: var(--green-dark); }
body.finale .nav a { color: rgba(16, 21, 26, 0.55); }
body.finale .nav a:hover { color: #10151a; }
body.finale .call-chip { color: #10151a; border-color: rgba(16, 21, 26, 0.25); }
body.finale .call-chip:hover { border-color: var(--green-dark); }
body.finale .nav-toggle { color: #10151a; }
body.finale .mobile-nav { background: #fdfdfb; }
body.finale .mobile-nav a { color: #10151a; border-bottom-color: rgba(16, 21, 26, 0.1); }

body.finale .panel-contact { color: #10151a; }
body.finale .panel-contact .eyebrow { color: var(--green-dark); }
body.finale .panel-contact h2 { color: #10151a; }
body.finale .panel-contact .lead { color: rgba(16, 21, 26, 0.7); }
body.finale .contact-highlights li { border-left-color: rgba(16, 21, 26, 0.2); }
body.finale .highlight-num { color: var(--green-dark); }
body.finale .highlight-label { color: rgba(16, 21, 26, 0.6); }
body.finale .contact-details { border-left-color: rgba(16, 21, 26, 0.2); }
body.finale .contact-details li { color: rgba(16, 21, 26, 0.75); }
body.finale .contact-details span { color: var(--green-dark); }
body.finale .contact-details a { color: #10151a; text-decoration-color: rgba(16, 21, 26, 0.3); }
body.finale .btn-ghost { color: #10151a; border-color: rgba(16, 21, 26, 0.3); }
body.finale .btn-ghost:hover { border-color: #10151a; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .panel-media img { height: 28vh; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px 0; }
  .contact-details { border-left: none; padding: 20px 0 0; border-top: 1px solid rgba(242, 246, 244, 0.16); }
  .contact-highlights { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
  .contact-highlights li:nth-child(odd) { padding-left: 0; border-left: none; }
  .contact-highlights li:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(242, 246, 244, 0.16); }
}

@media (max-height: 700px) {
  :root { --center-gap: clamp(90px, 13vh, 130px); }
}

/* ---------- scroll hint ---------- */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.scroll-hint svg { animation: bob 1.8s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg { animation: none; }
}

/* A persistent quick-contact button, mobile only — desktop already has
   the header's WhatsApp chip within easy reach at all times. Hidden
   during the finale so it doesn't clutter the white reveal moment
   (the Contact panel itself already has its own WhatsApp button there). */
.whatsapp-float {
  display: none;
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 25;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .whatsapp-float { display: flex; }
}

body.finale .whatsapp-float { display: none; }

@media (max-width: 640px) {
  .site-header { padding: 16px 16px; }
  .wordmark-full { display: none; }
  .wordmark-short { display: inline; }
  .wordmark { font-size: 13px; }
  .call-number { display: none; }
  .call-chip { padding: 10px; }
  .contact-cta { flex-direction: column; align-items: stretch; }
  .contact-cta .btn { justify-content: center; }
  /* Phones are both short and narrow, so text wraps to more lines at the
     same time as there being less height to work with — the extra
     storytelling sentence (fine on desktop) was tall enough to push the
     heading above its slot and clip behind the fixed header. Trim back
     to the original, shorter copy here, and reclaim more room from the
     image and the center gap too. */
  .lead-extra { display: none; }
  .panel-media img { height: 20vh; min-height: 130px; }
  .panel-media figcaption { margin-top: 10px; }
  :root { --center-gap: clamp(70px, 10vh, 100px); }
  .panel { padding: calc(var(--header-h) + 10px) clamp(20px, 6vw, 90px) 36px; }
  .bullets { margin-top: 18px; gap: 10px 20px; }
}

/* Short AND narrow at once (small older phones, or landscape) — the two
   slots still split the space evenly regardless of what each one's
   content actually needs, so on a tall wrapped-text scene the text can
   still outgrow its half even after the trims above. At this extreme,
   drop the decorative photo (its caption already only repeats/supports
   the heading) and let the text have the whole budget instead. */
@media (max-width: 640px) and (max-height: 700px) {
  .panel-split .panel-media { display: none; }
  .panel-split .panel-slot-bottom { flex: 0 0 auto; min-height: 0; }
  .panel-split .panel-slot-top { flex: 1 1 auto; }
}