/* ==============================================================
   home-deferred.css — Sozosei Studio homepage, below-the-fold CSS.

   Split out of index.html's inline <style> block to shrink the
   render-blocking critical CSS delivered on first paint. Loaded via
   the same non-blocking media="print" swap technique already used
   for the deferred Google Fonts link in <head>.

   Content below is moved verbatim, in original source order, with
   no selector rewriting, consolidation, dedup, or minification:
   Intro, Selected Works, Services, Studio, Process, Testimonials,
   Clients, Footer, and the Contact Modal (minus its hidden/rest-
   state rule, which stays inline in index.html to prevent FOUC).
   ============================================================== */

  /* ==========================================================
     INTRO — same content/colors as the source file's #intro
     section. Continues directly below the hero in normal flow
     (no pin). The reveal itself is handled in JS: a footer-style
     content-settle parallax instead of the source's slide-over
     curtain — see initIntroSettle below.
     ========================================================== */
  #intro{
    position: relative; background: var(--warm-white); min-height: 100vh;
    display: flex; flex-direction: column;
    z-index: 20; overflow: hidden;
  }
  .intro-inner{
    flex: 1; display: flex; align-items: center;
    max-width: 1600px; margin: 0 auto; width: 100%;
    padding: 8rem 1.5rem 4rem;
  }
  .intro-content{ max-width: 60rem; }
  .intro-heading{
    font-family: var(--font-display); font-weight: 500; color: var(--ink);
    line-height: 1.05; font-size: clamp(2.6rem, 6.4vw, 4.6rem);
    margin-bottom: 1.75rem;
  }
  .intro-heading em{
    font-style: italic; font-weight: 500; color: var(--aka);
  }
  .intro-lead{
    font-family: var(--font-body); font-weight: 300; color: var(--stone);
    font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6;
    max-width: 60rem; margin-bottom: 3rem;
  }
	
		.intro-lead-2{
    font-family: var(--font-body); font-weight: 300; color: var(--stone);
    font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6;
    max-width: 60rem; margin-bottom: 4rem;
  } 
	
	
	
  .intro-cta-row{
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  }
  .btn-start{
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: var(--aka); color: var(--warm-white); text-decoration: none;
    font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
    padding: 1.05rem 1.75rem; border-radius: 999px;
    transition: background 0.35s ease, transform 0.35s ease;
  }
  .btn-start:hover{ background: var(--aka-deep); transform: translateY(-2px); }
  .btn-start .arrow-icon{
    width: 0.85em; height: 0.85em; flex-shrink: 0;
    transition: transform 0.35s ease;
  }
  .btn-start:hover .arrow-icon{ transform: translate(2px, -2px); }
  .link-work{
    color: var(--charcoal); text-decoration: none; font-family: var(--font-body);
    font-size: 0.95rem; font-weight: 400; border-bottom: 1px solid rgba(26,25,23,.3);
    padding-bottom: 2px; transition: border-color 0.3s ease, color 0.3s ease;
  }
  .link-work:hover{ color: var(--aka); border-color: var(--aka); }

  .intro-marquee{
    width: 100%; background: var(--aka); overflow: hidden;
    padding: 1.15rem 0; margin-bottom: 0;
  }
  .intro-marquee-track{
    display: flex; align-items: center; width: max-content;
    animation: intro-marquee-scroll 32s linear infinite;
    will-change: transform;
  }
  .intro-marquee-track .item{
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 0.85rem; font-weight: 300; color: var(--warm-white); white-space: nowrap;
    padding: 0 1.5rem;
  }
  .intro-marquee-track .dot{
    color: rgba(250,248,244,0.55); font-size: 0.8rem;
  }
  @keyframes intro-marquee-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  @media (max-width: 767px){
    .intro-marquee-track .item{ font-size: 0.72rem; padding: 0 1.1rem; }
  }

  /* ==========================================================
     LENIS smooth scroll (desktop only)
     ========================================================== */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }

  /* ==========================================================
     SELECTED WORKS — #work. Editorial, not a card grid: hairline
     rules separate four alternating compositions, each caption
     block pulled onto its image's edge via a shallow negative
     margin so the two layers read as one arrangement. An oversized
     ghost numeral sits behind each image for quiet depth.

     Every element the JS below reveals on scroll (kicker, title,
     range, subtitle, ghost numeral, item eyebrow/title/desc/cta) is
     visible by default here. Only gsap.set() hides them immediately
     before animating them back in — so if GSAP is ever slow, blocked
     or throws, the section still reads as a normal static page
     instead of staying blank. Motion is layered on top of content
     that was never actually hidden by CSS.
     ========================================================== */
/* ------------------------------------------------------------
   Section shell
   The section sits on --cream (a half-step warmer than the
   --warm-white intro above it) purely so the eye registers a new
   chapter starting — no rule, no shadow, just a tonal shift.
   ------------------------------------------------------------ */
.work-section{
  position: relative;
  background: var(--cream);
  padding: clamp(5rem, 11vw, 8rem) 0 clamp(6rem, 13vw, 10rem);
  overflow: hidden;
}

/* ------------------------------------------------------------
   Header: eyebrow, title, range indicator, subtitle
   ------------------------------------------------------------ */
.work-header{
  max-width: 1600px;
  margin: 0 auto clamp(3.5rem, 9vw, 6.5rem);
  padding: 0 1.5rem;
}

.work-kicker{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.5rem;
}
.work-kicker .kicker-dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--aka); flex-shrink: 0;
}

.work-title-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.work-title{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.work-title em{
  font-style: italic;
  font-weight: 500;
  color: var(--aka);
}

.work-range{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--stone);
  white-space: nowrap;
  padding-bottom: 0.6rem;
}
.work-range .range-current{ color: var(--ink); }
.work-range .range-sep{ margin: 0 0.35em; color: var(--mist); }

.work-subtitle{
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--stone);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  max-width: 30rem;
}

/* ------------------------------------------------------------
   Project list
   ------------------------------------------------------------ */
.work-list{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
}

.work-item{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(3rem, 8vw, 4.5rem) 0;
  border-top: 1px solid rgba(26, 25, 23, 0.1);
}
.work-list .work-item:last-child{
  border-bottom: 1px solid rgba(26, 25, 23, 0.1);
}

/* Visual block: oversized ghost numeral behind an image/video
   with rounded, softly-shadowed corners. */
.work-item-visual{
  position: relative;
  width: 100%;
}

.work-item-ghost{
  position: absolute;
  top: -0.35em;
  left: -0.02em;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(5.5rem, 24vw, 8rem);
  line-height: 1;
  color: rgba(26, 25, 23, 0.06);
  pointer-events: none;
  user-select: none;
}

.work-item-image-wrap,
.work-item-video-wrap{
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 5;
  background: var(--sand);
  box-shadow: 0 40px 90px rgba(26, 25, 23, 0.08);
}

.work-item-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Content block: overlaps the image on desktop only (see the
   min-width block below); stacks cleanly underneath on mobile. */
.work-item-content{
  position: relative;
  z-index: 2;
  background: var(--warm-white);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: -2.25rem;
  margin-right: 1.25rem;
  box-shadow: 0 24px 60px rgba(26, 25, 23, 0.07);
}

.work-item-eyebrow{
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.work-item-number{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--aka);
}
.work-item-category{
  position: relative;
  padding-left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}
.work-item-category::before{
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px;
  background: var(--stone);
  transform: translateY(-50%);
}

.work-item-title{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(1.85rem, 4.6vw, 2.6rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}

.work-item-desc{
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--stone);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 28rem;
  margin-bottom: 1.85rem;
}

.work-item-cta{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--charcoal);
  border-bottom: 1px solid rgba(26, 25, 23, 0.3);
  padding-bottom: 3px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.work-item-cta:hover{ color: var(--aka); border-color: var(--aka); }
.work-item-cta svg{
  width: 0.8em; height: 0.8em; flex-shrink: 0;
  transition: transform 0.35s ease;
}
.work-item-cta:hover svg{ transform: translate(2px, -2px); }

/* ------------------------------------------------------------
   "View All Works" — closes the list with a stronger, single
   destination CTA. Same restrained visual vocabulary as the rest
   of the section (mono uppercase label, canonical arrow icon,
   --aka hover fill) but a bordered pill rather than an underline,
   so it reads as the section's one clear next step rather than a
   fifth "view case study" link.
   ------------------------------------------------------------ */
