/* ================================================================
   GHD — Desarrollo de sistemas
   Main Stylesheet (rebuilt: aligned layout + sticky-stacking panels)

   Sections:
   1.  Design tokens
   2.  Reset & base
   3.  Layout helpers (container, rhythm, labels)
   4.  Header (transparent over hero → frosted on scroll)
   5.  Sticky-stacking image panels (the signature scroll effect)
   6.  Hero panel
   7.  Services (clean, aligned, on paper)
   8.  Closing CTA panel
   9.  Footer
   10. Contact page + form
   11. Ink-wipe page transition
   12. Reveal helpers
   13. Motion preferences (reduced-motion + small-screen softening)
================================================================ */


/* ----------------------------------------------------------------
   1. DESIGN TOKENS
---------------------------------------------------------------- */
:root {
  /* Palette — monochrome */
  --ink:       #0E0E0E;
  --paper:     #F6F3EC;
  --secondary: #6B6660;
  --hairline:  #D8D3C8;
  --white:     #FFFFFF;

  /* Typography */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* Type scale (mobile-first) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.5rem;
  --text-6xl:  4.5rem;
  --text-7xl:  5.75rem;

  /* Spacing — consistent rhythm (the cure for "random spaces") */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* One value drives the vertical rhythm of every normal section */
  --section-y: clamp(4.5rem, 11vw, 9rem);

  /* Layout */
  --max-w:    1200px;
  --header-h: 4.5rem;

  /* Easing */
  --ease-cinematic: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
}


/* ----------------------------------------------------------------
   2. RESET & BASE
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.65;
  /* clip (not hidden) so it never breaks position: sticky on the panels */
  overflow-x: clip;
  /* Normal pages clear the solid header; the home page (with the
     transparent-over-hero header) removes this below. */
  padding-top: var(--header-h);
}
body.home { padding-top: 0; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ol, ul { list-style: none; }


/* ----------------------------------------------------------------
   3. LAYOUT HELPERS
---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
@media (min-width: 768px)  { .container { padding-inline: var(--sp-10); } }
@media (min-width: 1200px) { .container { padding-inline: var(--sp-16); } }

/* Small uppercase label that opens each section */
.label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary);
  display: inline-block;
  margin-bottom: var(--sp-6);
}
/* Light variant for use on dark image panels */
.label--light { color: rgba(255, 255, 255, 0.6); }

/* A thin index number that pairs with a label (e.g. "01 / 05") */
.label-index {
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------
   4. HEADER
   Solid (frosted paper) by default — used as-is on the contact page.
   On the home page it starts transparent with white text over the
   hero image, and JS adds .is-scrolled once you scroll past the hero.
---------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--sp-6);
  background-color: rgba(246, 243, 236, 0.95);
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
@media (min-width: 768px) { .site-header { padding-inline: var(--sp-10); } }

.wordmark {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: var(--sp-5); }
@media (min-width: 768px) { .site-nav { gap: var(--sp-8); } }

.nav-link {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  transition: color 0.2s ease, opacity 0.2s ease;
}
.nav-link:hover, .nav-link--active { color: var(--ink); }

.lang-toggle {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.3rem 0.55rem;
  line-height: 1.3;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lang-toggle:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 480px) {
  .nav-link:not(.nav-link--cta) { display: none; }
}

/* --- Home page: transparent header with white text over the hero --- */
body.home .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.home .site-header .wordmark      { color: var(--white); }
body.home .site-header .nav-link      { color: rgba(255, 255, 255, 0.85); }
body.home .site-header .nav-link:hover,
body.home .site-header .nav-link--active { color: var(--white); }
body.home .site-header .lang-toggle {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}
body.home .site-header .lang-toggle:hover { color: var(--white); border-color: var(--white); }

