/* Home page */
html:has(.page-home) { scroll-padding-top: 0; }

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; min-height: 100svh; display: flex; }
.hero__stage { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 2.4vw, 36px); padding-top: calc(var(--header-h) + 24px); padding-bottom: clamp(24px, 3vw, 44px); }
.hero__title { font-size: clamp(2.75rem, 12.4vw, 6rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.045em; margin-left: -0.04em; }
.hero__line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero__line > span { display: block; }
.hero__stop { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.05em; background: var(--orange); }
.hero__foot { display: grid; gap: 16px var(--gap); justify-items: start; }
.hero__foot .btns { gap: 12px 24px; }
.hero__intro { max-width: 40ch; color: var(--mute-on-ink); font-size: var(--fs-body); line-height: 1.45; letter-spacing: 0; }
.hero__grow { position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: var(--orange); z-index: 2; opacity: 0; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
.hero-pin.is-pinned .hero__grow { opacity: 1; }
@media (min-width: 900px) {
  /* Width, a fixed cap and height all limit the line. */
  .hero__title { font-size: min(8.8vw, 10.5rem, calc((100svh - 240px) / 3)); white-space: nowrap; }
  .hero__foot { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .hero__intro { grid-column: 1 / span 6; }
  .hero__foot .btns { grid-column: 7 / -1; justify-self: end; }
}
/* Pinned: the hero holds while the square grows. Only added by JS when motion is allowed. */
.hero-pin.is-pinned { height: calc(100svh + 130vh); }
.hero-pin.is-pinned .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__line > span { transform: translateY(105%); animation: lineUp 1s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms + 120ms); }
  .js .hero__stop { transform: scale(0); animation: stopIn 0.5s var(--ease) forwards 0.95s; }
  .js .hero__foot { opacity: 0; animation: fadeUp 0.8s var(--ease) forwards 0.6s; }
}
@keyframes lineUp { to { transform: none; } }
@keyframes stopIn { to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- Statement ---- */
.statement { padding-block: clamp(48px, 5.6vw, 88px); }
.statement__grid { display: grid; gap: 24px var(--gap); }
.statement__title { font-size: clamp(2.125rem, 4.9vw, 5.25rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; }
.statement__title span { display: block; }
.statement__side { display: grid; gap: 14px; justify-items: start; }
.statement__lede { max-width: 40ch; }
@media (min-width: 1000px) {
  .statement__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .statement__title { grid-column: 1 / span 8; }
  .statement__side { grid-column: 9 / -1; }
}

/* ---- Services: the list is the design ---- */
.offers { display: grid; }
.offer { display: grid; gap: 6px var(--gap); padding-block: clamp(14px, 1.5vw, 22px); transition: opacity 0.35s; }
.offer__title { font-size: clamp(1.875rem, 4.2vw, 4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; transition: transform 0.5s var(--ease); }
.offer__text { max-width: 44ch; }
.offer__go { display: none; }
@media (min-width: 900px) {
  .offer { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .offer__title { grid-column: 1 / span 7; }
  .offer__text { grid-column: 8 / span 4; }
  .offer__go { display: block; grid-column: 12; justify-self: end; font-size: 1.5rem; transition: transform 0.5s var(--ease); }
  .offer__go .icon { display: block; width: 1em; height: 1em; }
}
@media (hover: hover) {
  .offers:hover .offer:not(:hover) { opacity: 0.35; }
  .offer:hover .offer__title { transform: translateX(10px); }
  .offer:hover .offer__go { transform: translateX(6px); }
}
.offer:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---- Sectors ---- */
.who { display: grid; gap: 24px var(--gap); }
.who__head { display: grid; gap: 12px; justify-items: start; align-content: start; }
.who__head p { max-width: 38ch; }
.who__list { display: grid; gap: 8px var(--gap); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
@media (min-width: 640px) { .who__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .who { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .who__head { grid-column: 1 / span 6; }
  .who__list { grid-column: 7 / -1; }
}