.work-view-all{
  max-width: 1600px;
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding: 0 1.5rem;
  display: flex;
  justify-content: center;
}
.work-view-all-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.1rem;
  border: 1px solid rgba(26, 25, 23, 0.35);
  border-radius: 999px;
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.work-view-all-btn svg{
  width: 0.85em; height: 0.85em; flex-shrink: 0;
  transition: transform 0.35s ease;
}
.work-view-all-btn:hover{
  background: var(--aka);
  border-color: var(--aka);
  color: var(--warm-white);
}
.work-view-all-btn:hover svg{ transform: translate(2px, -2px); }

/* ------------------------------------------------------------
   Project 04 — video showcase
   Poster shows immediately (native <video poster>) — the element
   itself is opacity:1 from the start so the poster is never hidden
   while there is no playable source (e.g. before work04-motion.mp4
   exists). Once real frames are ready, .is-ready just marks that
   state for the badge/other hooks; it no longer gates the video's
   own visibility, so a missing source degrades to "poster only"
   rather than a blank box.
   ------------------------------------------------------------ */
/*.work-item-video-wrap{ background: var(--ink); }*/
.work-item-video-wrap{ background:none; }
.work-item-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.work-item-video-badge{
  position: absolute;
  left: 1.1rem; bottom: 1.1rem;
  z-index: 2;
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--warm-white);
  background: rgba(26, 25, 23, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}
.work-item-video-badge.is-visible{ opacity: 1; }
.work-item-video-badge .badge-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aka);
  animation: badgePulse 1.8s ease-in-out infinite;
}
@keyframes badgePulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.5; transform: scale(0.75); }
}

/* ==============================================================
   MOBILE-FIRST BASE (<= 880px) — already set above: single column,
   image above content, no overlap, generous stacked spacing.
   Ghost numeral scales down and sits tucked behind the image's
   top-left corner rather than sprawling off-canvas. Crossover
   matches the site's header/nav breakpoint (880/881px) so tablet
   portrait (e.g. iPad Mini at 744px) stays in the roomier stacked
   composition instead of a cramped alternating layout.
   ============================================================== */
@media (max-width: 880px){
  .work-item-content{
    width: 90%;
    margin-top: -1.5rem;
    margin-left: auto;
    margin-right: auto;
  }
  .work-item-ghost{ font-size: clamp(4.5rem, 30vw, 6rem); }
}

/* ==============================================================
   TABLET / DESKTOP (>= 881px) — alternating left/right composition.
   Matches the site's header/nav breakpoint.
   ============================================================== */
@media (min-width: 881px){
  .work-item{
    flex-direction: row;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .work-item--reverse{ flex-direction: row-reverse; }

  .work-item-visual{ flex: 0 0 58%; max-width: 58%; }
  .work-item-content{ flex: 0 0 42%; max-width: 42%; }

  .work-item-image-wrap,
  .work-item-video-wrap{ aspect-ratio: 16 / 11; }

  .work-item-ghost{
    top: -0.55em;
    left: -0.3em;
    font-size: clamp(6rem, 11vw, 9.5rem);
  }
  .work-item--reverse .work-item-ghost{ left: auto; right: -0.3em; text-align: right; }

  /* Overlap: content pulled onto the image's adjoining edge.
     margin-left pulls it left (toward an image on its left);
     margin-right pulls it right (toward an image on its right)
     for reversed rows. Physical margins work regardless of the
     row-reverse-driven visual order because they act on each
     item's own box within the flex line. */
  .work-item-content{
    margin-top: 0;
    margin-left: clamp(-4rem, -7%, -1.5rem);
    margin-right: 0;
  }
  .work-item--reverse .work-item-content{
    margin-left: 0;
    margin-right: clamp(-4rem, -7%, -1.5rem);
  }

  .work-item-video-badge{ left: 1.5rem; bottom: 1.5rem; }
}

@media (min-width: 1100px){
  .work-item-visual{ flex: 0 0 60%; max-width: 60%; }
  .work-item-content{ flex: 0 0 40%; max-width: 40%; padding: 3rem; }
}

/* ------------------------------------------------------------
   Content resilience note: every reveal element above (kicker,
   title, range, subtitle, ghost numeral, eyebrow, item title/desc/
   cta) is visible by default in this stylesheet. Only the JS
   (gsap.set) hides them immediately before animating them back in.
   That order matters: if GSAP is ever slow to arrive, blocked, or
   throws, the section still reads as a normal static page instead
   of silently staying blank — motion is an enhancement layered on
   top of content that was never actually hidden by CSS.

   Reduced motion: belt-and-suspenders — forces full visibility even
   if some future edit reintroduces a CSS opacity:0 anywhere above.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .work-kicker, .work-title, .work-range, .work-subtitle,
  .work-item-ghost, .work-item-eyebrow, .work-item-title,
  .work-item-desc, .work-item-cta, .work-item-video-badge,
  .work-view-all-btn{
    opacity: 1 !important;
  }
  .work-item-image{ transform: none !important; }
  .work-item-video-badge{ animation: none; }
  .badge-dot{ animation: none; }
}

/* ==========================================================
   SERVICES — #services. Same restrained motion language as
   Selected Works, deliberately different composition: no
   photography here, so depth comes from typography scale, a
   sticky index rail, and minimal SVG marks that draw themselves
   in rather than from overlapping imagery. Warm white (vs. Work's
   cream) keeps the page's tonal rhythm alternating chapter to
   chapter — cream, warm white, cream, warm white as you scroll.

   Primary interaction concept: a lightweight CSS position:sticky
   index rail (not a GSAP pin — costs nothing on the main thread)
   that tracks which service is centered in the viewport, paired
   with a per-row cinematic reveal (a hairline divider that draws
   itself, a word-staggered title, and a minimal SVG mark that
   draws its own stroke in). One coherent idea, not a checklist of
   effects.

   Same resilience rule as Work: every element the JS below
   reveals (header kicker/title/subtitle, each row's divider,
   eyebrow number, title words, description, support line, icon
   strokes) is fully visible/drawn by default here. JS only hides
   or undraws them immediately before animating back in — so a
   GSAP failure never leaves this section blank either.
   ========================================================== */
.services-section{
  position: relative;
  background: var(--warm-white);
  padding: clamp(5rem, 11vw, 8rem) 0 clamp(6rem, 13vw, 10rem);
}

.services-header{
  max-width: 1600px;
  margin: 0 auto clamp(3.5rem, 9vw, 6.5rem);
  padding: 0 1.5rem;
}
.services-kicker{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.5rem;
}
.services-kicker .kicker-dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--aka); flex-shrink: 0;
}

.services-title{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}
.services-title em{ font-style: italic; font-weight: 500; color: var(--aka); }

.services-subtitle{
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--stone);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  max-width: 32rem;
}

.services-shell{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
}

/* Rail hidden below the desktop breakpoint — see the min-width
   block further down. Each row's own eyebrow number (always
   present) carries that information on mobile instead. */
.services-rail{ display: none; }

.services-list{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.service-row{ position: relative; padding: clamp(2.75rem, 6vw, 4rem) 0; }

/* The divider is a real element (not a border) so it can be
   animated with scaleX as a "drawing itself in" reveal. */
.service-divider{
  position: absolute;
  top: 0; left: 0; width: 100%; height: 1px;
  background: rgba(26, 25, 23, 0.14);
  transform-origin: left;
}
.services-list .service-row:last-child{
  border-bottom: 1px solid rgba(26, 25, 23, 0.14);
}

.service-row-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow icon"
    "main main";
  align-items: center;
  gap: 1.25rem 1.5rem;
}

.service-eyebrow{ grid-area: eyebrow; }
.service-number{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--aka);
}

.service-main{ grid-area: main; display: flex; flex-direction: column; gap: 1rem; }

.service-title{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  transition: color 0.4s ease;
}
.service-title .word{ display: inline-block; }

.service-desc{
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--stone);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 32rem;
}

.service-support{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--stone);
  opacity: 1;
}

