/* ============================================================
   Güler Mobilya & Dekorasyon — dijital showroom
   Palette from the brand logo: deep sky blue + cream.
   ============================================================ */

:root {
  --cream: #F7F2E7;
  --cream-deep: #EFE7D4;
  --ink: #14171C;
  --ink-soft: #52565C;
  --sky: #0B6FA8;
  --sky-deep: #083B50;
  --sky-bright: #1C8FD6;
  --line: #DBD2B9;
  --line-dark: rgba(247,242,231,0.18);

  --font-display: "Bricolage Grotesque", "Inter", -apple-system, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --header-h: 78px;
  --measure: 1240px;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: auto;
  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
}

/* Sideways drag is blocked on the content regions only. Putting this on html
   or body made them the containing block for fixed elements, which pinned the
   mobile menu to the top of the document instead of the screen — that is why
   it appeared to slide away as you scrolled. The menu sits outside these
   elements, so it stays anchored to the viewport. */
main, .site-header, .site-footer { overflow-x: clip; }

a { color: inherit; }
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 32px; }

/* ---------- Intro curtain ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--sky-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s var(--ease-premium), visibility 0.45s;
}
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* The independent boot watchdog must override even an exit curtain. */
html.fx-fallback .intro { display: none !important; pointer-events: none !important; }
html.fx-fallback .mobile-nav, html.fx-fallback .lightbox { display: none !important; }
html.fx-fallback .reveal, html.fx-fallback .reveal-stagger > * {
  opacity: 1 !important; transform: none !important; filter: none !important;
}
html.fx-fallback .split-word { transform: none !important; }
html.fx-fallback .pin-section { height: auto !important; }
html.fx-fallback .pin-viewport { position: static; height: auto; }
html.fx-fallback .pin-track { overflow-x: auto; transform: none !important; }
html.fx-fallback .cabinet-hero.is-enhanced { height: auto; }
html.fx-fallback .cabinet-stage { position: relative; top: auto; height: auto; min-height: 0; }
html.fx-fallback .cabinet-copy { opacity: 1; transform: none; pointer-events: auto !important; }
html.fx-fallback .cabinet-doors, html.fx-fallback .cabinet-invitation,
html.fx-fallback .cabinet-skip, html.fx-fallback .cabinet-progress { display: none; }
/* Keep ordinary navigation usable when the mobile-menu script is unavailable. */
html.fx-fallback .site-header .wrap {
  flex-wrap: wrap; height: auto; min-height: var(--header-h, 78px);
  gap: 10px; padding-top: 12px; padding-bottom: 12px;
}
html.fx-fallback .nav { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 10px 0; }
html.fx-fallback .nav-toggle { display: none; }
/* Raised on the way out of a page — instant, so no gap is ever visible
   between the old layout and the curtain. */
.intro.is-instant {
  transition: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
.intro-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(170px, 42vw, 227px); }
.intro img { display: block; width: 100%; height: auto; border-radius: 4px; }
.intro-loading-line { position: absolute; top: calc(100% + 22px); left: 25%; width: 50%; height: 1px; background: rgba(247,242,231,.65); transform-origin: center; animation: introPulse 1.1s var(--ease-premium) infinite alternate; }
@keyframes introPulse { from { opacity: 0.55; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

/* ---------- Eyebrow / rules ---------- */
.dim-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sky);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.dim-rule::before, .dim-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.4; }
.dim-rule.on-dark { color: var(--sky-bright); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247,242,231,0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.5s var(--ease-premium), background 0.5s var(--ease-premium);
}
.site-header.is-scrolled { background: rgba(247,242,231,0.95); border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h, 78px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-size: 18px; font-weight: 700; white-space: nowrap; }
.brand-logo { height: 44px; width: auto; display: block; border-radius: 3px; }
.nav { display: flex; gap: 30px; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-soft);
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium); }
.nav a:hover, .nav a.active { color: var(--sky); border-color: var(--sky); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; font-weight: 600; font-size: 15px;
  text-decoration: none; border-radius: 999px; border: 1px solid var(--sky);
  transition: background 0.4s var(--ease-premium), color 0.4s var(--ease-premium), transform 0.3s var(--ease-premium);
}
.btn-primary { background: var(--sky); color: var(--cream); }
.btn-primary:hover { background: var(--sky-deep); }
.btn-ghost { background: transparent; color: var(--sky); }
.btn-ghost:hover { background: var(--sky); color: var(--cream); }
.btn-light { background: var(--cream); color: var(--sky-deep); border-color: var(--cream); }
.btn-light:hover { background: transparent; color: var(--cream); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 120px 0 96px; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sky); margin-bottom: 22px; }
.hero h1 { font-size: clamp(46px, 7.4vw, 96px); line-height: 0.98; max-width: 13ch; }
.hero p.lede { font-size: 20px; color: var(--ink-soft); max-width: 54ch; margin-top: 26px; }
.hero-cta { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }




.scroll-hint {
  margin-top: 64px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sky);
}
.scroll-hint span { display: block; width: 34px; height: 1px; background: currentColor;
  animation: hintSlide 1.8s var(--ease-soft) infinite; transform-origin: left; }
@keyframes hintSlide { 0%,100% { transform: scaleX(0.4); opacity: 0.5; } 50% { transform: scaleX(1); opacity: 1; } }

/* ---------- Word-by-word headline reveal ---------- */
.split-line {
  display: block;
  overflow: hidden;
  padding: 0.16em 0.06em 0.22em;
  margin: -0.16em -0.06em -0.22em;
}
.fx-ready .split-word { display: inline-block; transform: translateY(165%); transition: transform 1s var(--ease-premium); }
.fx-ready .is-visible .split-word { transform: translateY(0); }

/* ---------- Sections ---------- */
section { padding: 110px 0; position: relative; }
section.alt { background: var(--cream-deep); }
section.dark { background: var(--sky-deep); color: var(--cream); }
section.dark h2, section.dark h3 { color: var(--cream); }
.section-head { max-width: 64ch; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; }
.section-head p { color: var(--ink-soft); margin-top: 18px; font-size: 17px; }
section.dark .section-head p { color: rgba(247,242,231,0.72); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px) scale(0.985); filter: blur(6px);
  transition: opacity 1.1s var(--ease-premium), transform 1.1s var(--ease-premium), filter 1.1s var(--ease-premium);
  will-change: opacity, transform, filter; }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.reveal-stagger > * { opacity: 0; transform: translateY(30px) scale(0.985); filter: blur(5px);
  transition: opacity 1s var(--ease-premium), transform 1s var(--ease-premium), filter 1s var(--ease-premium); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.11s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.27s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.35s; }

