/* =========================================================================
   Trazo Lab — v2
   Implements ./DESIGN.md (StringTune-extracted system).
   Single source of truth: all tokens in :root. No hardcoded values below.
   ========================================================================= */

/* --------- Fonts (Fontshare — General Sans + JetBrains Mono via Google) ---------- */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

/* --------- Tokens (canonical, per DESIGN.md §2) ---------- */
:root {
  /* Anchors */
  --c-white:      #ffffff;  --c-white-rgb:     255,255,255;
  --c-black:      #101214;  --c-black-rgb:     16,18,20;

  /* Warm neutrals */
  --c-grey:       #e6dfe4;  --c-grey-rgb:      230,223,228;
  --c-berry:      #c8c2cf;  --c-berry-rgb:     200,194,207;
  --c-purple:     #a399a8;  --c-purple-rgb:    163,153,168;
  --c-grey-dark:  #544d56;  --c-grey-dark-rgb: 84,77,86;

  /* Accents */
  --c-yellow:     #f4ff1e;  --c-yellow-rgb:    244,255,30;
  --c-red:        #ff4f36;  --c-red-rgb:       255,79,54;
  --c-blue:       #3687ff;  --c-blue-rgb:      54,135,255;
  --c-green:      #4dbf9d;  --c-green-rgb:     77,191,157;

  /* Fonts */
  --font:      "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", monospace;

  /* Type scale — Major Third (1.333) */
  --type-step: 1.333;
  --body-font-size: 1rem;
  --body-line-height: 1.2;
  --ls-intencity: -2;

  --p:    1rem;
  --m:    calc(var(--p) / var(--type-step));
  --mm:   calc(var(--m) / var(--type-step));
  --h6:   calc(var(--p)  * var(--type-step));
  --h5:   calc(var(--h6) * var(--type-step));
  --h4:   calc(var(--h5) * var(--type-step));
  --h3:   calc(var(--h4) * var(--type-step));
  --h2:   calc(var(--h3) * var(--type-step));
  --h1:   calc(var(--h2) * var(--type-step));
  --h0:   calc(var(--h1) * var(--type-step));
  --large: max(calc(var(--h1) * var(--type-step) * var(--type-step)), 17.6vw);

  /* Spacing — derived from type scale */
  --space-1: var(--mm);
  --space-2: var(--m);
  --space-3: var(--p);
  --space-4: var(--h6);
  --space-5: var(--h5);
  --space-6: var(--h4);
  --space-7: var(--h3);
  --space-8: var(--h2);
  --space-9: var(--h1);
  --space-10: var(--h0);

  /* Grid */
  --g-columns: 6;
  --g-gap:     0.4rem;
  --g-margin:  calc(var(--g-gap) * 2);

  /* Radius */
  --radius-xs: 0.2rem;
  --radius-sm: 0.4rem;
  --radius-md: 0.7rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.4rem;
  --radius-full: 50%;

  /* Shadows */
  --shadow-1: 0 0.4rem 0.8rem  rgba(var(--c-grey-dark-rgb), .10);
  --shadow-2: 0 0.4rem 1.2rem  rgba(var(--c-grey-dark-rgb), .15);
  --shadow-3: 0 0.4rem 1.2rem  rgba(var(--c-grey-dark-rgb), .20);

  /* Motion */
  --f-cubic:      cubic-bezier(0.35, 0.35, 0,    1);
  --f-cubic-in:   cubic-bezier(0.69, 0,    0,    1);
  --f-fast:       cubic-bezier(0,    0.81, 0.35, 1);
  --f-smooth:     cubic-bezier(0.5,  0,    0.3,  1);
  --f-bounce-alt: cubic-bezier(0.6,  0.5,  0,    2);

  --dur-instant: 150ms;
  --dur-fast:    300ms;
  --dur-base:    600ms;
  --dur-slow:    900ms;
}

@media (max-width: 1024px) {
  :root { --type-step: 1.29; --large: calc(var(--h0) * var(--type-step)); }
}
@media (min-width: 1024px) {
  :root { --g-columns: 14; --g-margin: calc(var(--g-gap) * 4); }
}

/* --------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--c-black);
  background: var(--c-white);
  font-feature-settings: "ss03", "ss08";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--c-yellow); color: var(--c-black); }

/* --------- Typography classes ---------- */
.t-large, .t-h0, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6 {
  font-family: var(--font); font-weight: 400; margin: 0;
  font-feature-settings: "dlig", "ss03", "ss08";
}
.t-large { font-size: var(--large); line-height: 0.95;
           letter-spacing: calc(var(--large) / 100 * var(--ls-intencity) * 1.5); }