.service-icon{
  grid-area: icon;
  justify-self: end;
  width: 46px; height: 46px;
  color: var(--ink);
  flex-shrink: 0;
  transition: color 0.4s ease;
}
.service-icon svg{ width: 100%; height: 100%; display: block; }
.service-icon .icon-accent{ stroke: var(--aka); }
.service-icon .icon-dot{ fill: var(--aka); }

@media (hover: hover) and (pointer: fine){
  .service-row:hover .service-divider{ background: rgba(190, 0, 50, 0.35); }
  .service-row:hover .service-title{ color: var(--aka); }
  .service-row:hover .service-icon{ color: var(--aka-deep); }
}

/* ==============================================================
   DESKTOP (>= 900px) — sticky index rail appears; rows switch to
   a three-column architectural grid (number / title block / mark).
   ============================================================== */
@media (min-width: 900px){
  /* align-items intentionally left at the flex default (stretch):
     .services-rail must stand as tall as .services-list so its
     sticky inner has the full 5-row scroll range to travel within,
     rather than running out of room after the first row. */

  .services-rail{
    display: block;
    flex: 0 0 180px;
  }
  .services-rail-inner{
    position: sticky;
    top: 42vh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .services-rail-label{
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--stone);
  }
  .services-rail-count{ display: flex; align-items: baseline; gap: 0.4rem; }
  .services-rail-number{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(3.2rem, 5.6vw, 5rem);
    color: var(--ink);
    line-height: 1;
  }
  .services-rail-total{ font-family: var(--font-mono); font-size: 0.85rem; color: var(--stone); }

  .services-rail-track{
    position: relative;
    width: 1px; height: 180px;
    background: rgba(26, 25, 23, 0.14);
  }
  .services-rail-fill{
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--aka);
    transform: scaleY(1);
    transform-origin: top;
  }

  .service-row-inner{
    grid-template-columns: 110px 1fr 100px;
    grid-template-areas: "eyebrow main icon";
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .service-icon{ width: 56px; height: 56px; }
}

/* ------------------------------------------------------------
   Services resilience + reduced motion — same belt-and-suspenders
   approach as Work's block above, scoped to this section's own
   elements so it stays a clean append rather than an edit to the
   existing block.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .services-kicker, .services-title, .services-subtitle,
  .service-eyebrow, .service-title .word, .service-desc, .service-support{
    opacity: 1 !important;
  }
  .service-divider{ transform: scaleX(1) !important; }
  .services-rail-fill{ transform: scaleY(1) !important; }
}

/* ==============================================================
   STUDIO — About / philosophy. Work and Services sit on the light
   cream/warm-white pair; Studio flips to the dark end of the same
   palette (ink) for one deliberate beat before whatever follows —
   same red accent, same type system, just inverted, so it reads
   as a considered pause rather than a different site bolted on.

   Same resilience rule as Work/Services above: every element the
   JS below reveals (header kicker/title/subtitle, the statement's
   watermark kanji + quote + attribution, each principle's divider/
   number/title/text, the stat numbers) is fully visible/at-rest by
   default here. JS only hides things immediately before animating
   them back in, so a GSAP failure never leaves this section blank.
   ============================================================== */
.studio-section{
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(5rem, 11vw, 8rem) 0 clamp(6rem, 13vw, 10rem);
  overflow: hidden;
}

.studio-header{
  max-width: 1600px;
  margin: 0 auto clamp(3.5rem, 9vw, 6.5rem);
  padding: 0 1.5rem;
}
.studio-kicker{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 1.5rem;
}
.studio-kicker .kicker-dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--aka); flex-shrink: 0;
}

.studio-title{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--warm-white);
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}
.studio-title em{ font-style: italic; font-weight: 500; color: #D6003E; }

.studio-subtitle{
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--mist);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  max-width: 34rem;
}

/* ------------------------------------------------------------
   Shell: statement (pull-quote + watermark kanji) and numbered
   principles — stacked on mobile, side by side from 900px up.
   ------------------------------------------------------------ */
.studio-shell{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 8vw, 5rem);
}

.studio-statement{
  position: relative;
  padding-top: clamp(1rem, 3vw, 2rem);
  border-top: 1px solid rgba(245, 240, 232, 0.14);
}
/* 間 (ma) — the Japanese idea of purposeful space/interval; sits as
   an oversized, near-invisible watermark behind the quote, echoing
   the kanji already used in the hero and intro marquee. */
.studio-kanji{
  position: absolute; top: -0.4em; right: 0;
  font-family: var(--font-jp);
  font-size: clamp(6rem, 16vw, 11rem);
  line-height: 1;
  color: rgba(190, 0, 50, 0.14);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.studio-quote{
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  color: var(--warm-white);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.35;
  max-width: 30rem;
}
.studio-quote em{ font-style: italic; color: #D6003E; }
.studio-attribution{
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.studio-attribution::before{ content: ''; width: 24px; height: 1px; background: var(--aka); flex-shrink: 0; }

.studio-principles{ display: flex; flex-direction: column; }

.studio-principle{ position: relative; padding: clamp(1.75rem, 4vw, 2.5rem) 0; }
.studio-principle-divider{
  position: absolute;
  top: 0; left: 0; width: 100%; height: 1px;
  background: rgba(245, 240, 232, 0.14);
  transform-origin: left;
}
.studio-principles .studio-principle:last-child{
  border-bottom: 1px solid rgba(245, 240, 232, 0.14);
}

.studio-principle-inner{ display: flex; align-items: baseline; gap: 1.5rem; }
.studio-principle-number{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: #FF1946;
  flex-shrink: 0;
  padding-top: 0.3em;
}
.studio-principle-body{ display: flex; flex-direction: column; gap: 0.5rem; }
.studio-principle-title{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--warm-white);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  transition: color 0.4s ease;
}
.studio-principle-text{
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 28rem;
}

@media (hover: hover) and (pointer: fine){
  .studio-principle:hover .studio-principle-divider{ background: rgba(190, 0, 50, 0.4); }
  .studio-principle:hover .studio-principle-title{ color: var(--aka); }
}

/* ------------------------------------------------------------
   Stats strip — two columns on mobile, four from 900px up.
   ------------------------------------------------------------ */
.studio-stats{
  max-width: 1600px;
  margin: clamp(4rem, 9vw, 7rem) auto 0;
  padding: clamp(2.5rem, 5vw, 3rem) 1.5rem 0;
  border-top: 1px solid rgba(245, 240, 232, 0.14);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
}
.stat-item{ display: flex; flex-direction: column; gap: 0.5rem; }
.stat-number{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--warm-white);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
}
.stat-number .stat-suffix{ font-style: normal; color: var(--aka); font-size: 0.6em; margin-left: 0.1em; }
.stat-label{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

/* ------------------------------------------------------------
   Editorial imagery — one dominant primary frame with a smaller
   secondary frame overlapping its lower-right corner (never a
   symmetrical gallery grid), so the section picks up a human/
   material presence without disturbing the rhythm above and below
   it. Lives inside .studio-shell as a third grid item: plain
   in-flow stacking here at the mobile base (after the principles,
   matching DOM order) and pulled into the statement's own column
   via grid-area from 900px up — see that block further down.
   ------------------------------------------------------------ */
.studio-editorial{ margin-top: clamp(2.5rem, 6vw, 4rem); }
.studio-editorial-composition{
  position: relative;
  /* Reserves room (as a % of width, so it scales with the primary
     frame's own height) for the secondary frame's downward bleed
     past the primary's bottom edge, so nothing below is overlapped. */
  padding-bottom: 9%;
}
.studio-frame{
  position: relative;
  overflow: hidden;
  background: rgba(245, 240, 232, 0.05);
}
.studio-frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.12); /* permanent overscan buffer so the JS parallax below never exposes an edge */
}
.studio-frame--primary{ aspect-ratio: 1 / 1;  border: 3px solid rgba(245, 240, 232, 0.55); } /* ~20% shorter than the original 4/5 — see the 900px+ override below for the desktop proportion */
.studio-frame--secondary{
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 45%;
  aspect-ratio: 1 / 1;
  z-index: 1;
  border: 3px solid rgba(245, 240, 232, 0.55); /* hairline separation, matching the section's existing divider colour — no white frame */
}

/* ------------------------------------------------------------
   Closing CTA — one deliberate exit line. The button is
   deliberately NOT the site's rounded/pill CTA style: sharp
   corners, a hairline border, fills solid on hover — quieter and
   more gallery-label than "start a project" button chrome.
   ------------------------------------------------------------ */
