/* ==========================================================================
   Hero — "Award winning digital growth agency"
   Figma: Home Page (1920) — section box y 114→1197, content 334→1025.
          Mobile Home (402) — section box y 98.5→835, content 129→792.
   Every rule is scoped under .section--hero. Shared tokens and components
   (.container, .display, .script, .body, .btn--outline, .rule) come from
   css/base.css and are only tuned here, never redefined.
   ========================================================================== */

.section--hero {
  /* Top: nav bottom (114) == hero top (114), nothing to split.
     Bottom: awards row ends at 1025, "Our clients" starts at 1197 (index.json's
     hero bottom, 1436, is the fixed side tab, not flow content). The 172px gap
     is split with clients.css, which takes the other 86px as top padding. */
  --hero-pad-top: 0px;
  --hero-pad-bottom: 86px;
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
}

/* ---- Decorative logomark + fade (Figma x 1550→1920, y 181→624) ---------- */
.section--hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Sizes are pure vw (the Figma values ÷ 1920) so the mark scales both below
   AND above the 1920 design width; capped at 1.5× the design size.
   The box is the Figma frame (370 × 443 at 1920, right-anchored) and the
   mark is the client's frame-cropped export, so nothing else needs clipping. */
.section--hero__mark-box {
  --mark-bleed: min(2vw, 58px);     /* room around the frame for the highlight's glow (content-box, so the frame itself is unchanged) */
  position: absolute;
  box-sizing: content-box;
  top: calc(min(3.49vw, 100px) - var(--mark-bleed));   /* 181 - 114 */
  right: 0;
  width: min(19.27vw, 555px);       /* 370 of the 443px mark are inside the frame */
  height: min(23.07vw, 665px);
  padding: var(--mark-bleed) 0 var(--mark-bleed) var(--mark-bleed);
  overflow: hidden;
}
.section--hero__mark {
  display: block;
  width: min(19.27vw, 555px);       /* the export IS the 370×443 crop: same width as the frame */
  max-width: none;
  height: auto;
  overflow: visible;
}
/* Travelling highlight (js/logo-loop.js dashes these copies of the chevrons
   and fades the layer in). Hidden until the JS runs, and under reduced motion
   it stays hidden, so without a pulse only the untouched base mark shows. */
.section--hero__pulse { opacity: 0; }
/* The travelling shadow/shine paths are hidden until js/logo-loop.js tweens their opacity, so
   under prefers-reduced-motion (or with JS off) the mark shows clean instead of the #0d0d0d
   shadow strokes blacking out the bands. */
.section--hero__mark [data-shadow] { opacity: 0; }
/* Hero X option 2 (?hero-x=2 → .is-shine, js/logo-loop.js): the travelling patch is a glassy shine —
   the glow layer is screen-blended (it lightens the line instead of painting over it) and the
   near-white specular streak (.mx-hero-core) is shown. Default (shadow) keeps the core hidden. */
.section--hero__mark .mx-hero-core { display: none; }
.section--hero__mark.is-shine .mx-hero-core { display: block; }
.section--hero__mark.is-shine .mx-hero-shadows { mix-blend-mode: screen; }
.section--hero__mark.is-shine .mx-hero-core { mix-blend-mode: screen; }
.section--hero__fade {
  position: absolute;
  top: 0;
  right: 0;
  width: min(11.67vw, 336px);
  height: min(29.27vw, 843px);
  background: linear-gradient(90deg, rgba(13, 13, 13, 0) 0%, #0d0d0d 95%);
}

/* ---- Content -------------------------------------------------------------- */
.section--hero__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(85px, 11.46vw, 220px);   /* heading top 334 - 114 */
}

/* Heading: node is 128px / 1.01 with a 96px SloopScript run on line 1. Figma
   gives every line the 128px line height (129.28px), including the script line,
   so line 1 is a 129.28px block (SVG below) and lines 2–3 are the inline span. */
.section--hero__title {
  max-width: 10.523em;              /* Figma box 1347px ÷ 128px — scales with the type so lines break the same at any size */
  margin: 0 0 36px;                 /* calibrated (with Blauer Nue Medium loaded) so the CTA lands at Figma y=757.7 */
  font-size: 114px;                 /* req: hero H1 held at a flat 114px across desktop (the earlier vh-clamp shrank it too far) */
  line-height: 1.01;
}
/* "Award winning" — SVG traced from the Figma glyphs (96px SloopScript run
   inside a 128px heading). Sized in em so it scales with --fs-hero:
   image box 97.22px tall → 0.7594em. Figma keeps the run on the 128px line's
   baseline (cap top 16.9 + cap height 93.3 = 110.2px below the line top); the
   SVG's baseline is 67.7px from its top, so it starts 42.5px (0.332em) down.
   The negative bottom margin keeps line 1 at 1.01em (129.28px). */
