/* Homepage hero refresh (design/hero branch, Oct 2026), matched to Philip's mockup.
   Loaded after home.min.css on the homepage only; home.min.css is unchanged.
   Proportions are measured from the mockup as fractions of viewport width.
   The right-hand graphic is hidden for now (markup kept; delete the first rule to restore). */

body[data-page=home] {
  --hero-green: #3f5641;
  --hero-button: #6c8a6e;
  /* Second button uses the tan of the trailing signal wave, to balance the green across the hero. */
  --hero-button-2: #a08868; /* wave tan #a98a5f with saturation -25%, so the green CTA stays primary */
  /* Desktop size of the whole hero text block (headline, intro, label, buttons). 1 = mockup match. */
  --hero-scale: 0.825; /* was 0.75; left text block +10% (12 Oct 2026) */
  /* Extra size factor for the headline only. */
  --hero-h1-scale: 0.85;
  /* Extra size factor for the intro paragraph and buttons. */
  --hero-support-scale: 1.2;
}

body[data-page=home] .hero .noise-clarity-visual {
  display: none;
}

body[data-page=home] .hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Headline: one phrase per line, last two in deep green. */
body[data-page=home] .hero-copy h1 > span {
  display: block;
}

body[data-page=home] .hero-copy h1 > span:nth-child(n + 3) {
  color: var(--hero-green);
}

@media (min-width: 1101px) {
  /* 10% margin each side (12 Oct 2026); capped for very large monitors. */
  body[data-page=home] .container {
    width: min(calc(100% - 20vw), 1720px);
  }

  /* The footer keeps 8% margins so its four columns fit on smaller laptops. */
  body[data-page=home] .site-footer .container {
    width: min(calc(100% - 16vw), 1720px);
  }

  /* Text sits near the menu instead of being centred in the screen. */
  body[data-page=home] .hero {
    align-items: flex-start;
    padding-top: calc(80px + clamp(28px, 3.15vw, 63px));
  }

  body[data-page=home] .hero-copy {
    max-width: none;
  }

  body[data-page=home] .hero .eyebrow {
    margin-bottom: calc(clamp(10px, 1vw, 20px) * var(--hero-scale));
    /* Floor keeps the label legible when scaled down. */
    font-size: 16px; /* tagline: 10px -> 20px, then -20% (12 Oct 2026) */
  }

  body[data-page=home] .hero-copy h1 {
    max-width: none;
    margin-bottom: calc(clamp(16px, 1.8vw, 34px) * var(--hero-scale));
    font-size: calc(clamp(4.2rem, 6.9vw, 8.1rem) * var(--hero-scale) * var(--hero-h1-scale));
    line-height: 0.99;
    /* -0.02em plus 0.03em to offset the extra stroke, so gaps between letters stay as before. */
    letter-spacing: 0;
    /* Manrope tops out at 800; a stroke in the text colour makes it heavier.
       0.025em gives stems ~0.162em thick vs 0.135em unstroked (measured with tools/parity/stem.mjs; was 0.044em = 0.180em, reduced 10% on 12 Oct 2026). */
    -webkit-text-stroke: 0.025em currentColor;
  }

  body[data-page=home] .hero-copy h1 > span {
    white-space: nowrap;
  }

  body[data-page=home] .hero-lede {
    max-width: max(calc(29.5vw * var(--hero-scale) * var(--hero-support-scale) * 1.065), 29.8em);
    min-width: calc(25rem * var(--hero-scale));
    margin-bottom: calc(clamp(20px, 2.2vw, 40px) * var(--hero-scale));
    font-size: calc(max(15px, calc(clamp(1rem, 1.1vw, 1.3rem) * var(--hero-scale))) * var(--hero-support-scale));
    line-height: 1.45;
  }
}

/* Heavier, darker supporting text at every width. */
body[data-page=home] .hero-lede {
  color: #262826;
  font-weight: 500;
}

body[data-page=home] .hero .eyebrow {
  font-weight: 800;
}

/* Buttons: filled sage pill + plain text link, both with a small arrow. */
body[data-page=home] .hero-actions {
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
}

body[data-page=home] .hero-actions .button-primary {
  min-height: clamp(42px, 2.9vw, 54px);
  padding-inline: clamp(18px, 1.5vw, 28px);
  background: var(--hero-button);
  font-size: clamp(0.88rem, 0.95vw, 1.05rem);
  font-weight: 600;
}

