/* ===========================================================================
   Jonite homepage — clean hand-written rebuild
   Values extracted 1:1 from the original css/main.min.css (Tailwind build) and
   index.html. Colours, fonts, sizes, spacing and breakpoints are taken from
   the source, not invented.
   Breakpoint: original "mdm" = min-width 992px (62rem). Below = mobile.
   =========================================================================== */

/* ---- Fonts (local, identical to source) ---- */
@font-face {
  font-display: swap;
  font-family: "PP Neue Montreal";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/PPNeueMontreal-Regular.woff2") format("woff2"),
       url("fonts/PPNeueMontreal-Regular.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Silka Mono";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/SilkaMono-Regular.woff2") format("woff2"),
       url("fonts/SilkaMono-Regular.woff") format("woff");
}

/* ---- Design tokens (from :root in source) ---- */
:root {
  --black: #0e0e0e;
  --white: #ffffff;
  --off-white: #e6e7e8;
  --cream: #c9beb5;
  --stone: #686563;
  --sage: #797762;
  --focus: #4c90e9;

  --container-max: 2400px;
  --container-padding: 1rem;   /* mobile */
  --gap: 0.5rem;               /* mobile column gap */
}

@media (min-width: 992px) {
  :root {
    --container-padding: 1.5rem;
    --gap: 1.5rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--off-white);
  color: var(--black);
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture, video { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--black); color: var(--off-white); padding: .75rem 1rem;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  margin-inline: auto;
  max-width: var(--container-max);
  padding-inline: var(--container-padding);
}

.site-grid {
  display: grid;
  column-gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 992px) {
  .site-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---- Typography utilities (sizes from source) ---- */
/* h1: 4rem desktop / 1.75rem mobile, lh 120% */
.t-h1 { font-size: 1.75rem; line-height: 1.2; }
@media (min-width: 992px) { .t-h1 { font-size: 4rem; line-height: 1.05; } }

/* h2: 3rem desktop / 1.5rem mobile, lh 110-120% */
.t-h2 { font-size: 1.5rem; line-height: 1.1; }
@media (min-width: 992px) { .t-h2 { font-size: 3rem; line-height: 1.2; } }

/* h3: 2rem desktop / inherit mobile, lh 110-120% */
.t-h3 { font-size: 1.25rem; line-height: 1.1; }
@media (min-width: 992px) { .t-h3 { font-size: 2rem; line-height: 1.2; } }

/* h4: 1.5rem desktop / 1.25rem mobile, lh 130% */
.t-h4 { font-size: 1.25rem; line-height: 1.3; }
@media (min-width: 992px) { .t-h4 { font-size: 1.5rem; line-height: 1.3; } }

/* h5: 1.25rem desktop / 1.125rem mobile, lh 130% */
.t-h5 { font-size: 1.125rem; line-height: 1.3; }
@media (min-width: 992px) { .t-h5 { font-size: 1.25rem; line-height: 1.3; } }

/* h6: 1rem, lh 110% */
.t-h6 { font-size: 1rem; line-height: 1.1; }

/* nav / all-caps eyebrows: Silka Mono, uppercase */
.eyebrow {
  font-family: "Silka Mono", monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: .688rem;     /* mobile-all-caps */
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
}
@media (min-width: 992px) { .eyebrow { font-size: .75rem; } }
.eyebrow .dot {
  flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 9999px;
  background: currentColor; margin-right: 8px;
}
@media (min-width: 992px) { .eyebrow .dot { width: 9px; height: 9px; } }

.all-caps {
  font-family: "Silka Mono", monospace;
  font-weight: 400; text-transform: uppercase;
  font-size: .688rem; line-height: 1.1;
}
@media (min-width: 992px) { .all-caps { font-size: .75rem; } }

.all-caps-paragraph {
  font-family: "Silka Mono", monospace;
  font-weight: 400; text-transform: uppercase;
  font-size: .688rem; line-height: 1.3;
}
@media (min-width: 992px) { .all-caps-paragraph { font-size: .75rem; } }

.mono-nav {
  font-family: "Silka Mono", monospace;
  font-weight: 400; text-transform: uppercase;
  font-size: 1rem; line-height: 1.1;
}
@media (min-width: 992px) { .mono-nav { font-size: .875rem; line-height: 1.143; } }

.rich-text p { font-size: .938rem; line-height: 1.5; }
.muted { color: rgba(14,14,14,.6); }

/* ---- Buttons ---- */
.button {
  display: inline-flex; flex-direction: row; align-items: center;
  column-gap: .5rem;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: .875rem; line-height: 1.1;
  border: .063rem solid transparent;
  border-radius: 2.5rem;
  padding: .625rem .625rem .625rem .875rem;
  cursor: pointer;
  transition: color .3s, background-color .3s, border-color .3s;
}
@media (min-width: 992px) {
  .button { font-size: .938rem; padding: .375rem 1rem .438rem; }
}
.button--has-arrow { padding: .375rem .625rem .375rem .875rem; }
@media (min-width: 992px) {
  .button--has-arrow { padding: .375rem .75rem .438rem 1rem; }
}
.button--blackFill { background: var(--black); color: var(--off-white); }
.button--offwhiteFill { background: var(--off-white); color: var(--black); }
.button--offwhiteOutline { color: var(--off-white); border-color: rgba(230,231,232,.2); }
.button__arrow { flex-shrink: 0; width: auto; height: 1.06rem; transform: rotate(-45deg); transition: transform .3s; }
@media (min-width: 992px) { .button__arrow { height: 1.14rem; } }
.button:hover .button__arrow { transform: rotate(0deg); }

/* ---- Header ---- */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 60;
}
.header__inner {
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .7s, border-color .7s, height .7s;
}
@media (min-width: 992px) { .header__inner { height: 88px; } }
.header--scrolled .header__inner {
  background: var(--off-white);
  border-bottom-color: rgba(30,30,30,.2);
}
.header__logo { height: 20px; }
@media (min-width: 992px) { .header__logo { height: 24px; } }
.header__logo img { width: auto; height: 100%; }
.header__nav { display: none; }
@media (min-width: 992px) {
  .header__nav { display: flex; gap: 2rem; align-items: center; }
}
.header__nav a { font-family: "Silka Mono", monospace; text-transform: uppercase; font-size: .875rem; }
.header__nav a:hover { opacity: .5; }
.header__burger {
  display: inline-flex; flex-direction: column; gap: 6px;
  width: 27px; background: none; border: 0; cursor: pointer; padding: 6px 0;
}
@media (min-width: 992px) { .header__burger { display: none; } }
.header__burger span { display: block; width: 100%; height: 1px; background: var(--black); transition: transform .3s; }
.header.is-open .header__burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.header.is-open .header__burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile dropdown nav */
.mobile-nav {
  position: fixed; top: 56px; left: 0; width: 100%;
  max-height: calc(100dvh - 56px); overflow: auto;
  background: var(--off-white); border-top: 1px solid rgba(30,30,30,.2);
  transform: translateY(-120%); transition: transform .5s;
  z-index: 59;
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a {
  display: block; padding: 20px var(--container-padding);
  border-bottom: 1px solid rgba(0,0,0,.15);
  font-family: "Silka Mono", monospace; text-transform: uppercase; font-size: 1rem;
}
@media (min-width: 992px) { .mobile-nav { display: none; } }

/* ---- Generic section spacing ---- */
.section { margin-top: 48px; }
@media (min-width: 992px) { .section { margin-top: 144px; } }
.section--tight { margin-top: 64px; }
@media (min-width: 992px) { .section--tight { margin-top: 200px; } }
/* Per-section top spacing that mirrors the original's responsive mt-* values.
   These replace earlier inline margin-top overrides that collapsed the desktop
   spacing (the inline px value applied at every breakpoint, so the 144/200px
   desktop gaps were lost and sections sat too close / appeared to run together). */
.section--mtm { margin-top: 48px; }       /* original mt-[48px] mdm:mt-[93px]  */
@media (min-width: 992px) { .section--mtm { margin-top: 93px; } }
.section--gap96 { margin-top: 96px; }      /* original mt-[96px] mdm:mt-[200px] */
@media (min-width: 992px) { .section--gap96 { margin-top: 200px; } }
.section--gap48 { margin-top: 48px; }      /* original mt-[48px] mdm:mt-[200px] */
@media (min-width: 992px) { .section--gap48 { margin-top: 200px; } }

.divider { border-top: 1px solid rgba(30,30,30,.2); }
.divider--light { border-top: 1px solid rgba(230,231,232,.2); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  margin-top: 56px;
  min-height: 657px;
  height: calc(100dvh - 56px);
  padding-bottom: 16px;
  gap: var(--gap);
  align-items: stretch;
}
@media (min-width: 992px) {
  .hero {
    margin-top: 105px; min-height: 600px;
    height: calc(100dvh - 105px); max-height: 709px; padding-bottom: 24px;
  }
}
.hero__left { grid-column: 1 / -1; display: flex; flex-direction: column; }
@media (min-width: 992px) { .hero__left { grid-column: 1 / span 6; } }
.hero__right { display: none; }
@media (min-width: 992px) {
  .hero__right { display: flex; grid-column: 7 / span 6; flex-direction: column; justify-content: flex-end; }
}
.hero h1 {
  max-width: 203px;
  margin: 0 0 56px;
  font-size: 1.125rem; line-height: 1.3; /* mobile-h5 */
}
@media (min-width: 992px) {
  .hero h1 { max-width: none; margin: 72px 0 97px; font-size: 1.25rem; }
}
.hero__meta { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.hero__clocks { display: flex; align-items: flex-end; gap: 24px; }
@media (min-width: 992px) { .hero__clocks { gap: 32px; } }
.clock { width: 120px; display: flex; flex-direction: column; }
@media (min-width: 992px) { .clock { width: 140px; } }
.clock .time { display: flex; align-items: center; gap: 5px; }
.clock a { border-bottom: 2px solid transparent; }
.clock a:hover { border-bottom-color: currentColor; }

.hero__media {
  position: relative; overflow: hidden; margin-top: 8px; background: #bfbfbf; flex-grow: 1;
}
@media (min-width: 992px) { .hero__media { margin-top: 24px; } }
.hero__media--mobile { aspect-ratio: 676 / 365; }
@media (min-width: 992px) { .hero__media--mobile { display: none; } }
.hero__media--square { aspect-ratio: 1 / 1; flex: 1; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media .overlay-cta { position: absolute; inset: 0; padding: 24px; display: flex; align-items: flex-end; }

/* =====================================================================
   CLIENTS marquee
   ===================================================================== */
.clients__head { row-gap: 0; }
.clients__lead { grid-column: 1 / -1; }
@media (min-width: 992px) { .clients__lead { grid-column: 1 / span 6; } }
.clients__intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
@media (min-width: 992px) {
  .clients__intro { grid-column: 7 / span 6; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 71px; margin-top: 0; }
}
.clients__intro p { flex: 1; }

/* Marquee */
.marquee { overflow: hidden; width: 100%; }
.marquee__track {
  display: flex; width: max-content;
  animation: marquee var(--speed, 60s) linear infinite;
}
@media (min-width: 992px) { .marquee__track { animation-duration: var(--speed-d, 120s); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

.clients__logos { margin-top: 40px; }
@media (min-width: 992px) { .clients__logos { margin-top: 24px; } }
.client-logo {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 154px; height: 110px; padding: 0 26px;
}
@media (min-width: 992px) { .client-logo { width: 230px; height: 164px; } }
.client-logo img { width: 100%; height: 100%; max-width: 80px; max-height: 50px; object-fit: contain; }
@media (min-width: 992px) { .client-logo img { max-width: 102px; max-height: 64px; } }

/* =====================================================================
   MADE TO MATTER
   ===================================================================== */
.mtm__images { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; }
.mtm__images .col { overflow: hidden; }
.mtm__images img { width: 100%; height: 100%; object-fit: cover; }
.mtm-1 { width: 44.89%; aspect-ratio: 154/205; }
.mtm-2 { width: 21.28%; aspect-ratio: 73/101; }
.mtm-3 { display: none; }
.mtm-4 { width: 29.15%; aspect-ratio: 100/158; }
@media (min-width: 992px) {
  .mtm-1 { width: 27.8%; aspect-ratio: 387/512; }
  .mtm-2 { width: 13.03%; aspect-ratio: 181/252; }
  .mtm-3 { display: block; width: 31.96%; aspect-ratio: 445/552; }
  .mtm-4 { width: 17.95%; aspect-ratio: 250/396; }
}
.mtm__text { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; margin-top: 40px; }
@media (min-width: 992px) { .mtm__text { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin-top: 80px; } }
.mtm__title {
  display: flex; align-items: center; gap: 15px;
  font-family: "PP Neue Montreal", sans-serif; font-weight: 400;
  font-size: 48px; line-height: 1;
}
@media (min-width: 992px) { .mtm__title { gap: 59px; font-size: 150px; line-height: 1.2; } }
.mtm__text p { flex-shrink: 0; width: 280px; margin-top: 24px; font-size: 1.125rem; line-height: 1.3; }
@media (min-width: 992px) { .mtm__text p { width: 250px; margin-top: 0; font-size: 1.25rem; } }

/* =====================================================================
   PRODUCT CATEGORIES
   ===================================================================== */
.products__head { grid-column: 1 / -1; }
@media (min-width: 992px) { .products__head { grid-column: 1 / span 10; } }
.products__head h3 { margin-top: 24px; }
.products__grid {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: var(--gap); row-gap: 32px; margin-top: 32px;
}
@media (min-width: 992px) {
  .products__grid { grid-template-columns: repeat(12, minmax(0,1fr)); row-gap: 64px; margin-top: 64px; }
}
.product-card { grid-column: span 1; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 992px) { .product-card { grid-column: span 3; gap: 24px; } }
.product-card__title { display: flex; align-items: center; gap: 4px; }
@media (min-width: 992px) { .product-card__title { gap: 8px; } }
.product-card__media { width: 100%; height: 260px; overflow: hidden; }
@media (min-width: 992px) { .product-card__media { height: 579px; } }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product-card:hover .product-card__media img { transform: scale(1.12); }
.arrow-tr { flex-shrink: 0; width: 20px; height: 20px; transition: transform .3s; }
@media (min-width: 992px) { .arrow-tr { width: 22px; height: 22px; } }
.product-card:hover .arrow-tr,
.case-study:hover .arrow-tr { transform: rotate(45deg); }

/* =====================================================================
   WHY JONITE (icons marquee)
   ===================================================================== */
.why__head { grid-column: 1 / -1; }
@media (min-width: 992px) { .why__head { grid-column: 1 / span 6; } }
.why__head h3 { margin: 24px 0; }
.icons-track { margin-top: 40px; }
@media (min-width: 992px) { .icons-track { margin-top: 64px; } }
.icon-card {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 18px;
  align-items: center; justify-content: center; text-align: center;
  width: 188px; height: 180px; padding: 0 24px;
  border-left: 1px solid rgba(30,30,30,.2);
}
@media (min-width: 992px) { .icon-card { width: 300px; height: 324px; } }
.icon-card img { width: 100%; max-width: 64px; height: auto; }

/* =====================================================================
   FINISHES / COLOURS
   ===================================================================== */
.finishes__head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (min-width: 992px) { .finishes__head { grid-column: 1 / span 6; } }
.finishes__text { grid-column: 1 / -1; margin-top: 24px; }
@media (min-width: 992px) { .finishes__text { grid-column: 9 / span 4; margin-top: 0; align-self: flex-end; } }
.finishes__divider { grid-column: 1 / -1; margin: 32px 0; }
@media (min-width: 992px) { .finishes__divider { margin: 64px 0; } }
.finishes__content { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; }
.finishes__stage { position: relative; width: 100%; aspect-ratio: 343/225; overflow: hidden; }
@media (min-width: 992px) { .finishes__stage { aspect-ratio: 1392/800; max-height: max(800px, 80dvh); } }
.finishes__stage figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s; }
.finishes__stage figure.is-active { opacity: 1; }
.finishes__stage img { width: 100%; height: 100%; object-fit: cover; }
.finishes__stage figcaption {
  position: absolute; left: 16px; bottom: 16px; padding: 2px 8px;
  background: var(--off-white); color: var(--black);
  font-family: "PP Neue Montreal", sans-serif; font-size: .938rem;
}
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--gap); }
@media (min-width: 992px) { .swatches { grid-template-columns: repeat(8, minmax(0,1fr)); } }
.swatch { aspect-ratio: 1; border: 2px solid transparent; border-radius: 9999px; overflow: hidden; background: none; cursor: pointer; padding: 0; }
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch.is-active { outline: 1px solid var(--black); }

/* =====================================================================
   SAMPLES slider
   ===================================================================== */
.samples__head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (min-width: 992px) { .samples__head { grid-column: 1 / span 5; padding-right: 79px; } }
.samples__link { display: none; }
@media (min-width: 992px) {
  .samples__link { display: flex; flex: 1; width: 100%; align-items: flex-end; justify-content: flex-end; }
  .samples__link a { display: flex; align-items: flex-end; gap: 24px; width: 251px; }
  .samples__link a:hover svg { transform: rotate(45deg); }
  .samples__link svg { width: 49px; height: auto; flex-shrink: 0; transition: transform .3s; }
  .samples__link span { border-bottom: 2px solid transparent; }
}
.samples__track-wrap { grid-column: 1 / -1; margin-top: 32px; height: 250px; overflow: hidden; }
@media (min-width: 992px) { .samples__track-wrap { grid-column: 6 / -1; margin-top: 0; height: 500px; } }
.samples__track { display: flex; gap: var(--gap); height: 100%; }
.sample { flex: 0 0 auto; height: 100%; width: 45%; overflow: hidden; }
@media (min-width: 992px) { .sample { width: 330px; } }
.sample img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   ACCORDION (custom solutions, sage)
   ===================================================================== */
.section--sage { background: var(--sage); color: var(--off-white); }
.accordion {
  padding: 64px 0 48px; margin-top: 96px;
}
@media (min-width: 992px) { .accordion { padding: 144px 0 100px; margin-top: 144px; } }
.accordion__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 992px) { .accordion__head { grid-column: 1 / span 9; } }
.accordion__cta { grid-column: 1 / -1; margin-top: 24px; }
@media (min-width: 992px) { .accordion__cta { grid-column: 10 / span 3; margin-top: 0; display: flex; align-items: flex-end; justify-content: flex-end; } }
.accordion__body { grid-column: 1 / -1; display: flex; flex-direction: column; border-top: 1px solid rgba(230,231,232,.2); margin-top: 32px; }
@media (min-width: 992px) { .accordion__body { flex-direction: row; align-items: stretch; margin-top: 64px; } }
.accordion__media { flex: 1; padding-top: 32px; position: relative; }
@media (min-width: 992px) { .accordion__media { padding: 0 64px 0 0; border-right: 1px solid rgba(230,231,232,.2); } }
.accordion__media .stage { position: relative; width: 100%; aspect-ratio: 343/250; overflow: hidden; }
@media (min-width: 992px) { .accordion__media .stage { aspect-ratio: 856/700; } }
.accordion__media figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s; }
.accordion__media figure.is-active { opacity: 1; }
.accordion__media img { width: 100%; height: 100%; object-fit: cover; }
.accordion__items { width: 100%; padding-top: 8px; }
@media (min-width: 992px) { .accordion__items { width: 472px; padding-top: 32px; } }
.accordion__item { border-bottom: 1px solid rgba(230,231,232,.2); padding: 8px 0; }
@media (min-width: 992px) { .accordion__item { padding-left: 64px; } .accordion__item:last-child { border-bottom: 0; } }
.accordion__item .level { display: none; padding-top: 24px; font-family: "Silka Mono", monospace; text-transform: uppercase; font-size: .75rem; color: rgba(230,231,232,.6); }
.accordion__item.is-open .level { display: block; }
.accordion__trigger {
  width: 100%; text-align: left; padding: 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: none; border: 0; color: inherit; cursor: pointer;
  font-family: "PP Neue Montreal", sans-serif; font-size: 1.25rem; line-height: 1.3;
}
@media (min-width: 992px) { .accordion__trigger { font-size: 1.5rem; } }
.accordion__panel { display: none; padding-bottom: 24px; }
@media (min-width: 992px) { .accordion__panel { padding-bottom: 56px; } }
.accordion__item.is-open .accordion__panel { display: block; }
.accordion__panel p { font-size: .938rem; line-height: 1.5; }

/* =====================================================================
   CASE STUDIES (sage continues)
   ===================================================================== */
.cases { padding-bottom: 64px; }
@media (min-width: 992px) { .cases { padding-top: 100px; padding-bottom: 144px; } }
.cases__eyebrow { grid-column: 1 / -1; margin-bottom: 24px; }
@media (min-width: 992px) { .cases__eyebrow { grid-column: 1 / span 3; margin-bottom: 0; display: flex; align-items: flex-end; } }
.cases__top { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 992px) { .cases__top { grid-column: 7 / span 6; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 58px; } }
.cases__top h3 { flex: 1; }
.cases__divider { grid-column: 1 / -1; margin: 32px 0; }
@media (min-width: 992px) { .cases__divider { margin: 64px 0; } }
.cases__intro { grid-column: 1 / -1; font-size: 1.25rem; line-height: 1.3; margin-bottom: 32px; }
@media (min-width: 992px) { .cases__intro { grid-column: 1 / span 6; font-size: 1.5rem; padding-right: 118px; margin-bottom: 80px; } }
.cases__col { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 992px) { .cases__col--left { grid-column: 1 / span 6; gap: 64px; } .cases__col--right { grid-column: 7 / span 6; gap: 64px; margin-top: 0; } }
.cases__col--right { margin-top: 40px; }
@media (min-width: 992px) { .cases__col--right { margin-top: 0; } }
.case-study { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 992px) { .case-study { gap: 24px; } }
.case-study__media { position: relative; width: 100%; aspect-ratio: 343/296; max-height: 577px; overflow: hidden; }
@media (min-width: 992px) { .case-study__media { aspect-ratio: 1; } }
.case-study__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.case-study:hover .case-study__media img { transform: scale(1.14); }
.case-tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 5px 14px 6px; color: var(--white);
  background: rgba(14,14,14,.7); backdrop-filter: blur(5px);
  border-radius: 40px; font-size: .875rem;
}
@media (min-width: 992px) { .case-tag { top: 24px; left: 24px; } }
.case-study__title { display: flex; align-items: center; gap: 8px; }
.case-study__meta { font-family: "Silka Mono", monospace; text-transform: uppercase; font-size: .688rem; }
@media (min-width: 992px) { .case-study__meta { font-size: .75rem; } }

