/* ═══════════════════════════════════════════════════════════════
   MELISSA OLSEN — DESIGNS UNBOUND
   Concept: "A graphite section line drafting itself across warm
   drafting-paper white — the exact instant a Revit model becomes
   a New England building."
   Palette (60-30-10):
     DOMINANT   — Drafting Paper   #F4F1EA
     SUPPORTING — Graphite Wash    #26241F
     ACCENT     — Maple Ember      #B5472E  (autumn maple / barn red)
   Fonts: Fraunces (display) / Epilogue (body) / IBM Plex Mono (technical)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --color-dominant:       #F4F1EA;  /* Drafting Paper */
  --color-supporting:     #26241F;  /* Graphite Wash */
  --color-accent:         #B5472E;  /* Maple Ember */
  --color-text-primary:   #211F1B;  /* 14.6:1 on dominant */
  --color-text-secondary: #5E594F;  /* 7.1:1 on dominant */
  --color-text-on-dark:   #F4F1EA;  /* 14.6:1 on supporting */
  --color-text-on-dark-2: #B7B1A4;  /* 7.2:1 on supporting */
  --color-line:           rgba(33, 31, 27, 0.14);

  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Epilogue', system-ui, sans-serif;
  --font-tech:     'IBM Plex Mono', ui-monospace, monospace;

  /* ═══ TYPOGRAPHY SCALE ═══ */
  --text-hero:     clamp(3rem, 9vw, 10rem);
  --text-display:  clamp(2.2rem, 6vw, 6.5rem);
  --text-h1:       clamp(1.8rem, 4vw, 3.5rem);
  --text-h2:       clamp(1.4rem, 2.8vw, 2.5rem);
  --text-h3:       clamp(1.1rem, 1.8vw, 1.6rem);
  --text-body-lg:  clamp(1rem, 1.4vw, 1.2rem);
  --text-body:     clamp(0.875rem, 1.1vw, 1.05rem);
  --text-label:    clamp(0.7rem, 0.8vw, 0.8rem);
  --text-nav:      clamp(0.8rem, 0.9vw, 0.95rem);

  /* ═══ SPACING SCALE ═══ */
  --space-section-y:     clamp(4rem, 10vh, 8rem);
  --space-container-max: min(90vw, 1400px);
  --space-gutter:        clamp(1rem, 2.5vw, 2rem);
  --space-element-gap:   clamp(0.75rem, 1.5vw, 1.5rem);

  /* ═══ ICON SCALE ═══ */
  --icon-lg: clamp(1.5rem, 2.5vw, 2.5rem);
  --icon-md: clamp(1rem, 1.8vw, 1.5rem);
  --icon-sm: clamp(0.75rem, 1.2vw, 1rem);

  /* ═══ LAYOUT ═══ */
  --nav-height:  clamp(3.5rem, 8vh, 5rem);
  --hero-height: 100svh;
}

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

html { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-primary);
  background: var(--color-dominant);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  opacity: 0;
}
body.is-ready { opacity: 1; transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) { body { opacity: 1; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -200vw; top: 0; z-index: 10001;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-tech); font-size: var(--text-label);
  padding: 0.75em 1.25em;
}
.skip-link:focus-visible { left: 0; }

.container {
  width: var(--space-container-max);
  margin-inline: auto;
}

/* generic text-safety */
p, h1, h2, h3, blockquote { overflow-wrap: break-word; word-break: break-word; }

.section-label {
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  color: var(--color-accent);
  margin-bottom: var(--space-element-gap);
}

.body-copy {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  max-width: 58ch;
  margin-bottom: var(--space-element-gap);
}

/* sheet reference numbers (Element 1) */
section { position: relative; }
.sheet-no {
  position: absolute;
  top: clamp(1rem, 4vh, 3rem);
  right: clamp(0.5rem, 3vw, 3rem);
  font-family: var(--font-tech);
  font-size: var(--text-display);
  font-weight: 300;
  color: var(--color-text-primary);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sheet-no-light { color: var(--color-text-on-dark); }

/* ═══════════ CURSOR ═══════════ */
.cursor-dot, .cursor-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor-dot {
    display: block; position: fixed; top: 0; left: 0; z-index: 10000;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-accent);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease, transform 0.2s ease;
  }
  .cursor-ring {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 0; left: 0; z-index: 9999;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--color-accent);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, background-color 0.4s ease;
  }
  .cursor-ring-label {
    font-family: var(--font-tech); font-size: 8px; letter-spacing: 0.15em;
    color: var(--color-accent); opacity: 0; transition: opacity 0.4s ease;
  }
  body.cursor-view .cursor-ring { width: 56px; height: 56px; background: rgba(244, 241, 234, 0.85); }
  body.cursor-view .cursor-ring-label { opacity: 1; }
  body.cursor-view .cursor-dot { opacity: 0; }
}