/* Second button: same pill as the primary, filled with the wave tan. */
body[data-page=home] .hero-actions .button-secondary {
  min-height: clamp(42px, 2.9vw, 54px);
  padding-inline: clamp(18px, 1.5vw, 28px);
  border: 0;
  background: var(--hero-button-2);
  box-shadow: 0 10px 25px rgba(23, 23, 22, 0.14);
  color: #fff;
  font-size: clamp(0.88rem, 0.95vw, 1.05rem);
  font-weight: 600;
}

body[data-page=home] .hero-actions .button::after {
  content: "\2197";
  margin-left: 0.5em;
  font-size: 0.9em;
}

@media (min-width: 1101px) {
  body[data-page=home] .hero-actions {
    gap: calc(clamp(14px, 1.6vw, 28px) * var(--hero-scale));
  }

  body[data-page=home] .hero-actions .button-primary,
  body[data-page=home] .hero-actions .button-secondary {
    min-height: calc(max(40px, calc(clamp(42px, 2.9vw, 54px) * var(--hero-scale))) * var(--hero-support-scale));
    padding-inline: calc(clamp(18px, 1.5vw, 28px) * var(--hero-scale) * var(--hero-support-scale));
  }

  body[data-page=home] .hero-actions .button-primary,
  body[data-page=home] .hero-actions .button-secondary {
    font-size: calc(max(13px, calc(clamp(0.88rem, 0.95vw, 1.05rem) * var(--hero-scale))) * var(--hero-support-scale));
  }
}



/* ---------------------------------------------------------------------------
   Right-hand graphic: four spheres (Marketing Channels, CRM -> OVA Data Bridge -> OVA Quant Analytics).
   Pure CSS/SVG. Desktop only for now; hidden below 1101px.
   --------------------------------------------------------------------------- */

body[data-page=home] .ova-orbit {
  display: none;
}

@media (min-width: 1101px) {
  /* Copy column sizes to the headline; the graphic takes the remaining width. */
  body[data-page=home] .hero-grid {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: clamp(32px, 4vw, 96px);
    /* Keep the text where it was set; the graphic sits alongside, starting just above the headline. */
    align-items: start;
  }

  body[data-page=home] .ova-orbit {
    position: relative;
    display: block;
    width: min(100%, 620px);
    aspect-ratio: 1;
    margin: calc(-2% - 10px) 0 0 auto;
  }
}

/* Faint tilted rings behind the spheres (idea from Nordcraft's ring animation). */
.ova-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(63, 86, 65, 0.16);
  border-radius: 50%;
  translate: -50% -50%;
}

.ova-orbit-ring-1 { width: 96%; height: 46%; rotate: -14deg; }
.ova-orbit-ring-2 { width: 78%; height: 36%; rotate: -14deg; border-style: dashed; }
.ova-orbit-ring-3 { width: 58%; height: 26%; rotate: -14deg; border-color: rgba(63, 86, 65, 0.1); }