/* =====================================================================
   LATEST INSIGHTS
   ===================================================================== */
.insights__divider { grid-column: 1 / -1; }
.insights__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; }
@media (min-width: 992px) { .insights__head { padding: 64px 0; } }
.insights__grid {
  grid-column: 1 / -1; display: flex; gap: var(--gap); overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 4px;
}
@media (min-width: 992px) { .insights__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: visible; } }
.insight { flex: 0 0 75%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 992px) { .insight { flex: none; gap: 24px; } }
.insight__media { width: 100%; overflow: hidden; aspect-ratio: 255/261; }
.insight--tall .insight__media { aspect-ratio: 255/340; }
@media (min-width: 992px) {
  .insight__media { aspect-ratio: 330/330; }
  .insight--tall .insight__media { aspect-ratio: 330/495; }
}
.insight__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.insight:hover .insight__media img { transform: scale(1.14); }
.insight__meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.insight__meta span { font-family: "Silka Mono", monospace; text-transform: uppercase; font-size: .688rem; opacity: .6; }
@media (min-width: 992px) { .insight__meta span { font-size: .75rem; } }
.insight h3 { font-size: 1.25rem; line-height: 1.3; }
@media (min-width: 992px) { .insight h3 { font-size: 1.5rem; } }

/* =====================================================================
   ACCREDITATION MARQUEE
   ===================================================================== */