.studio-cta{
  max-width: 1600px;
  margin: clamp(4rem, 9vw, 7rem) auto 0;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem 0;
  border-top: 1px solid rgba(245, 240, 232, 0.14);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.studio-cta-content{ max-width: 42rem; }
.studio-cta-headline{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--warm-white);
  font-size: clamp(2.2rem, 5.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.studio-cta-headline em{ font-style: italic; font-weight: 500; color: #D6003E; }
.studio-cta-text{
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--mist);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  margin-top: 1rem;
  max-width: 34rem;
}
.studio-cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-start;
  padding: 1rem 1.75rem;
  border: 1px solid rgba(245, 240, 232, 0.5);
  border-radius: 0;
  color: var(--warm-white);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.studio-cta-btn svg{ width: 0.9em; height: 0.9em; flex-shrink: 0; transition: transform 0.4s ease; }
.studio-cta-btn:hover{ background: var(--aka); border-color: var(--aka); }
.studio-cta-btn:hover svg{ transform: translate(2px, -2px); }

/* ==============================================================
   DESKTOP (>= 900px) — statement and principles run side by side;
   stats spread to four columns; the editorial frames unlock their
   asymmetric, partially-overlapping composition; the CTA becomes
   a single row (copy left, button right).
   ============================================================== */
@media (min-width: 900px){
  .studio-shell{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "statement principles"
      "editorial principles";
    align-items: start;
  }
  .studio-statement{ grid-area: statement; padding-right: clamp(2rem, 4vw, 3rem); }
  .studio-principles{ grid-area: principles; }
  /* Pinned into the statement's own column, directly below the
     manifesto quote — this is purely a visual placement (grid-area
     ignores DOM order), which is what keeps it after the principles
     in the mobile source order above without any duplicated markup. */
  .studio-editorial{ grid-area: editorial; margin-top: 0; padding-right: clamp(2rem, 4vw, 3rem); }
  /* Notably shorter on desktop than the mobile proportion — the left
     column's manifesto is naturally shorter than the right column's
     three principles, so getting the primary frame to finish "around/
     slightly below" the principles column (rather than the ~400-1000px
     overshoot a lighter reduction left behind) needs a wider crop than
     a simple percentage trim, not just a smaller version of the mobile
     ratio. Verified across 900-1920px: finishes a little short of the
     principles column at the narrow end and 100-170px below it from
     1200px up — never the large empty gap this replaces. */
  .studio-frame--primary{ aspect-ratio: 5 / 2; }
  .studio-stats{ grid-template-columns: repeat(4, 1fr); }

  .studio-cta{ flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3rem; }
  .studio-cta-btn{ flex-shrink: 0; }
}

/* ------------------------------------------------------------
   Studio resilience + reduced motion — same belt-and-suspenders
   approach as Work/Services' blocks above, scoped to this
   section's own elements.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .studio-kicker, .studio-title, .studio-subtitle,
  .studio-kanji, .studio-quote, .studio-attribution,
  .studio-principle-number, .studio-principle-title, .studio-principle-text,
  .stat-number, .stat-label,
  .studio-frame, .studio-cta-content, .studio-cta-btn{
    opacity: 1 !important;
  }
  .studio-principle-divider{ transform: scaleX(1) !important; }
  .studio-frame img{ transform: scale(1.12) !important; }
}

/* ==========================================================
   PROCESS — "How We Work". A deliberately different rhythm from
   Work/Services/Studio above: instead of a normal-flow reveal
   list, the four phases share one screen and cross-fade as the
   visitor scrolls through a single pinned stage.

   The base markup below IS the mobile experience — a plain
   stacked list, fully readable with no JS, below 900px, and
   under prefers-reduced-motion. The pinned cross-fade is purely
   a JS-added enhancement (the .is-cinematic class — see
   initProcess), never something this CSS assumes on its own, so
   a GSAP failure or a narrow viewport never leaves four phases
   silently stacked on top of each other.
   ========================================================== */
.process-section{
  position: relative;
  background: var(--cream);
  padding: clamp(5rem, 11vw, 8rem) 0 0;
  overflow: hidden;
}

.process-header{
  max-width: 1600px;
  margin: 0 auto clamp(3.5rem, 9vw, 6.5rem);
  padding: 0 1.5rem;
}
.process-kicker{
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 1.5rem;
}
.process-kicker .kicker-dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--aka); flex-shrink: 0; }

.process-title{
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(2.6rem, 6.6vw, 5rem); line-height: 0.98; letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}
.process-title em{ font-style: italic; font-weight: 500; color: var(--aka); }

.process-subtitle{
  font-family: var(--font-body); font-weight: 300; color: var(--stone);
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; max-width: 34rem;
}

/* ------------------------------------------------------------
   Stage — plain stacked list by default. Cinematic pin + cross-
   fade only arrives via the .is-cinematic class JS adds on
   desktop (never under reduced motion).
   ------------------------------------------------------------ */
.process-stage-wrap{ position: relative; z-index: 1; }
.process-stage{ position: relative; width: 100%; }
.process-stage-inner{
  max-width: 1600px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-direction: column;
}

.process-rail{ display: none; } /* desktop-cinematic only, see below */
.process-mark{ display: none; } /* desktop-cinematic only, see below */

.process-content{ position: relative; }

.process-phase{
  position: relative;
  padding: clamp(2.5rem, 6vw, 3.5rem) 0;
  border-top: 1px solid rgba(26, 25, 23, 0.12);
}
.process-content .process-phase:last-child{ border-bottom: 1px solid rgba(26, 25, 23, 0.12); }

.process-phase-eyebrow{
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--aka); margin-bottom: 0.85rem;
}
.process-phase-number{
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  color: var(--ink); font-size: clamp(3.2rem, 9vw, 5.5rem); line-height: 0.9;
  margin-bottom: 0.5rem;
}
.process-phase-title{
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.8rem, 4.4vw, 2.75rem); line-height: 1.05; margin-bottom: 1rem;
}
.process-phase-lede{
  font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ink);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.4; margin-bottom: 0.85rem;
}
.process-phase-text{
  font-family: var(--font-body); font-weight: 300; color: var(--stone);
  font-size: 0.98rem; line-height: 1.7; max-width: 30rem;
}

/* ------------------------------------------------------------
   Outro — a full editorial closing composition built from
   typography, hierarchy and negative space alone. An earlier pass
   echoed Stage 04's resolved geometric mark here as a second, static
   copy; removed per a later refinement — the symbol had already told
   its story resolving in Stage 04, and repeating it (even faded and
   enlarged) read as redundant rather than continuous. The process
   graphic now simply leaves with Stage 04 as the cover slides up
   over it; nothing replaces it here — the empty space is deliberate,
   not a placeholder waiting for a graphic.
   ------------------------------------------------------------ */
