/* ============================================================
   KIRDEC — responsive stylesheet
   Architecture:
     • Tokens on :root drive every breakpoint-specific value.
     • Three fixed Figma designs, each pixel-perfect at its native width:
         MOBILE 375  · TABLET 768  · DESKTOP 1440.
     • Scale-to-fill: `.page` is fixed at the design width and `zoom`ed to
       fill the viewport, so every width is a proportional render of the
       nearest frame. Designs swap at the range midpoints 571 / 1104.
         ≤571  mobile   · 572–1103 tablet · ≥1104 desktop
         ≥1440 up-scales to 1.2 @1728, then caps + centres.
     • Layout is flow-based (not absolute); the hero/content overlap is a
       negative margin. Motion guardrails live in main.js.
   ============================================================ */

/* Local SF Pro variable font (weight + width axes) ------------------- */
@font-face {
  font-family: "SF Pro";
  src: url("assets/fonts/SF-Pro.ttf") format("truetype");
  font-weight: 1 1000;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}

/* ---------------- DESKTOP tokens (1440) ---------------- */
:root {
  /* hero */
  --hero-h: 1087px;
  --header-h: 56px;
  --title-top: 337.5px;
  --title-size: 43px;
  --title-lh: normal;
  --cta-top: 462px;
  --cta-pad-x: 38px;
  --cta-pad-y: 16px;
  --cta-size: 16px;

  /* page */
  --page-pad-bottom: 48px;
  --header-group-w: 1028.565px;
  --header-group-h: 40px;

  /* content */
  --content-gap: 213px;
  --content-overlap: -177px;
  --content-pad-x: 28px;
  --content-pt: 76px;
  --content-pb: 40px;
  --intro-w: 1199px;
  --intro-size: 24px;

  /* case cards */
  --card-block-gap: 32px;   /* between the two cards */
  --card-dir: row;
  --card-align: center;
  --card-gap: 0px;          /* used only when stacked (tablet) */
  --case-text-w: 528px;
  --case-text-gap: 86px;    /* head -> body */
  --head-gap: 7px;          /* eyebrow -> title */
  --eyebrow-size: 30px;
  --case-title-size: 30px;
  --body-size: 16px;
  --media-w: 782px;
  --media-radius: 12px;

  /* footer */
  --footer-top-gap: 388px;  /* space above footer */
  --footer-gap: 200px;      /* between footer top block and bottom row */
  --brand-title-size: 32px;
  --brand-sub-size: 28px;
  --foot-top-dir: row;      /* brand vs cols: row (desktop/tablet) / column (mobile) */
  --foot-top-gap: 0px;
  --foot-cols-dir: column;
  --foot-cols-align: flex-start;
  --foot-cols-gap: 80px;
  --foot-cols-w: 700px;
  --foot-row-dir: row;      /* label vs content: row (desktop) / column (tablet+mobile) */
  --foot-row-gap: 82px;
  --foot-press-gap: 82px;
  --foot-channels-gap: 82px;
  --foot-size: 20px;
  --foot-content-size: 20px;
  --foot-press-content-gap: 4px;
  --foot-channels-content-gap: 8px;
  --foot-bottom-dir: row;   /* copy vs legal: row (desktop/tablet) / column (mobile) */
  --foot-bottom-outer-gap: 0px;
  --foot-bottom-size: 20px;
  --foot-bottom-gap: 82px;  /* legal internal gap */

  /* hero background art (swapped per breakpoint) */
  --blob-a: url("assets/blob1.svg");
  --blob-b: url("assets/blob2.svg");
  --blob-c: url("assets/blob3.svg");
}

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