.accred {
  overflow: hidden; margin-top: 64px;
  font-family: "Silka Mono", monospace; text-transform: uppercase;
  color: var(--stone); font-size: .688rem; line-height: 1.25;
}
@media (min-width: 992px) { .accred { margin-top: 144px; font-size: 14px; } }
.accred .marquee__track { animation-duration: 30s; }
.accred li { display: flex; align-items: center; }
.accred li .sep { margin: 0 14px; }
@media (min-width: 992px) { .accred li .sep { margin: 0 24px; } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--stone); color: var(--off-white); padding: 48px 0 24px; overflow: hidden; }
@media (min-width: 992px) { .footer { padding: 64px 0 18px; } }
.footer__intro { grid-column: 1 / -1; font-size: 1.125rem; line-height: 1.3; }
@media (min-width: 992px) { .footer__intro { grid-column: 1 / span 3; font-size: 20px; line-height: 1.4; } }
.footer__nav { grid-column: 1 / -1; display: flex; flex-direction: column; margin-top: 40px; border-top: 1px solid rgba(230,231,232,.2); }
@media (min-width: 992px) { .footer__nav { grid-column: 5 / span 8; flex-direction: row; align-items: flex-start; justify-content: space-between; margin-top: 0; border-top: 0; } }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; border-bottom: 1px solid rgba(230,231,232,.2); }
@media (min-width: 992px) { .footer__col { border-bottom: 0; } }
.footer__col h2 {
  width: 100%; font-family: "Silka Mono", monospace; text-transform: uppercase;
  font-size: 1rem; padding: 24px 0; margin: 0;
}
@media (min-width: 992px) { .footer__col h2 { font-size: .75rem; padding: 0; margin-bottom: 16px; } }
.footer__col ul { display: none; flex-direction: column; gap: 12px; padding-bottom: 24px; font-size: .938rem; }
.footer__col.is-open ul { display: flex; }
@media (min-width: 992px) { .footer__col ul { display: flex; padding-bottom: 0; white-space: nowrap; } }
.footer__col a:hover { border-bottom: 2px solid currentColor; }
.footer__bottom {
  margin-top: 40px; padding-top: 18px; text-align: center;
  border-top: 1px solid rgba(230,231,232,.1);
}
@media (min-width: 992px) { .footer__bottom { margin-top: 32px; } }
.footer__bottom ul {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px; font-family: "Silka Mono", monospace; text-transform: uppercase;
  font-size: .688rem;
}
@media (min-width: 992px) { .footer__bottom ul { font-size: .75rem; } }
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover { text-decoration: none; }
.footer__wordmark { grid-column: 1 / -1; margin-top: 40px; }
.footer__wordmark img { width: 100%; height: auto; }