/* ---------- Pinned horizontal showcase ---------- */
.pin-section { position: relative; padding: 0; }
.pin-viewport { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden; }
.pin-head { max-width: var(--measure); margin: 0 auto 40px; padding: 0 32px; width: 100%; }
.pin-head h2 { font-size: clamp(28px, 3.6vw, 44px); }
.pin-head p { color: var(--ink-soft); margin-top: 12px; max-width: 52ch; }
.pin-track { display: flex; gap: 28px; padding: 0 32px; will-change: transform; }

.showcase-card {
  flex: 0 0 clamp(280px, 30vw, 400px);
  text-decoration: none; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.6s var(--ease-premium), box-shadow 0.6s var(--ease-premium);
}
.showcase-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(8,59,80,0.14); }
.showcase-media { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-deep); }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease-premium); }
.showcase-card:hover .showcase-media img { transform: scale(1.07); }
.showcase-body { padding: 22px 24px 26px; }
.showcase-body h3 { font-size: 20px; margin-bottom: 8px; }
.showcase-meta { font-family: var(--font-mono); font-size: 12px; color: var(--sky); }
.showcase-room { color: var(--ink-soft); font-size: 14px; margin-top: 8px; }

.pin-progress { max-width: var(--measure); margin: 36px auto 0; padding: 0 32px; width: 100%; }
.pin-progress-bar { height: 2px; background: var(--line); position: relative; }
.pin-progress-bar i { position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: var(--sky); transform: scaleX(0); transform-origin: left;
  will-change: transform; }

/* ---------- Guarantee / craft ---------- */
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.craft-col { display: flex; flex-direction: column; }
.craft-statement { font-family: var(--font-display); font-size: clamp(24px, 2.9vw, 36px);
  line-height: 1.18; font-weight: 700; max-width: 30ch; margin: 0 0 52px; }
.craft-points { list-style: none; padding: 0; margin: 0; }
.craft-points li { padding: 18px 0; border-top: 1px solid var(--line-dark); display: flex; gap: 16px; }
.craft-points li:last-child { border-bottom: 1px solid var(--line-dark); }
.craft-points .k { font-family: var(--font-mono); font-size: 12px; color: var(--sky-bright);
  flex: 0 0 34px; padding-top: 3px; }
.craft-points .v { color: rgba(247,242,231,0.82); font-size: 15.5px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat-num { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 54px); color: var(--cream); letter-spacing: -0.02em; }
.stat-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--sky-bright); margin-top: 8px; }

/* ---------- Process timeline ---------- */
.timeline { position: relative; }
.timeline-step { display: grid; grid-template-columns: 90px 1fr; gap: 32px;
  padding: 34px 0; border-top: 1px solid var(--line); align-items: start; }
.timeline-step:last-child { border-bottom: 1px solid var(--line); }
.timeline-num { font-family: var(--font-mono); font-size: 13px; color: var(--sky); padding-top: 6px; }
.timeline-step h3 { font-size: clamp(21px, 2.4vw, 28px); }
.timeline-step p { color: var(--ink-soft); margin: 10px 0 0; max-width: 60ch; font-size: 15.5px; }
.timeline-step { transition: background 0.5s var(--ease-premium); }
.timeline-step:hover { background: rgba(11,111,168,0.04); }

/* ---------- References: logos + comments ---------- */
.ref-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-bottom: 72px; }
.ref-logo { border: 1px solid var(--line); background: var(--cream); height: 96px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-soft); text-align: center; padding: 12px;
  transition: transform 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium); }
.ref-logo:hover { transform: translateY(-4px); border-color: var(--sky); }

.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testimonial-card { background: var(--cream); border: 1px solid var(--line); padding: 30px 28px;
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium); }
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(8,59,80,0.1); }
.testimonial-card p { font-family: var(--font-display); font-size: 18px; font-weight: 400;
  line-height: 1.5; margin: 0 0 18px; }
.testimonial-author { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  font-family: var(--font-mono); font-size: 12px; color: var(--sky); }
.testimonial-source { color: var(--ink-soft); }

/* ---------- Brand marquee ---------- */
.marquee { overflow: hidden; position: relative; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track {
  display: flex; gap: 20px; width: max-content;
  animation: marqueeSlide var(--marquee-dur, 34s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift, -50%)); }
}
.marquee-item { flex: 0 0 auto; border: 1px solid var(--line); background: var(--cream);
  padding: 22px 38px; font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--ink); white-space: nowrap;
  transition: color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium); }
.marquee-item:hover { color: var(--sky); border-color: var(--sky); }
.marquee-item small { display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 11px; color: var(--ink-soft); letter-spacing: 0.06em; margin-top: 4px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; max-width: 18ch; margin: 0 auto; }
.cta-band p { color: rgba(247,242,231,0.75); margin: 20px auto 36px; max-width: 52ch; }

/* ---------- Contact / footer ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-list dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sky); margin-top: 26px; }
.contact-list dt:first-child { margin-top: 0; }
.contact-list dd { margin: 8px 0 0; font-size: 16.5px; }
.contact-list dd a { text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease-premium); }
.contact-list dd a:hover { border-bottom-color: var(--sky); }
.map-frame { border: 1px solid var(--line); width: 100%; height: 100%; min-height: 340px; }

.social-row { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.social-row a { border: 1px solid var(--line); padding: 10px 20px; border-radius: 999px;
  text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background 0.4s var(--ease-premium), color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium); }
.social-row a:hover { background: var(--sky); color: var(--cream); border-color: var(--sky); }

.site-footer { border-top: 1px solid var(--line); padding: 34px 0; font-size: 13.5px; color: var(--ink-soft); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }

/* ---------- Portfolio grid (portfolyo page) ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card { text-decoration: none; color: var(--ink); display: block; border: 1px solid var(--line);
  background: var(--cream); overflow: hidden;
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium); }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(8,59,80,0.12); }
.card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-deep); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s var(--ease-premium); }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: 20px 22px 24px; }
.card-body h3 { font-size: 18px; margin-bottom: 6px; }
.card-meta { font-family: var(--font-mono); font-size: 12px; color: var(--sky); }
.card-room { color: var(--ink-soft); font-size: 14px; margin-top: 8px; }

/* ---------- Project detail ---------- */
.project-hero { padding-top: 56px; }
.project-title { font-size: clamp(32px, 4.6vw, 56px); max-width: 20ch; }
.measure-caption { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 13px; color: var(--sky);
  border-top: 1px solid var(--sky); border-bottom: 1px solid var(--sky);
  padding: 10px 0; margin: 26px 0 8px; }
.measure-caption .sep { color: var(--line); }
.slider { display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory;
  border: 1px solid var(--line); margin-top: 34px; }
.slider img { scroll-snap-align: start; width: 100%; flex: 0 0 100%; object-fit: cover;
  display: block; max-height: 640px; }