/* Once scrolled past the hero, the home header becomes frosted paper again */
body.home .site-header.is-scrolled {
  background-color: rgba(246, 243, 236, 0.95);
  border-bottom-color: var(--hairline);
}
body.home .site-header.is-scrolled .wordmark { color: var(--ink); }
body.home .site-header.is-scrolled .nav-link { color: var(--secondary); }
body.home .site-header.is-scrolled .nav-link:hover,
body.home .site-header.is-scrolled .nav-link--active { color: var(--ink); }
body.home .site-header.is-scrolled .lang-toggle {
  color: var(--secondary);
  border-color: var(--hairline);
}


/* ----------------------------------------------------------------
   5. STICKY-STACKING IMAGE PANELS  (the signature effect)

   Markup:
     <div class="stack">
       <section class="panel">
         <img class="panel__bg" ...>
         <div class="panel__overlay"></div>
         <div class="panel__content container"> ... </div>
       </section>
       ... more panels ...
     </div>

   Each panel is position:sticky; top:0 inside .stack, so as you scroll
   each one pins and the next slides up and stacks over it. Pure CSS —
   it works even if JavaScript fails. JS only adds the cinematic
   image zoom-out + content fade as each panel becomes active.
---------------------------------------------------------------- */
.stack { position: relative; }

.panel {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;     /* editorial: content sits low-left */
  overflow: hidden;
  color: var(--white);
  background-color: var(--ink);  /* shows while the image lazy-loads */
  perspective: 1300px;           /* depth field for the 3D scroll dive */
}

/* Panels now flow full-screen, one after another. Depth + motion come
   from the GSAP parallax on each background photo (main.js) plus the 3D
   content lift (section 12) — so the effect runs the same on phones and
   desktops, with none of the sticky-positioning cost. */

/* The background photo (an <img> so it can be lazy-loaded + responsive) */
.panel__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Two stacked gradients: darken the BOTTOM (where the text sits) and the
   TOP edge (so the white header stays readable), leaving the middle clearer
   so the photo still reads through. */
.panel__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(14, 14, 14, 0.85) 0%,
      rgba(14, 14, 14, 0.52) 40%,
      rgba(14, 14, 14, 0.28) 72%,
      rgba(14, 14, 14, 0.10) 100%),
    linear-gradient(to bottom,
      rgba(14, 14, 14, 0.48) 0%,
      rgba(14, 14, 14, 0.12) 22%,
      transparent 38%);
}
.panel--cta .panel__overlay {
  background: linear-gradient(to top, rgba(14,14,14,0.9), rgba(14,14,14,0.72));
}

/* Depth veil: a black layer (inserted by main.js) that darkens the photo
   while the panel is deep/inactive and lifts as it comes forward. Sits
   above the gradient overlay (z-index 1) but below the content (z-index 2). */
.panel__depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* Words split out of a headline so each can fly in from deep space. */
.word3d { display: inline-block; will-change: transform, opacity; }

.panel__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-block: var(--sp-20);
  padding-top: calc(var(--header-h) + var(--sp-10));
  /* Side gutters so copy never touches the screen edges (these scenes use
     .panel__content directly, without the .container helper). Matches the
     container rhythm at each breakpoint. */
  padding-inline: var(--sp-6);
  transform-style: preserve-3d;  /* let the headline words keep their depth */
}
@media (min-width: 768px)  { .panel__content { padding-inline: var(--sp-10); } }
@media (min-width: 1200px) { .panel__content { padding-inline: var(--sp-16); } }

/* The big serif statement inside a panel */
.panel__statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 18ch;
  transform-style: preserve-3d;
}
@media (min-width: 600px)  { .panel__statement { font-size: var(--text-5xl); } }
@media (min-width: 1000px) { .panel__statement { font-size: var(--text-6xl); max-width: 16ch; } }

/* "GHD Sistemas" lead inside the who-we-are statement */
.panel__statement .lede { font-style: italic; }

.panel__sub {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
  margin-top: var(--sp-6);
}
@media (min-width: 768px) { .panel__sub { font-size: var(--text-xl); } }