.process-outro{
  position: relative; z-index: 2; /* same reasoning as #intro over the hero: a pin's spacer always
     runs exactly one pinned-viewport past its wrap (GSAP mechanics, not a bug — see initProcess),
     so whatever follows needs its own opaque background + a higher stacking order to cleanly cover
     that tail end rather than letting the two visually bleed into each other. */
  background: var(--cream);
  max-width: 1600px; margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem clamp(5rem, 11vw, 8rem);
  border-top: 1px solid rgba(26, 25, 23, 0.12);
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2.5rem, 6vw, 3.5rem);
}
.process-outro-content{ max-width: 38rem; display: flex; flex-direction: column; gap: 1rem; }
.process-outro-eyebrow{
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 0.35rem;
}
.process-outro-eyebrow .kicker-dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--aka); flex-shrink: 0; }
.process-outro-statement{
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(2.4rem, 5.6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.01em;
}
.process-outro-editorial{
  font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--aka);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4;
}
.process-outro-text{
  font-family: var(--font-body); font-weight: 300; color: var(--stone);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.7; max-width: 30rem;
  margin-top: 0.15rem;
}
.process-outro-cta{
  display: inline-flex; align-items: center; gap: 0.75rem; align-self: flex-start;
  margin-top: 0.65rem; padding: 1rem 1.75rem;
  border: 1px solid rgba(26, 25, 23, 0.3); border-radius: 0;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: transparent; transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.process-outro-cta-arrow{ display: inline-block; transition: transform 0.4s ease; }
.process-outro-cta-arrow svg{ width: 0.85em; height: 0.85em; vertical-align: -0.08em; }
.process-outro-cta:hover{ background: var(--aka); border-color: var(--aka); color: var(--warm-white); }
.process-outro-cta:hover .process-outro-cta-arrow{ transform: translate(3px, -3px); }

/* A pinned section needs at least one viewport of real content
   after it, or the browser physically can't scroll far enough for
   the pin to ever reach its own end (a hard scrolling-mechanics
   fact, not a GSAP quirk) — so the final "everything resolves"
   beat would be unreachable. Scoped to the sibling combinator so
   it only asks for that room once the cinematic pin actually
   exists (desktop, motion allowed); mobile/reduced-motion never
   pin, so they never need it. Styled as a deliberate closing
   pause rather than padding-for-padding's-sake. Now that the mark
   is gone, the content column simply rests within that space —
   typography, hierarchy and intentional negative space carrying the
   composition on its own rather than balancing against a graphic. */
@media (min-width: 900px){
  .process-stage-wrap.is-cinematic ~ .process-outro{
    min-height: 100vh;
    flex-direction: row; align-items: center;
  }
  .process-outro-statement{ font-size: clamp(2.6rem, 6vw, 4.75rem); }
}

/* ==============================================================
   DESKTOP CINEMATIC (>= 900px, JS-added .is-cinematic only — see
   initProcess). The stage pins for one scroll pass across all
   four phases: a slim progress rail on the left, the active
   phase's number/title/text dead center, and an evolving
   abstract mark — a small compass-like motif echoing the hero's
   dot/line field — on the right, resolving from scattered to one
   precise mark as the four phases complete.

   Height = TOTAL_UNITS * 100vh (5.8 * 100vh — keep this in sync
   with initProcess's TOTAL_UNITS, same convention as the hero's
   COMPASS_VH/SLIDE_VH above): 4 units for the phases themselves,
   0.8 of a unit held completely still once phase 04's content AND
   the mark have both fully resolved, then 1 full unit that's
   inherently the pin-spacer's overflow past this wrap (see
   initCinematic's comment) — the window .process-outro's cover
   slides up through. Nothing needs to still be animating in that
   last unit, since everything already resolved and held before it.
   ============================================================== */
@media (min-width: 900px){
  /* ART-DIRECTION REFINEMENT — ISSUE 1: the header's own bottom
     margin was tuned for a normal in-flow section, but the pinned
     stage below it vertically centers its composition inside a
     full 100vh viewport — the two gaps stack, reading as unused
     space rather than deliberate whitespace. Trimmed here (desktop
     only; mobile's stacked, non-pinned layout is untouched). */
  .process-header{ margin-bottom: clamp(2rem, 4vw, 3.25rem); }

  .process-stage-wrap.is-cinematic{ height: 580vh; }
  .process-stage-wrap.is-cinematic .process-stage{
    height: 100vh; overflow: hidden; display: flex; align-items: center;
  }
  .process-stage-wrap.is-cinematic .process-stage-inner{
    width: 100%; flex-direction: row; align-items: center; gap: clamp(2.25rem, 4.5vw, 4.25rem);
    /* ISSUE 1, continued: flex centers this row's margin box, so a
       bottom-only margin biases the whole composition upward within
       the pinned viewport (by roughly half this value) without
       touching the centering logic itself — Stage 01 now reads as
       compositionally connected to the introduction above it rather
       than floating mid-screen. Combined with the header trim above,
       this closes ~15vh of the previously empty gap. */
    margin-bottom: 18vh;
  }

  .process-stage-wrap.is-cinematic .process-rail{
    display: flex; gap: 1.5rem; flex: 0 0 165px; align-self: center;
  }
  .process-rail-track{ position: relative; width: 1px; flex-shrink: 0; background: rgba(26, 25, 23, 0.14); }
  .process-rail-fill{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--aka); transform-origin: top; transform: scaleY(0);
  }
  .process-rail-list{ display: flex; flex-direction: column; justify-content: space-between; gap: 1.7rem; }
  .process-rail-item{ display: flex; flex-direction: column; gap: 0.3rem; opacity: 0.35; transition: opacity 0.5s ease; }
  .process-rail-item.is-active{ opacity: 1; }
  .process-rail-item.is-done{ opacity: 0.55; }
  .process-rail-num{
    font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--stone);
    transition: color 0.5s ease;
  }
  .process-rail-item.is-active .process-rail-num{ color: var(--aka); }
  .process-rail-label{ font-family: var(--font-body); font-size: 1rem; color: var(--ink); }

  /* ISSUE 2 — scale & horizontal balance: the rail trimmed slightly
     above (190px -> 165px) and the mark/content gap tightened above
     both hand more of the row to .process-content (still flex:1, so
     it simply receives more of what the rail/gap gave up), while the
     number/heading/lede/description and the mark itself all step up
     in scale below — filling the canvas with intentional hierarchy
     rather than leaving it as horizontal dead space. */
  .process-stage-wrap.is-cinematic .process-content{ flex: 1; min-width: 0; position: relative; min-height: 27rem; margin-left: 40px; }
  .process-stage-wrap.is-cinematic .process-phase{
    position: absolute; inset: 0; border: none; padding: 0;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0; /* JS-driven from the first onUpdate; this is only the safety default before it */
  }
  .process-stage-wrap.is-cinematic .process-phase:first-child{ opacity: 1; }

  .process-stage-wrap.is-cinematic .process-phase-number{ font-size: clamp(7rem, 13.5vw, 11rem); margin-bottom: 0.75rem; }
  .process-stage-wrap.is-cinematic .process-phase-title{ font-size: clamp(2.2rem, 5vw, 3.4rem); }
  .process-stage-wrap.is-cinematic .process-phase-lede{ font-size: clamp(1.25rem, 2.4vw, 1.65rem); }
  .process-stage-wrap.is-cinematic .process-phase-text{ max-width: 34rem; font-size: 1.03rem; }

  .process-stage-wrap.is-cinematic .process-mark{
    display: block; flex: 0 0 clamp(260px, 27vw, 400px); color: var(--ink); opacity: 0.9;
  }
  .process-mark svg{ width: 100%; height: auto; display: block; }
  .process-mark-ring{ opacity: 0.5; }
  .process-mark-line{ opacity: 0; }
  .process-mark-dot{ opacity: 0.4; }
  .process-mark-center{ fill: var(--aka); opacity: 0; transform-origin: 100px 100px; }
}

/* ------------------------------------------------------------
   Process reduced motion — belt-and-suspenders, same as every
   other section: even if .is-cinematic were somehow present,
   this guarantees every phase renders fully visible in place
   rather than absolutely-stacked-and-invisible.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .process-phase{ opacity: 1 !important; transform: none !important; }
  .process-outro-eyebrow, .process-outro-statement, .process-outro-editorial,
  .process-outro-text, .process-outro-cta{
    opacity: 1 !important; transform: none !important;
  }
}

/* ==========================================================
   TESTIMONIALS — "Client Voices". A deliberate change in
   atmosphere after How We Work's light, spacious CTA: the same
   dark end of the palette Studio already uses (--ink), reused
   rather than a new colour introduced, but composed completely
   differently — one large editorial quotation at a time, poster-
   scale, rather than Studio's statement-plus-principles grid.
   Nothing dramatic marks the entry; the section simply begins
   where the CTA ends (the same plain light-to-dark cut already
   established at Services -> Studio), and its own header reveal
   (see initTestimonialsHeaderReveal) is what makes the arrival
   feel considered rather than abrupt.

   Same resilience rule as every section above: the base markup
   here IS the mobile/no-JS/reduced-motion experience — three
   quotes in plain reading-order flow, each fully visible/at-rest
   by default, lines rendered as ordinary wrapping text (no forced
   breaks). The pinned, cross-fading "one quote at a time" stage
   with its line-by-line mask reveal is purely a JS-added
   enhancement (.is-cinematic, added only >=900px and never under
   reduced motion — see initTestimonials), so a GSAP failure or a
   narrow viewport never leaves quotes stacked illegibly on top of
   each other or lines clipped mid-mask.
   ========================================================== */