.slider-hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 12px; }
.project-body { max-width: 68ch; margin-top: 36px; font-size: 16.5px; }

/* ---------- Magnetic ---------- */
.magnetic { transition: transform 0.3s var(--ease-premium), background 0.4s var(--ease-premium), color 0.4s var(--ease-premium); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .craft-grid { grid-template-columns: 1fr; gap: 40px; }
  .ref-logos { grid-template-columns: repeat(3, 1fr); }
  .testimonials { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .nav { display: none; }
}
@media (max-width: 600px) {
  section { padding: 80px 0; }
  .hero { padding: 84px 0 64px; }
  .grid { grid-template-columns: 1fr; }
  .ref-logos { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }
  .brand { font-size: 15px; gap: 8px; }
  .brand-logo { height: 34px; }
  .timeline-step { grid-template-columns: 1fr; gap: 10px; }
  /* Pinned horizontal falls back to native swipe on small screens */
  .pin-section { height: auto !important; }
  .pin-viewport { position: static; height: auto; }
  .pin-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
    transform: none !important; }
  .showcase-card { flex-basis: 78vw; scroll-snap-align: start; }
  .pin-progress { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .split-word { transform: none !important; }
  .pin-section { height: auto !important; }
  .pin-viewport { position: static; height: auto; }
  .pin-track { overflow-x: auto; transform: none !important; }
  .intro { display: none; }
}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 12px 20px; background: #fff; color: #083B50; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.zoom-trigger { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.scope-shot .zoom-trigger { height: auto; }
.scope-panel[hidden] { display: none !important; }
.content-notice { border-left: 3px solid currentColor; padding: 10px 15px; font-size: 14px; }
.review-summary-note { font-size: 12px; opacity: .8; }

/* ============================================================
   EFFECTS LIBRARY — directional entrances, text effects,
   ambient motion, pointer interaction
   ============================================================ */

/* ---------- Directional entrances ---------- */
/* The fx-ready root is a gate, not an animated element. A transformed root
   makes fixed overlays span the document instead of the visible screen. */
body [class*="fx-"] { transition-property: opacity, transform, filter, clip-path;
  transition-duration: 1.05s; transition-timing-function: var(--ease-premium); will-change: opacity, transform; }

.fx-ready .fx-left      { opacity: 0; transform: translateX(-70px); }
.fx-ready .fx-right     { opacity: 0; transform: translateX(70px); }
.fx-ready .fx-up        { opacity: 0; transform: translateY(60px); }
.fx-ready .fx-down      { opacity: 0; transform: translateY(-60px); }
.fx-ready .fx-zoom      { opacity: 0; transform: scale(0.82); }
.fx-ready .fx-pop       { opacity: 0; transform: scale(0.6) rotate(-6deg); }
.fx-ready .fx-rotate    { opacity: 0; transform: rotate(-10deg) translateY(40px); }
.fx-ready .fx-flip      { opacity: 0; transform: perspective(900px) rotateX(52deg); transform-origin: bottom center; }
.fx-ready .fx-swing     { opacity: 0; transform: perspective(900px) rotateY(-38deg); transform-origin: left center; }
.fx-ready .fx-blurin    { opacity: 0; filter: blur(16px); transform: scale(1.04); }
.fx-ready .fx-drop      { opacity: 0; transform: translateY(-90px) rotate(6deg); }
.fx-ready .fx-rise      { opacity: 0; transform: translateY(90px) scale(0.94); }

.fx-ready .fx-left.is-in, .fx-ready .fx-right.is-in, .fx-ready .fx-up.is-in,
.fx-ready .fx-down.is-in, .fx-ready .fx-zoom.is-in, .fx-ready .fx-pop.is-in,
.fx-ready .fx-rotate.is-in, .fx-ready .fx-flip.is-in, .fx-ready .fx-swing.is-in,
.fx-ready .fx-blurin.is-in, .fx-ready .fx-drop.is-in, .fx-ready .fx-rise.is-in {
  opacity: 1; transform: none; filter: none;
}
.fx-pop.is-in { transition-timing-function: cubic-bezier(0.34, 1.8, 0.5, 1); }
.fx-drop.is-in { transition-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1); }

/* Staggered children inside a group */
.fx-ready .fx-group > * { opacity: 0; transform: translateY(46px) scale(0.96);
  transition: opacity 0.95s var(--ease-premium), transform 0.95s var(--ease-premium); }
.fx-ready .fx-group.is-in > * { opacity: 1; transform: none; }
/* Stagger delays are assigned in js/motion.js so any item count works. */

/* Alternating in-from-the-sides group */
.fx-ready .fx-alt > *:nth-child(odd)  { opacity: 0; transform: translateX(-64px); transition: opacity 1s var(--ease-premium), transform 1s var(--ease-premium); }
.fx-ready .fx-alt > *:nth-child(even) { opacity: 0; transform: translateX(64px);  transition: opacity 1s var(--ease-premium), transform 1s var(--ease-premium); }
.fx-ready .fx-alt.is-in > * { opacity: 1; transform: none; }


/* ---------- Text effects ---------- */
/* Per-character cascade */
.fx-ready .fx-chars .ch { display: inline-block; opacity: 0; transform: translateY(0.6em) rotate(6deg);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium); }
.fx-ready .fx-chars.is-in .ch { opacity: 1; transform: none; }
.fx-chars .ch.space { width: 0.32em; }

/* Wipe-in mask */
.fx-ready .fx-mask {
  clip-path: inset(0 100% 0 0);
  opacity: 0.001;
  transform: translateY(14px);
  transition: clip-path 1.25s var(--ease-premium),
              opacity 0.9s var(--ease-premium),
              transform 1.25s var(--ease-premium);
}
.fx-ready .fx-mask.is-in { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }

/* Underline sweep on section headings */
.fx-underline { position: relative; display: inline-block; }
.fx-underline::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 3px;
  width: 100%; background: var(--sky-bright); transform: scaleX(1); transform-origin: left;
  transition: transform 1.1s var(--ease-premium) 0.25s; }
.fx-ready .fx-underline::after { transform: scaleX(0); }
.fx-ready .fx-underline.is-in::after { transform: scaleX(1); }

/* Shimmer sweep across a heading */
.fx-shimmer { background-image: linear-gradient(100deg, currentColor 40%, var(--sky-bright) 50%, currentColor 60%);
  background-size: 250% 100%; background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; animation: shimmerSweep 5.5s var(--ease-soft) infinite; }
