/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   DataReportHeroSection — Figma 6JdV8D0ZGECx2whzGAnTrs, node 6817:3489.
   Spec: DataReportHeroSection.figma.md.

   Escape-the-container grid, fixed-width variant
   (docs/escape-the-container-grid.md). The wrapper is 1512/16px rather than
   `.container-wide`'s 1480/48px because the design's visual bleeds to 16px
   from the viewport edge — further than the wide container reaches.
   ============================================================ */


/* ---- Outer section ---------------------------------------- */

.data-report-hero {
  position:       relative;
  width:          100%;
  /* White ground — NOT `var(--background)`. This page inverts the site's
     cream-ground/white-card scheme; see `--background-white` (src/styles/tokens.css). */
  background:     var(--background-white);
  /* ALL of the hero's vertical spacing is here — the copy column and the
     book box carry no padding or margins of their own. Figma spreads it over
     three nested layers; the sums are what matter:

     top     144 = frame pt-128 + the Copy frame's own pt-16 (6817:3494 y=16).
                   Eyebrow row at y=144, exactly as Figma.
     bottom  124 = body text → the quote panel's white border. In Figma the
                   body ends at y=682 and the panel's border starts at 806:
                   108 inside the 790 frame (Copy pb-32 + the hidden, EMPTY
                   Action frame's 40 + its 36 gap) + 16 of bottom padding on
                   the parent frame (6797:2036 is 894 = 88 + 790 + 16). The
                   build had lost that last 16 and sat 16px short. Body →
                   cream is 140 with the border, as in Figma. */
  padding:        9rem 0 7.75rem;   /* 144px / 124px */
  font-family:    var(--font-family-default);
  box-sizing:     border-box;
  /* The visual's layout box is the book alone; its drop shadow is painted
     outside that box. Clip the X axis ONLY, so the right-hand bleed can never
     produce a scrollbar — but let the shadow fall past the section's bottom.

     Its faint tail runs ~27% of the book's width below the book (~112px on
     tablet, ~81px on mobile), more than the stacked layouts leave under it.
     With `overflow: hidden` it was sliced off flat at the hero's bottom edge,
     and the quote panel's 16px white border directly beneath made that cut
     read as a hard line. Now it spills over the border onto the panel, like
     a real shadow on the surface below.

     `clip`, not `hidden`: `overflow-x: hidden` would force `overflow-y` to
     `auto` and clip (or scroll) the bottom anyway; `clip` has no such
     coupling. `position: relative` (above) is also what makes the hero paint
     OVER the quote section that follows it — that section is unpositioned. */
  overflow-x:     clip;
  overflow-y:     visible;
}


/* ---- Content wrapper -------------------------------------- */

.data-report-hero__wrap {
  width:      100%;
  max-width:  1512px;
  padding:    0 16px;
  margin:     0 auto;
  box-sizing: border-box;
}


/* ---- Grid ------------------------------------------------- */

/* The spacer is 64px, not the doc's 32px, and the gutter cap is 164px:
   (1480 - 1024) / 2 - 64 = 164. Both follow from this wrapper's 16px page
   inset, and together they keep column 3 on `.container`'s left edge at
   EVERY width, not just wide ones:

   - Wide (>=1184px viewport): 16 + 164 + 64 = 244 = (1512 - 1024) / 2.  ✔
   - The gutter reaches 0 at exactly a 1184px viewport — which is also
     `.container`'s max-width, below which it becomes full-width with 80px
     padding. There, column 3 starts at 16 + 0 + 64 = 80px.              ✔

   That second line is why the spacer is 64 and not 32. The doc's canonical
   48px wrapper + 32px spacer also sums to 80; a 16px wrapper needs a 64px
   spacer to land on the same number. With a 32px spacer the copy column
   would sit 32px left of every other section on the page between 992 and
   1184px wide.

   `minmax(0, X)` on the fixed tracks, never a bare `X` — a bare fixed track
   cannot shrink, so once the gutter has collapsed to 0 the row overflows.
   The same goes for the last track: a bare `1fr` will not go below the
   book's 412.5px width, and on small desktops it squeezes the copy instead.

   The 75px gap is measured to the BOOK, not to Figma's Img node: the node
   starts at x=807 (a 59px gap) but the cover's own left edge is at 823. */
.data-report-hero__grid {
  display:               grid;
  grid-template-columns: clamp(0px, calc((100% - 1024px) / 2 - 64px), 164px)
                         64px
                         minmax(0, 504px)
                         minmax(0, 75px)
                         minmax(0, 1fr);
  column-gap:            0;
  /* The copy is flush to the top padding; the visual overrides this with
     `align-self: center`. */
  align-items:           start;
}


/* ---- Copy column (Figma 6817:3493) ------------------------ */

/* No padding. Figma's pt-16 / pb-32 are folded into the section's padding,
   and its pr-32 did nothing: the headline and body carry their own max-widths
   (439 / 472), both inside the 504px track. */
