/* ============================================================
   home.css  -  HOME PAGE LAYOUT

   Nikita: this file is ONLY loaded on index.html. It styles
   sections that are unique to the home page:
   - hero (the giant headline at the top)
   - manifesto (the two-column "01 / The agency" block)
   - numbers (600K, 200M, 10M, 10+ stats)
   - case teaser (the dark black panel about SA Accounting Academy)
   - team strip (the row of three founder names)
   - outro (the bottom CTA)

   To change a number on the home page, edit index.html. To change
   how the section LOOKS, change the styles below.
============================================================ */


/* ============================================================
   HERO  -  the full-screen headline at the top of home
   min-block-size: 100vh means it always fills at least one full
   screen height regardless of content length.
============================================================ */
/* Full-bleed section so the Vanta birds canvas spans the whole viewport
   (no container box / tonal seam). Content sits in .hero-inner. */
.hero {
  position: relative;
  overflow: hidden;
  min-block-size: 100vh;
}
.hero canvas { z-index: 0; } /* Vanta birds, behind everything, edge to edge */

/* Two columns on desktop: copy on the left, big logo on the right -
   fills the width and gives the logo real presence. */
.hero-inner {
  position: relative;
  z-index: 1;
  min-block-size: 100vh;
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding-block: clamp(110px, 14vw, 150px) clamp(60px, 10vw, 80px);
}
.hero-content { display: flex; flex-direction: column; gap: var(--space-md); }

.hero-emblem { display: block; width: 100%; max-width: 460px; justify-self: end; }
.hero-emblem img { width: 100%; height: auto; display: block; }

.hero-title {
  font-size: clamp(40px, 6vw, 100px);
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
  font-family: var(--font-display);
  font-weight: 300;
  display: flex;
  flex-direction: column;
}
.hero-line { display: block; }
.hero-italic { color: var(--gold); font-style: italic; }
.hero-lede { max-width: 520px; color: var(--ash); }
.hero-rule { width: 80px; margin-block-start: var(--space-md); }
.hero-cta  { margin-block-start: var(--space-sm); }

@media (max-width: 920px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    min-block-size: auto;
    align-content: center;
    padding-block: clamp(104px, 22vw, 140px) clamp(48px, 12vw, 72px);
  }
  .hero-emblem { order: -1; max-width: 210px; justify-self: start; }
}


/* ============================================================
   BRANDS  -  bento logo wall (replaces the old scrolling ribbon)
   A modular grid of real brand logos. The logos are visually
   disparate and colourful, so at rest they sit muted/greyscale
   and bloom into full colour on hover (hover-capable devices
   only, so touch users always see colour). Two larger tiles -
   the Cadbury feature and a cream "voice" tile - break the grid.
============================================================ */
.brands-heading { margin-block: var(--space-md) var(--space-xl); max-width: 16ch; }
.brands-heading em { color: var(--gold); font-style: italic; }

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(132px, auto);
  gap: var(--gutter);
  list-style: none;
}

.bento-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFDF8;                 /* warm near-white card lifts off the paper */
  border: 1px solid var(--rule);
  padding: var(--space-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.bento-logo {
  max-width: 84%;
  max-height: 68px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (hover: hover) {
  .bento-cell--logo .bento-logo,
  .bento-cell--feature .bento-logo {
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .bento-cell--logo:hover .bento-logo,
  .bento-cell--feature:hover .bento-logo { filter: none; opacity: 1; }
  .bento-cell--logo:hover,
  .bento-cell--feature:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(31, 27, 22, 0.08);
    z-index: 1;
  }
}

/* Feature tile (Cadbury) - 2 x 2, big logo + campaign caption. */
.bento-cell--feature {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl);
  cursor: help;
}
.bento-logo--lg { max-width: 72%; max-height: 128px; align-self: center; margin-block: auto; }
.bento-feature-meta { display: flex; flex-direction: column; gap: 6px; }
.bento-feature-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-h3-lg);
  color: var(--ink);
}
.bento-feature-note { font-size: var(--type-small); color: var(--ash); line-height: 1.5; max-width: 34ch; }

/* Voice tile - cream, breaks up the logo field with brand attitude. */
.bento-cell--statement {
  grid-column: 3 / span 2;
  background: var(--cream);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
}
.bento-statement {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--ink);
}
.bento-statement em { color: var(--gold); font-style: italic; }
.bento-rule { width: 56px; margin: 0; }

/* "And more" tile. */
.bento-cell--more {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--paper);
}
.bento-more-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-h3-lg);
  color: var(--ink);
}
.bento-more-list { font-size: var(--type-small); color: var(--ash); line-height: 1.5; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(116px, auto); }
  .bento-cell--feature { grid-column: 1 / span 2; grid-row: auto; min-height: 220px; }
  .bento-cell--statement { grid-column: 1 / span 2; }
  .bento-cell--more { grid-column: 1 / span 2; }
}
@media (max-width: 480px) {
  .bento { gap: 12px; }
  .bento-cell { padding: var(--space-md); }
  .bento-logo { max-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-cell, .bento-logo { transition: none !important; }
  .bento-cell--logo:hover, .bento-cell--feature:hover { transform: none !important; }
}
/* Touch devices can't hover, so hint that tipped tiles are tappable with a small gold dot. */
@media (hover: none) {
  .bento-cell[data-tip]::after {
    content: "";
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.7;
  }
}


/* ============================================================
   MANIFESTO  -  "03 / The agency" two-column block
   Section label on the left, copy on the right. Stacks on tablet.
============================================================ */
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-2xl);
  align-items: start;
}
.manifesto-text > * + * { margin-block-start: var(--space-lg); }
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 52px);
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  border-inline-start: 2px solid var(--gold);
  padding-inline-start: var(--space-lg);
  margin-block: var(--space-xl);
}
.manifesto-body { color: var(--ash); max-width: 640px; }