@keyframes shimmerSweep { 0%,72% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* ---------- Ambient floating shapes ---------- */
.floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.floater { position: absolute; border-radius: 50%; opacity: 0.16;
  border: 1.5px solid var(--sky); animation: floatDrift linear infinite; }
.floater.solid { background: var(--sky-bright); border: none; opacity: 0.13; }
.floater.square { border-radius: 4px; }
@keyframes floatDrift {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  50%  { transform: translateY(-34px) translateX(20px) rotate(180deg); }
  100% { transform: translateY(0) translateX(0) rotate(360deg); }
}

/* ---------- Pointer spotlight on dark bands ---------- */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%;
  left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(28,143,214,0.22), transparent 68%);
  pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease-soft); z-index: 0;
}
.spotlight.is-hot::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ---------- 3D tilt on cards ---------- */
.tilt { transform-style: preserve-3d; transition: transform 0.35s var(--ease-premium); }
.tilt-inner { transform: translateZ(28px); }

/* ---------- Icon / number pop badges ---------- */
.pop-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--sky);
  color: var(--cream); font-family: var(--font-mono); font-size: 14px;
  transition: transform 0.5s cubic-bezier(0.34, 1.7, 0.5, 1); }
.timeline-step:hover .pop-badge { transform: scale(1.16) rotate(8deg); }

/* ---------- Reduced motion (final override) ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="fx-"], .fx-group > *, .fx-alt > * {
    opacity: 1 !important; transform: none !important; filter: none !important;
    clip-path: none !important; transition: none !important; animation: none !important;
  }
  .fx-chars .ch { opacity: 1 !important; transform: none !important; }
  .fx-underline::after { transform: scaleX(1) !important; }
  .fx-shimmer { animation: none !important; -webkit-text-fill-color: currentColor; }
  .floaters, .spotlight::before { display: none !important; }
}

/* Keep section content above ambient floaters */
section > .wrap { position: relative; z-index: 2; }
.pin-viewport > * { position: relative; z-index: 2; }
.floaters { z-index: 0 !important; }

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.portfolio-hero { padding-bottom: 56px; }
.portfolio-section { padding-top: 56px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.filter-chip {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  transition: background 0.4s var(--ease-premium), color 0.4s var(--ease-premium),
              border-color 0.4s var(--ease-premium), transform 0.3s var(--ease-premium);
}
.filter-chip:hover { transform: translateY(-2px); border-color: var(--sky); color: var(--sky); }
.filter-chip.is-active { background: var(--sky); border-color: var(--sky); color: var(--cream); }

.masonry {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
  grid-auto-flow: dense;
}
.mcard {
  grid-column: span 2;
  position: relative; display: block; text-decoration: none; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); overflow: hidden;
  transition: transform 0.6s var(--ease-premium), box-shadow 0.6s var(--ease-premium),
              opacity 0.5s var(--ease-premium);
}
.mcard-wide { grid-column: span 4; }
.mcard-tall { grid-column: span 3; }
.mcard:hover { transform: translateY(-10px); box-shadow: 0 26px 60px rgba(8,59,80,0.16); }
.mcard.is-hidden { display: none; }

.mcard-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-deep); }
.mcard-wide .mcard-media { aspect-ratio: 16/9; }
.mcard-tall .mcard-media { aspect-ratio: 3/4; }
.mcard-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--ease-premium), filter 0.6s var(--ease-premium); }
.mcard:hover .mcard-media img { transform: scale(1.08); }
.mcard-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,59,80,0) 45%, rgba(8,59,80,0.62));
  opacity: 0; transition: opacity 0.6s var(--ease-premium); }
.mcard:hover .mcard-veil { opacity: 1; }
.mcard-open {
  position: absolute; left: 24px; bottom: 22px; color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.55s var(--ease-premium) 0.06s, transform 0.55s var(--ease-premium) 0.06s;
}
.mcard-open em { font-style: normal; display: inline-block; transition: transform 0.4s var(--ease-premium); }
.mcard:hover .mcard-open { opacity: 1; transform: translateY(0); }
.mcard:hover .mcard-open em { transform: translateX(6px); }

.mcard-body { padding: 22px 24px 26px; }
.mcard-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.mcard-room { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sky); }
.mcard-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.mcard-body h3 { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.15; }
.mcard-meta { color: var(--ink-soft); font-size: 14px; margin-top: 8px; }

.filter-empty[hidden] { display: none !important; }
.filter-empty { text-align: center; color: var(--ink-soft); padding: 60px 0; font-size: 16px; }

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.project-top { padding: 64px 0 44px; position: relative; }
.back-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 30px; }
.back-link em { font-style: normal; transition: transform 0.4s var(--ease-premium); }
.back-link:hover em { transform: translateX(-5px); }
.project-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sky); margin-bottom: 18px; }
.project-title { font-size: clamp(34px, 5.6vw, 72px); line-height: 1.0; max-width: 18ch; }

.spec-row { display: grid; grid-template-columns: repeat(4, auto); gap: 44px;
  justify-content: start; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
.spec-row > div { min-width: 0; }
.spec-row dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sky); }
.spec-row dd { margin: 8px 0 0; font-size: 16.5px; font-weight: 500;
  white-space: normal !important; overflow-wrap: break-word; }

.project-cover-wrap { padding: 0 0 20px; }
.project-cover { max-width: 1480px; margin: 0 auto; padding: 0 32px; }
.project-cover img { width: 100%; max-height: 76vh; object-fit: cover; display: block;
  border: 1px solid var(--line); cursor: zoom-in; }

.project-intro { padding: 72px 0 40px; }
.project-body { max-width: 68ch; font-size: 17.5px; color: var(--ink-soft); }

/* ---------- Scope tabs ---------- */
.scope-section { padding-top: 92px; }
.scope-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; }
.scope-tab {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 15px 26px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--cream); color: var(--ink-soft);
  transition: background 0.45s var(--ease-premium), color 0.45s var(--ease-premium),
              border-color 0.45s var(--ease-premium), transform 0.35s var(--ease-premium);
}
.scope-tab:hover { transform: translateY(-3px); border-color: var(--sky); color: var(--sky); }
.scope-tab.is-active { background: var(--sky); border-color: var(--sky); color: var(--cream); }
.scope-tab-num { font-family: var(--font-mono); font-size: 11px; opacity: 0.75; }

.scope-panel { display: none; }
.scope-panel.is-active { display: block; animation: panelIn 0.75s var(--ease-premium); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.scope-head { max-width: 62ch; margin-bottom: 40px; }
.scope-head h3 { font-size: clamp(24px, 3vw, 36px); }
.scope-head p { color: var(--ink-soft); margin-top: 14px; font-size: 16.5px; }

.scope-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.scope-shot { margin: 0; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--cream); }
.scope-shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: zoom-in;
  transition: transform 0.9s var(--ease-premium), filter 0.6s var(--ease-premium); }