.data-report-hero__copy {
  grid-column:    3;
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

/* 6817:3494 — heading block → body */
.data-report-hero__intro {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-8);    /* 32px */
}

/* 6817:3496 — eyebrow → headline */
.data-report-hero__heading {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);    /* 24px */
}


/* ---- Eyebrow (6817:3497) ---------------------------------- */

/* No pill background: Figma's `noice-bg` rect (6817:3499) is hidden. */
.data-report-hero__eyebrow {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-2);       /* 8px */
  /* Figma's eyebrow row is 38px tall (1px padding + 8px py + 20px line box
     + 8px + 1px), not the 20px its line box alone would give. Dropping it
     pulls the headline ~9px closer than the design. */
  min-height:  38px;
  margin:      0;
  font-size:   var(--font-size-sm);    /* 14px */
  line-height: var(--line-height-sm);  /* 20px */
  font-weight: var(--font-weight-medium);
  /* Figma: rgba(40,40,37,0.6). There is no --opacity-neutral-60 (the scale
     stops at 50), so derive it from --foreground rather than hardcoding. */
  color:       color-mix(in srgb, var(--foreground) 60%, transparent);
}

.data-report-hero__eyebrow svg {
  flex-shrink: 0;
}


/* ---- Headline (6817:3505) --------------------------------- */

/* Face/size/weight come from `.serif-display` (src/styles/section.css); the marker
   wash comes from `.marker-highlight`. Only the measure is section-local.

   `pre-line` is what reproduces Figma's authored line breaks (after “part”,
   after “is”, and before “lose clients.”) without hard-coding `<br>` elements
   that the Webflow text props could not express. It still wraps normally on
   top of those breaks. They matter: Rowan is narrow enough that free wrapping
   at 456px yields five lines instead of Figma's six, which moves the marker
   highlight to start mid-line instead of at a line start. */
.data-report-hero__title {
  max-width:   439px;   /* Figma text-node width */
  white-space: pre-line;
}


/* ---- Body (6817:3509) ------------------------------------- */

.data-report-hero__body {
  margin:      0;
  max-width:   472px;                  /* Figma text-node width */
  font-size:   var(--font-size-xl);    /* 20px */
  line-height: var(--line-height-xl);  /* 28px */
  font-weight: var(--font-weight-regular);
  color:       var(--foreground);
}


/* ---- Visual (6817:3524) ----------------------------------- */

/* SUBJECT-FRAMED. The layout box is the BOOK, not the image file.

   The export (1158 x 1310, transparent) holds the cover at (30,51)–(855,1086)
   — 825 x 1035 — and the rest is drop shadow and empty canvas. Sizing the
   `<img>` sizes the shadow, so every spacing decision ends up relative to how
   big the shadow happens to be. Instead `__visual` IS the book's box and
   takes part in layout; the image is absolutely positioned inside it, scaled
   so the book lands exactly on the box's edges, and the shadow spills out
   without moving anything.

   Measured against the Figma render (cover pixels, shadow excluded): the book
   is 410 x 518 at x=823, y=153 — i.e. the export at exactly 0.5x. So:

   - width   412.5px = 825 x 0.5 — the design's book, NOT the column width.
             The first attempt at this (rolled back 2026-09-28) let the book
             fill the 689px column and rendered it 1.67x too large.
   - x    the book's left edge sits on the last track's start — the grid's
          75px gap track is the copy → book distance, as in Figma.
   - y    CENTRED against the copy (`align-self: center`; with no padding on
          the copy column, the row is exactly the text's height).
          A deliberate departure from Figma, which top-aligns the book with
          the eyebrow — the owner's call, 2026-09-29. Horizontal stays as
          Figma draws it; only the stacked layouts centre horizontally.

   The `max-width: 79%` keeps the shadow on screen as the column narrows: the
   visible shadow (alpha >= 10) reaches 1041/825 of the book's width to the
   right of its left edge, and 825/1041 = 79%. Above ~1200px the 412.5px book
   fits with room to spare, so the cap only engages on small desktops, where
   it scales book + shadow down together instead of letting
   `overflow: hidden` crop the shadow.

   The book (517.5px) is shorter than the copy (538px), so the copy still
   sets the row height: 144 + 538 + 124 = 806, Figma's 790 frame + the 16px
   below it.

   Replacing `visualSrc` with a differently-composed file breaks this framing:
   re-measure the book's bounds (alpha >= 128) and re-derive the three
   percentages on `__visual-img` and the aspect-ratio here. */
.data-report-hero__visual {
  grid-column:  5;
  position:     relative;
  width:        412.5px;             /* 825 x 0.5 — the book at design size */
  max-width:    79%;                 /* 825 / 1041 — see above */
  aspect-ratio: 825 / 1035;          /* the book's own bounds in the export */
  align-self:   center;              /* vertically centred against the copy */
}

/* Every value is a ratio against the BOOK, so it holds at any rendered size.
   `top` is a percentage of the box's HEIGHT, hence /1035 rather than /825. */