/* ═══════════ NAV ═══════════ */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: max(calc((100vw - var(--space-container-max)) / 2), 1rem);
  background: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.site-nav.is-scrolled {
  background: rgba(244, 241, 234, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--color-line);
}
.nav-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-links { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); white-space: nowrap; }
.nav-link {
  position: relative;
  font-family: var(--font-tech);
  font-size: var(--text-nav);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75em 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0.45em;
  width: 100%; height: 1px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
}
.nav-burger span {
  display: block; width: 26px; height: 2px; margin-inline: auto;
  background: var(--color-text-primary);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.nav-burger.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 6vw, 3rem);
  background: var(--color-supporting);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu-links { display: flex; flex-direction: column; gap: clamp(1rem, 4vh, 2rem); }
.mobile-link {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.5rem);
  color: var(--color-text-on-dark);
  padding: 0.2em 0;
}
.mobile-link-no { font-family: var(--font-tech); font-size: var(--text-label); color: var(--color-accent); }
.mobile-menu-coords {
  margin-top: clamp(2rem, 8vh, 4rem);
  font-family: var(--font-tech); font-size: var(--text-label);
  letter-spacing: 0.1em; color: var(--color-text-on-dark-2);
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative;
  height: var(--hero-height);
  min-height: 540px;
  overflow: hidden;
  background: var(--color-dominant);
  display: flex; align-items: flex-end;
}
/* Element 3 — structural grid overlay */
.hero-grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(181, 71, 46, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 71, 46, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero-drawing {
  position: absolute; inset: var(--nav-height) 0 0 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: clamp(0rem, 4vw, 4rem);
  pointer-events: none;
}
.hero-drawing svg {
  width: min(72vw, 860px);
  height: auto;
  max-height: 78%;
}
.dl {
  stroke: var(--color-text-primary);
  fill: none;
  stroke-linecap: round;
}
.dl-heavy { stroke-width: 2.4; }
.dl-med   { stroke-width: 1.3; opacity: 0.8; }
.dl-thin  { stroke-width: 0.8; opacity: 0.5; }
.dl-dim   { stroke-width: 0.8; stroke: var(--color-accent); opacity: 0.85; }
circle.dl-dim { fill: none; }
.svg-annot text {
  font-family: var(--font-tech);
  font-size: 13px;
  fill: var(--color-text-secondary);
}
.svg-annot { opacity: 0; }

.hero-content {
  position: relative; z-index: 2;
  width: var(--space-container-max);
  margin-inline: auto;
  padding-bottom: clamp(5rem, 16vh, 9rem);
}
.hero-kicker {
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.22em;
  color: var(--color-accent);
  margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
  opacity: 0;
}
.hero-name {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.hero-line { display: block; overflow: hidden; }
.hero-line-indent { padding-left: clamp(1.5rem, 7vw, 7rem); }
.hero-word { display: inline-block; transform: translateY(110%); }
.hero-sub {
  margin-top: clamp(1rem, 3vh, 2rem);
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  max-width: 46ch;
  opacity: 0;
}
.hero-scroll {
  position: absolute; bottom: clamp(1rem, 4vh, 2.5rem);
  left: max(calc((100vw - var(--space-container-max)) / 2), 1rem);
  z-index: 2;
  display: flex; align-items: center; gap: 0.85rem;
  opacity: 0;
}
.hero-scroll-label {
  font-family: var(--font-tech); font-size: var(--text-label);
  letter-spacing: 0.16em; color: var(--color-text-secondary);
}
.hero-scroll-line {
  width: clamp(2.5rem, 5vw, 4rem); height: 1px;
  background: var(--color-accent);
  transform-origin: left;
  animation: scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleX(0.3); opacity: 0.5; }
  50% { transform: scaleX(1); opacity: 1; }
}
.sheet-no-hero { top: calc(var(--nav-height) + 1rem); }

@media (max-width: 768px) {
  .hero-drawing {
    align-items: flex-start;
    justify-content: center;
    padding: 1rem 0 0;
    opacity: 0.55;
  }
  .hero-drawing svg { width: 120vw; max-width: none; max-height: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word { transform: none; }
  .hero-kicker, .hero-sub, .hero-scroll, .svg-annot { opacity: 1; }
  .hero-scroll-line { animation: none; }
}

/* ═══════════ MARQUEE ═══════════ */
.marquee {
  background: var(--color-supporting);
  padding-block: clamp(0.9rem, 2vh, 1.4rem);
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-content {
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.24em;
  color: var(--color-text-on-dark-2);
  padding-right: 1ch;
}
.marquee-content i { font-style: normal; color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .marquee-track { transform: none !important; } }

/* ═══════════ ABOUT ═══════════ */
.about { padding-block: var(--space-section-y); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about-headline {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: 1.12;
  margin-bottom: var(--space-element-gap);
  max-width: 16ch;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-gutter);
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-element-gap);
}
.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat-num {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  color: var(--color-accent);
  line-height: 1;
}
.stat-desc {
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
}
.about-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about-figure { position: relative; }
.about-figcaption {
  margin-top: 0.65rem;
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
}
@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ═══════════ SELECTED WORK ═══════════ */
.work {
  padding-block: var(--space-section-y);
  background: var(--color-dominant);
}
.work-header { margin-bottom: clamp(2rem, 6vh, 4rem); }
.work-title, .process-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.02;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: var(--space-gutter);
  row-gap: clamp(2.5rem, 6vh, 4.5rem);
}
.span-full  { grid-column: span 30; }
.span-60    { grid-column: span 18; }
.span-40    { grid-column: span 12; }
.span-third { grid-column: span 10; }
@media (max-width: 860px) and (min-width: 561px) {
  .span-third { grid-column: span 15; }
  .span-third:last-of-type { grid-column: span 30; }
}

.work-card-link { display: block; }
.work-card-media { position: relative; overflow: hidden; }
.ratio-wide img { aspect-ratio: 4 / 3; }
.ratio-tall img { aspect-ratio: 3 / 4; }
.work-card-media img {
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: saturate(0.92);
}
.work-card:hover .work-card-media img { transform: scale(1.04); }
.work-overlay {
  position: absolute; inset: auto 0 0 0;
  height: 30%;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.work-card:hover .work-overlay { opacity: 1; transform: translateY(0); }
.work-overlay-loc {
  font-family: var(--font-tech); font-size: var(--text-label);
  letter-spacing: 0.12em; color: #fff;
}
.work-overlay-arrow {
  color: #fff; font-size: var(--icon-md);
  transform: translateX(-10px); transition: transform 0.4s ease;
}
.work-card:hover .work-overlay-arrow { transform: translateX(0); }
.work-card-meta { padding-top: clamp(0.75rem, 1.5vh, 1.1rem); }
.work-card-label {
  font-family: var(--font-tech); font-size: var(--text-label);
  letter-spacing: 0.16em; color: var(--color-accent);
  margin-bottom: 0.4rem;
}
.work-card-name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.15;
}
.work-card-type {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}
/* Element 2 — measurement annotations */
.work-card-dims {
  font-family: var(--font-tech);
  font-size: clamp(0.5625rem, 0.65vw, 0.625rem);
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  opacity: 0.5;
  margin-top: 0.45rem;
}
.work-viewall {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-family: var(--font-tech);
  font-size: var(--text-nav);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 0.75em 0;
}
.work-viewall-arrow { transition: transform 0.3s ease; }
.work-viewall:hover .work-viewall-arrow { transform: translateX(6px); }

@media (max-width: 560px) {
  .span-60, .span-40, .span-third, .span-third:last-of-type { grid-column: span 30; }
  .ratio-tall img { aspect-ratio: 4 / 3; }
}

/* ═══════════ PROCESS ═══════════ */
.process {
  padding-block: var(--space-section-y);
  background: var(--color-supporting);
  color: var(--color-text-on-dark);
}
.process .sheet-no { color: var(--color-text-on-dark); }
.process-title { margin-bottom: clamp(2.5rem, 7vh, 4.5rem); max-width: 14ch; }
.process-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: phase;
}
.process-phase {
  position: relative;
  padding-top: clamp(1.25rem, 3vh, 2rem);
}
/* connecting dimension line (Element 4) */
.process-phase::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(181, 71, 46, 0.6);
}
.process-phase::after {
  content: "";
  position: absolute; top: -5px; left: 0;
  width: 1px; height: 11px;
  background: rgba(181, 71, 46, 0.6);
}
.phase-num {
  font-family: var(--font-tech);
  font-size: var(--text-h2);
  color: var(--color-accent);
  line-height: 1;
}
.phase-name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  margin: 0.6rem 0 0.55rem;
}
.phase-desc {
  font-size: var(--text-body);
  color: var(--color-text-on-dark-2);
  max-width: 34ch;
}