.scope-shot:hover img { transform: scale(1.06); }
.zoom-cue { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(8,59,80,0.82); color: var(--cream);
  display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1;
  opacity: 0; transform: scale(0.7); pointer-events: none;
  transition: opacity 0.45s var(--ease-premium), transform 0.45s cubic-bezier(0.34,1.7,0.5,1); }
.scope-shot:hover .zoom-cue { opacity: 1; transform: scale(1); }
.scope-shot figcaption { padding: 14px 18px 16px; font-family: var(--font-mono);
  font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line); }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,20,28,0.96);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  opacity: 0; transition: opacity 0.45s var(--ease-premium); }
/* The `hidden` attribute must win over display:flex, otherwise the closed
   lightbox stays as an invisible full-screen layer and eats every click. */
.lightbox[hidden] { display: none !important; }
.lightbox.is-open { opacity: 1; }
.lb-stage { max-width: 92vw; max-height: 78vh; display: flex; align-items: center; justify-content: center;
  overflow: auto; }
.lb-stage img { max-width: 92vw; max-height: 78vh; object-fit: contain; cursor: zoom-in;
  transition: transform 0.55s var(--ease-premium); transform-origin: top left; }
.lb-stage img.is-zoomed { transform: scale(2); cursor: zoom-out; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(247,242,231,0.1);
  border: 1px solid rgba(247,242,231,0.28); color: var(--cream); cursor: pointer;
  border-radius: 50%; width: 52px; height: 52px; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.35s var(--ease-premium), transform 0.35s var(--ease-premium); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--sky); transform: scale(1.1); }
.lb-close { top: 26px; right: 28px; }
.lb-prev { left: 26px; top: 50%; margin-top: -26px; }
.lb-next { right: 26px; top: 50%; margin-top: -26px; }
.lb-bar { display: flex; gap: 20px; align-items: baseline; margin-top: 26px;
  color: var(--cream); font-family: var(--font-mono); font-size: 13px; padding: 0 24px; text-align: center; }
#lbCounter { color: var(--sky-bright); flex-shrink: 0; white-space: nowrap; }
#lbCaption { min-width: 0; overflow-wrap: anywhere; }
.lb-hint { margin-top: 10px; color: rgba(247,242,231,0.5);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 0 24px; text-align: center; }
html.lb-open, body.lb-open { overflow: hidden; overscroll-behavior: none; }
.lb-stage { overscroll-behavior: contain; }

@media (max-width: 1000px) {
  .masonry { grid-template-columns: repeat(4, 1fr); }
  .mcard, .mcard-wide, .mcard-tall { grid-column: span 2; }
  .mcard-wide .mcard-media, .mcard-tall .mcard-media { aspect-ratio: 4/3; }
  .spec-row { grid-template-columns: repeat(2, auto); gap: 28px 44px; }
}
@media (max-width: 600px) {
  .masonry { grid-template-columns: 1fr; gap: 20px; }
  .mcard, .mcard-wide, .mcard-tall { grid-column: span 1; }
  .spec-row { grid-template-columns: 1fr; gap: 20px; }
  .scope-tab { font-size: 14px; padding: 12px 18px; }
  .lb-prev, .lb-next { width: 44px; height: 44px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .scope-panel.is-active { animation: none !important; }
  .lb-stage img { transition: none !important; }
}

/* ============================================================
   INNER PAGES — process / references / contact
   ============================================================ */
.page-hero { position: relative; padding: 104px 0 84px; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(40px, 6.2vw, 78px); line-height: 1.0; max-width: 15ch; }
.page-hero .lede { font-size: 19px; color: var(--ink-soft); max-width: 56ch; margin-top: 24px; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 24px 44px 24px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.9vw, 21px);
  transition: color 0.4s var(--ease-premium);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--sky); }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 24px; color: var(--sky); line-height: 1;
  transition: transform 0.45s var(--ease-premium);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { margin: 0 0 26px; color: var(--ink-soft); max-width: 68ch; font-size: 16px;
  animation: faqIn 0.55s var(--ease-premium); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Review CTA ---------- */
.review-cta { margin-top: 56px; padding: 34px 36px; border: 1px solid var(--line);
  background: var(--cream-deep); display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; }
.review-cta p { margin: 0; color: var(--ink-soft); max-width: 56ch; }

/* ---------- Contact info cards ---------- */
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.info-card {
  display: flex; flex-direction: column; gap: 12px; min-height: 200px;
  padding: 30px 28px; text-decoration: none; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium),
              border-color 0.5s var(--ease-premium);
}
.info-card:not(.is-static):hover { transform: translateY(-7px); border-color: var(--sky);
  box-shadow: 0 18px 44px rgba(8,59,80,0.12); }
.info-key { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sky); }
.info-val { font-family: var(--font-display); font-weight: 700; font-size: 19px;
  line-height: 1.35; flex: 1; }
.info-cue { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft);
  transition: color 0.4s var(--ease-premium); }
.info-card:not(.is-static):hover .info-cue { color: var(--sky); }
.info-card.is-static { background: var(--cream); cursor: default; }

.social-block { margin-top: 40px; }
.social-block .info-key { display: block; margin-bottom: 14px; }

/* ---------- Wide map ---------- */
.map-section { padding-bottom: 0; }
.map-wide { margin-top: 20px; border-top: 1px solid var(--line); }
.map-wide iframe { display: block; width: 100%; height: 460px; border: 0; }

@media (max-width: 1000px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page-hero { padding: 76px 0 56px; }
  .info-grid { grid-template-columns: 1fr; }
  .info-card { min-height: 0; }
  .review-cta { flex-direction: column; align-items: flex-start; }
  .map-wide iframe { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item p { animation: none !important; }
}

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium); }
.footer-links a:hover { color: var(--sky); border-bottom-color: var(--sky); }

/* Legal links stay at the right of the footer, with a readable phone layout. */
.footer-navigation { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; }
.footer-navigation .footer-links { justify-content: flex-start; }
.footer-legal { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.footer-legal a:hover, .footer-legal a[aria-current="page"] { color: var(--sky); }
.legal-page { padding: calc(var(--header-h) + 64px) 0 80px; }
.legal-page .wrap { max-width: 920px; }
.legal-heading h1 { font-size: clamp(32px, 5vw, 58px); line-height: 1.12; overflow-wrap: anywhere; }
.legal-date { color: var(--ink-soft); font-size: 14px; margin: 20px 0 30px; }
.legal-copy { margin-top: 40px; overflow-wrap: anywhere; }
.legal-copy h2 { font-size: clamp(23px, 3vw, 30px); margin: 42px 0 16px; line-height: 1.3; }
.legal-copy h3 { font-size: 20px; margin: 28px 0 10px; }
.legal-copy p, .legal-copy li {
  line-height: 1.8;
  text-align: justify;
  text-align-last: start;
  hyphens: auto;
}
.legal-copy ul { padding-left: 24px; }
.legal-copy li + li { margin-top: 12px; }
.legal-copy a, .legal-related a { color: var(--sky-deep); text-decoration: underline; text-underline-offset: 4px; }
.legal-related { display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 40px; }
.legal-related a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 700px) {
  .footer-legal { gap: 4px 16px; }
  .legal-page { padding-top: calc(var(--header-h) + 36px); }
}

