/* =====================================================================
   v1.6 — DESIGN POLISH PASS (2026-04-29)
   Fixes from finaltest screenshots:
   - Hero "we" overlapping origami → shrink origami + lift z-index of text
   - Section titles too big → tighter clamp caps
   - About statement overflowing left edge → constrain + add padding
   - CTA "together." cropping → cap font-size + better alignment
   - Spirit section unbalanced → larger title
   - Footer arrows cleaned up
===================================================================== */

/* ---------- Hero — fix size + we/origami overlap ---------- */
.hero__title {
  font-size: clamp(3rem, 9vw, 9.5rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  position: relative;
  z-index: 3;
  max-width: 90%;
}

.hero__title .ltr-i,
.hero__title .ltr-we {
  position: relative;
  z-index: 3;
}

/* Shrink origami so it sits in the right column without colliding */
.hero__origami {
  top: 5%;
  right: 0%;
  width: 32%;
  max-width: 460px;
  z-index: 1;
  opacity: 0.82;
}

@media (max-width: 899px) {
  .hero__origami {
    width: 70%;
    right: -10%;
    top: auto;
    bottom: -8%;
    opacity: 0.4;
  }
}

.hero__inner { padding-bottom: 2rem; }
.hero__row { gap: 2rem; align-items: flex-end; }

/* CTAs row — make sure they wrap before clipping */
.hero__ctas { flex-wrap: wrap; }

/* Hero method rotator — keep it tight */
.hero__method { font-size: clamp(1rem, 1.4vw, 1.4rem); }

/* ---------- Section titles — tighter cap ---------- */
.section-title {
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  letter-spacing: -0.03em;
  line-height: 0.96;
}

/* ---------- About statement — kill overflow + tighter vertical rhythm ---------- */
.about {
  padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 5vw, 4rem);
}
.about__statement {
  font-size: clamp(1.8rem, 4.2vw, 4.4rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 1300px;
  margin: 0 0 2rem;
  word-break: normal;
  overflow-wrap: break-word;
}
.about__head { margin-bottom: 1.5rem; }
.about__body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: 2rem;
}
.about__text p { margin-bottom: 1.2rem; line-height: 1.65; font-size: 1rem; }
@media (max-width: 900px) {
  .about__body { grid-template-columns: 1fr; }
}


/* ---------- Story statement — aligned with About system ---------- */



/* ---------- Pillars — closer to about, less empty space above ---------- */
.pillars-head { margin: clamp(3rem, 5vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- Pillars head — match smaller section title ---------- */
.pillars-title {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  letter-spacing: -0.03em;
}

/* ---------- Quote — bring it down a bit ---------- */
.quote-text {
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  line-height: 1.3;
  max-width: 56rem;
}

/* ---------- CTA — fix "together." cropping ---------- */
.cta {
  padding-left: clamp(1.5rem, 5vw, 4rem);
  padding-right: clamp(1.5rem, 5vw, 4rem);
}
.cta__inner { max-width: 1500px; }
.cta__headline {
  font-size: clamp(3rem, 9vw, 10rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.cta__headline .line {
  display: block;
  overflow: visible; /* italic descenders need air */
}
.cta__headline .line__inner.italic {
  padding-right: 0.15em; /* compensate for italic slant clipping */
}

/* ---------- Spirit — better proportions ---------- */
.spirit {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
}
.spirit__inner {
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.spirit__title {
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.spirit__body p {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.65;
}

/* ---------- Stats — keep numbers from going crazy ---------- */
.stat__num {
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: -0.04em;
}

/* ---------- Mission/Vision — more padding so it does not feel squashed ---------- */
.mv {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
}
.mv__text {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.4;
}

/* ---------- Work — section spacing + cards ---------- */
.work { padding-top: 0; }
.work .section-header {
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 3vw, 2.5rem);
}
.work .section-sub { margin-top: 0.5rem; }
.work-pin .project__num { font-size: 1rem; }
/* Cards — keep tall/wide ratios reasonable so 6 fit in horizontal pin */
.project { width: clamp(20rem, 30vw, 28rem); }
.project--tall { width: clamp(23rem, 22vw, 22rem); }
.project--cta { width: clamp(20rem, 18vw, 18rem); }

/* Make sure horizontal track has consistent gap */
.work-pin__track { gap: 1.5rem; padding: 0 clamp(1.5rem, 4vw, 3rem); }

/* ---------- Services — title smaller + padding ---------- */
.services .section-header { padding-left: clamp(1.5rem, 5vw, 4rem); padding-right: clamp(1.5rem, 5vw, 4rem); }
.svc__name { font-size: clamp(1.6rem, 3.5vw, 3.2rem); }
.svc__num  { font-size: 0.85rem; letter-spacing: 0.18em; }

/* ---------- Pillars cards — tighter ---------- */
.pillars { padding-left: clamp(1.5rem, 5vw, 4rem); padding-right: clamp(1.5rem, 5vw, 4rem); }
.pillar__name { font-size: 1.4rem; }
.pillar__sub  { font-size: 0.95rem; }
.pillar__desc { font-size: 0.92rem; line-height: 1.55; }

/* ---------- Footer — replace ↗ with cleaner SVG-look glyph + tame size ---------- */
.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  white-space: nowrap;
}
.footer__col a:hover { transform: translateX(2px); }
.footer__huge { font-size: clamp(4rem, 22vw, 22rem); letter-spacing: -0.05em; }
.footer__bottom { font-size: 0.8rem; letter-spacing: 0.06em; }

/* ---------- Marquee dividers — slightly smaller text ---------- */
.mq-divider span { font-size: clamp(2rem, 6vw, 5rem); letter-spacing: -0.02em; }

/* ---------- Updates list — smaller titles ---------- */
.update-item__title { font-size: clamp(1rem, 1.4vw, 1.3rem); }
.update-item { padding: 1.4rem 0; }

/* ---------- Section kicker uniformity ---------- */
.section-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Mobile pass ---------- */
@media (max-width: 768px) {
  .hero__title { font-size: clamp(2.4rem, 11vw, 4.5rem); max-width: 100%; }
  .section-title, .pillars-title, .spirit__title, .cta__headline { font-size: clamp(2rem, 9vw, 3.5rem); }
  .about__statement { font-size: clamp(1.4rem, 6vw, 2.4rem); }
  .quote-text       { font-size: clamp(1.1rem, 5vw, 1.6rem); }
  .stat__num        { font-size: clamp(2.2rem, 10vw, 3.6rem); }
  .mv__text         { font-size: clamp(1rem, 4.5vw, 1.4rem); }
  .spirit__inner    { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__huge     { font-size: clamp(3rem, 28vw, 8rem); }
}

@media (max-width: 480px) {
  .hero__title      { font-size: 2.4rem; }
  .section-title    { font-size: 2rem; }
  .cta__headline    { font-size: 2.4rem; }
  .about__statement { font-size: 1.4rem; }
}

/* =====================================================================
   v1.6.2 — SPACING PASS (2026-05-03)
   Client feedback (3foldchanges.docx):
   - Home/Services/About/Work: too much space between sections
   - About → Our Story: excessive bottom space
   - Work archive: huge gap between hero and project grid
===================================================================== */

/* Homepage — tighten gap between sections */
.spirit               { padding-block: clamp(3rem, 5vw, 5rem); }
.mv                   { padding-block: clamp(3rem, 5vw, 5rem); }
.work .section-header { padding-block: clamp(2rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem); }
.about                { padding-block: clamp(3rem, 5vw, 5rem); }
.updates              { padding-block: clamp(3rem, 5vw, 5rem); }
.quote-section        { padding-block: clamp(3rem, 5vw, 5rem); }
.cta                  { padding-block: clamp(4rem, 6vw, 6rem); }
.stats                { padding-block: clamp(3rem, 5vw, 5rem); }
.clients              { padding-block: clamp(2rem, 3vw, 3rem); }
.services             { padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem); }

/* Pillars: bring closer to about + reduce bottom whitespace */
.pillars-head { margin: clamp(2rem, 3vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem) !important; }
.pillars      { padding-bottom: clamp(2rem, 4vw, 4rem); }

/* About page — kill excessive Story bottom space, tighten Values grid */
.iii-about .story        { padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 3vw, 3rem) !important; }
.iii-about .story__head  { margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem) !important; }
.iii-about .vm           { /* keep colorful split */ }
.iii-about .vm__card     { padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); }
.iii-about .values-grid  { padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem) !important; }
.iii-about .key-msg      { padding-block: clamp(4rem, 6vw, 6rem); }
.iii-about .ipage-cta    { padding-block: clamp(3rem, 5vw, 4rem); }