/* ═══════════ PRESS ═══════════ */
.press { padding-block: var(--space-section-y); }
.press-list { border-top: 1px solid var(--color-line); }
.press-item {
  display: grid;
  grid-template-columns: minmax(90px, 160px) minmax(0, 1fr);
  gap: var(--space-gutter);
  padding-block: clamp(1rem, 2.5vh, 1.5rem);
  border-bottom: 1px solid var(--color-line);
}
.press-role {
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
.press-name { font-size: var(--text-body-lg); color: var(--color-text-primary); }
@media (max-width: 560px) { .press-item { grid-template-columns: 1fr; gap: 0.3rem; } }

/* ═══════════ PHILOSOPHY ═══════════ */
.philosophy {
  padding-block: calc(var(--space-section-y) * 1.2);
  background: var(--color-supporting);
  color: var(--color-text-on-dark);
}
.philosophy-inner { max-width: min(85vw, 980px); }
.quote-mark {
  width: var(--icon-lg); height: auto;
  fill: var(--color-accent);
  margin-bottom: var(--space-element-gap);
}
.philosophy-quote {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 300;
  line-height: 1.25;
}
.philosophy-attr {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  color: var(--color-text-on-dark-2);
  text-align: right;
}

/* ═══════════ CONTACT ═══════════ */
.contact { padding-block: var(--space-section-y); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.contact-title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: var(--space-element-gap);
  max-width: 14ch;
}
/* Element 6 — GPS coordinates */
.contact-coords {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  color: var(--color-accent);
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-element-gap); }
.form-field { display: flex; flex-direction: column; gap: 0.45rem; }
.form-label {
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--color-text-secondary);
}
.contact-form input, .contact-form textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  padding: 0.7em 0;
  resize: vertical;
  transition: border-color 0.3s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