/* ============================================================
   TEXT WRAPPING FIXES
   ============================================================ */
/* Phone numbers, buttons and short labels must never break mid-value */
a[href^="tel:"],
a[href^="mailto:"],
.btn,
.marquee-item,
.spec-row dd,
.measure-caption span,
.stat-num,
.mcard-count { white-space: nowrap; }

/* Contact values: keep the phone on one line, allow the address to wrap normally */
.info-val { overflow-wrap: normal; }
.info-card[href^="tel:"] .info-val,
.info-card[href^="mailto:"] .info-val { white-space: nowrap; overflow-wrap: normal; }

/* Long email/phone inside the definition list */
.contact-list dd { overflow-wrap: normal; }
.contact-list dd a[href^="tel:"],
.contact-list dd a[href^="mailto:"] { white-space: nowrap; }

/* CTA band phone button — never wrap, shrink instead on very small screens */
.cta-band .btn { white-space: nowrap; }
@media (max-width: 400px) {
  .cta-band .btn { font-size: 14px; padding: 14px 22px; }
  .info-card[href^="mailto:"] .info-val { font-size: 16px; }
}

/* Headings: prevent orphan single words on narrow columns */
.section-head h2, .cta-band h2, .page-hero h1 { text-wrap: balance; }

/* ============================================================
   HERO BACKGROUND — diagonal gradient ribbons
   Flow runs bottom-left -> upper-right. Density is pushed into
   the upper-right so the headline sits on clean paper, and a
   scrim guarantees contrast behind the text.
   ============================================================ */
.hero-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(100% 100% at 82% 14%, #000 6%, rgba(0,0,0,0.5) 40%, transparent 74%);
  mask-image: radial-gradient(100% 100% at 82% 14%, #000 6%, rgba(0,0,0,0.5) 40%, transparent 74%);
}
.hero-lines svg { position: absolute; inset: -32%; width: 164%; height: 164%; display: block; }
.hero-lines .line-group {
  transform-origin: center;
  transition: transform 1.2s var(--ease-premium);
  will-change: transform;
}
.hero-lines path {
  fill: none; stroke-linecap: round; transform-origin: center;
  animation: ribbonFlow var(--dur, 17s) var(--ease-soft) infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes ribbonFlow {
  0%   { transform: translate3d(0, 0, 0) scaleY(1); }
  50%  { transform: translate3d(-2.6%, -1.6%, 0) scaleY(1.13); }
  100% { transform: translate3d(2.2%, 1.8%, 0) scaleY(0.9); }
}

/* Readability scrim — paper tone sweeping up from the lower-left */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(38deg,
    var(--cream) 0%, var(--cream) 27%,
    rgba(247,242,231,0.88) 45%,
    rgba(247,242,231,0.44) 61%,
    rgba(247,242,231,0) 79%);
}

/* Glows kept to the right, away from the copy */
.hero-glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(80px); opacity: 0.55; }
.hero-glow.g1 { width: 660px; height: 660px; top: -230px; right: -110px;
  background: radial-gradient(circle, rgba(28,143,214,0.55), transparent 68%);
  animation: glowFloat 24s var(--ease-soft) infinite alternate; }
.hero-glow.g2 { width: 470px; height: 470px; bottom: -250px; right: 10%;
  background: radial-gradient(circle, rgba(11,111,168,0.4), transparent 70%);
  animation: glowFloat 29s var(--ease-soft) infinite alternate-reverse; }
@keyframes glowFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-42px, 38px) scale(1.16); }
}

@media (max-width: 900px) {
  .hero-lines { -webkit-mask-image: radial-gradient(125% 100% at 88% 8%, #000 4%, rgba(0,0,0,0.45) 38%, transparent 72%);
                mask-image: radial-gradient(125% 100% at 88% 8%, #000 4%, rgba(0,0,0,0.45) 38%, transparent 72%); }
  .hero-scrim { background: linear-gradient(26deg, var(--cream) 0%, var(--cream) 42%,
    rgba(247,242,231,0.84) 60%, rgba(247,242,231,0) 85%); }
  .hero-glow.g1 { width: 400px; height: 400px; }
  .hero-glow.g2 { width: 300px; height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lines path { animation: none !important; }
  .hero-glow { animation: none !important; }
}

/* ============================================================
   DESIGN PAGE — render / reality comparison slider
   ============================================================ */
.compare-list { display: flex; flex-direction: column; gap: 96px; }
.compare-item { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 48px; align-items: center; }
.compare-item:nth-child(even) { grid-template-columns: 0.65fr 1.35fr; }
.compare-item:nth-child(even) .compare { order: 2; }
.compare-item:nth-child(even) .compare-body { order: 1; }

.compare {
  position: relative; overflow: hidden; border: 1px solid var(--line);
  background: var(--cream-deep); aspect-ratio: 4/3;
  cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none; }
.cmp-render-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden;
  border-right: 2px solid var(--cream); will-change: width; }
.cmp-render-wrap { width: 100%; clip-path: inset(0 50% 0 0); }
.cmp-render-wrap .cmp-render { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.cmp-tag {
  position: absolute; top: 22px; z-index: 3;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 22px; border-radius: 999px; backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(8,20,28,0.22);
  transition: opacity 0.4s var(--ease-premium);
}
.cmp-tag-left  { left: 22px;  background: rgba(8,59,80,0.9);   color: var(--cream); }
.cmp-tag-right { right: 22px; background: rgba(247,242,231,0.94); color: var(--sky-deep); }
@media (max-width: 700px) {
  .cmp-tag { font-size: 12.5px; padding: 8px 15px; top: 14px; letter-spacing: 0.1em; }
  .cmp-tag-left { left: 14px; } .cmp-tag-right { right: 14px; }
}

.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 46px; margin-left: -23px;
  z-index: 4; display: flex; align-items: center; justify-content: center;
  cursor: ew-resize; will-change: left;
}
.cmp-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  margin-left: -1px; background: var(--cream); box-shadow: 0 0 18px rgba(8,59,80,0.4);
}
.cmp-grip {
  position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%;
  background: var(--cream); color: var(--sky-deep); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 8px 26px rgba(8,59,80,0.34);
  transition: transform 0.4s cubic-bezier(0.34,1.7,0.5,1), background 0.35s var(--ease-premium),
              color 0.35s var(--ease-premium);
}
.cmp-grip svg { width: 30px; height: 30px; display: block; }
.compare:hover .cmp-grip { transform: scale(1.1); }
.compare.is-dragging { cursor: grabbing; }
.compare.is-dragging .cmp-grip { background: var(--sky); color: var(--cream); transform: scale(1.14); }

/* Oklar dokunulana kadar hafifçe açılıp kapanır */
.cmp-grip .arw { animation: gripNudge 2s var(--ease-soft) infinite; }
.cmp-grip .arw-l { animation-delay: 0s; }
.cmp-grip .arw-r { animation-delay: 1s; }
.compare.is-touched .cmp-grip .arw { animation: none; }
@keyframes gripNudge {
  0%, 100% { transform: translateX(0); opacity: 0.75; }
  50%      { transform: translateX(var(--dir, -3px)); opacity: 1; }
}
.cmp-grip .arw-l { --dir: -3px; }
.cmp-grip .arw-r { --dir: 3px; }

/* Dokunulmadan önce tutamağın etrafında yayılan halka */
.cmp-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
  border: 2px solid var(--sky-bright); pointer-events: none;
  animation: gripPulse 2.4s var(--ease-soft) infinite;
}
.compare.is-touched .cmp-handle::after { display: none; }
@keyframes gripPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* "Sürükleyin" ipucu — ilk dokunuşta kaybolur */
.cmp-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  background: rgba(8,59,80,0.9); color: var(--cream); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 999px; box-shadow: 0 6px 20px rgba(8,20,28,0.3);
  pointer-events: none;
  transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}