.section--hero img.section--hero__script {
  display: block;
  box-sizing: content-box;          /* height = glyph box; padding is the baseline offset */
  width: auto;
  height: 0.7594em;                 /* em of the h1 — no font-size on the img itself */
  padding-top: 0.332em;             /* padding, not margin: a margin would collapse through the h1 */
  margin: 0 0 -0.0816em;
}
/* Live-text fallback (once the SloopScriptPro webfont is available) */
.section--hero span.section--hero__script {
  font-size: 0.75em;                /* 96 / 128 */
  text-transform: capitalize;       /* Figma run: TITLE case */
  white-space: nowrap;
}
.section--hero__big { font-size: 1em; }

/* CTA left (x 102) | rule + intro + awards right (x 1115) */
.section--hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1015fr) minmax(0, 705fr);
  align-items: start;
}
/* The pill's desktop size (554 wide, 19px gaps, 41px logomark, label as typed)
   is the shared .btn--outline-lg in css/base.css — the CTA section's pill uses
   the same class, so the two cannot drift apart. Only the mobile override
   (below) is section-specific. */

/* req: the hero CTA read a little large — trim it a touch on desktop (the closing-CTA section keeps the
   full base .btn--outline-lg size; only the hero pill is scaled here). */
.section--hero .btn--outline { height: 64px; font-size: 30px; padding: 0 30px; }
.section--hero .btn--outline-lg { min-width: 470px; gap: 16px; }
.section--hero .btn--outline-lg img { width: 34px; height: 34px; }

.section--hero__intro { padding-top: 65px; }   /* rule y 822 - row top 757.7 */

.section--hero .section--hero__rule {
  width: 125px;
  border-top-width: 2px;
  margin: 0 0 39px;                 /* rule bottom 824 → paragraph 863 */
}
.section--hero__lede {
  max-width: 704px;
  margin: 0 0 40px;                 /* paragraph bottom 938 → awards 978 */
}

/* Awards row (Group 21: 671 × 46.76) — req: the three award logos + Google rating stay 4-in-a-row on
   smaller desktops. Sizes cap at the Figma px on wide screens and scale down with the viewport below
   (min(px, vw)), and the row never wraps, so all four always sit flush on one line. */
.section--hero__awards {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: min(16px, 0.95vw) min(18px, 1.05vw);
}
.section--hero__award { flex: 0 0 auto; }
.section--hero__award:nth-child(1) img { width: min(145.85px, 8.61vw); }
.section--hero__award:nth-child(2) img { width: min(145.73px, 8.6vw); }
.section--hero__award:nth-child(3) img { width: min(151.17px, 8.92vw); }

.section--hero__rating {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: min(6.5px, 0.38vw);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.98;
}
.section--hero__rating-logo { width: min(41.33px, 2.44vw); height: min(41.33px, 2.44vw); }
.section--hero__rating-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.section--hero__rating-title { font-size: clamp(9px, 0.945vw, 16px); }
.section--hero__rating-score {
  display: flex;
  align-items: center;
  gap: min(6.6px, 0.39vw);          /* Figma "5.0" box is 25px wide; stars start at x 1688 */
  font-size: clamp(8px, 0.826vw, 14px);
}
.section--hero__rating-score img { width: min(91.35px, 5.39vw); }

/* The fixed "Book a Call" side tab (Figma Group 18) is a global component:
   markup in index.html outside #smooth-wrapper, styles in css/base.css. */

/* ---- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section--hero__grid { grid-template-columns: 1fr; }
  .section--hero__intro { padding-top: 54px; }
}

/* ---- Tablet / small laptop: keep the headline clear of the decorative mark ---
   With "DIGITAL GROWTH" on one line the text ran under the mark's lower-left
   arm at ~730–860px (72px type: line ends x≈684, mark from x≈620 at 768) and
   again at 1025–1140px (96px type: line ends 909, mark from 827 at 1025).
   Reserving the mark's own width on the heading (its box is border-box) wraps
   GROWTH onto its own line — DIGITAL / GROWTH / AGENCY, as in the mobile frame —
   across the whole 641–1140 range, so the stacking never flips mid-range.
   Above 1140 the line clears the mark (915 vs 920 at 1141; 930 vs 1163 at 1440). */
@media (min-width: 641px) and (max-width: 1140px) {
  .section--hero__title { padding-right: min(19.27vw, 555px); }
}