/* ----------------------------------------------------------------
   6. HERO PANEL
---------------------------------------------------------------- */
.hero .panel__content {
  /* push hero copy toward the lower third for a cinematic open */
  padding-bottom: var(--sp-16);
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  margin-bottom: var(--sp-6);
}

.hero-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--white);
  display: flex;
  flex-direction: column;
  max-width: 18ch;
}
@media (min-width: 600px)  { .hero-headline { font-size: var(--text-5xl); } }
@media (min-width: 1000px) { .hero-headline { font-size: var(--text-6xl); max-width: 17ch; } }
@media (min-width: 1300px) { .hero-headline { font-size: var(--text-7xl); } }

.kinetic-line-wrap { overflow: hidden; display: block; }
.kinetic-line { display: block; }
.kinetic-line--accent { font-style: italic; }

.hero-sub {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 44ch;
  margin-top: var(--sp-6);
}
@media (min-width: 768px) { .hero-sub { font-size: var(--text-xl); } }

/* Thin pulsing scroll cue */
.scroll-cue { margin-top: var(--sp-12); }
.scroll-cue__line {
  display: block;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), transparent);
  animation: scroll-cue-pulse 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scroll-cue-pulse {
  0%, 100% { transform: scaleY(0.6); opacity: 0.25; }
  50%      { transform: scaleY(1);   opacity: 0.9; }
}


/* ----------------------------------------------------------------
   7. SERVICES — clean, aligned, on paper
---------------------------------------------------------------- */
.services {
  background-color: var(--paper);
  color: var(--ink);
  padding-block: var(--section-y);
}

.services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-4);
}
.services__title {
  font-family: var(--serif);
  font-size: var(--text-3xl);
  line-height: 1.1;
  max-width: 16ch;
}
@media (min-width: 768px) { .services__title { font-size: var(--text-4xl); } }
.services__count {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* Each service is an aligned row: number | title | description */
.service-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
  align-items: baseline;
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 860px) {
  .service-item {
    grid-template-columns: 4rem minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: var(--sp-10);
    padding-block: var(--sp-10);
  }
}

.service-num {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}
.service-title {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.12;
}
@media (min-width: 768px) { .service-title { font-size: var(--text-3xl); } }
.service-desc {
  grid-column: 2 / -1;
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--secondary);
  max-width: 42ch;
}
@media (min-width: 860px) {
  .service-desc { grid-column: 3 / 4; }
}


/* ----------------------------------------------------------------
   8. CLOSING CTA PANEL
---------------------------------------------------------------- */
.panel--cta { align-items: center; }       /* centre the closing message */
.panel--cta .panel__content { text-align: left; }

.cta-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1.06;
  color: var(--white);
  max-width: 16ch;
  margin-bottom: var(--sp-10);
  transform-style: preserve-3d;
}
@media (min-width: 768px)  { .cta-headline { font-size: var(--text-5xl); } }
@media (min-width: 1000px) { .cta-headline { font-size: var(--text-6xl); } }

.cta-button {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background-color: var(--white);
  padding: var(--sp-4) var(--sp-10);
  border: 1px solid var(--white);
  transition: background-color 0.4s var(--ease-cinematic), color 0.4s var(--ease-cinematic);
}
.cta-button:hover { background-color: transparent; color: var(--white); }


/* ----------------------------------------------------------------
   9. FOOTER
---------------------------------------------------------------- */
.site-footer {
  background-color: var(--paper);
  border-top: 1px solid var(--hairline);
  padding-block: var(--sp-12);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.wordmark--footer { font-size: var(--text-xl); }
.footer-email {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--secondary);
  transition: color 0.2s ease;
}
.footer-email:hover { color: var(--ink); }
.footer-meta { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.footer-copy { font-family: var(--sans); font-size: var(--text-xs); color: var(--secondary); max-width: 40ch; }


/* ----------------------------------------------------------------
   10. CONTACT PAGE + FORM
---------------------------------------------------------------- */
.contact-main { padding-block: var(--section-y); }

/* Two columns on desktop: form on the left, image on the right */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-20);
    align-items: start;
  }
}