html, body { margin: 0; padding: 0; background: #ffffff; overflow-x: hidden; }

body {
  font-family: "SF Pro", "SF Pro Display", "SF Pro Text", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; }
p { margin: 0; }

/* Breakpoint-specific content (frames differ in text/structure, so the exact
   markup from each Figma frame is toggled — never adapted from another).
   Ranges: desktop >768 · tablet 376–768 · mobile ≤375.
   Helpers: .bp-dt = desktop+tablet (>375) · .bp-tm = tablet+mobile (≤768). */
.bp-tablet, .bp-mobile, .bp-tm { display: none; }

/* Page container ----------------------------------------------------- */
.page {
  position: relative;
  width: 1440px;
  margin: 0 auto;
  padding-bottom: var(--page-pad-bottom);
  background: #ffffff;
  overflow-x: hidden;
}

/* Scale-to-fill: each fixed Figma design is zoomed to fill the viewport, so
   every width is a pixel-perfect proportional render of the nearest frame.
   `zoom` (not transform) reflows, keeping scroll height correct for Lenis.
   Desktop design (1440) — active ≥1104 (midpoint of 768↔1440):
     1104–1440  scale down to fit · 1440 exact (zoom 1)
     1440–1728  scale up proportionally · >1728 capped at 1.2, centred (margin auto) */
@media (min-width: 1104px) {
  .page { zoom: calc(100vw / 1440px); margin: 0; }
}

/* ============ 1. HERO (1:3025) ============ */
.hero {
  position: relative;
  width: 100%;
  height: var(--hero-h);
  background: #ffffff;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; }

.blob { position: absolute; display: flex; align-items: center; justify-content: center; }
.blob__rot { flex: none; }
.blob__box { position: relative; }
.blob__img {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.blob--1 .blob__img { background-image: var(--blob-a); }
.blob--2 .blob__img { background-image: var(--blob-b); }
.blob--3 .blob__img { background-image: var(--blob-c); }

/* desktop blob geometry */
.blob--1 { left: 254.8px; top: -618.62px; width: 1528.232px; height: 1655.776px; }
.blob--1 .blob__rot { transform: rotate(55.26deg); }
.blob--1 .blob__box { width: 1397.211px; height: 890.798px; }
.blob--1 .blob__img { inset: -12.8% -8.16%; }

.blob--2 { left: -305px; top: -128px; width: 2100.106px; height: 1341.185px; }
.blob--2 .blob__rot { transform: rotate(13.81deg); }
.blob--2 .blob__box { width: 1940.374px; height: 904.046px; }
.blob--2 .blob__img { inset: -12.61% -5.88% -9.35% -5.88%; }

.blob--3 { display: block; left: -68.54px; top: 427.64px; width: 910.539px; height: 304.36px; }
.blob--3 .blob__img { inset: -37.46% -12.52%; }

.hero-blur {
  position: absolute;
  left: 0; top: 0;
  width: 1440px; height: 1087px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(58.65px);
  backdrop-filter: blur(58.65px);
}
.hero-fade {
  position: absolute;
  left: 0; top: 623px;
  width: 1440px; height: 708px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
}

/* header */
.hero-header {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: var(--header-h);
  overflow: hidden;
}
.hero-header__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-logo {
  position: absolute;
  left: calc(50% - 0.45px);
  top: 16px;
  transform: translateX(-50%);
  width: 93.095px;
  height: 24px;
}
.hero-header__group {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: var(--header-group-w);
  height: var(--header-group-h);
  background: var(--header-group) center / 100% 100% no-repeat;
}

/* hero title */
.hero-title {
  position: absolute;
  left: 50%;
  top: var(--title-top);
  transform: translate(-50%, -50%);
  margin: 0;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: var(--title-size);
  line-height: var(--title-lh);
  font-weight: 760;
  font-variation-settings: "wdth" 132;
  text-transform: uppercase;
}
.hero-title .line { display: block; line-height: var(--title-lh); }
/* line grouping differs per frame: desktop/tablet = 3 lines, mobile = 2 */
.hero-title .line--m { display: none; }

/* CTA */
.hero-cta {
  position: absolute;
  left: 50%;
  top: var(--cta-top);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border-radius: 46px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--cta-size);
  line-height: normal;
  font-weight: 410;
  font-variation-settings: "wdth" 132;
}

/* ============ 2. CONTENT (1:2855) ============ */
.content {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: var(--content-overlap);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);
  padding: var(--content-pt) var(--content-pad-x) var(--content-pb);
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden; /* Figma 1:2855 / 1:2858 = overflow-clip (375 is visible, below) */
}

/* intro / hero text */
.intro { width: var(--intro-w); }
.intro__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000000;
  font-size: var(--intro-size);
  font-weight: 270;
  font-variation-settings: "wdth" 60;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.intro__inner p { line-height: 32px; }
.intro__lead { font-weight: 270; font-variation-settings: "wdth" 132; }
.intro__inner .t1 { letter-spacing: 1px; }

/* case block */
.case-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--card-block-gap);
  width: 100%;
}

