/* =============================================================
   MOSSAGENCY — styles.css
   Minimalismo clínico + sofisticación editorial.
   1. Tokens  2. Reset  3. Utilities  4. Typography  5. Components
   6. Sections  7. Effects  8. Responsive  9. Reduced-motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --cream: #F6F4F0;
  --ink: #222222;
  --accent: #FF3131;
  --accent-2: #FDC904;
  --gray: #E9E5E3;
  --white: #FFFFFF;
  --black: #000000;
  /* Warm dark note used in place of flat black blocks (cta-band) — derived
     from the hero photo's own shadow tones so a "dark section" still reads
     as part of the same warm palette instead of a cold graphic contrast. */
  --espresso: #2B2019;
  --espresso-2: #1E1611;

  --bg: var(--cream);
  --fg: var(--ink);
  --fg-mute: #6b6864;
  --line: rgba(34,34,34,0.14);

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;
  --font-sans: "MuseoModerno", -apple-system, "Segoe UI", sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --container: 1320px;
  --gutter: 1.25rem;
  --radius: 2px;
}

@property --mesh-x { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --mesh-y { syntax: "<percentage>"; inherits: false; initial-value: 40%; }

/* Fonts loaded via Google Fonts <link> in index.html (works over file:// and
   http/https alike — self-hosted local font FILES are blocked by browsers
   under file:// due to CORS on "null" origin, which is why this project
   does not bundle its own .woff2 files). */

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--ink); color: var(--cream); }

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

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--cream);
  border-radius: 4px; font-weight: 500; transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: .9rem;
}
.eyebrow--light { color: rgba(246,244,240,0.62); }

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: .01em;
}

[data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }

/* =============================================================
   4. Typography
   ============================================================= */
.split-char, .split-word { display: inline-block; will-change: transform, opacity; }
.char-word { display: inline-block; white-space: nowrap; }

/* =============================================================
   5. Components
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  background: var(--ink); color: var(--cream);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(34,34,34,0.12), 0 1px 3px rgba(34,34,34,0.08);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .3s;
}
.btn:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(34,34,34,0.22), 0 8px 18px rgba(255,49,49,0.18); background: var(--accent); }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }
.btn-primary { background: var(--ink); }
.btn-lg { padding: 1.3rem 2.4rem; font-size: .88rem; }
.btn-block { width: 100%; justify-content: center; }

.case-tags, .cap-item-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.case-tags li {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-mute);
}

.field { position: relative; margin-bottom: 1.1rem; }
.field input, .field textarea {
  width: 100%; padding: 1.5rem 1rem .6rem; border: 1px solid var(--line);
  background: transparent; border-radius: 4px; resize: vertical;
}
.field textarea { min-height: 7rem; }
.field label {
  position: absolute; left: 1rem; top: 1.1rem;
  pointer-events: none; transition: all .25s var(--ease-out);
  color: var(--fg-mute); font-size: .95rem;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: .45rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }

/* =============================================================
   6. Sections
   ============================================================= */

/* --- Nav --- */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), padding .3s;
  padding-block: 1.3rem;
  --nav-fg: var(--cream);
}
.nav.is-scrolled {
  background: rgba(246,244,240,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: .85rem;
  --nav-fg: var(--ink);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { position: relative; display: inline-flex; }
.nav-logo-mark { height: 32px; width: auto; transition: opacity .4s var(--ease-out); }
.nav-logo-mark--dark { position: absolute; inset: 0; opacity: 0; }
.nav.is-scrolled .nav-logo-mark--cream { opacity: 0; }
.nav.is-scrolled .nav-logo-mark--dark { opacity: 1; }
.nav-links { display: none; align-items: center; gap: 2.1rem; }
.nav-link {
  position: relative; font-size: .82rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding-block: .25rem;
  color: var(--nav-fg); transition: color .4s var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link--cta {
  background: var(--ink); color: var(--cream); padding: .6rem 1.2rem; border-radius: 999px;
}
.nav-link--cta::after { display: none; }
.nav-link--cta:hover { background: var(--accent); }

.nav-toggle {
  display: grid; place-items: center; gap: 5px; width: 40px; height: 40px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--nav-fg); transition: transform .3s, opacity .3s, background-color .4s var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
.nav-mobile nav { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
.nav-mobile a { font-family: var(--font-display); font-size: 2.4rem; letter-spacing: .02em; }

/* --- Hero ---
   One continuous composition: the founder's real studio photograph runs the
   full bleed of the section. On mobile it sits as a single graded layer
   behind the type. From 960px up, a second — blurred, darkened — copy of
   the same photo fills the whole background, while the sharp copy is
   revealed only on the right, its left edge feathered into the blurred
   field with a mask gradient. There is no hard seam between "photo zone"
   and "text zone": both sides are the same image at different focus. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.hero-content { position: relative; z-index: 2; padding: 6.5rem var(--gutter) 0; }
.hero-eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(246,244,240,0.66); margin-bottom: 1.4rem;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 14vw, 9.5rem);
  line-height: .92;
  letter-spacing: .005em;
  color: var(--cream);
  margin-top: -.2em;
}
.hero-line { display: block; overflow: hidden; padding-top: .2em; }
.hero-line--accent {
  color: var(--accent);
  filter: drop-shadow(0 6px 26px rgba(0,0,0,0.28));
}

/* Photo layer — full-bleed behind the whole section at every breakpoint,
   so nav and type always sit on the same dark, graded backdrop (never on
   bare cream). Fades in on load rather than wiping in, so contrast is
   never briefly lost while the reveal plays. */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease-soft);
}
.hero-media.is-revealed { opacity: 1; }
.hero-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 20%;
  filter: saturate(.86) contrast(1.05);
}
.hero-media-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,16,.62) 0%, rgba(20,18,16,.16) 26%, rgba(20,18,16,.2) 55%, rgba(20,18,16,.7) 100%);
  pointer-events: none;
}
.hero-coords, .hero-mark { display: none; }