.compare.is-touched .cmp-hint { opacity: 0; transform: translateX(-50%) translateY(10px); }
.cmp-hint span { animation: hintSway 2s var(--ease-soft) infinite; }
.cmp-hint .s-l { --dir: -4px; }
.cmp-hint .s-r { --dir: 4px; animation-delay: 1s; }
@keyframes hintSway {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--dir, 0)); }
}
@media (max-width: 700px) {
  .cmp-hint { font-size: 11px; padding: 9px 15px; bottom: 14px; }
  .cmp-grip { width: 54px; height: 54px; }
  .cmp-handle::after { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
}
.cmp-handle:focus-visible .cmp-grip { outline: 2px solid var(--sky); outline-offset: 3px; }

.compare-body .compare-room {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sky); display: block; margin-bottom: 12px;
}
.compare-body h3 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.12; }
.compare-body p { color: var(--ink-soft); margin-top: 14px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .cmp-grip .arw, .cmp-handle::after, .cmp-hint span { animation: none !important; }
}

@media (max-width: 900px) {
  .compare-list { gap: 64px; }
  .compare-item,
  .compare-item:nth-child(even) { grid-template-columns: 1fr; gap: 26px; }
  .compare-item:nth-child(even) .compare { order: 0; }
  .compare-item:nth-child(even) .compare-body { order: 1; }
}

/* ============================================================
   NO SPLIT WORDS — site-wide guarantee
   Words may only break at real spaces, never mid-word.
   ============================================================ */
html, body, h1, h2, h3, p, a, span, li, dt, dd, summary, button, figcaption {
  word-break: normal;
  overflow-wrap: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Animated headings: each word is one unbreakable unit,
   characters animate inside it */
.fx-chars .word { display: inline-block; white-space: nowrap; }
.split-word { white-space: nowrap; }

/* Long values wrap between words only; never chopped mid-word */
.info-val,
.contact-list dd { overflow-wrap: normal; word-break: normal; }

/* ============================================================
   GUARANTEE SEAL (Üretim & Güvence, left column)
   ============================================================ */
.seal {
  display: flex; align-items: flex-start; gap: 22px; margin-top: 0;
  padding: 26px 28px; border: 1px solid var(--line-dark);
  background: rgba(247,242,231,0.05); border-radius: 3px;
  transition: border-color 0.5s var(--ease-premium), background 0.5s var(--ease-premium);
}
.seal:hover { border-color: rgba(28,143,214,0.5); background: rgba(247,242,231,0.08); }
.seal-mark { flex: 0 0 58px; color: var(--sky-bright); }
.seal-mark svg { width: 58px; height: 58px; display: block; }
.seal-text strong { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--cream); margin-bottom: 8px; }
.seal-text span { display: block; color: rgba(247,242,231,0.72); font-size: 15px; line-height: 1.6; }

.seal-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.seal-meta > div { padding: 16px 14px; border: 1px solid var(--line-dark); text-align: center;
  transition: border-color 0.5s var(--ease-premium), transform 0.5s var(--ease-premium); }
.seal-meta > div:hover { border-color: rgba(28,143,214,0.55); transform: translateY(-3px); }
.seal-meta .k { display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-bright); }
.seal-meta .v { display: block; margin-top: 7px; font-size: 14px; font-weight: 600; color: var(--cream); }

@media (max-width: 600px) {
  .seal { flex-direction: column; gap: 16px; }
  .seal-meta { grid-template-columns: 1fr; }
}

/* ============================================================
   SOCIAL CARDS — icon + username, fully enclosed boxes
   ============================================================ */
.social-invite { max-width: 60ch; margin-bottom: 26px; }
.social-invite strong { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 25px); margin-bottom: 10px; }
.social-invite p { margin: 0; color: var(--ink-soft); font-size: 16px; }
section.dark .social-invite p { color: rgba(247,242,231,0.72); }

.social-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; max-width: 760px; }
.social-card {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; text-decoration: none; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
  transition: transform 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium),
              box-shadow 0.5s var(--ease-premium);
}
.social-card:hover { transform: translateY(-5px); border-color: var(--sky);
  box-shadow: 0 16px 38px rgba(8,59,80,0.14); }
.social-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sky-deep); color: var(--cream);
  transition: background 0.45s var(--ease-premium), transform 0.45s cubic-bezier(0.34,1.7,0.5,1); }
.social-card:hover .social-icon { background: var(--sky); transform: scale(1.08) rotate(-5deg); }
.social-icon svg { width: 24px; height: 24px; display: block; }
.social-body { min-width: 0; }
.social-net { display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); margin-bottom: 5px; }
.social-handle { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 15.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.social-go { display: block; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); margin-top: 6px;
  transition: color 0.4s var(--ease-premium); }
.social-card:hover .social-go { color: var(--sky); }

