/* ==========================================================================
   VERTIKALA — studio za arhitekturu i enterijer
   Stylesheet (single file, no build step)

   1. Design tokens
   2. Base / reset
   3. Utilities & shared components (eyebrow, section head, buttons)
   4. Header
   5. Hero
   6. Marquee
   7. Why (feature cards)
   8. Studio (floor plan + stats)
   9. Compare (drawing → render)
  10. Services (bento grid)
  11. Projects (accordion / grid / lightbox)
  12. Process (scroll-driven)
  13. Call to action
  14. Testimonials
  15. FAQ
  16. Contact (form, details)
  17. Footer
  18. Mobile action bar
  19. Keyframes
  20. Reduced motion
   ========================================================================== */


/* 1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals: light surfaces */
  --ink: #1A1A18;
  --ink-soft: #4A4842;
  --muted: #77746C;
  --paper: #F4F2ED;
  --paper-raised: #FBFAF8;
  --line: #D3CFC7;

  /* Neutrals: dark surfaces */
  --night: #111110;
  --coal: #1A1A18;
  --on-dark: #F7F5F1;
  --on-dark-soft: #C9C5BC;
  --on-dark-muted: #9C978C;
  --on-dark-dim: #8C8A82;
  --line-dark: rgba(247, 245, 241, 0.16);

  /* Accent (single hue, three lightness steps) */
  --accent: oklch(0.62 0.15 52);
  --accent-light: oklch(0.72 0.16 52);
  --accent-deep: oklch(0.55 0.14 50);
  --accent-70: oklch(0.62 0.15 52 / 0.7);
  --accent-55: oklch(0.72 0.16 52 / 0.55);
  --accent-50: oklch(0.72 0.16 52 / 0.5);
  --accent-34: oklch(0.62 0.15 52 / 0.34);
  --accent-22: oklch(0.62 0.15 52 / 0.22);
  --accent-18: oklch(0.62 0.15 52 / 0.18);

  /* Type */
  --font-sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout (4pt scale) */
  --container: 1440px;
  --gutter: 32px;
  --header-h: 104px;
  --section-y: clamp(56px, 9vw, 128px);
  --section-y-compact: clamp(56px, 7.8vw, 112px);
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
}

/* Fallback for browsers without oklch() (Safari < 15.4, older Chromium) */
@supports not (color: oklch(0 0 0)) {
  :root {
    --accent: #C4692F;
    --accent-light: #E58A4A;
    --accent-deep: #A9562A;
    --accent-70: rgba(196, 105, 47, 0.7);
    --accent-55: rgba(229, 138, 74, 0.55);
    --accent-50: rgba(229, 138, 74, 0.5);
    --accent-34: rgba(196, 105, 47, 0.34);
    --accent-22: rgba(196, 105, 47, 0.22);
    --accent-18: rgba(196, 105, 47, 0.18);
  }
}


/* 2. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, dl, dd, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:not([class]):hover { color: var(--accent-deep); }
.on-dark a:not([class]):hover { color: var(--accent-light); }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 12px 16px; background: var(--ink); color: var(--on-dark);
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* 3. Utilities & shared components
   -------------------------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; }
.section { padding: var(--section-y) var(--gutter); }
.section--compact { padding-block: var(--section-y-compact); }

.on-dark { color: var(--on-dark); }
.bg-night { background: var(--night); }
.bg-coal { background: var(--coal); }
.bg-paper { background: var(--paper); }

.eyebrow {
  font: 500 14px/20px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-dark .eyebrow { color: var(--on-dark-muted); }

.section-title {
  margin-top: 24px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 20ch;
}
.on-dark .section-title { color: var(--on-dark); }

.section-head {
  display: flex; flex-wrap: wrap; gap: 32px;
  align-items: flex-end; justify-content: space-between;
}

.text-link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  font: 400 14px/20px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.text-link:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

.mono-label {
  font: 400 12px/20px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

/* Scroll reveal (progressive enhancement: only hidden when JS is running) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms ease var(--reveal-delay, 0ms), transform 900ms ease var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Page-load entrance */
.anim-in { animation: fade-up 1300ms var(--ease-out) both; animation-delay: var(--delay, 0ms); }
.anim-rise { display: block; animation: rise 1500ms var(--ease-out) both; animation-delay: var(--delay, 0ms); }

/* Button: sliding accent fill, arrow swap */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  overflow: hidden; isolation: isolate;
  border: 0;
  font-weight: 600;
  white-space: nowrap;
  transition: color 420ms var(--ease-out), letter-spacing 620ms var(--ease-out), border-color 420ms ease;
}
.btn::before {
  content: "";
  position: absolute; z-index: -1;
  top: -2px; bottom: -2px; left: -8px; width: calc(100% + 16px);
  background: var(--accent);
  transform: translate3d(-102%, 0, 0) skewX(-14deg);
  transform-origin: left center;
  transition: transform 720ms var(--ease-out);
}
.btn:hover { color: #fff; letter-spacing: 0.04em; border-color: var(--accent); }
.btn:hover::before { transform: none; }

.btn__arrow {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--accent); color: #fff;
  transition: transform 620ms var(--ease-out), background 420ms ease;
}
.btn:hover .btn__arrow { transform: translateX(4px); background: var(--ink); }
.btn__arrow > span { display: block; transition: transform 560ms var(--ease-out); }
.btn:hover .btn__arrow > span { transform: translateX(140%); }
.btn__arrow > span:last-child {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translateX(-140%);
}
.btn:hover .btn__arrow > span:last-child { transform: none; }