.testimonials-section{
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(5rem, 11vw, 8rem) 0 clamp(6rem, 13vw, 9rem);
  overflow: hidden;
}

.testimonials-header{
  max-width: 1600px;
  margin: 0 auto clamp(3.5rem, 9vw, 6.5rem);
  padding: 0 1.5rem;
}
.testimonials-kicker{
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist);
  margin-bottom: 1.5rem;
}
.testimonials-kicker .kicker-dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--aka); flex-shrink: 0; }

.testimonials-title{
  font-family: var(--font-display); font-weight: 500; color: var(--warm-white);
  font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.12; letter-spacing: -0.01em;
  max-width: 42rem;
  margin-bottom: 1.5rem;
}
.testimonials-title em{ font-style: italic; font-weight: 500; color: #D6003E; }

.testimonials-subtitle{
  font-family: var(--font-body); font-weight: 300; color: var(--mist);
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; max-width: 30rem;
}

/* ------------------------------------------------------------
   Stage — plain stacked quotes by default. Cinematic pin + cross-
   fade only arrives via the .is-cinematic class JS adds on
   desktop (never under reduced motion) — same convention as
   Process's .process-stage-wrap above.
   ------------------------------------------------------------ */
.testimonials-stage-wrap{ position: relative; z-index: 1; }
.testimonials-stage{ position: relative; width: 100%; }
.testimonials-stage-inner{
  max-width: 1600px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-direction: column;
}

/* Deliberately empty — see the @media rule below. Not padding-for-
   padding's-sake: this is the same "pinned sections need real
   trailing content or the browser can't scroll far enough to ever
   release them" mechanic documented at length on .process-outro
   above, except here nothing needs to visually fill it (no CTA to
   hand off to — that already happened in How We Work). A full quiet
   screen of negative space is itself the closing gesture for this
   section — the last voice settles, then the room goes still. */
.testimonials-close{ height: 1px; }

.testimonials-index{ display: none; } /* desktop-cinematic only, see below */

.testimonials-content{ position: relative; }

.testimonial{
  position: relative;
  margin: 0 0 clamp(3.5rem, 9vw, 6rem);
  max-width: 46rem;
}
.testimonials-content .testimonial:last-child{ margin-bottom: 0; }

.testimonial-quote-text{ margin: 0; }

/* Mobile/base: lines render as normal inline text — no forced
   breaks, no mask — so each quote reads as an ordinary paragraph
   at narrow widths. Only flips to block/masked lines under
   .is-cinematic below, where the wider canvas and the pin can
   support poster-scale, deliberately-broken lines. */
.tquote-line-mask{ display: inline; }
.tquote-line{ display: inline; }

.testimonial-quote-text{
  font-family: var(--font-display); font-weight: 500; color: var(--warm-white);
  font-size: clamp(1.5rem, 4.4vw, 1.9rem); line-height: 1.38; letter-spacing: -0.005em;
}
.testimonial-quote-text em{ font-style: italic; font-weight: 500; color: #D6003E; }

.testimonial-attribution{
  display: flex; flex-direction: column; gap: 0.2rem;
  margin-top: 1.5rem; padding-top: 1.25rem;
  font-style: normal;
}
.testimonial-attribution::before{ content: ''; display: block; width: 24px; height: 1px; background: var(--aka); margin-bottom: 1rem; }
.testimonial-name{
  font-family: var(--font-mono); font-style: normal; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-white);
}
.testimonial-role{
  font-family: var(--font-body); font-size: 0.85rem; color: var(--mist);
}

/* ------------------------------------------------------------
   Mobile-only refinements (< 900px — the stacked, non-pinned
   layout). Desktop-cinematic is untouched: these three rules are
   scoped to this breakpoint only and have no effect once
   .is-cinematic's own, more specific rules take over at >=900px.
   ------------------------------------------------------------ */
@media (max-width: 899px){
  /* 1 — a bit more air between each testimonial block, ~20px on
     top of the existing responsive spacing. */
  .testimonial{ margin-bottom: calc(clamp(3.5rem, 9vw, 6rem) + 20px); }

  /* 2 — nudge the role/company line a little brighter and a touch
     less light-weight so it reads more clearly, while staying
     visibly secondary to the name above it. */
  .testimonial-role{ color: var(--cream); font-weight: 400; }

  /* 4 — deliberate, consistent breathing space after the final
     testimonial's attribution before the section ends, regardless
     of exact viewport width (the prior responsive clamp could run
     up to ~117-144px at the top of this range). */
  .testimonials-section{ padding-bottom: 100px; }
}

/* ==============================================================
   DESKTOP CINEMATIC (>= 900px, JS-added .is-cinematic only — see
   initTestimonials). The stage pins for a short scroll pass across
   three quotes — deliberately much shorter than How We Work's
   process pin: TOTAL_UNITS below (2.1, i.e. 210vh) is well under
   half of Process's 580vh, since there's far less to read per
   quote and no reason to make anyone scroll a long distance for
   three sentences. Quote sits left/centre at poster scale; the
   restrained "01 — 03" index occupies the opposing upper-right
   edge, per the brief's asymmetric composition.
   ============================================================== */
@media (min-width: 900px){
  .testimonials-stage-wrap.is-cinematic{ height: 210vh; } /* keep in sync with
    initTestimonials' TOTAL_UNITS * 100vh */
  .testimonials-stage-wrap.is-cinematic ~ .testimonials-close{ min-height: 100vh; }
  .testimonials-stage-wrap.is-cinematic .testimonials-stage{
    height: 100vh; overflow: hidden; display: flex; align-items: center;
  }
  .testimonials-stage-wrap.is-cinematic .testimonials-stage-inner{
    width: 100%; flex-direction: row; align-items: flex-start; justify-content: space-between;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .testimonials-stage-wrap.is-cinematic .testimonials-content{
    flex: 0 0 auto; width: min(64%, 50rem); position: relative; min-height: 20rem;
    align-self: center;
    /* REFINEMENT — one shared reading position for all three quotes,
       nudged up from dead-centre to ~43% down the viewport (within the
       42-45% asked for), so there's slightly more negative space below
       the quote than above it. This is the ONE resting position every
       testimonial (including 01) now shares — see initCinematic's JS,
       which no longer applies any per-index offset. */
    transform: translateY(-6.5vh);
  }
  .testimonials-stage-wrap.is-cinematic .testimonial{
    position: absolute; inset: 0; margin: 0; max-width: none;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0; /* JS-driven from the first onUpdate; this is only the safety default before it */
  }
  .testimonials-stage-wrap.is-cinematic .testimonial:first-child{ opacity: 1; }

  .testimonials-stage-wrap.is-cinematic .testimonial-quote-text{
    font-size: clamp(2rem, 3vw, 3rem); line-height: 1.3;
  }

  /* The line-by-line mask reveal: each authored line becomes its
     own overflow:hidden mask, its inner span translated by JS from
     fully-hidden-below to resting — a wipe, not a fade. Only turned
     on here; the mobile/base rule above keeps lines as normal
     inline text so nothing forces a line break on narrow screens. */
  .testimonials-stage-wrap.is-cinematic .tquote-line-mask{ display: block; overflow: hidden; }
  .testimonials-stage-wrap.is-cinematic .tquote-line{ display: block; }

  .testimonials-stage-wrap.is-cinematic .testimonial-attribution{
    flex-direction: row; align-items: center; gap: 0.85rem;
    margin-top: clamp(2rem, 4vw, 3rem); padding-top: 0;
  }
  .testimonials-stage-wrap.is-cinematic .testimonial-attribution::before{ margin-bottom: 0; }

  /* Restrained progress device — "01 — 03" plus a hairline fill,
     occupying the opposing edge from the quote per the brief's
     asymmetric composition. Never a dot carousel. */
  .testimonials-stage-wrap.is-cinematic .testimonials-index{
    display: flex; flex-direction: column; align-items: flex-end; gap: 1rem;
    flex: 0 0 auto; align-self: flex-start; margin-top: 0.5rem;
  }
  .testimonials-index-numbers{ display: flex; align-items: baseline; gap: 0.4rem; }
  .testimonials-index-current, .testimonials-index-sep, .testimonials-index-total{
    font-family: var(--font-mono); letter-spacing: 0.08em;
  }
  .testimonials-index-current{ font-size: 0.85rem; color: #FF1946; }
  .testimonials-index-sep, .testimonials-index-total{ font-size: 0.85rem; color: var(--mist); opacity: 0.6; }
  .testimonials-index-track{ position: relative; width: 64px; height: 1px; background: rgba(245, 240, 232, 0.16); }
  .testimonials-index-fill{
    position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    background: var(--aka); transform-origin: left; transform: scaleX(0);
  }
}

/* ------------------------------------------------------------
   Testimonials reduced motion — belt-and-suspenders, same as
   every other section: guarantees every quote/line/attribution
   renders fully visible in place even if .is-cinematic were
   somehow present.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .testimonials-kicker, .testimonials-title, .testimonials-subtitle,
  .testimonial, .tquote-line, .testimonial-attribution{
    opacity: 1 !important; transform: none !important;
  }
}

/* ==============================================================
   CLIENTS — "In Good Company". A quiet return to the warm ivory
   background after Testimonials' dark chapter — no elaborate
   crossfade, just the section's own generous top padding and the
   header's ordinary fade-up doing the work of a "restrained
   upward reveal." Deliberately a directory, not a logo wall: each
   row pairs a number with the client's name set in real display
   type (large enough to stand in for a mark on its own) and an
   industry tag, separated by a hairline divider that draws itself
   in — the same idiom as Services' rows, just lighter and shorter,
   since this is meant to read as a calm credibility beat before
   the footer rather than another immersive chapter. A logo slot
   is present in the markup (pointing at assets/clients/client-
   NN.svg) so real marks can drop in later without restructuring;
   until then it fails silently via onerror (see HTML) and the
   client's name — always real, always-rendered text — carries the
   row on its own, so nothing here depends on an asset that may
   not exist yet.
   ============================================================== */
.clients-section{
  position: relative;
  background: var(--warm-white);
  padding: clamp(5rem, 11vw, 8rem) 0 clamp(5rem, 10vw, 7rem);
}

.clients-header{
  max-width: 1600px;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  padding: 0 1.5rem;
}
.clients-kicker{
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 1.5rem;
}
.clients-kicker .kicker-dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--aka); flex-shrink: 0; }

.clients-title{
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.clients-title em{ font-style: italic; font-weight: 500; color: var(--aka); }

.clients-subtitle{
  font-family: var(--font-body); font-weight: 300; color: var(--stone);
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; max-width: 30rem;
}

.clients-list{
  list-style: none; margin: 0;
  max-width: 1600px; margin-left: auto; margin-right: auto;
  padding: 0 1.5rem;
}

.client-row{ position: relative; padding: clamp(1.5rem, 3.5vw, 2.25rem) 0; }

/* A real element rather than a border, so it can be animated with
   scaleX as a "drawing itself in" reveal — same trick as Services'
   .service-divider. */
.client-divider{
  position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: rgba(26, 25, 23, 0.14);
  transform-origin: left;
}
.clients-list .client-row:last-child{ border-bottom: 1px solid rgba(26, 25, 23, 0.14); }

.client-row-inner{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 3vw, 2rem);
}

.client-number{
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--aka); flex: 0 0 auto; min-width: 2.5rem;
}