/* Inner-hero — slightly less top/bottom on all inner pages */
.ipage-hero { padding-block: clamp(7rem, 10vw, 9rem) clamp(3rem, 5vw, 4rem) !important; }

/* Services page — tighten section padding */
.iii-services .specialism { padding-block: clamp(3rem, 5vw, 5rem) !important; }
.iii-services .whatwedo   { padding-block: clamp(3rem, 5vw, 5rem) !important; }
.iii-services .services   { padding-block: clamp(2rem, 3vw, 3rem) clamp(2rem, 3vw, 3rem); }
.iii-services .sectors    { padding-block: clamp(3rem, 5vw, 5rem) !important; }
.iii-services .approach   { padding-block: clamp(3rem, 5vw, 5rem); }
.iii-services .testimonials { padding-block: clamp(3rem, 5vw, 5rem); }

/* Work archive — kill huge gap between hero and project grid */
.iii-work .ipage-hero  { padding-block: clamp(7rem, 10vw, 9rem) clamp(2rem, 3vw, 3rem) !important; }
.iii-work .work-filter { padding: clamp(1.5rem, 2.5vw, 2rem) 6vw 0 !important; }
.iii-work .work-grid   { padding-block: clamp(2rem, 3vw, 3rem) clamp(4rem, 6vw, 6rem) !important; }

/* Case study — Scope/Outcome already revealed via JS fix; tighten section padding */
.iii-case .case-section  { padding-block: clamp(3rem, 5vw, 5rem); }
.iii-case .case-overview { padding-top: clamp(3rem, 5vw, 5rem); }
.iii-case .case-outcome  { padding-block: clamp(4rem, 6vw, 6rem); }
.iii-case .case-next     { padding-block: clamp(3rem, 5vw, 5rem); }

/* Mobile: make spacing even tighter */
@media (max-width: 768px) {
  .spirit, .mv, .about, .stats, .updates, .quote-section, .clients, .services,
  .iii-about .story, .iii-about .values-grid, .iii-about .ipage-cta,
  .iii-services .specialism, .iii-services .whatwedo, .iii-services .sectors,
  .iii-services .approach, .iii-services .testimonials, .iii-services .services,
  .iii-work .work-grid, .iii-case .case-section {
    padding-block: 2.5rem !important;
  }
  .ipage-hero { padding-block: 6rem 1.5rem !important; }
  .pillars-head { margin-block: 1.5rem 1rem !important; }
}