.btn--dark { background: var(--ink); color: var(--on-dark); padding: 12px 12px 12px 24px; }
.btn--light { background: var(--on-dark); color: var(--ink); padding: 16px 16px 16px 32px; }
.btn--outline { border: 1px solid rgba(247, 245, 241, 0.7); color: var(--on-dark); padding: 16px 24px; }
.btn--display {
  gap: 16px;
  font-size: clamp(24px, 3vw, 40px); line-height: 1.1;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--on-dark);
}
.btn--display .btn__arrow { width: 48px; height: 48px; font-size: 20px; flex-shrink: 0; }
.btn--display { white-space: normal; max-width: 100%; }


/* 4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  padding: 16px var(--gutter);
}
.site-header__bar {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 12px 12px 24px;
  background: rgba(251, 250, 248, 0.88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(26, 26, 24, 0.08);
  box-shadow: 0 4px 24px rgba(16, 16, 14, 0.08);
}

.brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.brand__name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.brand__city { font: 400 12px/16px var(--font-mono); letter-spacing: 0.04em; color: var(--muted); }

.site-nav { display: flex; gap: 4px; margin-left: auto; white-space: nowrap; }
.site-nav a { padding: 8px 16px; }
.site-nav a:hover { background: rgba(26, 26, 24, 0.06); }

.phone-link { display: flex; align-items: center; gap: 12px; margin-left: auto; white-space: nowrap; }
.phone-link__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(26, 26, 24, 0.12);
}
.phone-link__text { display: flex; flex-direction: column; line-height: 16px; }
.phone-link__label { font: 400 12px/16px var(--font-mono); color: var(--muted); }
.phone-link__number { font-size: 14px; font-weight: 600; }

@media (max-width: 1099px) { .phone-link { display: none; } }
@media (max-width: 767px) {
  .site-header { padding: 12px 16px; }
  .site-header__bar { padding: 12px; gap: 12px; }
  .site-nav, .site-header .btn { display: none; }
}


/* 5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + clamp(24px, 5vh, 72px)) 0 24px;
  background: var(--coal);
  color: var(--on-dark);
}
.hero__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: hero-zoom 26s ease-in-out infinite alternate;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 16, 14, 0.78) 0%, rgba(16, 16, 14, 0.4) 48%, rgba(16, 16, 14, 0) 78%),
    linear-gradient(180deg, rgba(16, 16, 14, 0.55) 0%, rgba(16, 16, 14, 0.15) 45%, rgba(16, 16, 14, 0.8) 100%);
}

.hero__body {
  position: relative; z-index: 4; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
}
.hero__inner { max-width: 820px; }
.hero__body .container { width: 100%; }

.hero .eyebrow { color: #E3E0D8; }
.hero__title {
  margin-top: 24px;
  font-size: clamp(34px, 5.2vw, 84px);
  line-height: 1; font-weight: 700; letter-spacing: -0.035em;
  text-transform: uppercase; white-space: nowrap;
}
.hero__title span { display: block; }
.hero__title .accent { color: var(--accent-light); }
.hero__lead { margin-top: 24px; max-width: 52ch; font-size: 18px; line-height: 28px; color: #F2F0EA; }
.hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }

.hero__wordmark {
  position: relative; z-index: 4;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.hero__wordmark p {
  max-width: var(--container); margin-inline: auto; padding-bottom: 0.12em;
  overflow: hidden;
  font-size: clamp(48px, 16.5vw, 240px);
  line-height: 0.92; font-weight: 700; letter-spacing: -0.04em;
  white-space: nowrap;
}

.hero__facts {
  position: relative; z-index: 4;
  margin-top: 32px;
  background: var(--coal); color: var(--on-dark-muted);
  font: 400 14px/20px var(--font-mono);
}
.hero__facts .container {
  display: flex; flex-wrap: wrap; gap: 32px;
  align-items: center; justify-content: space-between;
  padding: 24px var(--gutter);
}
.hero__facts strong { max-width: 32ch; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }
.hero__facts ul { display: flex; flex-wrap: wrap; gap: 24px; }

@media (max-width: 767px) {
  .hero__title { font-size: 7.8vw; }
}


/* 6. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--accent); color: var(--ink);
  border-block: 1px solid var(--ink);
  font: 500 14px/20px var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__group {
  display: flex; align-items: center; gap: 32px;
  padding: 14px 32px 14px 0;
  white-space: nowrap;
}
.marquee__group li { display: inline-flex; align-items: center; gap: 32px; }
.marquee__group li::after { content: ""; width: 8px; height: 8px; background: var(--ink); }


/* 7. Why (feature cards)
   -------------------------------------------------------------------------- */