.contact-header { margin-bottom: var(--sp-12); max-width: 36rem; }
.contact-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1.06;
  margin-bottom: var(--sp-5);
}
@media (min-width: 768px) { .contact-headline { font-size: var(--text-5xl); } }
.contact-sub {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--secondary);
  max-width: 52ch;
}

/* Emphasised "we come to you in person" line */
.contact-kicker {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--ink);
  max-width: 30ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 768px) { .contact-kicker { font-size: var(--text-3xl); } }

/* The image column (sticky on desktop so it stays in view beside the form) */
.contact-aside { display: none; }
@media (min-width: 960px) {
  .contact-aside {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-8));
  }
}
.contact-aside__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.1);
}
.contact-aside__cap {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--secondary);
  margin-top: var(--sp-3);
}

/* Honeypot: hidden from people, visible to spam bots */
.bot-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }

.form-group { margin-bottom: var(--sp-6); }
.form-label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}
.required-mark { color: var(--ink); }
.optional-mark { font-weight: 400; color: var(--secondary); font-size: var(--text-xs); }

.form-input, .form-select, .form-textarea {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--ink);
  background-color: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: var(--sp-4);
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--secondary); opacity: 0.6; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--ink); }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpolyline points='1 1 6 6 11 1' fill='none' stroke='%236B6660' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 7rem; }

.form-submit {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--ink);
  border: 1px solid var(--ink);
  padding: var(--sp-4) var(--sp-10);
  margin-top: var(--sp-2);
  transition: background-color 0.4s var(--ease-cinematic), color 0.4s var(--ease-cinematic);
}
.form-submit:hover:not(:disabled) { background-color: transparent; color: var(--ink); }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.form-success {
  padding-block: var(--sp-8);
  max-width: 38rem;
  scroll-margin-top: calc(var(--header-h) + var(--sp-8));
  animation: success-in 0.7s var(--ease-out) both;
}
@keyframes success-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.form-success__mark {
  width: 3rem;
  height: 3rem;
  color: var(--ink);
  margin-bottom: var(--sp-6);
}
.form-success__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1.06;
  margin-bottom: var(--sp-4);
}
@media (min-width: 768px) { .form-success__title { font-size: var(--text-5xl); } }
.form-success__text {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--secondary);
  max-width: 46ch;
}
.form-success__note {
  font-family: var(--serif);
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--ink);
  max-width: 30ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 768px) { .form-success__note { font-size: var(--text-2xl); } }
.form-success__link {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--sp-8);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  transition: opacity 0.2s ease;
}
.form-success__link:hover { opacity: 0.55; }

.contact-fallback { margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--hairline); }
.contact-fallback__label { font-family: var(--sans); font-size: var(--text-sm); color: var(--secondary); margin-bottom: var(--sp-2); }
.contact-fallback__email {
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color 0.2s ease;
}
.contact-fallback__email:hover { text-decoration-color: var(--ink); }


/* ----------------------------------------------------------------
   11. INK-WIPE PAGE TRANSITION
   Chromium uses the native View Transitions API; Safari/Firefox use
   the JS-animated #inkOverlay fallback (see main.js).
---------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition { background-color: var(--ink); }

@keyframes vt-out { from { clip-path: inset(0 0 0 0); }     to { clip-path: inset(0 0 0 100%); } }
@keyframes vt-in  { from { clip-path: inset(0 100% 0 0); }  to { clip-path: inset(0 0 0 0); } }

::view-transition-old(root) { animation: vt-out 0.42s var(--ease-cinematic) forwards; }
::view-transition-new(root) { animation: vt-in 0.42s var(--ease-cinematic) 0.28s both; }

.ink-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--ink);
  z-index: 9999;
  pointer-events: none;
  transform: translateX(-100%);
  will-change: transform;
}


/* ----------------------------------------------------------------
   12. REVEAL HELPERS
   Initial hidden states only apply when JS is present (html.js),
   so the page is fully readable if scripts fail to load.
---------------------------------------------------------------- */
/* .reveal-up = the lighter 3D lift used by the Services list + small
   intros. (Panel headlines are flown in from depth by GSAP — see below.) */