.t-h0    { font-size: var(--h0); line-height: 1.0;
           letter-spacing: calc(var(--h0) / 100 * var(--ls-intencity)); }
.t-h1    { font-size: var(--h1); line-height: 1.02;
           letter-spacing: calc(var(--h1) / 100 * var(--ls-intencity)); }
.t-h2    { font-size: var(--h2); line-height: 1.05;
           letter-spacing: calc(var(--h2) / 100 * var(--ls-intencity)); }
.t-h3    { font-size: var(--h3); line-height: 1.08;
           letter-spacing: calc(var(--h3) / 100 * var(--ls-intencity)); }
.t-h4    { font-size: var(--h4); line-height: 1.12;
           letter-spacing: calc(var(--h4) / 100 * var(--ls-intencity)); }
.t-h5    { font-size: var(--h5); line-height: 1.18; }
.t-h6    { font-size: var(--h6); line-height: 1.2;  }
.t-p     { font-size: var(--p);  line-height: 1.4;  color: var(--c-grey-dark); margin: 0; }
.t-p--ink{ color: var(--c-black); }
.t-m     { font-size: var(--m);  line-height: 1.3;  margin: 0; }
.t-mm    { font-family: var(--font-mono); font-size: var(--mm); line-height: 1.2;
           letter-spacing: 0.02em; text-transform: uppercase; margin: 0; }
.t-mono  { font-family: var(--font-mono); }
.t-num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --------- Layout primitives ---------- */
.page {
  --col: calc(100vw / var(--g-columns) - var(--g-margin) * 2 / var(--g-columns) - var(--g-gap) * (var(--g-columns) - 1) / var(--g-columns));
}
.shell {
  width: 100%;
  padding-inline: var(--g-margin);
}
.section {
  padding-block: var(--space-9);
  border-top: 1px solid rgba(var(--c-grey-dark-rgb), .08);
}
.section:first-of-type { border-top: 0; }
.section--tight  { padding-block: var(--space-7); }
.section--roomy  { padding-block: var(--space-10); }
.section--dark   { background: var(--c-black); color: var(--c-white); border-color: rgba(var(--c-white-rgb), .08); }
.section--dark .t-p { color: rgba(var(--c-white-rgb), .65); }

.grid14 {
  display: grid;
  grid-template-columns: repeat(var(--g-columns), 1fr);
  gap: var(--g-gap);
  column-gap: var(--g-gap);
}
.span-7  { grid-column: span 7;  }
.span-5  { grid-column: span 5;  }
.span-4  { grid-column: span 4;  }
.span-3  { grid-column: span 3;  }
.span-9  { grid-column: span 9;  }
.span-11 { grid-column: span 11; }
.span-full { grid-column: 1 / -1; }
@media (max-width: 1024px) {
  .span-7, .span-5, .span-4, .span-3, .span-9, .span-11 { grid-column: 1 / -1; }
}

.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }

.row { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: var(--space-3) var(--g-margin);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(var(--c-white-rgb), 0);
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  transition: background-color var(--dur-base) var(--f-cubic),
              backdrop-filter  var(--dur-base) var(--f-cubic),
              border-color     var(--dur-base) var(--f-cubic);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(var(--c-white-rgb), .72);
  backdrop-filter: blur(.4rem) saturate(200%);
  -webkit-backdrop-filter: blur(.4rem) saturate(200%);
  border-bottom-color: rgba(var(--c-grey-dark-rgb), .08);
}
.nav__brand { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.nav__brand-word { font-size: var(--h6); letter-spacing: calc(var(--h6) / 100 * var(--ls-intencity)); }
.nav__brand-sup  { font-family: var(--font-mono); font-size: var(--mm);
                   color: var(--c-purple); }
.nav__links { display: flex; gap: var(--space-5); }
@media (max-width: 1024px) { .nav__links { display: none; } }
.nav__link { font-size: var(--m); transition: color var(--dur-instant) var(--f-cubic); }
.nav__link:hover { color: var(--c-grey-dark); }
.nav__right { display: flex; align-items: center; gap: var(--space-3); }
.nav__built { font-family: var(--font-mono); font-size: var(--mm); color: var(--c-grey-dark); }
@media (max-width: 1024px) { .nav__built { display: none; } }

/* --------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--p); font-family: var(--font); font-weight: 400;
  font-feature-settings: "ss03";
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--f-cubic),
              border-color     var(--dur-fast) var(--f-cubic),
              color            var(--dur-fast) var(--f-cubic),
              transform        var(--dur-fast) var(--f-bounce-alt);
}
.btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.btn:active        { transform: scale(0.98); transition-duration: var(--dur-instant); }

.btn--primary  { background: var(--c-black); color: var(--c-white); border-color: var(--c-black); }
.btn--primary:hover { background: var(--c-grey-dark); border-color: var(--c-grey-dark); transform: scale(1.02); }

.btn--secondary{ background: transparent; color: var(--c-black);
                 border-color: rgba(var(--c-grey-dark-rgb), .25); }
.btn--secondary:hover { background: var(--c-grey); border-color: rgba(var(--c-grey-dark-rgb), .35); }

.btn--ghost    { background: transparent; color: var(--c-black); border-color: transparent;
                 padding: var(--space-2) var(--space-3); }
.btn--ghost:hover { background: var(--c-grey); }

.section--dark .btn--secondary { color: var(--c-white); border-color: rgba(var(--c-white-rgb), .25); }
.section--dark .btn--secondary:hover { background: rgba(var(--c-white-rgb), .08); }

.btn--glass {
  color: var(--c-black);
  background: rgba(var(--c-white-rgb), .6);
  backdrop-filter: blur(6px) saturate(200%);
  -webkit-backdrop-filter: blur(6px) saturate(200%);
  border-color: transparent;
  box-shadow:
    inset  0   1px 2px rgba(var(--c-white-rgb), .25),
    inset  0  -1px 2px rgba(var(--c-white-rgb), .25),
    inset -1px -.5px 1px .5px rgba(var(--c-white-rgb), .4),
    inset -1px  1px 1px        rgba(var(--c-green-rgb), .25),
    inset  1px -2px 1px        rgba(var(--c-blue-rgb),  .25),
    inset  1px  2px 0   2px    rgba(var(--c-red-rgb),   .06),
    inset -1px  2px 1px        rgba(var(--c-blue-rgb),  .12);
}
.btn--glass:hover { transform: scale(1.02); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--p);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--f-cubic);
}
.link-arrow:hover { border-bottom-color: var(--c-black); }
.section--dark .link-arrow:hover { border-bottom-color: var(--c-white); }
.link-arrow .arrow { transition: transform var(--dur-fast) var(--f-cubic); display: inline-block; }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* --------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--mm);
  color: var(--c-grey-dark); text-transform: uppercase; letter-spacing: 0.04em;
}
.eyebrow::before {
  content: ""; width: var(--space-3); height: 1px;
  background: currentColor; opacity: .5;
}

/* --------- Card ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: rgba(var(--c-grey-rgb), .4);
  border: 1px solid rgba(var(--c-grey-dark-rgb), .08);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-base) var(--f-cubic),
              transform var(--dur-base) var(--f-cubic),
              border-color var(--dur-base) var(--f-cubic);
  height: 100%;
}
.card:hover {
  background: rgba(var(--c-grey-rgb), .8);
  border-color: rgba(var(--c-grey-dark-rgb), .18);
  transform: translateY(-2px);
}
.card__title { font-size: var(--h4); line-height: 1.05;
               letter-spacing: calc(var(--h4) / 100 * var(--ls-intencity)); margin: 0; }
.card__body  { font-size: var(--p); color: var(--c-grey-dark); margin: 0; line-height: 1.4; }
.card__meta  { margin-top: auto; font-family: var(--font-mono); font-size: var(--mm);
               color: var(--c-purple); text-transform: uppercase; letter-spacing: 0.04em; }

/* --------- Pricing ---------- */
.pricing {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-feature-settings: "tnum";
}
.pricing th, .pricing td {
  padding: var(--space-4) var(--space-3);
  text-align: left;
  border-bottom: 1px solid rgba(var(--c-grey-dark-rgb), .08);
  vertical-align: top;
}
.pricing thead th { font-family: var(--font-mono); font-size: var(--mm);
                    color: var(--c-grey-dark); text-transform: uppercase;
                    letter-spacing: 0.04em; font-weight: 400; }
.pricing .plan-name  { font-size: var(--h5); line-height: 1; }
.pricing .plan-price { font-family: var(--font-mono); font-size: var(--h3);
                       font-variant-numeric: tabular-nums; line-height: 1; }
.pricing .plan-price .currency { font-size: var(--m); vertical-align: super; color: var(--c-grey-dark); }
.pricing .plan-price .per     { font-family: var(--font-mono); font-size: var(--mm);
                                 color: var(--c-grey-dark); display: block; margin-top: var(--space-1);
                                 text-transform: uppercase; letter-spacing: 0.04em; }
.pricing .row-recommended {
  background: rgba(var(--c-white-rgb), .6);
  backdrop-filter: blur(6px) saturate(200%);
  -webkit-backdrop-filter: blur(6px) saturate(200%);
  box-shadow:
    inset  0   1px 2px rgba(var(--c-white-rgb), .25),
    inset  0  -1px 2px rgba(var(--c-white-rgb), .25),
    inset -1px -.5px 1px .5px rgba(var(--c-white-rgb), .4),
    inset -1px  1px 1px        rgba(var(--c-green-rgb), .25),
    inset  1px -2px 1px        rgba(var(--c-blue-rgb),  .25),
    inset  1px  2px 0   2px    rgba(var(--c-red-rgb),   .06),
    inset -1px  2px 1px        rgba(var(--c-blue-rgb),  .12);
  border-radius: var(--radius-lg);
}
.recommend-tag {
  display: inline-block; margin-left: var(--space-2);
  font-family: var(--font-mono); font-size: var(--mm);
  background: var(--c-black); color: var(--c-white);
  padding: 2px 6px; border-radius: var(--radius-xs);
  text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
}

/* --------- Number proof ---------- */
.stat__num   { font-family: var(--font-mono); font-size: var(--h1); line-height: 1;
               font-variant-numeric: tabular-nums;
               letter-spacing: calc(var(--h1) / 100 * var(--ls-intencity)); }
.stat__label { font-family: var(--font-mono); font-size: var(--mm);
               color: var(--c-grey-dark); text-transform: uppercase; letter-spacing: 0.04em;
               margin-top: var(--space-2); }
.section--dark .stat__label { color: rgba(var(--c-white-rgb), .55); }

/* --------- Marquee (sectors strip) ---------- */
.marquee {
  display: flex; gap: var(--space-7); overflow: hidden;
  padding-block: var(--space-5);
  border-block: 1px solid rgba(var(--c-grey-dark-rgb), .08);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: var(--space-7); animation: marquee 38s linear infinite; flex-shrink: 0; }
.marquee__item { font-family: var(--font-mono); font-size: var(--m);
                 color: var(--c-grey-dark); text-transform: uppercase;
                 letter-spacing: 0.04em; white-space: nowrap; }
.marquee__item::before { content: "●  "; color: var(--c-purple); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* --------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 60;
  transform-origin: left;
  background: linear-gradient(to right, var(--c-black) 0%, var(--c-purple) 100%);
  transform: scaleX(0);
  transition: transform 80ms linear;
  pointer-events: none;
}

/* --------- Nav link animated underline ---------- */
.nav__link { position: relative; padding-block: 2px; }
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--f-cubic);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