.why { background: var(--coal); }
.why .section-head { margin-bottom: 56px; }
.why .section-title { max-width: 22ch; }
.why__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.feature {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 400px; padding: 32px;
  border: 1px solid rgba(247, 245, 241, 0.14);
  background: rgba(247, 245, 241, 0.015);
  transition: border-color 500ms ease, background 500ms ease;
}
/* Cursor spotlight (position set from JS via --mx / --my) */
.feature::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 500ms ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--accent-22), transparent 65%);
}
/* Bottom rule that draws in on hover */
.feature::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}
.feature:hover { border-color: var(--accent-70); background: rgba(247, 245, 241, 0.04); }
.feature:hover::before { opacity: 1; }
.feature:hover::after { transform: none; }

.feature__top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.feature__icon { overflow: visible; transition: transform 800ms var(--ease-out); }
.feature:hover .feature__icon { transform: translateY(-6px) scale(1.06); }
.feature__num { font: 400 14px/20px var(--font-mono); color: var(--accent-light); }
.feature__body { position: relative; margin-top: auto; padding-top: 48px; }
.feature__title {
  font-size: 20px; line-height: 28px; font-weight: 700;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--on-dark);
}
.feature__text { margin-top: 12px; color: var(--on-dark-muted); }

/* Animated icon parts (SVG elements get pathLength="1" from main.js) */
.js .ico-draw { stroke-dasharray: 1; animation: ico-draw 6s var(--ease-in-out) infinite; animation-delay: var(--d, 0s); }
.ico-spin { transform-box: view-box; transform-origin: 50% 50%; animation: spin 18s linear infinite; }
.ico-spin--rev { animation-direction: reverse; animation-duration: 26s; }
.ico-spin--fast { animation-duration: 5s; }
.ico-pulse { transform-box: fill-box; transform-origin: center; animation: pulse-dot 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ico-pop { transform-box: fill-box; transform-origin: center; animation: pop-in 6s ease infinite; }

/* SVG paint helpers */
.stroke-accent { stroke: var(--accent); }
.stroke-accent-light { stroke: var(--accent-light); }
.stroke-accent-deep { stroke: var(--accent-deep); }
.fill-accent { fill: var(--accent); }
.fill-accent-light { fill: var(--accent-light); }
.fill-accent-deep { fill: var(--accent-deep); }
.fill-accent-50 { fill: var(--accent-50); }


/* 8. Studio (floor plan + stats)
   -------------------------------------------------------------------------- */
.studio { position: relative; overflow: hidden; }
.studio__layout { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.studio__copy { flex: 1 1 300px; max-width: 420px; }
.studio__copy .section-title { max-width: 16ch; }
.studio__copy p { color: var(--ink-soft); max-width: 56ch; }
.studio__copy p:first-of-type { margin-top: 24px; }
.studio__copy p + p { margin-top: 16px; }
.studio__copy .text-link { margin-top: 32px; }

.plan {
  flex: 2 1 420px; min-width: 280px;
  padding: clamp(12px, 2vw, 32px);
  background: var(--paper-raised); border: 1px solid var(--line);
}
.plan svg { width: 100%; height: auto; }
.plan__font { font-family: var(--font-mono); letter-spacing: 0.06em; }

/* Walls, openings and dimension lines draw in with staggered delays (--delay / --dur inline) */
.js .plan path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur, 1200ms) ease var(--delay, 0ms);
}
.js .plan .plan__walls path { transition-timing-function: var(--ease-in-out); }
.js .plan.is-visible path { stroke-dashoffset: 0; }
.js .plan [data-fade] { opacity: 0; transition: opacity 1000ms ease 2200ms; }
.js .plan text { opacity: 0; transition: opacity 1000ms ease 2600ms; }
.js .plan.is-visible [data-fade], .js .plan.is-visible text { opacity: 1; }
.plan__room { transition: fill 400ms ease; }
.plan__room:hover { fill: var(--accent-18); }
.plan__walker { offset-path: path("M300 350V230L300 170L200 170L120 120L200 110L300 170L400 170L440 110L400 170L300 230L300 350"); offset-rotate: 0deg; animation: walk 14s linear infinite; }

.stats {
  flex: 0 1 180px;
  display: flex; flex-direction: column; gap: 40px;
  padding-left: 24px; border-left: 1px solid var(--line);
}
.stats dt { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.stats dd { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--muted); }

@media (max-width: 1023px) {
  .studio__copy { flex-basis: 100%; max-width: none; }
  .plan { flex-basis: 100%; }
  .stats {
    flex: 1 1 100%;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px 32px;
    padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line);
  }
}


/* 9. Compare (drawing → render)
   -------------------------------------------------------------------------- */