/* =====================================================================
   SCROLL REVEALS
   1:1 with the original GSAP timelines:
     - initial state  translateY(<rise>) + opacity:0  (mobile 100px / desktop 200px scale)
     - target state   translateY(0) + opacity:1
     - duration       2.2s  (original gsap defaults.duration)
     - easing "in-j"  CustomEase "M0,0 C0.71,0 0.03,1 1,1" => cubic-bezier(.71,0,.03,1)
     - ScrollTrigger  start "top bottom", once  => IO threshold 0, fires once
     - children stagger 0.1s where the original used stagger:0.1 (desktop only,
       matching `stagger: isDesktop ? 0.1 : 0`)
   The element JS-adds `.is-revealed`; the transition lives entirely in CSS.
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  transition:
    transform 1.1s cubic-bezier(.71, 0, .03, 1),
    opacity 1.1s cubic-bezier(.71, 0, .03, 1);
  will-change: transform, opacity;
}
@media (min-width: 992px) {
  /* A modest rise. The original GSAP used a large ~200px offset, but it pinned
     and clipped its triggers; a plain translateY reveal with that distance makes
     a tall element visually overshoot ~200px into the next section during the
     animation, so adjacent sections appeared to overlap. 64px keeps the rise
     feel without the cross-section collision. */
  [data-reveal] { transform: translateY(64px); }
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children (product cards, case-study images, insight cards).
   Each child carries the same tween; the per-child delay reproduces the
   GSAP `stagger: 0.1` (0.1s steps), desktop only as in the source. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(48px);
  transition:
    transform 1.1s cubic-bezier(.71, 0, .03, 1),
    opacity 1.1s cubic-bezier(.71, 0, .03, 1);
  will-change: transform, opacity;
}
@media (min-width: 992px) {
  [data-reveal-stagger] > * { transform: translateY(64px); }
}
[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 992px) {
  [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0s; }
  [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: .1s; }
  [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: .2s; }
  [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: .3s; }
  [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: .4s; }
  [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: .5s; }
  [data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: .6s; }
}

/* The hero animates immediately on load (original homepageHero timeline ran
   un-paused on load with figma-spring ease, not on scroll). */
[data-hero-reveal] .hero__left,
[data-hero-reveal] .hero__right {
  opacity: 0;
  transform: translateY(40px);
  transition:
    transform 1.2s cubic-bezier(.25, .6, .4, 1),
    opacity 1.2s cubic-bezier(.25, .6, .4, 1);
  will-change: transform, opacity;
}
[data-hero-reveal] .hero__right { transition-delay: .15s; }
[data-hero-reveal].is-revealed .hero__left,
[data-hero-reveal].is-revealed .hero__right {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > *,
  [data-hero-reveal] .hero__left,
  [data-hero-reveal] .hero__right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}