/* --------- Hero specifics ---------- */
.hero {
  padding-top: calc(var(--space-9) + var(--space-7));
  padding-bottom: var(--space-9);
  position: relative; overflow: hidden;
}
.hero__title {
  font-size: var(--h1);
  line-height: 1.0;
  letter-spacing: calc(var(--h1) / 100 * var(--ls-intencity));
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
@media (min-width: 1280px) {
  .hero__title { font-size: var(--h0); line-height: 0.98;
                 letter-spacing: calc(var(--h0) / 100 * var(--ls-intencity)); }
}
@media (max-width: 1024px) {
  .hero__title { font-size: var(--h1); line-height: 1.0; }
}
@media (max-width: 640px) {
  .hero__title { font-size: var(--h2); line-height: 1.02;
                 letter-spacing: calc(var(--h2) / 100 * var(--ls-intencity)); }
}
.hero__title em { font-style: normal; color: var(--c-purple);
                   display: inline-block; hyphens: none; }
.hero__lede { font-size: var(--h6); color: var(--c-grey-dark); line-height: 1.35; max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__meta { display: flex; gap: var(--space-5); margin-top: var(--space-7); }
.hero__meta-block { display: flex; flex-direction: column; gap: var(--space-1); }
.hero__meta-label { font-family: var(--font-mono); font-size: var(--mm);
                    color: var(--c-grey-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.hero__meta-value { font-family: var(--font); font-size: var(--m); }

/* Hero spotlight — single static accent, NOT a gradient mesh */
.hero__spotlight {
  position: absolute;
  width: 60vw; height: 60vw; right: -15vw; top: -10vw;
  background: radial-gradient(circle at center,
              rgba(var(--c-berry-rgb), .55) 0%,
              rgba(var(--c-berry-rgb), 0)   60%);
  filter: blur(40px);
  pointer-events: none; z-index: -1;
}

/* Hero photo / video (right side of hero on desktop) */
.hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0;
  background: rgba(var(--c-grey-rgb), .5);
  box-shadow: var(--shadow-2);
  perspective: 1200px;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero__visual__inner {
  position: absolute; inset: 0;
  transform: translate3d(var(--px, 0), var(--py, 0), 0)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 220ms var(--f-cubic);
}
.hero__visual img,
.hero__visual video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 1024px) {
  .hero__visual { margin-top: var(--space-6); aspect-ratio: 3 / 2; }
}

/* 3D tilt on case-tiles — tilt the photo inside, keep frame stable */
.case-tile { perspective: 1000px; }
.case-tile__media {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02);
  transition: transform 220ms var(--f-cubic);
  transform-origin: center;
  will-change: transform;
}

/* Magnetic primary buttons */
.btn.magnetic {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform 280ms var(--f-cubic),
              background-color var(--dur-fast) var(--f-cubic),
              border-color var(--dur-fast) var(--f-cubic);
}

/* Per-character reveal on hero title */
.hero__title .word {
  display: inline-block;
  white-space: nowrap;
}
.hero__title .char {
  display: inline-block;
  transform: translateY(110%) rotate(2deg);
  opacity: 0;
  transition: transform 900ms var(--f-cubic), opacity 700ms var(--f-cubic);
  will-change: transform, opacity;
}
.hero__title .char.is-in { transform: none; opacity: 1; }
.hero__title .space { display: inline-block; width: 0.28em; }

/* Cursor-light overlay on hero primary CTA (per DESIGN.md §5.3) */
.cta-glow {
  position: relative; overflow: hidden; isolation: isolate;
}
.cta-glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
              rgba(var(--c-white-rgb), 0.18), transparent 60%);
  opacity: 0; transition: opacity var(--dur-fast) var(--f-cubic);
  z-index: 0;
}
.cta-glow:hover::before { opacity: 1; }
.cta-glow > * { position: relative; z-index: 1; }