.compare .section-head p { max-width: 36ch; color: var(--on-dark-muted); }
.compare__stage {
  position: relative; overflow: hidden; min-width: 0;
  margin-top: 56px;
  height: clamp(240px, 56.25vw, 810px);
  background: #0D0D0C; border: 1px solid #2E2E29;
}
.compare__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare__base { object-fit: cover; filter: grayscale(1) brightness(0.3) contrast(1.15); }
.compare__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.compare__svg * { vector-effect: non-scaling-stroke; }
.compare__svg text { font: 22px var(--font-mono); letter-spacing: 0.06em; fill: var(--on-dark-soft); text-anchor: middle; }
.compare__wipe { clip-path: inset(0 100% 0 0); }
.compare__wipe img { width: 100%; height: 100%; object-fit: cover; }
.compare__line {
  right: auto; width: 2px; left: 0;
  background: var(--accent-light);
  box-shadow: 0 0 24px 2px oklch(0.72 0.16 52 / 0.7);
}
.compare__label {
  inset: auto auto 20px 20px; width: auto; height: auto;
  padding: 6px 12px;
  background: rgba(16, 16, 14, 0.72);
  font: 400 13px/20px var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.compare__label span { display: block; }
.compare__label span + span { position: absolute; left: 12px; top: 6px; }

/* Animations start only after the stage scrolls into view (.is-visible) */
.compare__stage:not(.is-visible) * { animation-play-state: paused !important; }
.compare__wipe { animation: wipe 14s var(--ease-in-out) infinite; }
.compare__line { animation: scan-line 14s var(--ease-in-out) infinite; }
.js .compare__outline { stroke-dasharray: 1; animation: outline 14s var(--ease-in-out) infinite; }
.compare__label span:first-child { animation: label-a 14s ease infinite; }
.compare__label span:last-child { animation: label-b 14s ease infinite; }


/* 10. Services (bento grid)
   -------------------------------------------------------------------------- */
.services .section-title { max-width: 22ch; }
.tile--accent .tile__desc { color: var(--ink); }
.services .section-head .text-link { flex-shrink: 0; }
.bento {
  margin-top: 64px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(300px, 34vh)) minmax(220px, 26vh);
  grid-template-areas:
    "idea idea idea idea idea permit permit permit permit execution execution execution"
    "idea idea idea idea idea interior interior interior viz viz viz viz"
    "supervision supervision supervision supervision supervision supervision supervision supervision supervision supervision supervision supervision";
}
.tile--idea { grid-area: idea; }
.tile--permit { grid-area: permit; }
.tile--execution { grid-area: execution; }
.tile--interior { grid-area: interior; }
.tile--viz { grid-area: viz; }
.tile--supervision { grid-area: supervision; }

.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-width: 0; padding: 28px;
}
.tile--dark { background: var(--coal); color: var(--on-dark); }
.tile--accent { background: var(--accent-light); color: var(--ink); }
.tile--light { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--ink); }
.tile--image { background: var(--coal); color: var(--on-dark); }

.tile__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-out); }
.tile--image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 16, 14, 0.35) 0%, rgba(16, 16, 14, 0.15) 35%, rgba(16, 16, 14, 0.9) 100%);
}
.tile:hover .tile__media { transform: scale(1.06); }

.tile__top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.tile__num { font: 400 14px/20px var(--font-mono); letter-spacing: 0.06em; opacity: 0.75; }
.tile--image .tile__num { opacity: 1; }
.tile__arrow {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border: 1px solid currentColor; font-size: 18px;
  transition: transform 600ms var(--ease-out), background 400ms ease, color 400ms ease;
}
.tile--image .tile__arrow { border-color: rgba(247, 245, 241, 0.6); }
.tile:hover .tile__arrow { transform: rotate(45deg); background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

.tile__body { position: relative; z-index: 1; }
.tile__title {
  font-size: clamp(26px, 2.6vw, 42px); line-height: 1;
  font-weight: 700; letter-spacing: -0.035em; text-transform: uppercase;
}
.tile__more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 600ms var(--ease-out), opacity 500ms ease; }
.tile__more > div { overflow: hidden; }
.tile__desc { padding-top: 14px; max-width: 40ch; font-size: 15px; line-height: 22px; }
.tile--dark .tile__desc { color: var(--on-dark-soft); }
.tile--light .tile__desc { color: var(--ink-soft); }
.tile--image .tile__desc { color: #E6E2DA; }

/* Image tiles reveal their description on hover / focus */
.tile--image .tile__more { grid-template-rows: 0fr; opacity: 0; }
.tile--image:hover .tile__more,
.tile--image:focus-visible .tile__more { grid-template-rows: 1fr; opacity: 1; }
@media (hover: none) {
  .tile--image .tile__more { grid-template-rows: 1fr; opacity: 1; }
}

@media (max-width: 899px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(240px, auto); grid-template-areas: none; }
  .tile { grid-area: auto; }
}
/* Tablet: two-column bento */
@media (min-width: 600px) and (max-width: 899px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(280px, auto);
    grid-template-areas:
      "idea idea"
      "permit execution"
      "interior viz"
      "supervision supervision";
  }
  .tile--idea { grid-area: idea; }
  .tile--permit { grid-area: permit; }
  .tile--execution { grid-area: execution; }
  .tile--interior { grid-area: interior; }
  .tile--viz { grid-area: viz; }
  .tile--supervision { grid-area: supervision; }
}


/* 11. Projects
   -------------------------------------------------------------------------- */