/* Connections and data pulses. */
.ova-orbit-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ova-orbit-links path {
  fill: none;
  stroke: rgba(63, 86, 65, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: ova-link-flow 1.6s linear infinite;
}

@keyframes ova-link-flow {
  to { stroke-dashoffset: -18; }
}

.ova-orbit-pulse { fill: #3f5641; }
.ova-orbit-pulse-out { fill: #d92b32; }

/* Spheres: --x/--y are centre positions and --s the diameter, as % of the square stage. */
.ova-sphere {
  --x: 50%;
  --y: 50%;
  --s: 30%;
  position: absolute;
  left: calc(var(--x) - var(--s) / 2);
  top: calc(var(--y) - var(--s) / 2);
  width: var(--s);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 36% 30%, var(--c1) 0, var(--c2) 72%, var(--c3) 100%);
  box-shadow:
    inset -0.6em -0.9em 1.6em rgba(0, 0, 0, 0.16),
    inset 0.3em 0.4em 0.8em rgba(255, 255, 255, 0.25),
    0 2.2em 2.6em -1.6em var(--glow);
  color: #fff;
  font-family: Manrope, "DM Sans", sans-serif;
  font-size: clamp(0.8rem, 0.95vw, 1.15rem);
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  animation: ova-float 7s ease-in-out infinite;
}

.ova-sphere small {
  display: block;
  margin-bottom: 0.2em;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

.ova-sphere-channels { --x: 20%; --y: 24%; --s: 26%; --c1: #ffd99a; --c2: #bd7f26; --c3: #8f5c14; --glow: rgba(224, 162, 78, 0.55); }
.ova-sphere-crm      { --x: 20%; --y: 76%; --s: 22%; --c1: #ffc2ad; --c2: #c4654a; --c3: #8f4330; --glow: rgba(221, 127, 98, 0.5); animation-delay: -2.4s; }
.ova-sphere-bridge   { --x: 52%; --y: 50%; --s: 30%; --c1: #b8e2ee; --c2: #4a8598; --c3: #2f5866; --glow: rgba(92, 151, 170, 0.55); animation-delay: -4.6s; font-size: clamp(0.9rem, 1.1vw, 1.3rem); }
.ova-sphere-quant    { --x: 84%; --y: 30%; --s: 24%; --c1: #c4e3b4; --c2: #5a8a58; --c3: #3f5641; --glow: rgba(108, 154, 106, 0.55); animation-delay: -1.2s; }

@keyframes ova-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4%); }
}

@media (prefers-reduced-motion: reduce) {
  .ova-orbit-links path,
  .ova-sphere {
    animation: none;
  }

  .ova-orbit-pulse {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Right-hand graphic, option B: noise -> measurement -> clean signal -> decision point.
   Rendered by src/components/HeroSignal.astro. Currently shown instead of the spheres.
   --------------------------------------------------------------------------- */

body[data-page=home] .ova-signal {
  display: none;
}

@media (min-width: 1101px) {
  /* Spheres (option A) stay in the markup for comparison; swap the two display values to switch back. */
  body[data-page=home] .ova-orbit {
    display: none;
  }

  /* As large as fits: fills its column and extends into the right page margin (stopping 12px from
     the screen edge), capped at 1060px wide on very large screens. */
  body[data-page=home] .ova-signal {
    display: block;
    justify-self: end;
    width: min(calc(100% + (100vw - min(80vw, 1720px)) / 2 - 12px), 1060px);
    aspect-ratio: 632 / 458;
    margin: 0 calc((min(80vw, 1720px) - 100vw) / 2 + 12px) 0 0;
  }

  /* Smaller gap between the headline and the graphic. */
  body[data-page=home] .hero-grid {
    column-gap: 28px;
  }
}

.ova-signal img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---------------------------------------------------------------------------
   Second section ("Big-company technology..."): middle column back to its live width (470px)
   after the wider homepage margins stretched it; the orbit graphic on the left 50% larger.
   The section may grow taller. Desktop only; tablet/mobile layouts are unchanged.
   --------------------------------------------------------------------------- */

@media (min-width: 1101px) {
  body[data-page=home] .editorial-hero {
    /* Original size on small laptops, where a larger graphic would squeeze the headline. */
    --orbit-zoom: 1;
  }

  /* zoom (not transform) so the column grows with the graphic and its animation is untouched. */
  body[data-page=home] .growth-orbit {
    zoom: var(--orbit-zoom);
  }

  body[data-page=home] .editorial-marker {
    min-height: calc(330px * var(--orbit-zoom));
  }
}

@media (min-width: 1280px) {
  body[data-page=home] .editorial-hero { --orbit-zoom: 1.15; }
}

@media (min-width: 1440px) {
  body[data-page=home] .editorial-hero { --orbit-zoom: 1.3; }
}

/* Wide screens: middle column fixed at its live width (470px), the extra space goes to the graphic. */
@media (min-width: 1600px) {
  body[data-page=home] .editorial-hero { --orbit-zoom: 1.5; }

  body[data-page=home] .editorial-hero-grid {
    grid-template-columns: minmax(calc(300px * var(--orbit-zoom)), 1fr) 470px minmax(260px, 340px);
    gap: 48px;
  }

  /* Centre the larger graphic in the wider left column so it doesn't leave a gap before the headline. */
  body[data-page=home] .growth-orbit {
    margin-inline: auto;
  }
}

@media (min-width: 1101px) {
  /* Orbit icon raised: the gap between the "Built for growing SMEs" label and the icon is half of
     what it was (measured per breakpoint; the margin is multiplied by the orbit zoom). */
  body[data-page=home] .growth-orbit {
    margin-top: 20px;
    margin-bottom: auto;
  }
}

@media (min-width: 1280px) {
  body[data-page=home] .growth-orbit { margin-top: 22px; }
}

@media (min-width: 1440px) {
  body[data-page=home] .growth-orbit { margin-top: 27px; }
}

@media (min-width: 1600px) {
  body[data-page=home] .growth-orbit { margin-top: 30px; }
}

@media (min-width: 1101px) {

  /* Headline 25% heavier: weight 600 (already loaded) plus a hairline stroke takes stem thickness
     from 20px to 25px at 200px size (measured with tools/parity/stem-font.mjs). */
  body[data-page=home] .editorial-hero-headline h2 {
    font-weight: 600;
    -webkit-text-stroke: 0.002em currentColor;
  }
}

/* "Big-company" never breaks at its hyphen; the headline column grows to fit it (509px at 80px). */
body[data-page=home] .editorial-hero-headline h2 .no-break {
  padding: 0;
  background: none;
  white-space: nowrap;
}

@media (min-width: 1600px) {
  body[data-page=home] .editorial-hero-grid {
    grid-template-columns: minmax(calc(300px * var(--orbit-zoom)), 1fr) minmax(min-content, 470px) minmax(260px, 340px);
  }
}

/* Below 1600px: the live tablet arrangement (graphic + headline, paragraph under the headline) so the
   paragraph isn't squeezed by the heavier headline. Headline and paragraph are capped so the middle
   stays narrow. */
@media (min-width: 1101px) and (max-width: 1599px) {
  body[data-page=home] .editorial-hero-grid {
    grid-template-columns: minmax(calc(300px * var(--orbit-zoom)), 0.55fr) minmax(min-content, 1.45fr);
    gap: 30px 42px;
  }

  body[data-page=home] .editorial-hero-headline h2,
  body[data-page=home] .editorial-hero-support {
    max-width: 540px;
  }

  body[data-page=home] .editorial-hero-support {
    grid-column: 2;
    padding-top: 0;
  }
}

/* Second section: middle text shifted left by 25% of the gap between the orbit graphic and the
   headline (gap measured: 81px @1280, 99 @1600, 194 @1920, 267 @2560). translate only, so the left
   graphic and right column keep their size and position. */
@media (min-width: 1101px) and (max-width: 1599px) {
  body[data-page=home] .editorial-hero-headline h2,
  body[data-page=home] .editorial-hero-support {
    translate: -21px 0;
  }
}

@media (min-width: 1600px) {
  body[data-page=home] .editorial-hero-headline h2 {
    translate: calc(-0.25 * clamp(99px, 99px + (100vw - 1600px) * 0.297, 267px)) 0;
  }
}

/* "Why we build for SMEs" link in the tan of the "Explore OVA Solutions" button. */
body[data-page=home] .editorial-hero-support .text-link {
  color: var(--hero-button-2);
}

/* ---------------------------------------------------------------------------
   Hero graphic animation (src/components/HeroSignal.astro, ANIMATED = true).
   Five stacked layers; only the three dot layers move: they fade (twinkle) and are gently pulled
   towards the convergence point and back. Opacity/transform only, so no repaints.
   --------------------------------------------------------------------------- */

.ova-signal.is-animated {
  position: relative;
}

.ova-signal.is-animated .sig-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}

/* The first layer stays in flow so the figure keeps its size. */
.ova-signal.is-animated .sig-under {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .ova-signal.is-animated .sig-dots-1,
  .ova-signal.is-animated .sig-dots-2,
  .ova-signal.is-animated .sig-dots-3 {
    /* Convergence point of the noise: (490, 292) in the SVG's 34 64 632 458 viewBox. */
    transform-origin: 72.2% 49.8%;
    will-change: transform, opacity;
  }

  .ova-signal.is-animated .sig-dots-1 { animation: sig-twinkle 8s ease-in-out infinite, sig-pull 11s ease-in-out infinite; }
  .ova-signal.is-animated .sig-dots-2 { animation: sig-twinkle 10.5s ease-in-out -3.5s infinite, sig-pull 13s ease-in-out -5s infinite; }
  .ova-signal.is-animated .sig-dots-3 { animation: sig-twinkle 9s ease-in-out -6s infinite, sig-pull 12s ease-in-out -8.5s infinite; }

  .ova-signal.is-paused .sig-layer {
    animation-play-state: paused;
  }
}

@keyframes sig-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes sig-pull {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.975); }
}

/* ---------------------------------------------------------------------------
   Refinements (12 Oct 2026, Philip's review)
   --------------------------------------------------------------------------- */

/* Kicker dot: halo 20% smaller (6px -> 4.8px ring). */
body[data-page=home] .hero .signal-dot {
  box-shadow: 0 0 0 4.8px rgba(135, 139, 88, 0.13);
}

@media (min-width: 1101px) {
  /* Graphic anchored to the text side (so the gap stays constant on very wide screens) and moved
     ~22px towards the text. */
  body[data-page=home] .ova-signal {
    justify-self: start;
    translate: -6px 0;
  }
}

/* Mobile and tablet: the graphic, still (no animation), below the buttons, loaded lazily. */
@media (max-width: 1100px) {
  body[data-page=home] .ova-signal {
    display: block;
    width: min(100%, 640px);
    aspect-ratio: 632 / 458;
    margin: 8px auto 0;
  }

  body[data-page=home] .ova-signal.is-animated .sig-layer {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Hero alignment (Philip's mockup, 12 Oct 2026): the graphic's axis lines up with the H1's third
   line ("Less guesswork."), sitting 0.09em above its baseline, at every desktop width.
   Measured constants: the third-line baseline is 3.0em below the H1 top; the axis is 49.78% down the
   graphic ((292-64)/458), i.e. 0.36075 x the graphic width.
   --------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  body[data-page=home] .hero {
    /* Space below the menu: clamp(36px, 3.96vw, 83px) (50% more than the earlier clamp(20px, 2.2vw, 46px)). */
    padding-top: calc(80px + clamp(36px, 3.96vw, 83px));
    --fs: calc(clamp(4.2rem, 6.9vw, 8.1rem) * var(--hero-scale) * var(--hero-h1-scale));
    --cw: min(80vw, 1720px);
    --eyebrow-block: calc(25px + clamp(10px, 1vw, 20px) * var(--hero-scale)); /* tagline line 25px at 16px */
    --text-pad: calc(clamp(28px, 3.15vw, 63px) * 0.5);
    /* Where the axis should be, measured from the top of the hero row. */
    --axis-target: calc(var(--text-pad) + var(--eyebrow-block) + 2.91 * var(--fs));
  }

  body[data-page=home] .hero-copy {
    padding-top: var(--text-pad);
  }

  /* The graphic moves so its axis meets the target. Percentages here resolve against the graphic's
     column width, the same basis as its width rule. */
  body[data-page=home] .ova-signal {
    margin-top: calc(var(--axis-target) - 0.36075 * min(calc(100% + (100vw - min(80vw, 1720px)) / 2 - 12px), 1060px));
  }
}

/* Wide screens: the H1 has reached its maximum size while the graphic keeps growing, so lifting the
   graphic would push it under the menu. Instead the text comes down to the axis, with the graphic at
   the top of the row. (Headline width there: 9.87em.) */
@media (min-width: 1716px) {
  body[data-page=home] .hero {
    --graphic-w: min(calc(var(--cw) - 9.87 * var(--fs) - 28px + (100vw - var(--cw)) / 2 - 12px), 1060px);
    --text-pad: max(0px, calc(0.36075 * var(--graphic-w) - var(--eyebrow-block) - 2.91 * var(--fs))); /* never negative; the graphic adjusts instead */
  }
}

/* Menu size: now site-wide in site-refresh.css. */

@media (min-width: 1280px) {
  /* The menu bar is 88px from here up (site-refresh.css); the hero starts below it, so its spacing
     and the axis alignment are unchanged. */
  body[data-page=home] .hero { padding-top: calc(88px + clamp(36px, 3.96vw, 83px)); }
}

@media (min-width: 1101px) {
  /* Hero fills the first screen. (The "Based in Kuala Lumpur ..." line below it was removed on
     12 Oct 2026; the same facts are in the footer on every page.) */
  body[data-page=home] .hero {
    min-height: 100svh;
    padding-bottom: 36px;
  }
}

/* Hero tagline dot doubled with the tagline (8px -> 16px; halo 4.8px -> 9.6px). */
body[data-page=home] .hero .eyebrow {
  gap: 14px;
}

body[data-page=home] .hero .eyebrow .signal-dot {
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 7.7px rgba(135, 139, 88, 0.13);
}

@media (max-width: 1100px) {
  /* Phones/tablets: tagline 1.5x (11.5px -> 17px) so it stays on one line. */
  body[data-page=home] .hero .eyebrow {
    font-size: 14px;
    gap: 11px;
  }

  body[data-page=home] .hero .eyebrow .signal-dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 5.6px rgba(135, 139, 88, 0.13);
  }
}