/* Card-as-link wrapper: display:contents keeps the card a flex item of
   .case-block (layout/reveal/highlight unchanged), just makes it clickable. */
.work-card-link { display: contents; color: inherit; text-decoration: none; cursor: pointer; }

.work-card {
  display: flex;
  flex-direction: var(--card-dir);
  align-items: var(--card-align);
  justify-content: space-between;
  gap: var(--card-gap);
  width: 100%;
  /* Dimming uses `filter` (not `opacity`) so it never collides with the GSAP
     opacity reveal. `filter` also has no layout impact. */
  transition: filter 0.4s ease;
}

/* Scroll-driven highlight: JS adds `.hl` + `.is-active`; others dim.
   Cases never react to hover. */
.case-block.hl .work-card:not(.is-active) { filter: opacity(0.4) grayscale(0.4); }

/* case text */
.case-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--case-text-gap);
  width: var(--case-text-w);
  color: #000000;
}
.case-text__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--head-gap);
  text-transform: uppercase;
}
.work-eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: 270;
  font-variation-settings: "wdth" 132;
  line-height: normal;
}
.work-title {
  font-size: var(--case-title-size);
  font-weight: 540;
  font-variation-settings: "wdth" 132;
  line-height: normal;
}
.work-body {
  width: 100%;
  font-size: var(--body-size);
  font-weight: 270;
  font-variation-settings: "wdth" 60;
  line-height: normal;
}

/* cover media — 782 × 433 (aspect 1.806), rounded 12 */
.media {
  width: var(--media-w);
  aspect-ratio: 782 / 433;
  flex: none;
  border-radius: var(--media-radius);
  overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ============ 3. FOOTER (1:2944) ============ */
.footer {
  position: relative;
  width: calc(100% - var(--content-pad-x) * 2);
  margin: var(--footer-top-gap) var(--content-pad-x) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-gap);
  color: #000000;
}

.footer__top {
  display: flex;
  flex-direction: var(--foot-top-dir);
  gap: var(--foot-top-gap);
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.footer__brand-title {
  font-size: var(--brand-title-size);
  font-weight: 540;
  font-variation-settings: "wdth" 132;
  line-height: normal;
}
.footer__brand-sub {
  font-size: var(--brand-sub-size);
  font-weight: 270;
  font-variation-settings: "wdth" 132;
  line-height: normal;
}

.footer__cols {
  display: flex;
  flex-direction: var(--foot-cols-dir);
  align-items: var(--foot-cols-align);
  gap: var(--foot-cols-gap);
  width: var(--foot-cols-w);
  font-size: var(--foot-size);
}
.footer__row {
  display: flex;
  flex-direction: var(--foot-row-dir);
  align-items: flex-start;
  gap: var(--foot-row-gap);
  width: 100%;
}
.footer__row:first-child { gap: var(--foot-press-gap); }
.footer__row:last-child { gap: var(--foot-channels-gap); }
.footer__label {
  width: 200px;
  flex: none;
  font-weight: 540;
  font-variation-settings: "wdth" 132;
  line-height: normal;
}
.footer__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--foot-press-content-gap);
  font-size: var(--foot-content-size);
  font-weight: 400;
  font-variation-settings: "wdth" 100;
}
.footer__group p { line-height: normal; }
.footer__group-title { color: #000000; }
.footer__muted { color: #696969; }
.footer__group--channels { gap: var(--foot-channels-content-gap); width: 534px; color: #696969; }

.footer__bottom {
  display: flex;
  flex-direction: var(--foot-bottom-dir);
  gap: var(--foot-bottom-outer-gap);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--foot-bottom-size);
}
.footer__copy {
  width: 200px;
  font-weight: 270;
  font-variation-settings: "wdth" 132;
  line-height: normal;
}
.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--foot-bottom-gap);
  color: #696969;
  white-space: nowrap;
  font-weight: 400;
  font-variation-settings: "wdth" 100;
}
.footer__legal p { line-height: normal; }