/* On screens 900px and below, columns collapse to a single column
   so the section label sits above the copy instead of next to it. */
@media (max-width: 900px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .pullquote { padding-inline-start: var(--space-md); margin-block: var(--space-lg); }
}


/* ============================================================
   NUMBERS  -  the four stats as scrapbook stickers (mobile-first)
   Each stat is a "torn sticker" applied at a slight rotation,
   each with a unique hand-drawn doodle treatment so the four
   feel like they were placed by hand on different days.
   Mobile: vertical stack with offsets.
   Desktop (>=900px): 2x2 grid.
============================================================ */

.stickers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-block-start: var(--space-2xl);
  padding-inline: var(--space-sm);
}

.sticker {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(40px, 8vw, 56px) clamp(24px, 5vw, 40px) clamp(28px, 5vw, 36px);
  box-shadow:
    4px 4px 0 var(--cream),
    8px 10px 24px rgba(31, 27, 22, 0.06);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  cursor: help;
  list-style: none;
}

/* Each sticker is tilted differently so the section feels handmade. */
.sticker:nth-child(1) { transform: rotate(-1.4deg) translateX(-2%); }
.sticker:nth-child(2) { transform: rotate(0.8deg) translateX(2%); }
.sticker:nth-child(3) { transform: rotate(-0.6deg) translateX(-1%); }
.sticker:nth-child(4) { transform: rotate(1.2deg) translateX(1%); }

/* Hover lifts the sticker and straightens it slightly. */
.sticker:hover {
  transform: rotate(0deg) translate(0, -4px) scale(1.01);
  box-shadow:
    6px 6px 0 var(--cream),
    10px 14px 32px rgba(31, 27, 22, 0.1);
}

/* The numbered tab at the top-left. Looks taped on. */
.sticker-tab {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: var(--space-md);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 6px 12px;
  transform: rotate(-4deg);
  z-index: 2;
}

/* The big number, with the one consistent gold underline accent.
   The underline is sized to the number (100% 100%), so it scales
   with the type and stays aligned on every screen size. */
.sticker-value {
  display: inline-block;
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(56px, 14vw, 92px);
  color: var(--ink);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-block-end: calc(var(--space-md) + 0.12em);
}
.sticker-value::after {
  content: "";
  position: absolute;
  inset-inline: -0.04em;
  inset-block-end: -0.12em;
  height: 0.2em;
  background: var(--accent-underline) no-repeat center / 100% 100%;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease-out); /* draws in as the number counts up */
}
.sticker.counting .sticker-value::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .sticker-value::after { transition: none; }
}

.sticker-label {
  display: block;
  margin-block-start: var(--space-sm);
  font-size: var(--type-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}

/* ----- Desktop layout ----- */

@media (min-width: 900px) {
  .stickers {
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
    padding-inline: 0;
  }
  .sticker:nth-child(1) { transform: rotate(-1.6deg) translateY(-12px); }
  .sticker:nth-child(2) { transform: rotate(1.2deg) translateY(8px); }
  .sticker:nth-child(3) { transform: rotate(-0.8deg) translateY(-4px); }
  .sticker:nth-child(4) { transform: rotate(1.6deg) translateY(12px); }
}

/* ----- Reduced motion: kill the tilt entirely ----- */
@media (prefers-reduced-motion: reduce) {
  .sticker,
  .sticker:nth-child(n) { transform: none !important; transition: none !important; }
  .sticker:hover { transform: none !important; }
}


/* ============================================================
   CASE TEASER  -  the dark panel about SA Accounting Academy
   Full-width black background with a stat box on the right.
   Two-column on desktop, stacks on tablet.
============================================================ */
.case-teaser { background: var(--ink); color: var(--paper); }
.case-teaser-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.case-teaser-text > * + * { margin-block-start: var(--space-md); }
.case-teaser-text .micro.accent { color: var(--gold); }
.case-teaser-text h2 { color: var(--paper); }
.case-teaser-text .lede { color: rgba(250, 247, 241, 0.7); max-width: 540px; }
.case-teaser-text a { color: var(--gold); }
.case-teaser-stat {
  text-align: center;
  padding: var(--space-xl);
  border: 1px solid rgba(201, 168, 76, 0.3); /* gold hairline at 30% */
}
.case-teaser-number { color: var(--gold); display: block; }
.case-teaser-stat .small { color: rgba(250, 247, 241, 0.6); margin-block-start: var(--space-sm); display: block; }

@media (max-width: 900px) {
  .case-teaser-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .case-teaser-stat { padding: var(--space-lg); }
}


/* ============================================================
   TEAM STRIP  -  three founder names stacked, hover shifts right
============================================================ */
.team-strip-list { margin-block: var(--space-xl); }
.team-strip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--rule);
  gap: var(--space-md);
  transition: padding-inline-start var(--dur-base) var(--ease-out);
}
.team-strip-row:first-child { border-block-start: 1px solid var(--rule); }
.team-strip-row:hover { padding-inline-start: var(--space-md); color: var(--gold); }
.team-strip-row .small { color: var(--ash); }
.team-strip-cta { margin-block-start: var(--space-md); }

@media (max-width: 640px) {
  .team-strip-row { flex-direction: column; align-items: flex-start; gap: var(--space-xs); padding-block: var(--space-md); }
}


/* ============================================================
   OUTRO  -  the bottom CTA, centred
============================================================ */
.outro { text-align: center; }
.outro h2 { max-width: 720px; margin-inline: auto; }
.outro-cta {
  margin-block-start: var(--space-xl);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-text); /* email link - keep AA contrast on paper */
  display: inline-block;
  word-break: break-word;
}
.outro-cta::after { background: var(--gold); }