.client-name{
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.6rem, 2.8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.005em;
  margin: 0; flex: 1 1 320px; min-width: 0;
  transition: color 0.35s ease, transform 0.35s ease;
}

.client-industry{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone); opacity: 1;
  flex: 0 0 auto; margin-left: auto; white-space: nowrap;
  transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

/* REFINEMENT — min-width added alongside the existing (hover:hover)
   and (pointer:fine) check as a belt-and-suspenders guard: some
   touch devices report hover-capable/fine-pointer ambiguously, and
   iOS Safari can "stick" a :hover state after a tap. The extra
   width condition guarantees this red/shift interaction can only
   ever engage at desktop, never on a phone. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px){
  /* The shift lives on .client-row-inner (never touched by the
     scroll-reveal's own inline transform) rather than on the name/
     industry/logo individually — GSAP's reveal writes its own
     inline `transform` onto those once it plays, which would
     otherwise silently outrank this rule and swallow the hover
     shift. Moving translateX to the untouched wrapper shifts the
     whole row together as one clean unit instead. */
  .client-row-inner{ transition: transform 0.35s ease; }
  .client-row:hover .client-row-inner{ transform: translateX(4px); }
  .client-row:hover .client-divider{ background: rgba(190, 0, 50, 0.35); }
  .client-row:hover .client-name{ color: var(--aka); }
  .client-row:hover .client-industry{ color: var(--ink); opacity: 1; }
}

/* Narrow phones — let the industry tag drop to its own left-
   aligned line under the name rather than floating alone at the
   far right of a wrapped flex row. Nothing here changes what's
   shown, only how it wraps; hierarchy and spacing stay generous. */
@media (max-width: 599px){
  .client-row-inner{ align-items: flex-start; }
  .client-industry{ flex-basis: 100%; margin-left: 0; margin-top: 0.35rem; }
}

@media (prefers-reduced-motion: reduce){
  .clients-kicker, .clients-title, .clients-subtitle,
  .client-number, .client-name, .client-industry{
    opacity: 1 !important; transform: none !important;
  }
  .client-divider{ transform: scaleX(1) !important; }
}

/* ==============================================================
   FOOTER — the closing title card. Dark like Testimonials
   (var(--ink), not a new tone) so it reads as visually related
   rather than a fresh direction; the seam itself is a plain,
   deliberate hard cut between Selected Partners' warm-white and
   this section's own top padding — no gradient, no crossfade,
   no pin. Class names are all `.sitefooter-*`, deliberately never
   `.footer-*` — that bare prefix is already used by the mobile
   nav overlay's own footer block (light-background styling that
   would be illegible here), so this stays a clean, collision-free
   append rather than an edit to anything already shipping.
   ============================================================== */
.sitefooter{
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(0.5rem, 2vw, 1.25rem);
  overflow: hidden;
}

.sitefooter-inner{ max-width: 1600px; margin: 0 auto; padding: 0 1.5rem; }