/* ============================================================
   TABLET — 768 design (pixel-perfect from Figma frame 1:3028).
   Active 572–1103 (midpoints of 375↔768 and 768↔1440); zoomed to fill.
   ============================================================ */
@media (max-width: 1103px) {
  :root {
    /* hero (1:2836) */
    --hero-h: 668px;
    --header-h: 40px;
    --title-top: 196px;
    --title-size: 28px;
    --title-lh: 32px;
    --cta-top: 300px;
    --cta-pad-x: 24px;
    --cta-pad-y: 8px;
    --cta-size: 14px;

    /* content (1:2858) — single column */
    --content-gap: 164px;
    --content-overlap: -148px;
    --intro-w: 100%;

    /* case cards — stacked */
    --card-block-gap: 40px;
    --card-dir: column;
    --card-align: flex-start;
    --card-gap: 24px;
    --case-text-w: 100%;
    --case-text-gap: 12px;   /* title -> body */
    --head-gap: 0px;         /* eyebrow -> title */
    --eyebrow-size: 28px;
    --case-title-size: 28px;
    --media-w: 100%;

    /* footer (1:3031) */
    --footer-top-gap: 245px;
    --footer-gap: 124px;
    --brand-title-size: 28px;
    --brand-sub-size: 24px;
    --foot-cols-dir: column;
    --foot-cols-align: flex-end;
    --foot-cols-gap: 56px;
    --foot-cols-w: 423px;
    --foot-row-dir: column;
    --foot-press-gap: 12px;
    --foot-channels-gap: 8px;
    --foot-bottom-size: 16px;
    --foot-bottom-gap: 48px;

    --header-group: url("assets/header-tablet.svg");
    --header-group-w: 1028.565px;
    --header-group-h: 40px;
    --blob-a: url("assets/blob1-tablet.svg");
    --blob-b: url("assets/blob2-tablet.svg");
    --blob-c: url("assets/blob3-tablet.svg");
  }

  .page { width: 768px; zoom: calc(100vw / 768px); }

  /* hero background art — tablet geometry (1:2837/2838/2839) */
  .blob--1 { left: 142.47px; top: -336px; width: 855.767px; height: 927.187px; }
  .blob--1 .blob__box { width: 782.398px; height: 498.822px; }

  .blob--2 { left: -157.84px; top: -16.75px; width: 1149.685px; height: 661.985px; }
  .blob--2 .blob__rot { transform: rotate(8.54deg); }
  .blob--2 .blob__box { width: 1086.554px; height: 506.24px; }

  .blob--3 { left: -38.59px; top: 249.87px; width: 509.876px; height: 170.433px; }

  .hero-blur {
    left: -34.21px; top: -49.82px;
    width: 843px; height: 658px;
    -webkit-backdrop-filter: blur(32.842px);
    backdrop-filter: blur(32.842px);
  }
  .hero-fade {
    left: -34.21px; top: 348.35px;
    width: 806.359px; height: 396.46px;
  }

  /* swap breakpoint-specific markup to the tablet frame's content */
  .bp-desktop { display: none; }
  .bp-tablet { display: revert; }
  .bp-tm { display: revert; }

  /* header swaps to the combined KIRDEC group image */
  .hero-header__bg, .hero-logo { display: none; }
  .hero-header__group { display: block; }

  /* footer channels list narrows (1:3031;1:2983) */
  .footer__group--channels { width: 239px; }
}

/* ============================================================
   MOBILE — 375 design (pixel-perfect from Figma frame 1:3032).
   Active ≤571 (midpoint of 375↔768); zoomed to fill.
     320–375 scales down (fluid) · <320 keeps scaling down → no h-scroll.
   ============================================================ */