.projects .section-title { max-width: 20ch; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  padding: 8px 16px;
  border: 1px solid #4A4842; background: transparent; color: var(--on-dark-muted);
  font-size: 14px; line-height: 20px;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}
.filter:hover { border-color: var(--on-dark); }
.filter[aria-pressed="true"] { border-color: var(--on-dark); background: var(--on-dark); color: var(--ink); }

.projects__list { margin-top: 56px; }
.project { position: relative; overflow: hidden; border: 0; padding: 0; background: #232320; color: var(--on-dark); text-align: left; }
.project[hidden] { display: none; }
.project__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 16, 14, 0.35) 0%, rgba(16, 16, 14, 0) 30%, rgba(16, 16, 14, 0.88) 100%); }
.project__num { position: absolute; top: 24px; left: 24px; font: 400 13px/20px var(--font-mono); letter-spacing: 0.06em; }
.project__panel { position: absolute; display: flex; flex-direction: column; gap: 12px; }
.project__rule { display: block; height: 2px; background: var(--accent); }
.project__title { font-weight: 700; text-transform: uppercase; }
.project__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 400 13px/20px var(--font-mono); color: var(--on-dark-soft); }
.project__go { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--accent); color: #fff; font-size: 18px; }
.project__vertical { display: none; }

/* Desktop: hover accordion */
@media (min-width: 1024px) {
  .projects__list { display: flex; gap: 8px; height: clamp(520px, 70vh, 720px); }
  .project { flex: 1 1 0; min-width: 0; transition: flex 1000ms var(--ease-out); }
  .project__img { filter: grayscale(1) brightness(0.5); transform: scale(1.15); transition: filter 900ms ease, transform 1500ms var(--ease-out); }
  .project__vertical {
    display: block; position: absolute; left: 24px; bottom: 24px;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; white-space: nowrap; color: #E3E0D8;
    transition: opacity 400ms ease 200ms;
  }
  .project__panel {
    left: 32px; bottom: 32px; width: min(480px, calc(100% - 64px));
    opacity: 0; transform: translateY(28px);
    transition: opacity 500ms ease, transform 800ms var(--ease-out);
  }
  .project__rule { transform: scaleX(0); transform-origin: left center; transition: transform 1000ms var(--ease-out); }
  .project__title { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -0.02em; }

  .project:hover,
  .project:focus-visible,
  .projects__list:not(:hover):not(:focus-within) .project.is-first { flex: 6 1 0; }
  .project:hover .project__img,
  .project:focus-visible .project__img,
  .projects__list:not(:hover):not(:focus-within) .is-first .project__img { filter: none; transform: none; }
  .project:hover .project__panel,
  .project:focus-visible .project__panel,
  .projects__list:not(:hover):not(:focus-within) .is-first .project__panel { opacity: 1; transform: none; transition-delay: 280ms; }
  .project:hover .project__rule,
  .project:focus-visible .project__rule,
  .projects__list:not(:hover):not(:focus-within) .is-first .project__rule { transform: none; transition-delay: 400ms; }
  .project:hover .project__vertical,
  .project:focus-visible .project__vertical,
  .projects__list:not(:hover):not(:focus-within) .is-first .project__vertical { opacity: 0; transition-delay: 0ms; }
}

/* Tablet / mobile: image grid with captions */
@media (max-width: 1023px) {
  .projects__list { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); }
  .project { grid-column: span 2; min-height: clamp(220px, 21vw, 272px); filter: saturate(0.85); }
  .project.is-first { grid-column: span 4; grid-row: span 2; min-height: clamp(360px, 44vw, 560px); }
  .project__img { transition: transform 1200ms var(--ease-out); }
  .project:hover { filter: none; }
  .project:hover .project__img { transform: scale(1.06); }
  .project__shade { background: linear-gradient(180deg, rgba(16, 16, 14, 0) 35%, rgba(16, 16, 14, 0.86) 100%); }
  .project__num { top: 20px; left: 20px; font-size: 12px; }
  .project__panel { left: 20px; right: 20px; bottom: 20px; gap: 8px; }
  .project__rule { transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--ease-out); }
  .project:hover .project__rule { transform: none; }
  .project__title { font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
  .project__go { display: none; }
}
@media (max-width: 767px) {
  .projects__list { grid-template-columns: 1fr; }
  .project, .project.is-first { grid-column: auto; grid-row: auto; min-height: 260px; }
}