.contact-form ::placeholder { color: rgba(94, 89, 79, 0.55); }
.form-submit {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-tech);
  font-size: var(--text-nav);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dominant);
  background: var(--color-supporting);
  border: 0; cursor: pointer;
  padding: 0.95em 1.6em;
  min-height: 44px;
  transition: background-color 0.3s ease;
}
.form-submit:hover { background: var(--color-accent); }
.form-submit-arrow { transition: transform 0.3s ease; }
.form-submit:hover .form-submit-arrow { transform: translateX(6px); }
.contact-channels {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.channel-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  padding: clamp(0.9rem, 2vh, 1.25rem) 0.25rem;
  border-bottom: 1px solid var(--color-line);
  min-height: 44px;
  transition: color 0.3s ease;
}
.channel-link span { transition: transform 0.3s ease; color: var(--color-accent); }
.channel-link:hover { color: var(--color-accent); }
.channel-link:hover span { transform: translateX(6px); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ═══════════ FOOTER ═══════════ */
.footer {
  background: var(--color-supporting);
  padding-block: clamp(1.25rem, 3vh, 2rem);
}
.footer-grid {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-element-gap);
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  color: var(--color-text-on-dark-2);
}
.back-to-top {
  font-family: var(--font-tech);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  color: var(--color-text-on-dark);
  background: none; border: 0; cursor: pointer;
  padding: 0.75em 0.5em;
  min-height: 44px;
  transition: color 0.3s ease;
}
.back-to-top:hover { color: var(--color-accent); }

/* ═══════════ WHATSAPP CTA ═══════════ */
.whatsapp-cta {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9998;
  width: clamp(2.8rem, 5vw, 3.5rem);
  height: clamp(2.8rem, 5vw, 3.5rem);
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-cta svg { width: 58%; height: 58%; }
.whatsapp-cta:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}
@media (hover: hover) and (pointer: fine) {
  .whatsapp-cta::before {
    content: attr(data-tooltip);
    position: absolute; right: calc(100% + 0.75rem); top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-tech);
    font-size: var(--text-label);
    letter-spacing: 0.06em;
    white-space: nowrap;
    background: var(--color-supporting);
    color: var(--color-text-on-dark);
    padding: 0.5em 0.85em;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .whatsapp-cta:hover::before { opacity: 1; }
}

/* ═══════════ SCROLL ANIM PRE-STATES (JS removes) ═══════════ */
.js-anim .work-card { opacity: 0; transform: translateY(40px); }
.js-anim .body-copy, .js-anim .stat, .js-anim .press-item,
.js-anim .process-phase, .js-anim .channel-link { opacity: 0; transform: translateY(20px); }
.js-anim .about-figure img { clip-path: inset(100% 0 0 0); }
.js-anim .split-lines .sl-line-inner { transform: translateY(105%); display: inline-block; }
.split-lines .sl-line { display: block; overflow: hidden; }