@media (max-width: 700px) {
  .social-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */
.nav-toggle {
  display: none;
  width: 46px; height: 46px; padding: 11px 10px;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; flex-direction: column; justify-content: space-between;
  transition: border-color 0.35s var(--ease-premium), background 0.35s var(--ease-premium);
}
.nav-toggle:hover { border-color: var(--sky); }
.nav-toggle-bar {
  display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
  transition: transform 0.4s var(--ease-premium), opacity 0.3s var(--ease-premium);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.mobile-nav {
  /* Base placement. The script re-applies these as inline pixel values on
     open and verifies the result, so a browser quirk cannot leave the panel
     stranded at the top of the document. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 39;
  background: var(--cream);
  /* flex-start, never space-between: a scrolling flex container using
     space-between makes its first items unreachable. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--header-h, 78px) + 24px) 28px 32px;
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none !important; }
.mobile-nav.is-open { opacity: 1; transform: translateY(0); }
/* Held solid while the next page loads, so the old page never flashes
   through the menu during navigation. */
.mobile-nav.is-navigating {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none;
}

.mobile-nav-links { display: flex; flex-direction: column; flex-shrink: 0; }
.mobile-nav-links a {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 7vw, 34px); letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink);
  padding: 16px 0; border-bottom: 1px solid var(--line);
  transition: color 0.3s var(--ease-premium), padding-left 0.3s var(--ease-premium);
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active { color: var(--sky); padding-left: 8px; }

.mobile-nav-foot { margin-top: auto; padding-top: 28px; flex-shrink: 0; }
.mobile-nav-foot .btn { width: 100%; justify-content: center; }
.mobile-nav-social { display: flex; gap: 20px; margin-top: 20px; justify-content: center; }
.mobile-nav-social a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
.mobile-nav-social a:hover { color: var(--sky); }

/* Scroll lock. `overflow` on the root element is handed to the viewport, so
   it stops the page without creating a clip box and without moving the body.
   Pinning the body was the previous approach and it was the single cause of
   the collapsed panel, the lost scroll position and the clipped edges. */
html.nav-open { overflow: hidden; }
html.nav-open body { overscroll-behavior: none; }

@media (max-width: 1000px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .nav-toggle-bar { transition: none !important; }
}

/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */
@media (max-width: 1000px) {
  /* Touch targets below ~44px are hard to hit accurately */
  .filter-chip { padding: 14px 22px; font-size: 15px; }
  .scope-tab   { padding: 15px 22px; font-size: 15px; }
  .social-card { padding: 20px 20px; }
  .lb-close, .lb-prev, .lb-next { width: 48px; height: 48px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Yatay vitrin tablet ve telefonlarda doğal kaydırmaya dönüşür. */
  .pin-section { height: auto !important; padding: 76px 0; }
  .pin-viewport { position: static; height: auto; }
  .pin-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
    transform: none !important; -webkit-overflow-scrolling: touch; }
  .showcase-card { flex-basis: min(72vw, 420px); scroll-snap-align: start; }
  .pin-progress { display: none; }
}

@media (max-width: 600px) {
  :root { --header-h: 70px; }
  /* Keep phone scrolling responsive: secondary sections should not remain
     blank through long desktop cascades. The cabinet hero is independent. */
  body [class*="fx-"], .fx-ready .fx-group > *,
  .fx-ready .fx-alt > *, .fx-ready .fx-chars .ch {
    transition-duration: .4s;
    transition-delay: 0s !important;
  }
  .fx-ready .fx-alt:not(.is-in) > * { transform: translateY(18px); }
  .wrap, .pin-head, .project-cover { padding-left: 20px; padding-right: 20px; }
  section { padding: 72px 0; }
  .hero { padding: 72px 0 60px; }
  .page-hero { padding: 68px 0 54px; }
  .project-top { padding: 44px 0 34px; }
  .project-intro { padding: 52px 0 28px; }
  .scope-section { padding-top: 68px; }
  .hero p.lede, .page-hero .lede { font-size: 17px; line-height: 1.6; }

  /* Horizontal strips: let a thumb swipe them, and hint that there is more */
  .filter-bar {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x proximity; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-chip { flex: 0 0 auto; scroll-snap-align: start; }

  .scope-tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .scope-tabs::-webkit-scrollbar { display: none; }
  .scope-tab { flex: 0 0 auto; }
  .scope-gallery { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .scope-shot figcaption { padding: 12px 14px 14px; font-size: 11px; }
  .mcard-body { padding: 18px 18px 22px; }
  .mcard-top { align-items: flex-start; }

  /* The comparison slider needs room for a finger either side of the handle */
  .compare { aspect-ratio: 3/4; }
  .cmp-hint { bottom: 10px; }

  /* Wide-format headings were overflowing on the narrowest phones */
  .hero h1, .page-hero h1 { max-width: 100%; }
  .project-title { max-width: 100%; }

  /* Stats read better stacked in pairs than in one long column */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }

  /* Contact map was taller than most phone screens */
  .map-frame { min-height: 260px; }
  .review-cta { padding: 26px 22px; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 0 16px; }
}

/* A separate control row leaves the entire photo unobstructed on phones,
   including landscape. Dynamic viewport units follow the browser toolbar. */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) {
  .lightbox {
    height: 100vh; height: 100dvh;
    padding: calc(68px + env(safe-area-inset-top, 0px)) 12px
      calc(76px + env(safe-area-inset-bottom, 0px));
    --photo-room: calc(100dvh - 210px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .lb-stage { flex-shrink: 0; max-width: 100%; max-height: calc(100vh - 210px); max-height: var(--photo-room); }
  .lb-stage img { max-width: 100%; max-height: calc(100vh - 210px); max-height: var(--photo-room); }
  .lb-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
  .lb-prev, .lb-next { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin-top: 0; }
  .lb-prev { left: calc(50% - 62px); }
  .lb-next { left: calc(50% + 14px); right: auto; }
  .lb-bar { flex-shrink: 0; align-items: center; font-size: 12px; gap: 12px; margin-top: 12px; padding: 0; width: 100%; justify-content: center; }
  #lbCaption { max-height: 48px; overflow-y: auto; }
  .lb-hint { display: none; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 20px; }
  .brand span { display: none; }   /* logo alone; the name would wrap */
  .stats-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- 404 ---------- */
/* Same rhythm as every other page hero — no vertical centring, so the
   heading sits where visitors expect it after the header. */
.notfound { min-height: 62vh; }
@media (max-width: 600px) {
  .notfound { min-height: 0; }
}


/* Short screens: compact links, while retaining scroll access to the footer. */
@media (max-height: 700px) {
  .mobile-nav { padding: calc(var(--header-h, 78px) + 14px) 24px 20px; }
  .mobile-nav-links a { font-size: 22px; padding: 11px 0; }
  .mobile-nav-foot { padding-top: 16px; }
  .mobile-nav-social { margin-top: 12px; }
}
@media (max-height: 560px) {
  .mobile-nav-links a { font-size: 19px; padding: 8px 0; min-height: 44px; }
  .mobile-nav-social { display: none; }
}