.hero-foot {
  position: relative; z-index: 2;
  margin-top: auto;
  padding: 0 var(--gutter) 2.4rem;
  display: flex; flex-direction: column; gap: 1.6rem;
}
.hero-sub { font-size: 1rem; color: rgba(246,244,240,0.7); max-width: 30rem; }
.hero-scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  width: 1px; height: 3.2rem; background: rgba(246,244,240,0.3); overflow: hidden;
  z-index: 2;
}
.hero-scroll span {
  display: block; width: 100%; height: 40%; background: var(--cream);
  animation: scrollCue 2.4s var(--ease-soft) infinite;
}
@keyframes scrollCue { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }

@media (min-width: 960px) {
  .hero {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero::before {
    content: "";
    position: absolute; inset: -4%;
    z-index: 0;
    background-image: url("assets/img/hero-photo.webp");
    background-size: cover;
    background-position: 46% 33%;
    filter: blur(46px) saturate(.75) brightness(.5);
    transform: scale(1.1);
  }
  .hero-content {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2;
    padding-top: 8.5rem;
  }
  .hero-title {
    letter-spacing: .002em;
    /* Nowrap headline is allowed to overlap the photo, but must never
       exceed the viewport — this scales to the available width instead
       of a flat vw unit, which would overflow on 960–1360px screens. */
    font-size: clamp(5.6rem, calc(11.8vw - 5px), 9.5rem);
  }
  .hero-line { white-space: nowrap; }

  .hero-media {
    inset: 0 0 0 auto; z-index: 1;
    width: 58%; height: 100%;
  }
  .hero-media-fade {
    background: linear-gradient(90deg, rgba(20,18,16,.92) 0%, rgba(20,18,16,.35) 16%, rgba(20,18,16,0) 34%),
                linear-gradient(180deg, rgba(20,18,16,.4) 0%, rgba(20,18,16,0) 22%, rgba(20,18,16,0) 66%, rgba(20,18,16,.5) 100%);
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-photo {
    /* 46/33 keeps the same 58%-width composition but moves the crop
       window down from the old 30% — that cut right at the waist; this
       reaches mid-thigh instead, without ever climbing high enough to
       clip his cap or the raised, camera-holding arms. Full-length
       (cap to shoes) isn't reachable at this panel width on a 16:9–16:10
       screen without narrowing the photo column, which would break the
       composition ratio this iteration was told to preserve. */
    object-position: 46% 33%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 9%, #000 20%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 9%, #000 20%);
  }

  /* Short-viewport laptops (e.g. 1366x768, where browser chrome often
     leaves ~650-700px of actual content height) — narrow the panel a
     touch and lift the crop window so the frame still reads as an
     intentional edit rather than an accidental cut. */
  @media (max-height: 740px) {
    .hero-media { width: 50%; }
    .hero-photo { object-position: 46% 26%; }
  }

  .hero-coords, .hero-mark {
    display: block; position: absolute; z-index: 2;
    background: rgba(246,244,240,.9);
    color: var(--ink);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .hero-coords {
    top: 8rem; right: var(--gutter);
    padding: .7rem .95rem;
    font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    display: flex; gap: .5rem;
  }
  .hero-coords span:not(:last-child)::after { content: "/"; margin-left: .5rem; color: var(--fg-mute); }
  .hero-mark {
    bottom: 2.4rem; right: var(--gutter);
    padding: .55rem .85rem;
    font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  }

  .hero-foot {
    position: absolute; left: 0; right: 0; z-index: 2;
    bottom: 3.4rem;
    display: block;
  }
  .hero-foot .hero-sub { max-width: 26rem; margin-bottom: 1.6rem; }
}

@media (min-width: 1280px) {
  .hero-content { padding-top: 9.5rem; }
}

/* --- Manifesto ---
   The hard "one section ends, another begins" seam against the Hero is
   dissolved from THIS side rather than by baking a cream fade into
   .hero-media-fade (that layer spans the full hero height, including the
   .hero-foot text zone near the bottom — fading it to cream there made
   .hero-sub's light text illegible). Instead, a short dark-to-transparent
   overlay sits only at the very top of .manifesto, behind its content,
   echoing the Hero's own tone as it hands off to the cream field. Sized
   to fully resolve to transparent within the section's own top padding,
   so the eyebrow/lines are never read against a darkened background. */
.manifesto { position: relative; isolation: isolate; }
.manifesto::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(3.5rem, 9vw, 7rem);
  background: linear-gradient(180deg, rgba(20,18,16,.4) 0%, rgba(20,18,16,.1) 55%, rgba(20,18,16,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.manifesto-grid { position: relative; z-index: 1; max-width: 62rem; }
.manifesto-lines { margin-block: 1.6rem 2.4rem; }
.manifesto-line {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.08;
}
.manifesto-line--em { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--fg-mute); font-weight: 400; }
.manifesto-body { max-width: 42rem; font-size: 1.1rem; color: var(--fg-mute); }

/* ---------------------------------------------------------------------
   ARCHIVED — not rendered in the current Home (Selected Work, Dirección
   creativa, Salud & Medicina and Método were all removed from the public
   structure in this iteration; see lib/manifest.js for the same note on
   their data). Rules kept intact, unedited, for when these return —
   Trabajo likely as its own page, Salud & Medicina folded in more subtly
   elsewhere. Safe to leave in place: nothing in the current HTML matches
   these selectors, so none of this renders or costs paint today.
   --------------------------------------------------------------------- */

/* --- Work / Selected Work --- */
.case { padding-block: 3.4rem; border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 1px solid var(--line); }
.case-head { display: grid; gap: 1.8rem; margin-bottom: 2rem; }
.case-logo { width: 96px; height: 120px; object-fit: cover; border-radius: 4px; }
.case-client { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: .01em; }
.case-sector { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-block: .5rem .9rem; }
.case-desc { max-width: 40rem; color: var(--fg-mute); font-size: 1.02rem; margin-bottom: 1.1rem; }

.case-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
}
.case-gallery img {
  width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px;
  filter: grayscale(0.1) contrast(1.02);
  transition: transform .8s var(--ease-soft), filter .5s;
}
.case-gallery img:hover { transform: scale(1.035); filter: grayscale(0) contrast(1.06) brightness(1.03); }
.case-gallery .span-2 { grid-column: span 2; aspect-ratio: 16/9; }
.case-gallery--single { grid-template-columns: 1fr; max-width: 26rem; }
.case-gallery--single img { aspect-ratio: 4/5; }

.production-strip { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.production-strip-label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 1.2rem; }
.production-strip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.production-strip-grid img {
  aspect-ratio: 4/5; object-fit: cover; border-radius: 3px;
  transition: transform .8s var(--ease-soft);
}
.production-strip-grid img:hover { transform: scale(1.04); }

/* --- Servicios (placeholder card-grid pass) ---
   Soft warm-greige backdrop (not cream, not black) so the section reads as
   its own beat in the scroll rhythm without a hard white/black boundary —
   cards themselves stay on --bg (cream), sitting as tiles on the tinted
   field. Column count uses auto-fit so 7 items settle into balanced rows
   instead of the old fixed 3-up grid's awkward 3/3/1 leftover. */
.capabilities { background: var(--gray); }
/* Grid background matches the section tone (not --line) so that with 7
   items the leftover empty cell in the last row (any column count leaves
   one on a non-multiple-of-7 count) blends into the section instead of
   reading as a distinct gray "hole" — hairlines between cards still show
   via the --bg-vs-gray contrast on the gap. */
.cap-grid { display: grid; gap: 1px; background: var(--gray); border: 1px solid var(--line); }
.cap-item { background: var(--bg); padding: 2.6rem clamp(1.2rem, 3vw, 2.6rem); }
.cap-item-top { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1rem; }
.cap-num { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); }
.cap-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); }
.cap-summary { color: var(--fg-mute); max-width: 34rem; margin-bottom: 1.2rem; }
.cap-item-list li {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-mute);
}