@media (max-width: 571px) {
  .page { width: 375px; zoom: calc(100vw / 375px); }

  :root {
    /* hero (1:2845) */
    --hero-h: 588px;
    --header-h: 32px;
    --title-top: 156px;
    --title-size: 28px;
    --title-lh: 32px;
    --cta-top: 240px;
    --cta-pad-x: 24px;
    --cta-pad-y: 8px;
    --cta-size: 12px;

    /* content (1:3034) */
    --content-gap: 124px;
    --content-overlap: -152px;
    --content-pad-x: 16px;
    --content-pt: 56px;
    --content-pb: 32px;
    --page-pad-bottom: 40px;
    --intro-w: 100%;

    /* case cards (1:2865) — card gap 20 */
    --card-block-gap: 40px;
    --card-gap: 20px;
    --case-text-gap: 12px;   /* title -> body */
    --head-gap: 20px;        /* eyebrow -> title (OUR WORK is a separate row) */
    --eyebrow-size: 20px;
    --case-title-size: 28px;
    --media-radius: 8px;

    /* footer (1:3035) — brand & columns & bottom all stacked */
    --footer-top-gap: 180px;
    --footer-gap: 80px;
    --brand-title-size: 24px;
    --brand-sub-size: 21px;
    --foot-top-dir: column;
    --foot-top-gap: 64px;
    --foot-cols-align: flex-start;
    --foot-cols-gap: 56px;
    --foot-cols-w: 343px;
    --foot-press-gap: 12px;
    --foot-channels-gap: 12px;
    --foot-content-size: 16px;
    --foot-press-content-gap: 8px;
    --foot-channels-content-gap: 12px;
    --foot-bottom-dir: column;
    --foot-bottom-outer-gap: 32px;
    --foot-bottom-size: 16px;
    --foot-bottom-gap: 0px;

    --header-group: url("assets/header-mobile.svg");
    --header-group-w: 822.857px;
    --header-group-h: 32px;
    --blob-a: url("assets/blob1-mobile.svg");
    --blob-b: url("assets/blob2-mobile.svg");
    --blob-c: url("assets/blob3-mobile.svg");
  }

  /* swap breakpoint-specific markup to the mobile frame's content */
  .bp-tablet { display: none; }
  .bp-mobile { display: revert; }
  .hero-title .line--dt { display: none; }
  .hero-title .line--m { display: block; }

  /* hero background art — mobile geometry (1:2846/2847/2848), incl. skew/scale */
  .blob--1 { left: 9.5px; top: -346px; width: 659.29px; height: 927.188px; }
  .blob--1 .blob__rot { transform: rotate(61.89deg) scaleY(0.97) skewX(13.88deg); }
  .blob--1 .blob__box { width: 728.932px; height: 424.888px; }
  .blob--1 .blob__img { inset: -15.02% -8.76%; }

  .blob--2 { left: -232px; top: -71.27px; width: 906px; height: 751.025px; }
  .blob--2 .blob__rot { transform: rotate(17.7deg) scaleY(0.99) skewX(6.97deg); }
  .blob--2 .blob__box { width: 853.274px; height: 500.341px; }
  .blob--2 .blob__img { inset: -12.76% -7.48% -9.04% -7.48%; }

  .blob--3 { left: -130px; top: 240px; width: 393px; height: 170px; }
  .blob--3 .blob__img { inset: -37.55% -16.24%; }

  .hero-blur {
    left: 50%; transform: translateX(-50%); top: -49.82px;
    width: 843px; height: 658px;
  }
  .hero-fade {
    left: 50%; transform: translateX(-50%); top: 304px;
    width: 806.359px; height: 396.46px;
  }

  /* Figma 1:3034 content has no overflow-clip (unlike 1440/768) */
  .content { overflow: visible; }

  /* mobile intro type scale (1:2864): 24 / 23 / 23 px, mixed line-heights */
  .intro--mobile .intro__lead { font-size: 24px; line-height: 34px; }
  .intro--mobile .intro__p2 { font-size: 23px; line-height: 28px; }
  .intro--mobile .intro__p2 .lh-34 { line-height: 34px; }
  .intro--mobile .intro__p2 .lh-28 { line-height: 28px; }
  .intro--mobile .intro__p3 { font-size: 23px; line-height: 28px; }

  /* footer stacks: legal row above copy (1:3016) */
  .footer__group--channels { width: 100%; }
  .footer__label { font-size: 20px; }
  .footer__bottom { align-items: flex-start; }
  .footer__legal { order: 0; width: 100%; justify-content: space-between; }
  .footer__copy { order: 1; width: auto; }
}