/* Count-up stat */
.stat__num.is-counting { font-variant-numeric: tabular-nums; }

/* --------- Showcase / Trabajos ---------- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1024px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .showcase-grid { grid-template-columns: 1fr; } }

.case-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(var(--c-grey-rgb), .5);
  border: 1px solid rgba(var(--c-grey-dark-rgb), .08);
  transition: transform var(--dur-base) var(--f-cubic),
              box-shadow var(--dur-base) var(--f-cubic),
              border-color var(--dur-base) var(--f-cubic);
  cursor: pointer;
  will-change: transform;
}
.case-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: rgba(var(--c-grey-dark-rgb), .18);
}
.case-tile__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.case-tile__media img,
.case-tile__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--f-cubic), filter 600ms var(--f-cubic);
}
.case-tile:hover .case-tile__media img,
.case-tile:hover .case-tile__media video {
  transform: scale(1.04);
}
.case-tile__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--c-black-rgb), .65) 0%,
    rgba(var(--c-black-rgb), .25) 40%,
    transparent 70%
  );
  pointer-events: none;
}
.case-tile__caption {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
  color: var(--c-white);
  z-index: 2;
}
.case-tile__num {
  font-family: var(--font-mono); font-size: var(--mm);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(var(--c-white-rgb), .7);
}
.case-tile__title {
  font-size: var(--h5); line-height: 1.05; margin: 0;
  letter-spacing: calc(var(--h5) / 100 * var(--ls-intencity));
  color: var(--c-white);
}
.case-tile__location {
  font-family: var(--font-mono); font-size: var(--mm);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: rgba(var(--c-white-rgb), .55);
}
.case-tile__chip {
  position: absolute; top: var(--space-3); left: var(--space-3);
  z-index: 2;
  font-family: var(--font-mono); font-size: var(--mm);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: rgba(var(--c-white-rgb), .88);
  color: var(--c-black);
  backdrop-filter: blur(6px) saturate(180%);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
}
.case-tile__chip::before {
  content: "●  ";
  color: var(--chip-accent, var(--c-purple));
}

/* --------- Editorial split block ---------- */
.split { display: grid; grid-template-columns: repeat(var(--g-columns), 1fr); gap: var(--g-gap); align-items: start; }
.split + .split { margin-top: var(--space-8); }
.split__caption { grid-column: span 6; }
.split__visual  { grid-column: span 8; }
.split--reverse .split__caption { grid-column: 9 / span 6; grid-row: 1; }
.split--reverse .split__visual  { grid-column: 1 / span 8; grid-row: 1; }
@media (max-width: 1024px) {
  .split__caption, .split__visual,
  .split--reverse .split__caption, .split--reverse .split__visual {
    grid-column: 1 / -1; grid-row: auto;
  }
}
.visual {
  aspect-ratio: 16 / 10;
  background: rgba(var(--c-grey-rgb), .5);
  border: 1px solid rgba(var(--c-grey-dark-rgb), .08);
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  overflow: hidden;
  position: relative;
}
.visual--photo { padding: 0; }
.visual--photo img,
.visual--photo video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* --------- Quote block ---------- */
.quote {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-block: var(--space-7);
}
.quote__text { font-size: var(--h3); line-height: 1.15;
               letter-spacing: calc(var(--h3) / 100 * var(--ls-intencity)); max-width: 26ch; }