/* ---- Mobile (Figma "Mobile Home", 402 wide) --------------------------------- */
@media (max-width: 640px) {
  .section--hero {
    --hero-pad-top: 8.5px;          /* (107 - 90) / 2 */
    --hero-pad-bottom: 44px;        /* (879 - 791.65) / 2 */
  }
  .section--hero__mark-box {
    --mark-bleed: 14px;
    top: calc(30.5px - var(--mark-bleed));   /* 129 - 98.5 */
    width: 101px;                   /* 140px mark, 101 visible inside the frame */
    height: 141px;
  }
  .section--hero__mark { width: 117px; }   /* 140px mark × the export's 370/443 crop; 101 visible */
  .section--hero__fade {
    top: 8.5px;
    width: 55px;                    /* 71px rect, 55 inside the frame */
    height: 178px;
    background: linear-gradient(90deg, rgba(13, 13, 13, 0) 0, #0d0d0d 67.45px);
  }
  .section--hero__inner { padding-top: 85px; }   /* heading top 192 - 107 */

  .section--hero__title {
    max-width: 250px;
    margin-bottom: 38px;            /* 4 lines: 50.5 + 3 × 50.5 = 202 → bottom 394, CTA at y 432 */
    font-size: 40px;
  }
  /* 40px run (SVG 237.4 × 40.5) on the 50px line's baseline (42.65px below the
     line top; SVG baseline 28.2px from its top); line 1 stays 50.5px tall */
  .section--hero img.section--hero__script { width: auto; height: 40.5px; padding-top: 14.45px; margin: 0 0 -4.45px; }
  .section--hero span.section--hero__script { font-size: 1em; }
  .section--hero__big { font-size: 50px; }

  .section--hero .btn--outline {
    min-width: min(315px, 100%);
    height: 47px;
    padding: 0 22px;
    gap: 20px;                      /* client #23: more room around the X — the Figma's 20px either side (was 6px) */
    font-size: 20px;
    text-transform: none;           /* data casing, as on desktop: "Book a Discovery Call" (client #23 — the Figma's TITLE case read "Book A") */
  }
  .section--hero .btn--outline img { width: 27px; height: 27px; }

  .section--hero__intro { padding-top: 54px; }  /* CTA bottom 479 → rule 533 */
  .section--hero .section--hero__rule { width: 64px; margin-bottom: 45px; }
  .section--hero__lede { margin-bottom: 39px; }

  .section--hero__awards { gap: 10px 9px; }
  .section--hero__award:nth-child(1) img { width: 70.64px; }
  .section--hero__award:nth-child(2) img { width: 70.58px; }
  .section--hero__award:nth-child(3) img { width: 73.22px; }
  .section--hero__rating { gap: 3.15px; }
  .section--hero__rating-logo { width: 20.02px; height: 20.02px; }
  .section--hero__rating-text { gap: 2.2px; }
  .section--hero__rating-title { font-size: 8px; }
  .section--hero__rating-score { gap: 1px; font-size: 8px; }
  .section--hero__rating-score img { width: 44.25px; }
}
/* Small phones (320–359): the 315px pill and the 316px awards row are wider than the 280–319px column —
   the pill scales down (label, mark and gaps; css/base.css sizes the other large pills the same way) and
   the Google rating drops to its own line under the three award logos */
@media (max-width: 359px) {
  .section--hero .btn--outline { gap: 14px; padding: 0 16px; font-size: 18px; }
  .section--hero .btn--outline img { width: 24px; height: 24px; }
  .section--hero__awards { flex-wrap: wrap; }
}

/* ---- Short desktop viewports (laptops, 1080p minus browser chrome) ----------
   The Figma rhythm assumes ~1080px of height; below that the awards row falls
   under the fold. Vertical spacing switches to vh so the whole hero — heading,
   CTA, intro and awards — fits in the first screen. */
@media (min-width: 1025px) and (max-height: 1050px) {
  .section--hero__inner { padding-top: clamp(60px, 12vh, 220px); }
  /* req #2: on short desktop viewports (e.g. 14" 1440×900) keep the rhythm tight, but hold the H1 at the
     flat 114px the client signed off (only the margin flexes with height now). */
  .section--hero__title { font-size: 114px; margin-bottom: clamp(16px, 2.5vh, 36px); }
  .section--hero .btn--outline { height: clamp(50px, 6.8vh, 64px); font-size: clamp(24px, 3vh, 30px); }
  .section--hero .btn--outline-lg { min-width: min(470px, 40vw); }
  .section--hero__intro { padding-top: clamp(24px, 4vh, 65px); }
  .section--hero .section--hero__rule { margin-bottom: clamp(16px, 3vh, 39px); }
  .section--hero__lede { margin-bottom: clamp(16px, 3vh, 40px); }
  .section--hero { --hero-pad-bottom: clamp(40px, 6vh, 86px); }
}