/* Lightbox (native <dialog>) */
.lightbox { max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--on-dark); }
.lightbox::backdrop { background: rgba(20, 20, 18, 0.92); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; padding: 32px; }
.lightbox__inner { width: 100%; max-width: 1080px; }
.lightbox__img { width: 100%; height: 70vh; object-fit: contain; background: #232320; }
.lightbox__bar { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.lightbox__title { font-size: 18px; line-height: 28px; font-weight: 600; }
.lightbox__meta { font: 400 14px/20px var(--font-mono); color: var(--on-dark-muted); }
.lightbox__actions { display: flex; gap: 12px; align-items: center; }
.lightbox__cta { padding: 16px 32px; background: var(--accent); color: #fff; font-weight: 600; }
.lightbox__close { padding: 16px 24px; background: transparent; border: 1px solid rgba(247, 245, 241, 0.4); }
.lightbox__close:hover { border-color: var(--on-dark); }


/* 12. Process (scroll-driven)
   -------------------------------------------------------------------------- */
.process { position: relative; height: 520vh; }
.process__sticky {
  position: sticky; top: 0; height: 100vh;
  max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter);
  display: grid; align-items: center; gap: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
.process .section-title { max-width: 20ch; }

.steps { position: relative; margin-top: 40px; padding-left: 32px; }
.steps__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #DDD9D1; }
.steps__fill { height: 0; background: var(--accent-deep); }
.steps__list { margin: 0; padding: 0; list-style: none; }
.step { position: relative; padding: 14px 0; opacity: 0.35; transition: opacity 500ms ease; }
.step.is-active { opacity: 1; }
.step::before {
  content: ""; position: absolute; left: -37px; top: 24px; width: 10px; height: 10px;
  background: #DDD9D1; transition: background 500ms ease, transform 500ms ease;
}
.step.is-done::before { background: var(--accent-deep); }
.step.is-active::before { transform: scale(1.5); }
.step__head { display: flex; gap: 16px; align-items: baseline; }
.step__num { font: 400 14px/20px var(--font-mono); color: var(--accent-deep); }
.step__title { font-size: 22px; line-height: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
.step__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 700ms var(--ease-out), opacity 500ms ease; }
.step.is-active .step__more { grid-template-rows: 1fr; opacity: 1; }
.step__more > div { overflow: hidden; }
.step__text { margin-top: 8px; max-width: 44ch; color: var(--ink-soft); }
.step__time { margin-top: 8px; font: 400 13px/20px var(--font-mono); color: var(--muted); }

.board {
  position: relative; aspect-ratio: 4 / 3;
  background-color: var(--paper-raised);
  background-image:
    linear-gradient(rgba(26, 26, 24, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 24, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  border: 1px solid var(--ink);
}
.board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.board text { font: 12px var(--font-mono); letter-spacing: 0.08em; fill: var(--muted); text-anchor: middle; }
.board text.is-accent { fill: var(--accent-deep); }
.board text.is-start { text-anchor: start; }
.board__hud { position: absolute; top: 16px; font: 400 13px/20px var(--font-mono); letter-spacing: 0.06em; }
.board__phase { left: 20px; text-transform: uppercase; }
.board__phase b { font-weight: 400; color: var(--accent-deep); }
.board__time { right: 20px; color: var(--ink-soft); }

/* Stroke drawing is driven by scroll position from main.js (stroke-dashoffset set inline) */
.js .board [data-phase] path,
.js .board [data-phase] circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .board [data-phase] [data-fade] { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
.js .board [data-phase] text { opacity: 0; }

@media (max-width: 1023px) {
  .process { height: auto; padding: 72px 0; }
  .process__sticky { position: static; height: auto; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .step { opacity: 1; }
  .step__more { grid-template-rows: 1fr; opacity: 1; }
}


/* 13. Call to action
   -------------------------------------------------------------------------- */
.cta { position: relative; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 26s ease-in-out infinite alternate; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(16, 16, 14, 0.78); }
.cta__inner { position: relative; z-index: 2; max-width: 1200px; margin-inline: auto; padding: var(--section-y) var(--gutter); text-align: center; }
.cta .section-title { max-width: 22ch; margin: 0 auto; }
.cta p { margin: 24px auto 0; max-width: 52ch; font-size: 18px; line-height: 28px; color: #E3E0D8; }
.cta .btn { margin-top: 48px; }


/* 14. Testimonials
   -------------------------------------------------------------------------- */
.testimonials { position: relative; overflow: hidden; background: var(--accent); color: var(--ink); }
.testimonials::before {
  content: "\201C"; position: absolute; left: -2vw; top: -9vw;
  font-size: 64vw; line-height: 1; font-weight: 700;
  color: rgba(26, 26, 24, 0.1); pointer-events: none; user-select: none;
}
.testimonials .eyebrow { color: var(--ink); }
.testimonials__layout { position: relative; max-width: var(--container); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 56px; align-items: stretch; }
.testimonials__main { flex: 2 1 520px; min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.quote { min-height: 5.6em; max-width: 22em; font-size: clamp(28px, 3.8vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.quote__word { display: inline-block; opacity: 0; animation: word-in 900ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 45ms); }
.author { display: flex; align-items: center; gap: 16px; }
.author__initials { display: grid; place-items: center; width: 56px; height: 56px; background: var(--ink); color: var(--paper); font: 400 16px/24px var(--font-mono); letter-spacing: 0.04em; }
.author__name { font-size: 18px; line-height: 24px; font-weight: 700; }
.author__project { font: 400 14px/20px var(--font-mono); }

.quote-tabs { flex: 1 1 320px; max-width: 460px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.quote-tab {
  position: relative; overflow: hidden;
  display: flex; gap: 16px; align-items: center;
  padding: 18px 20px; text-align: left;
  border: 1px solid rgba(26, 26, 24, 0.45); background: transparent; color: var(--ink);
  transition: background 500ms ease, color 500ms ease, border-color 500ms ease;
}
.quote-tab .num { font: 400 14px/20px var(--font-mono); }
.quote-tab b { display: block; font-size: 17px; line-height: 24px; }
.quote-tab small { display: block; font: 400 13px/20px var(--font-mono); }
.quote-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.quote-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent-light); transform-origin: left center;
  animation: bar-fill 7000ms linear forwards;
}
@media (max-width: 1023px) {
  .testimonials__main { flex-basis: 100%; min-height: 0; }
  .quote-tabs { flex-basis: 100%; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}


/* 15. FAQ
   -------------------------------------------------------------------------- */
.faq__layout { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.faq__intro { flex: 1 1 300px; max-width: 420px; }
.faq__intro .section-title { max-width: 14ch; }
.faq__intro p { margin-top: 24px; max-width: 44ch; color: var(--ink-soft); }
.faq__intro a { border-bottom: 1px solid var(--ink); font-weight: 600; }
.faq__list { flex: 2 1 520px; border-top: 1px solid var(--ink); }
@media (max-width: 1023px) {
  .faq__intro { flex-basis: 100%; max-width: none; }
  .faq__list { flex-basis: 100%; }
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; border: 0; background: none; text-align: left;
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em;
}
.faq__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--ink); font-size: 22px; font-weight: 400;
  transition: transform 600ms var(--ease-out), background 400ms ease, color 400ms ease;
}
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease-out); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 24px; max-width: 60ch; color: var(--ink-soft); }


/* 16. Contact
   -------------------------------------------------------------------------- */
.contact { position: relative; overflow: hidden; background: var(--night); color: var(--on-dark); }
.contact__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.contact__blob { position: absolute; border-radius: 50%; }
.contact__blob--a {
  left: -12%; top: -18%; width: 62vw; height: 62vw; max-width: 920px; max-height: 920px;
  background: radial-gradient(circle, var(--accent-34), transparent 65%);
  filter: blur(48px); animation: blob-a 17s ease-in-out infinite alternate;
}
.contact__blob--b {
  right: -14%; bottom: -24%; width: 56vw; height: 56vw; max-width: 840px; max-height: 840px;
  background: radial-gradient(circle, oklch(0.55 0.13 40 / 0.3), transparent 65%);
  filter: blur(56px); animation: blob-b 21s ease-in-out infinite alternate;
}
.contact__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(247, 245, 241, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 245, 241, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 75%);
}

/* Crosshair that follows the cursor (pointer devices only, main.js) */
.crosshair { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.crosshair__v, .crosshair__h { position: absolute; background: var(--accent-55); opacity: 0; transition: opacity 400ms ease; }
.crosshair__v { top: 0; bottom: 0; left: 0; width: 1px; }
.crosshair__h { left: 0; right: 0; top: 0; height: 1px; }
.crosshair__label { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 400ms ease; font: 400 12px/16px var(--font-mono); letter-spacing: 0.06em; color: oklch(0.78 0.14 52); white-space: nowrap; }
.crosshair.is-active > * { opacity: 1; }
@media (max-width: 767px), (hover: none) { .crosshair { display: none; } }

.contact__inner { position: relative; z-index: 2; padding: var(--section-y) var(--gutter) clamp(56px, 7vw, 96px); }
.contact__title {
  margin-top: 24px; max-width: 14ch;
  font-size: clamp(40px, 8vw, 128px); line-height: 0.95; font-weight: 700;
  letter-spacing: -0.04em; text-transform: uppercase;
}
.contact__title span { display: inline-block; margin-right: 0.22em; }
.contact__title span:last-child { margin-right: 0; }
.contact__title .accent { color: var(--accent-light); }

.contact__call {
  margin-top: 48px; padding-bottom: 40px;
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-dark);
}
.status { display: inline-flex; align-items: center; gap: 12px; font: 400 13px/20px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
.status__dot { width: 10px; height: 10px; border-radius: 50%; background: oklch(0.62 0.15 52); animation: blink 1.8s ease-in-out infinite; }
.status.is-open .status__dot { background: oklch(0.78 0.16 150); }
.ulink {
  padding-bottom: 4px;
  font-size: clamp(32px, 6vw, 88px); line-height: 1; font-weight: 700; letter-spacing: -0.04em;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% 4px no-repeat;
  transition: background-size 900ms var(--ease-out), color 500ms ease;
}
.ulink:hover { background-size: 100% 4px; color: var(--on-dark); }

.contact__layout { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }

.form {
  position: relative; flex: 1 1 420px; max-width: 640px;
  padding: clamp(24px, 3vw, 48px);
  background: rgba(17, 17, 16, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(247, 245, 241, 0.14);
}
.form__corner { position: absolute; width: 16px; height: 16px; border: 0 solid var(--accent-light); }
.form__corner--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.form__corner--tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.form__corner--bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.form__corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.form__progress { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.form__bar { flex: 1; height: 2px; background: rgba(247, 245, 241, 0.12); }
.form__bar i { display: block; height: 100%; width: calc(var(--progress, 0.2) * 100%); background: var(--accent); transition: width 700ms var(--ease-out); }
.form__count { font: 400 12px/20px var(--font-mono); letter-spacing: 0.06em; color: var(--on-dark-dim); }
@media (max-width: 1023px) {
  .form { flex-basis: 100%; max-width: none; }
  .contact__aside { flex-basis: 100%; }
}

.field { position: relative; margin-bottom: 28px; border-bottom: 1px solid rgba(247, 245, 241, 0.18); }
.field label { display: block; transition: color 400ms ease; }
.field:focus-within label { color: var(--accent-light); }
.field input, .field textarea { width: 100%; padding: 8px 0 12px; border: 0; background: transparent; color: var(--on-dark); outline: none; resize: none; }
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--ease-out);
}
.field:focus-within::after { transform: none; }

.chips { margin: 0 0 28px; padding: 0; border: 0; }
.chips legend { padding: 0; margin-bottom: 12px; }
.chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: block; padding: 8px 16px; cursor: pointer;
  font-size: 14px; line-height: 20px; color: var(--on-dark-soft);
  border: 1px solid rgba(247, 245, 241, 0.24);
  transition: background 400ms ease, color 400ms ease, border-color 400ms ease, transform 400ms var(--ease-out);
}
.chip span:hover { border-color: var(--accent-light); transform: translateY(-2px); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--accent-light); outline-offset: 2px; }

.form__note { margin-bottom: 20px; max-width: 46ch; font: 400 12px/20px var(--font-mono); color: var(--on-dark-dim); }
.form__submit { padding: 16px 16px 16px 32px; background: var(--on-dark); color: var(--ink); cursor: pointer; }
.form__success { display: flex; align-items: center; gap: 16px; }
.form__success[hidden] { display: none; }
.form__success path { stroke-dasharray: 1; animation: check-draw 900ms var(--ease-in-out) forwards; }

.contact__aside { flex: 1 1 360px; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line-dark); }
.details > div { padding: 24px 20px 24px 0; border-bottom: 1px solid var(--line-dark); }
.details dd { margin-top: 8px; }
.details dd.row { display: flex; gap: 16px; }
.checklist { margin-top: 32px; padding: 24px; border: 1px solid var(--line-dark); }
.checklist ul { margin-top: 16px; padding-left: 20px; list-style: disc; color: #A8A49B; }


/* 17. Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; z-index: 2; padding: 0 var(--gutter) 24px; background: var(--night); color: var(--on-dark-dim); }
.site-footer__grid {
  display: grid; gap: 48px; padding-top: 72px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--line-dark);
}
.site-footer .eyebrow { color: #6E6B64; }
.site-footer__cta { margin-top: 24px; }
.site-footer__legal { margin-top: 32px; font-size: 14px; line-height: 20px; }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
.site-footer__col h3 { font: 400 14px/20px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #6E6B64; }
.site-footer__col a { color: var(--on-dark); }
.site-footer__col .gap-top { margin-top: 16px; }
.site-footer__col .row { display: flex; gap: 16px; }
.site-footer__wordmark {
  margin-top: 64px; padding-bottom: 0.1em; overflow: hidden;
  font-size: clamp(48px, 17vw, 250px); line-height: 0.9; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(247, 245, 241, 0.18);
  transition: -webkit-text-stroke-color 700ms ease;
}
.site-footer__wordmark:hover { -webkit-text-stroke-color: var(--accent-light); }
.site-footer__bottom {
  margin-top: 24px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between;
  border-top: 1px solid rgba(247, 245, 241, 0.12);
  font: 400 12px/20px var(--font-mono);
}


/* 18. Mobile action bar
   -------------------------------------------------------------------------- */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; border-top: 1px solid #E5E3DE; }
  .mobile-bar a { flex: 1; padding: 16px; text-align: center; font-weight: 600; }
  .mobile-bar a:first-child { background: var(--ink); color: var(--on-dark); }
  .mobile-bar a:last-child { background: var(--accent); color: #fff; }
  .site-footer { padding-bottom: 88px; }
  h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
}


/* 19. Keyframes
   -------------------------------------------------------------------------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes wipe { 0%, 10% { clip-path: inset(0 100% 0 0); } 45%, 58% { clip-path: inset(0 0 0 0); } 93%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes scan-line { 0%, 10% { left: 0; } 45%, 58% { left: 100%; } 93%, 100% { left: 0; } }
@keyframes outline { 0%, 4% { stroke-dashoffset: 1; } 38%, 100% { stroke-dashoffset: 0; } }
@keyframes label-a { 0%, 22% { opacity: 1; } 32%, 68% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes label-b { 0%, 22% { opacity: 0; } 32%, 68% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes ico-draw { 0% { stroke-dashoffset: 1; } 40%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.5; } }
@keyframes pop-in { 0%, 42% { transform: scale(0); opacity: 0; } 56% { transform: scale(1.25); opacity: 1; } 68%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes blob-a { to { transform: translate3d(14vw, 8vh, 0) scale(1.3); } }
@keyframes blob-b { to { transform: translate3d(-12vw, -10vh, 0) scale(1.2); } }
@keyframes check-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes walk { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes word-in { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
@keyframes bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* 20. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}