.quote__attribution { font-family: var(--font-mono); font-size: var(--mm);
                      color: var(--c-grey-dark); text-transform: uppercase; letter-spacing: 0.04em; }

/* --------- FAQ ---------- */
.faq { border-top: 1px solid rgba(var(--c-grey-dark-rgb), .12); }
.faq__item {
  border-bottom: 1px solid rgba(var(--c-grey-dark-rgb), .12);
  padding-block: var(--space-4);
}
.faq__q {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); cursor: pointer; font-size: var(--h5); line-height: 1.2;
  letter-spacing: calc(var(--h5) / 100 * var(--ls-intencity));
  list-style: none; user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .toggle { font-family: var(--font-mono); font-size: var(--m);
                  color: var(--c-grey-dark); transition: transform var(--dur-fast) var(--f-cubic); }
.faq__item[open] .toggle { transform: rotate(45deg); }
.faq__a { margin-top: var(--space-3); color: var(--c-grey-dark); font-size: var(--p); line-height: 1.5; max-width: 64ch; }

/* --------- Footer ---------- */
.footer {
  background: var(--c-black);
  color: var(--c-white);
  padding-block: var(--space-8);
}
.footer .t-p { color: rgba(var(--c-white-rgb), .55); }
.footer__wordmark { font-size: var(--large); line-height: 0.88;
                    letter-spacing: calc(var(--large) / 100 * var(--ls-intencity) * 1.5);
                    color: var(--c-white); }
.footer__grid { display: grid; grid-template-columns: repeat(var(--g-columns), 1fr); gap: var(--g-gap); }
.footer__col-1 { grid-column: span 5; }
.footer__col-2 { grid-column: span 3; }
.footer__col-3 { grid-column: span 3; }
.footer__col-4 { grid-column: span 3; }
@media (max-width: 1024px) {
  .footer__col-1, .footer__col-2, .footer__col-3, .footer__col-4 { grid-column: 1 / -1; }
}
.footer__title { font-family: var(--font-mono); font-size: var(--mm);
                 color: rgba(var(--c-white-rgb), .55); text-transform: uppercase;
                 letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer__list a:hover { color: var(--c-berry); }

.footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(var(--c-white-rgb), .12);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--mm);
  color: rgba(var(--c-white-rgb), .55);
  text-transform: uppercase; letter-spacing: 0.04em;
  flex-wrap: wrap;
}

/* --------- Reveal on scroll ---------- */
.reveal { transition: opacity 800ms var(--f-cubic),
                      transform 1000ms var(--f-cubic); }
.js .reveal       { opacity: 0; transform: translateY(40px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Word-by-word reveal on section headings */
.js [data-words] .word-r {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 900ms var(--f-cubic), opacity 700ms var(--f-cubic);
  will-change: transform, opacity;
}
.js [data-words] .word-r.is-in { transform: none; opacity: 1; }
.js [data-words] .space-r { display: inline-block; width: 0.25em; }
.js [data-words] .word-r-wrap { display: inline-block; overflow: hidden; vertical-align: top; }

/* --------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}