/* --- Creative Direction --- */
.direction { background: var(--gray); }
.direction-grid { display: grid; gap: 2.4rem; }
.direction-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); margin-block: .6rem 1.4rem; }
.direction-body { max-width: 34rem; color: var(--fg-mute); font-size: 1.05rem; }
.direction-marks {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-content: flex-start;
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: rgba(34,34,34,0.28); letter-spacing: .03em;
}

/* --- Health & Medical (dark) --- */
.health { background: var(--ink); color: var(--cream); }
.health-grid { display: grid; gap: 2.8rem; align-items: center; }
.health-logo { margin-bottom: 1.8rem; opacity: .9; }
.health-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5.4vw, 3.8rem); margin-bottom: 1.2rem; }
.health-body { color: rgba(246,244,240,0.72); max-width: 34rem; margin-bottom: 2.2rem; font-size: 1.02rem; }
.health-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.health-points dt { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--accent-2); margin-bottom: .3rem; }
.health-points dd { font-size: .88rem; color: rgba(246,244,240,0.62); line-height: 1.5; }
.health-figure { border-radius: 4px; overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-soft); }
.health-figure.is-revealed { clip-path: inset(0); }
.health-figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* --- Method --- */
.method-steps { display: grid; gap: 0; }
.method-step {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.4rem;
  padding-block: 1.8rem; border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}