/* -------- top: closing editorial statement + direct contact -------- */
.sitefooter-top{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: clamp(2.25rem, 6vw, 4rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  border-bottom: 1px solid rgba(245, 240, 232, 0.14);
}

.sitefooter-statement{
  font-family: var(--font-display); font-weight: 500; color: var(--warm-white);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.005em;
  max-width: 24rem;
}
.sitefooter-statement em{ font-style: italic; font-weight: 500; color: #D6003E; }

.sitefooter-contact{ display: flex; flex-direction: column; gap: 0.85rem; }
.sitefooter-contact-label{
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist);
}
.sitefooter-email{
  display: inline-flex; align-items: baseline; gap: 0.5rem; width: fit-content;
  font-family: var(--font-body); font-weight: 300; color: var(--warm-white);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid rgba(245, 240, 232, 0.3);
  padding-bottom: 0.3rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.sitefooter-email-arrow{ font-size: 0.8em; display: inline-block; transition: transform 0.3s ease; }
.sitefooter-email-arrow svg{ width: 1em; height: 1em; vertical-align: -0.1em; }

/* -------- practical grid: studio / navigation / social -------- */
.sitefooter-grid{
  display: flex; flex-wrap: wrap; gap: 2.25rem clamp(3rem, 8vw, 7rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-bottom: 1px solid rgba(245, 240, 232, 0.14);
}
.sitefooter-col{ display: flex; flex-direction: column; gap: 0.8rem; min-width: 120px; }
.sitefooter-col-label{
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: #8C857D; margin-top: 10px;
}
.sitefooter-col-value{ font-family: var(--font-body); font-weight: 300; font-size: 0.95rem; color: var(--mist); margin-top: -10px;}
	
	
	.sitefooter-col-link-contact{
  font-family: var(--font-body); font-weight: 300; font-size: 0.95rem; color: var(--mist);
  transition: color 0.25s ease; width: fit-content;
}
	
.sitefooter-col-link{
  font-family: var(--font-body); font-weight: 300; font-size: 0.95rem; color: var(--mist);
  transition: color 0.25s ease; width: fit-content;
}

.sitefooter-copyright{
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: #8C857D; padding: clamp(1.5rem, 3vw, 2rem) 0 0;
}
.sitefooter-legal-link{
  color: #948D85; text-decoration: underline; text-decoration-color: currentColor;
  text-underline-offset: 2px; opacity: 1; transition: color 0.25s ease, opacity 0.25s ease;
}

/* -------- signature: handwritten wordmark + hanko seal -------- */
.sitefooter-mark-row{ padding-top: clamp(1.5rem, 4vw, 3rem); }

/* Wordmark + hanko read as one signed mark: a row, bottom-aligned so
   the seal sits close to the wordmark's own baseline, then nudged up
   a little via transform (doesn't affect layout height) so it reads
   as a seal stamped beside a signature rather than sitting flush
   underneath it. Anchored bottom-left exactly as the wordmark alone
   was before — this wrapper is what carries that position now. */
.sitefooter-signature{
  display: inline-flex; align-items: flex-end;
  gap:0;
}

/* The real Sozosei brand mark (inline SVG, not plain text): a link
   back to #top so it still functions the way a masthead does, not
   purely decorative. Sized off the footer's own composition (a width
   clamp) rather than the artwork's native Illustrator viewBox — a
   deliberate studio signature at the end of the page, not a dominant
   headline. Scales from ~120px on small mobile up to ~310px on
   desktop (capped there, well within the approved 280–330px target),
   preserving the SVG's own aspect ratio. */
.sitefooter-wordmark{
  display: block; width: clamp(7.2rem, 28.4vw, 19.4rem);
  color: var(--warm-white); text-decoration: none;
}
.footer-wordmark-svg{
  display: block; width: 100%; height: auto;
  color: var(--warm-white); fill: currentColor;
}

/* The real hanko/seal artwork (two-colour SVG — aka red + warm ivory,
   both baked into the artwork itself, no currentColor trick needed).
   Deliberately small relative to the wordmark: a quiet stamp beside
   the signature, not a second logo. Raised a little above the
   wordmark's baseline via transform for a more intentional "seal
   applied beside a signature" composition, without changing the row's
   layout height (transform doesn't affect flow). */
.sitefooter-hanko{
  display: block; flex-shrink: 0;
  width: clamp(42px, 3.6vw, 58px);
  /* Optically aligned (not measured off the wordmark's SVG bounding
     box): the oversized handwritten "S" has a large lower flourish,
     so a box-bottom alignment reads as too low. Raised to sit beside
     the lower-middle/x-height of the "ozosei" lettering instead. */
  transform: translateY(-64px);
}
.sitefooter-hanko-svg{ display: block; width: 100%; height: auto; }

@media (hover: hover) and (pointer: fine) and (min-width: 900px){
  .sitefooter-email:hover{ color: var(--aka); border-color: var(--aka); }
  .sitefooter-email:hover .sitefooter-email-arrow{ transform: translate(3px, -3px); }
  .sitefooter-col-link:hover{ color: var(--aka); }
  .sitefooter-legal-link:hover{ color: #FF1946; opacity: 1; }
}

@media (max-width: 599px){
  .sitefooter-top{ align-items: flex-start; }
  .sitefooter-grid{ gap: 2rem clamp(2.5rem, 12vw, 4rem); }
}

/* Mobile-only wordmark bump: on small screens the studio-signature
   mark read a little too quiet, so it's sized up roughly 30–40% here
   (desktop's clamp above — the ≥900px case — is untouched). Left
   alignment and the row's own spacing/padding are unaffected, since
   only the wordmark's width changes; its height grows proportionally
   with it (fixed aspect ratio), which only shifts its top edge up by
   a few px, not "significantly." */
@media (max-width: 899px){
  .sitefooter-wordmark{ width: clamp(8.65rem, 33.2vw, 19.4rem); }
  .sitefooter-hanko{ width: clamp(30px, 8.2vw, 38px); transform: translateY(-26px); }
}

@media (prefers-reduced-motion: reduce){
  .sitefooter-statement, .sitefooter-contact-label, .sitefooter-email,
  .sitefooter-col, .sitefooter-copyright, .sitefooter-signature{
    opacity: 1 !important; transform: none !important;
  }
}

.modal-backdrop.open{ opacity: 1; visibility: visible; }

.modal{
  position: relative;
  background: var(--warm-white);
  border: 1px solid rgba(26, 25, 23, 0.1);
  border-radius: 3px;
  width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto;
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(2rem, 5vw, 3.25rem);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.5s var(--ease-out-expo);
}
.modal-backdrop.open .modal{ transform: translateY(0) scale(1); }

.modal-close{
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--sand); border: none; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s ease;
}
.modal-close svg{ width: 13px; height: 13px; }
.modal-close:hover{ background: var(--aka); color: var(--warm-white); transform: rotate(90deg); }

.modal-label{
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 1rem;
}
.modal-label .kicker-dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--aka); flex-shrink: 0; }

.modal-title{
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.7rem, 4vw, 2.35rem); line-height: 1.12; letter-spacing: -0.01em;
  margin-bottom: clamp(1.75rem, 4vw, 2.25rem);
  max-width: 26rem;
}
.modal-title em{ font-style: italic; font-weight: 500; color: var(--aka); }

.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.3rem; }
.form-row .form-group{ margin-bottom: 0; }
.form-group{ margin-bottom: 1.3rem; }
.form-group label{
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 0.55rem;
}
.form-group input, .form-group select, .form-group textarea{
  width: 100%; padding: 0.85rem 1rem;
  background: var(--cream); border: 1px solid var(--mist); border-radius: 3px;
  font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
  outline: none; appearance: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.form-group input::placeholder, .form-group textarea::placeholder{ color: var(--stone); opacity: 0.7; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  border-color: var(--aka); background: var(--warm-white);
}
.form-group select{
  cursor: pointer; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6560' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.form-group select:invalid{ color: var(--stone); }
.form-group textarea{ resize: vertical; min-height: 110px; line-height: 1.55; }

.form-submit{
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1rem; margin-top: 0.3rem;
  background: var(--aka); color: var(--warm-white); border: none; border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.35s ease, transform 0.35s ease;
}
.form-submit svg{ width: 0.85em; height: 0.85em; flex-shrink: 0; transition: transform 0.35s ease; }
.form-submit:hover{ background: var(--aka-deep); transform: translateY(-2px); }
.form-submit:hover svg{ transform: translate(2px, -2px); }
.form-submit:disabled{ opacity: 0.7; cursor: default; transform: none; }

.form-recaptcha-note{
  font-family: var(--font-body); font-size: 0.72rem; line-height: 1.6; color: var(--stone);
  margin-top: 1rem; text-align: center;
}
.form-recaptcha-note a{ color: var(--stone); text-decoration: underline; text-underline-offset: 2px; }
.form-recaptcha-note a:hover{ color: var(--aka); }

.form-success{ display: none; text-align: center; padding: 1.5rem 0 0.5rem; }
.form-success-icon{ font-family: var(--font-display); font-size: 2.2rem; color: var(--aka); margin-bottom: 0.75rem; }
.form-success-title{
  font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--ink); margin-bottom: 0.5rem;
}
.form-success-text{ font-family: var(--font-body); font-size: 0.9rem; color: var(--stone); }

@media (max-width: 640px){
  .modal-backdrop{ padding: 0.75rem; }
  .modal{
    max-height: 92vh;
    padding: 2.25rem 1.35rem 2rem;
  }
  .modal-close{ top: 1rem; right: 1rem; width: 2.1rem; height: 2.1rem; }
  .modal-title{ font-size: clamp(1.5rem, 7vw, 1.85rem); max-width: none; }
  .form-row{ grid-template-columns: 1fr; }
  .form-group input, .form-group select, .form-group textarea{ font-size: 1rem; padding: 0.9rem 1rem; }
  .form-recaptcha-note{ font-size: 0.72rem; line-height: 1.75; padding: 0 0.5rem; }
}

@media (prefers-reduced-motion: reduce){
  .modal{ transition: none; }
  .modal-close{ transition: background 0.3s ease, color 0.3s ease; }
  .modal-close:hover{ transform: none; }
}

/* Same rule as index.html: the reCAPTCHA v3 badge is hidden because the
   required Privacy Policy / Terms disclosure is already shown beneath the
   form's submit button (see .form-recaptcha-note above). */
.grecaptcha-badge{ visibility: hidden !important; }