html.js .reveal-up {
  opacity: 0;
  transform: perspective(1100px) translateY(46px) rotateX(9deg);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
html.js .reveal-up.is-revealed {
  opacity: 1;
  transform: perspective(1100px) translateY(0) rotateX(0deg);
  transition: opacity 0.7s var(--ease-out), transform 0.75s var(--ease-out);
}

/* ---- Fly-through scenes ----------------------------------------------
   Fly mode ON (capable desktop): main.js adds html.fly-on, pins the
   viewport (#fly) and stacks the scenes as absolute layers it cross-zooms.
   Fly mode OFF (phones / reduced-motion / no-JS): a clean scroll-snap
   page — every scene a full-height section that stops as you scroll. */
.fly-viewport { position: relative; }

html.fly-on .fly-viewport { height: 100svh; overflow: hidden; }
html.fly-on .fly-viewport .panel { position: absolute; inset: 0; min-height: 0; }

/* Native scroll-snap only helps the large-screen no-JS / reduced-motion
   fallback. On touch phones it fights momentum scrolling and the address-bar
   resize (the panels are taller than the screen), so it's left OFF there —
   that's what made the scene-to-scene scrolling feel broken on mobile. */
@media (min-width: 768px) {
  html:not(.fly-on) { scroll-snap-type: y proximity; }
  html:not(.fly-on) .fly-viewport .panel { scroll-snap-align: start; }
}
html:not(.fly-on) .panel__content { opacity: 1; }

/* "What we do" is a light breather scene: paper background, dark text. */
.panel--paper { align-items: center; color: var(--ink); background-color: var(--paper); }
.panel__bg--paper { background-color: var(--paper); }
.panel--paper .panel__content { color: var(--ink); }
.panel--paper .services__title,
.panel--paper .service-title { color: var(--ink); }
.panel--paper .service-item { padding-block: var(--sp-4); }

/* Background photo resting state (GSAP drives it in fly mode). */
html.js .panel__bg { transform: scale(1.2); will-change: transform; }


/* ----------------------------------------------------------------
   13. MOTION PREFERENCES & SMALL-SCREEN SOFTENING
---------------------------------------------------------------- */

/* Phones / tablets run the lightweight scroll effects instead of the pinned
   fly-through: main.js adds html.scroll-fx and drives a transform-only
   background parallax + content reveal on top of the native scroll-snap page
   (see main.js section 3). GPU hints below keep it buttery on touch. */
html.scroll-fx .panel__bg     { will-change: transform; }
html.scroll-fx .panel__content { will-change: opacity, transform; }

@media (max-width: 767px) {
  /* On phones the scenes flow as normal full-bleed sections. They grow with
     their copy and read top-to-bottom as you scroll, so nothing is anchored
     to the bottom and pushed off the top edge. The big top padding (which
     cleared the fixed header) is trimmed so tall copy fits the screen. */
  .fly-viewport .panel { align-items: center; }
  .panel__content {
    padding-top: calc(var(--header-h) + var(--sp-5));
    padding-bottom: var(--sp-12);
  }
  .hero .panel__content { padding-bottom: var(--sp-12); }

  /* The services scene carries the most copy — let it sit from the top and
     scroll naturally instead of pretending to fit one screen. */
  .fly-viewport .panel--paper { align-items: flex-start; }

  /* Keep the largest serif headlines from overflowing narrow screens. */
  .hero-headline,
  .panel__statement,
  .cta-headline { font-size: clamp(2.1rem, 8.5vw, var(--text-4xl)); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__line { animation: none; opacity: 0.4; }

  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }

  /* Everything visible, nothing moving */
  html.js .panel__content,
  html.js .reveal-up,
  html.js .panel__bg,
  .kinetic-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}