.method-step.is-revealed { opacity: 1; transform: none; }
.method-step:last-child { border-bottom: 1px solid var(--line); }
.method-step-num { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); }
.method-step-title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: .35rem; }
.method-step-detail { color: var(--fg-mute); max-width: 34rem; }

/* --- CTA band ---
   Warm espresso brown instead of flat --ink black: keeps a dark, high-
   contrast band for the CTA without introducing the cold black-block-vs-
   cream-block alternation the rest of the Home is moving away from. */
.cta-band { background: linear-gradient(180deg, var(--espresso) 0%, var(--espresso-2) 100%); color: var(--cream); }
.cta-band-inner { max-width: 40rem; text-align: center; margin-inline: auto; }
.cta-title { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); margin-block: .8rem 1rem; }
.cta-body { color: rgba(246,244,240,0.68); margin-bottom: 2rem; }
.cta-band .btn { background: var(--cream); color: var(--ink); }
.cta-band .btn:hover { background: var(--accent); color: var(--cream); }

/* --- Contact --- */
.contact-grid { display: grid; gap: 3rem; }
.contact-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.2rem); margin-block: .6rem .8rem; }
.contact-note { color: var(--fg-mute); margin-bottom: 2rem; }
.contact-channels { display: flex; flex-direction: column; gap: 1rem; }
.contact-channels a {
  display: inline-flex; align-items: baseline; gap: .6rem;
  font-family: var(--font-display); font-size: 1.5rem;
  border-bottom: 1px solid var(--line); padding-bottom: .5rem;
  transition: color .3s, border-color .3s;
}
.contact-channels a:hover { color: var(--accent); border-color: var(--accent); }
.contact-channels small { font-family: var(--font-sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); }
.contact-form-hint { font-size: .78rem; color: var(--fg-mute); margin-top: .8rem; text-align: center; }

/* --- Footer --- */
.footer { border-top: 1px solid var(--line); padding-block: 3rem; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
.footer-logo { height: 30px; width: auto; }
.footer-rights { font-size: .78rem; color: var(--fg-mute); letter-spacing: .03em; }
.footer-links { display: flex; gap: 1.4rem; }
.footer-links a { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-mute); transition: color .3s; }
.footer-links a:hover { color: var(--accent); }

/* --- Scroll progress --- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: transparent; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 0; transform: scaleX(0); }

/* =============================================================
   7. Effects
   ============================================================= */
.split-char { transition: none; }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .case-gallery { grid-template-columns: repeat(3, 1fr); }
  .production-strip-grid { grid-template-columns: repeat(4, 1fr); }
  .health-figure img { aspect-ratio: 16/10; }
}

@media (min-width: 720px) {
  .case-head { grid-template-columns: 120px 1fr; align-items: start; }
  .direction-grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  /* Tablet: 2-up reads better than a single stacked column for 7 items
     while the deep editorial redesign is still pending. */
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .method-step { grid-template-columns: 5rem 1fr; }
  .health-grid { grid-template-columns: 1fr 1fr; }
  /* auto-fit instead of a fixed repeat(3, 1fr): with 7 services the old
     fixed 3-column grid left an awkward lone card on its own final row
     (3/3/1). auto-fit settles into whatever column count keeps each card
     >=280px, so the last row balances instead of stranding one item. */
  .cap-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .case-gallery .span-2 { grid-column: span 1; aspect-ratio: 4/5; }
  .case-gallery { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================
   9. Reduced-motion — only genuinely intrusive effects gated
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll span { animation: none; opacity: .6; }
}