/* Site-level overrides on top of the mirrored Lioré template stylesheet.
   Keep template CSS untouched; put every deliberate deviation here. */

/* Hero title ("Joyjeet" / "Dan").

   Size: the template's "John" sat at 17rem, about 71% of the line. "Joyjeet"
   at that size would be 967px, wider than the 922px line. The size must
   also fit the words that slide in on scroll ("Creative" / "Marketer",
   desktop only): at 11rem "Marketer" is ≈84% of the line, "Creative" 78%,
   "Joyjeet" 68% and "Dan" 37%. The template's tablet and phone sizes
   (12rem / 10rem) fit "Joyjeet"; the smallest breakpoint goes from 7rem
   (≈90% of the line) to 5.5rem (≈83%).

   Descenders: each line is a clipped box (overflow hidden) holding the
   visible word and, directly below it, a hidden alternate word that the
   template slides into view on scroll (every h1 moves up by 100% of its own
   height). The template's words had no descenders; "Joyjeet" does, and the
   0.85 line-height box cut off the tails of "y" and "j". Each h1 therefore
   gets 0.18em of padding above and below: the bottom padding gives the
   descenders room, the equal top padding keeps the hidden word's ascenders
   below the clip edge, and equal padding on both h1s keeps the 100% slide
   aligned. The box height follows (0.85 + 2 × 0.18 = 1.21 × font size), and
   the 15px gap between the lines is removed so the baseline-to-baseline
   distance stays close to the template's. */
@media screen and (min-width: 992px) {
  .hero .heading-main {
    --main-title: 11rem;
    height: calc(var(--main-title) * 1.21);
  }

  .hero .title-1 {
    padding-top: 0.18em;
    padding-bottom: 0.18em;
  }

  .hero .hero-flex {
    grid-row-gap: 0;
    row-gap: 0;
  }
}

/* Phone hero size now lives in typography.css (fluid clamp per breakpoint). */

/* Point of View section: below 992px the template's .about-grid uses
   column-reverse, which puts the large statement above the small paragraph.
   Keep the reading order (context paragraph first, statement second),
   which also matches the DOM order. */
@media screen and (max-width: 991px) {
  .section.gray .about-grid {
    flex-flow: column;
  }
}

/* "In Numbers" section: the template stacks the three metrics only below
   480px; stack them from 767px down so tablets and large phones keep
   generous spacing instead of three narrow columns. The doubled class
   outranks the template's scoped rule, which loads after this file. */
@media screen and (max-width: 767px) {
  .allex-sections .counter__grids.counter__grids {
    grid-template-columns: 1fr;
    grid-row-gap: 48px;
  }
}

/* Point of View section, left column: "16+" over a small "YEARS" label.
   Uses the section's own type classes (.page-title for the number, the
   template's .page-title.flex.third for the label). The plus sign is kept
   invisible until the count-up in site.js reaches 16. */
.pov-years__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pov-years__number {
  font-variant-numeric: tabular-nums;
}

.pov-years__plus {
  visibility: hidden;
}

.pov-years.is-done .pov-years__plus {
  visibility: visible;
}

.pov-years__label {
  margin-top: 0.75rem;
}

/* Point of View statement: balance the line breaks of the large statement. */
.section.gray .page-title.flex.second {
  text-wrap: balance;
}

/* Keep "16" and "+" on one line at every width (the template's
   .page-title.flex turns into a column below 992px). Align the block to the
   top of the row so "16+ YEARS" sits beside the first line of the statement
   and reads as the start of the sentence; the template's Webflow node style
   (an ID selector, hence !important) bottom-aligns it, which on phones also
   pushed it to the right. */
.pov-years__number {
  flex-direction: row;
}

.section.gray .about-grid .pov-years {
  align-self: flex-start !important;
}


/* Point of View: "YEARS" label at 20px; statement 25% smaller than the
   template's h2 size at every breakpoint. The statement's colour is driven by
   site.js (grey while it enters from the bottom, white once it reaches the
   middle of the screen); white is the fallback without JS. */
.section.gray .pov-years .pov-years__label {
  font-size: 20px; /* outranks the template's .page-title.flex.third size */
}

.section.gray .page-title.flex.second {
  font-size: calc(var(--font--h2) * 0.75);
}

/* "In Numbers": small static suffix beside a counter ("6 months"). Sits on
   the number's baseline, secondary in size and weight. */
.allex-sections .counter__suffix {
  align-self: flex-end;
  margin-left: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

/* "In Numbers" section inverted: black background, white text (owner
   instruction). The Allex stylesheet paints everything from its own colour
   variables, so those are swapped here (doubled class outranks the scoped
   sheet, which loads later). Secondary copy is white at 70% for hierarchy. */
.allex-sections.allex-sections {
  /* colours resolve through the theme tokens in theme.css */
  --white: var(--bg-primary);
  --black: var(--text-primary);
  --black-alt: var(--bg-primary);
  --dark: var(--text-secondary);
  --light: var(--text-secondary);
  background-color: var(--bg-primary);
}

/* "In Numbers": the metric boxes wait 100px to the right before their
   slide-in plays; clip that horizontally so it never widens the page. */
.allex-sections .section__padding {
  overflow-x: clip;
}