.data-report-hero__visual-img {
  position:  absolute;
  top:       -4.9275%;               /*  -51 / 1035 */
  left:      -3.6364%;               /*  -30 / 825  */
  width:     140.3636%;              /* 1158 / 825  */
  max-width: none;
  height:    auto;
  display:   block;
  /* The shadow can overhang the next section — never let it eat clicks. */
  pointer-events: none;
}

/* Placeholder until the real report-cover asset is on the Webflow CDN.
   A soft blue wash in the book's box, so the hero's proportions are
   reviewable without the artwork. */
.data-report-hero__visual-placeholder {
  position:      absolute;
  inset:         0;
  border-radius: 12px;                 /* Figma rounded-box; no --radius token is 12px */
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--info) 28%, var(--card)),
      color-mix(in srgb, var(--info) 10%, var(--card)) 55%,
      var(--card));
  border: 1px dashed color-mix(in srgb, var(--info) 45%, transparent);
}


/* ---- Responsive ------------------------------------------- */

/* Below the gutter's collapse point the two columns stop making sense side by
   side — stack them, copy first. Figma has no tablet frame; ≤767 is measured
   against the mobile frame (see ../DataReportPage.mobile.figma.md). */
@media (max-width: 991px) {
  /* Top 80px. The top padding only ever steps DOWN as the screen narrows
     (144 → 80 → 64) — a narrower screen never gets more of it than a wider
     one. Bottom 80px: room for the book's shadow (~19% of its width ≈ 78px). */
  .data-report-hero {
    padding: 5rem 0;   /* 80px */
  }

  /* Once stacked, the wrapper IS the content edge, so it has to carry
     `.container`'s padding verbatim (60px here, 2rem below) — otherwise the
     hero's copy sits 44px left of every section under it. */
  .data-report-hero__wrap {
    padding: 0 60px;
  }

  .data-report-hero__grid {
    grid-template-columns: 1fr;
    row-gap:               3rem;   /* 48px */
  }

  .data-report-hero__copy {
    grid-column: 1;
  }

  /* Stacked: the book centres horizontally and is FLUID — it fills the
     column when the column is narrower than the book's design size, and
     stops at that size (412.5px, as on desktop) when there is more room.
     So phones get the biggest book the screen allows, and tablets do not get
     a giant one. The desktop 79% shadow cap is dropped: the frame itself lets
     the shadow's faint edge run off the viewport at phone widths, and
     `overflow-x: clip` keeps that from producing a scrollbar. */
  .data-report-hero__visual {
    grid-column:  1;
    align-self:   start;
    justify-self: center;
    width:        100%;
    max-width:    412.5px;
  }

  .data-report-hero__title,
  .data-report-hero__body {
    max-width: none;
  }

  /* Drop the desktop line breaks once stacked — they were composed for a
     504px column and read as ragged short lines at any other width. */
  .data-report-hero__title {
    white-space: normal;
  }
}

/* Mobile is MEASURED against Figma CRrdcRif8N6jgEWK28BDb5 node 6850:8739
   (402 x 6336) — see ../DataReportPage.mobile.figma.md. */
@media (max-width: 767px) {
  /* Top 64px — deliberately LESS than the frame's 96 (owner's call,
     2026-09-29). Figma's 96 would put more space above the eyebrow on a phone
     than the 80 the tablet layout uses, and the top padding must only step
     down as the screen narrows: 144 → 80 → 64.

     Bottom 58px: Figma's book ends at y=1069 and the quote panel starts at
     1127 (its white gutter is horizontal-only at this width). Figma gets
     there as 26px inside the Img container + 32px section padding. */
  .data-report-hero {
    padding: 4rem 0 3.625rem;   /* 64px / 58px */
  }

  .data-report-hero__wrap {
    padding: 0 2rem;   /* 32px — Figma's TEXT inset (Heading 6850:13065 x=32) */
  }

  /* Body → book 50px. Figma: intro ends at y=572, the Img container starts
     at 604 and the book 18px inside it at 622 — one gap here, not a row gap
     plus a margin. */
  .data-report-hero__grid {
    row-gap: 3.125rem;   /* 50px */
  }

  /* No headline override here: it inherits the ≤991 block's full width and
     natural wrap. Deliberately so — this block used to restore a 322px cap +
     `pre-line` to hit Figma's exact six mobile lines at 402px, but that left
     the heading stuck at 322px on every wider phone/small tablet (~500–767px),
     with half the column empty. Full width won (owner's call, 2026-09-29); at
     402px the wrap differs from the frame in where the lines break. */

  /* Figma's intro (6850:13079) is 338 x 112 — four 28px lines of 18px type. */
  .data-report-hero__body {
    font-size:   var(--font-size-lg);
    line-height: var(--line-height-lg);
  }

  /* The book needs no rule here: the ≤991 one (fluid, centred, max
     412.5px) already gives it the full 338px column at 402. Figma draws it at
     298 x 375 pinned to x=27; filling the column instead was the owner's
     call, 2026-09-29 — use the space on phones rather than hold a fixed
     share of it. */
}