@font-face {
  font-family: "ZargarsazVazirmatn";
  src: url("assets/support/zargarsaz-vazirmatn.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #111417;
  --ink-soft: #1d2227;
  --ink-faint: #394149;
  --paper: #edf0f2;
  --paper-deep: #d9dee2;
  --paper-warm: #f8fafb;
  --gold: #969fa7;
  --gold-light: #d7dde1;
  --gold-pale: #eef2f4;
  --line-dark: rgba(215, 221, 225, 0.22);
  --line-light: rgba(42, 49, 56, 0.2);
  --page: min(1260px, calc(100% - clamp(44px, 6vw, 88px)));
  --section-space: clamp(112px, 11vw, 170px);
  --radius-lg: 30px;
  --radius-md: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: "ZargarsazVazirmatn", Tahoma, sans-serif;
  font-weight: 430;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { border: 0; }
img { display: block; max-width: 100%; }
.site-shell { position: relative; }
.page-width { width: var(--page); margin-inline: auto; }
.scene-dark { background: var(--ink); color: var(--paper); }
.scene-paper { background: var(--paper); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Header */
.site-header {
  position: absolute;
  z-index: 20;
  inset: 22px 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  width: var(--page);
  margin-inline: auto;
  transition: background .35s ease, padding .35s ease, transform .35s var(--ease);
}
.site-header.is-scrolled {
  position: fixed;
  inset: 12px 0 auto;
  width: min(1120px, calc(100% - 44px));
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(228,196,123,.24);
  border-radius: 999px;
  background: rgba(23,19,15,.82);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: header-drop .55s var(--ease) both;
}
@keyframes header-drop { from { transform: translateY(-18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 43px; height: 43px; padding: 3px; border: 1px solid rgba(228,196,123,.55); border-radius: 50%; background: var(--paper-warm); overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mix-blend-mode: multiply; }
.brand-lockup { display: grid; gap: 0; line-height: 1.1; }
.brand-name { font-size: 18px; font-weight: 850; letter-spacing: -.05em; }
.brand-caption { color: var(--gold-light); font-size: 9px; letter-spacing: .06em; }
.desktop-nav { display: flex; align-items: center; gap: 27px; margin-inline: auto; color: #d9cdb8; font-size: 12px; }
.desktop-nav a, .site-footer a { transition: color .25s ease; }
.desktop-nav a:hover, .site-footer a:hover { color: var(--gold-light); }
.header-cta { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid rgba(228,196,123,.35); border-radius: 999px; color: var(--gold-pale); font-size: 11px; transition: background .25s ease, border-color .25s ease, transform .25s var(--ease); }
.header-cta span { font-size: 14px; line-height: 1; }
.header-cta:hover { border-color: var(--gold-light); background: rgba(198,154,63,.17); transform: translateY(-2px); }
.menu-toggle, .mobile-nav { display: none; }

/* Buttons and editorial primitives */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 13px 20px; border-radius: 999px; font-size: 12px; font-weight: 780; transition: transform .35s var(--ease), box-shadow .35s ease, background .35s ease; }
.button span { font-size: 17px; line-height: .7; }
.button--gold { background: var(--gold-light); color: var(--ink); box-shadow: 0 14px 32px rgba(198,154,63,.18); }
.button--gold:hover { background: #f0d491; box-shadow: 0 18px 35px rgba(198,154,63,.3); transform: translateY(-4px); }
.button--large { min-height: 60px; padding-inline: 27px; font-size: 13px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--gold-light); font-size: 10px; font-weight: 680; letter-spacing: .06em; }
.eyebrow-line { display: inline-block; width: 35px; height: 1px; background: currentColor; }
.eyebrow--ink { color: #947136; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 0 4px rgba(228,196,123,.1); }
.status-dot--outline { background: transparent; border: 1px solid var(--gold-light); box-shadow: none; }

/* Hero */
.hero { position: relative; min-height: 860px; padding: 166px 0 38px; overflow: hidden; }
.hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 10% 16%, rgba(198,154,63,.13), transparent 28%), linear-gradient(117deg, rgba(255,251,240,.03), transparent 37%); content: ""; pointer-events: none; }
.hero-ambient { position: absolute; border: 1px solid rgba(228,196,123,.12); border-radius: 50%; pointer-events: none; }
.hero-ambient--one { top: 10%; left: -13vw; width: 42vw; aspect-ratio: 1; }
.hero-ambient--two { right: -20vw; bottom: 2%; width: 58vw; aspect-ratio: 1; border-color: rgba(228,196,123,.08); }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(270px, .72fr) minmax(500px, 1.3fr); align-items: center; gap: clamp(45px, 8vw, 140px); }
.hero-copy { padding-top: 22px; }
.hero h1 { max-width: 560px; margin: 31px 0 23px; color: #fff9ed; font-size: clamp(43px, 5.8vw, 83px); font-weight: 760; letter-spacing: -.08em; line-height: 1.1; }
.hero h1 em, .catalogue h2 em, .principle h2 em, .second-proof h2 em, .closing h2 em { color: var(--gold-light); font-style: normal; }
.hero-lede { max-width: 370px; margin: 0; color: #b9ae9b; font-size: 14px; line-height: 2; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 38px; }
.hero-note { display: inline-flex; align-items: center; gap: 9px; color: #a59a89; font-size: 10px; }
.hero-proof { min-width: 0; padding-top: 12px; }
.proof-meta, .proof-caption, .hero-foot, .project-info, .principle-rule, .site-footer, .closing-kicker, .architectural-caption { display: flex; align-items: center; justify-content: space-between; }
.proof-meta { margin-bottom: 14px; color: #ad9d84; font-size: 10px; }
.project-index { color: var(--gold-light); font-size: 11px; font-weight: 790; letter-spacing: .12em; }
.proof-state { display: inline-flex; align-items: center; gap: 8px; }
.comparison { --position: 50%; position: relative; isolation: isolate; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(228,196,123,.32); border-radius: var(--radius-lg); background: #30261c; box-shadow: 0 35px 75px rgba(0,0,0,.27); cursor: ew-resize; outline: none; touch-action: none; }
.comparison:focus-visible { box-shadow: 0 0 0 3px var(--gold-light), 0 35px 75px rgba(0,0,0,.27); }
.comparison--hero { min-height: 485px; }
.comparison-scene { position: absolute; inset: 0; overflow: hidden; }
.comparison-scene--before { z-index: 1; background: #7a6f61; }
.comparison-scene--after { z-index: 2; width: 100%; background: #a87525; clip-path: inset(0 0 0 calc(100% - var(--position))); }
.comparison-scene--after::after { position: absolute; inset: 0; background: linear-gradient(108deg, rgba(255,242,194,.1), transparent 48%, rgba(18,10,4,.18)); content: ""; pointer-events: none; }
.slot-art { position: absolute; inset: 0; overflow: hidden; }
.slot-art--before { background: linear-gradient(135deg, #665c53, #a89c8b 50%, #736758); }
.slot-art--before::before { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 65px, rgba(31,24,18,.22) 66px 67px), repeating-linear-gradient(0deg, transparent 0 60px, rgba(255,255,255,.09) 61px 62px); content: ""; opacity: .85; }
.slot-art--before::after { position: absolute; left: 8%; right: 8%; bottom: 14%; height: 16%; border: 1px solid rgba(36,29,22,.35); border-radius: 4px; background: linear-gradient(180deg, rgba(40,32,24,.1), rgba(45,35,25,.35)); content: ""; }
.slot-art--after { background: radial-gradient(circle at 68% 24%, rgba(255,237,176,.8), transparent 4%, transparent 24%), linear-gradient(135deg, #6c461d 2%, #c79945 47%, #37261a 100%); }
.slot-art--after::before { position: absolute; right: 7%; top: 10%; width: 42%; height: 65%; border: 1px solid rgba(255,237,176,.45); border-radius: 9px; background: linear-gradient(148deg, rgba(57,35,17,.1), rgba(22,16,10,.48)); box-shadow: inset 0 0 0 8px rgba(243,211,142,.1), 0 20px 44px rgba(21,12,3,.3); content: ""; }
.slot-art--after::after { position: absolute; right: 15%; bottom: 18%; width: 58%; height: 15%; border-radius: 5px; background: linear-gradient(180deg, #e0bb68, #6e4215); box-shadow: 0 17px 22px rgba(14,10,6,.35); content: ""; }
.slot-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 44%, rgba(255,219,133,.4), transparent 35%); mix-blend-mode: screen; }
.slot-grid { position: absolute; inset: 8% 6%; border: 1px dashed rgba(255,244,213,.34); opacity: .75; }
.slot-dimensions { display: none; }
.comparison-label { position: absolute; z-index: 2; top: 21px; display: grid; place-items: center; min-width: 53px; min-height: 29px; border: 1px solid rgba(255,245,215,.32); border-radius: 999px; background: rgba(22,17,12,.48); color: #fff5dc; font-size: 11px; font-weight: 730; letter-spacing: .07em; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.comparison-label--before { left: 20px; right: auto; }
.comparison-label--after { right: 20px; left: auto; }
.media-status { display: none; }
.comparison-scene--before .media-status { right: 22px; }
.comparison-scene--after .media-status { left: 22px; right: auto; }
.comparison-divider { position: absolute; z-index: 4; top: 0; bottom: 0; right: var(--position); width: 1px; background: var(--gold-light); box-shadow: 0 0 0 1px rgba(23,19,15,.16), 0 0 20px rgba(228,196,123,.45); pointer-events: none; }
.comparison-handle { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #f1d38a; border-radius: 50%; background: var(--ink); color: var(--gold-light); box-shadow: 0 10px 30px rgba(0,0,0,.3); transform: translate(-50%, -50%); transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease; }
.comparison:hover .comparison-handle, .comparison.is-dragging .comparison-handle { background: #21180f; box-shadow: 0 0 0 7px rgba(228,196,123,.13), 0 15px 35px rgba(0,0,0,.36); transform: translate(-50%, -50%) scale(1.08); }
.comparison-handle span { display: none; }
.comparison-handle b { position: relative; z-index: 2; display: block; width: 28px; height: 20px; color: transparent; font-size: 0; }
.comparison-handle b::before, .comparison-handle b::after { position: absolute; top: -3px; color: var(--gold-light); font-family: Arial, sans-serif; font-size: 25px; font-weight: 400; line-height: 1; }
.comparison-handle b::before { right: 1px; content: "‹"; }
.comparison-handle b::after { left: 1px; content: "›"; }
.comparison-range { position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; opacity: 0; pointer-events: none; }
.comparison-corner { display: none; }
.proof-caption { gap: 30px; margin-top: 19px; }
.proof-caption h2 { margin: 0 0 4px; color: #f7eedf; font-size: 18px; font-weight: 720; letter-spacing: -.04em; }
.proof-caption p { margin: 0; color: #9d907d; font-size: 11px; }
.drag-hint { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--gold-light); font-size: 10px; white-space: nowrap; }
.drag-hint-icon { display: grid; place-items: center; width: 35px; height: 28px; border: 1px solid rgba(228,196,123,.46); border-radius: 999px; letter-spacing: -4px; padding-left: 5px; }
.hero-foot { position: absolute; z-index: 1; right: 0; bottom: 33px; left: 0; color: #897d6b; font-size: 9px; letter-spacing: .08em; }
.scroll-cue { display: inline-flex; align-items: center; gap: 9px; color: #c3ad83; }
.scroll-cue i { display: inline-block; width: 1px; height: 28px; background: var(--gold-light); animation: scroll-line 2.3s var(--ease) infinite; transform-origin: top; }
@keyframes scroll-line { 0%,100% { transform: scaleY(.35); opacity: .45; } 50% { transform: scaleY(1); opacity: 1; } }

/* Principle / paper scene */
.principle { position: relative; padding: 157px 0 170px; overflow: hidden; }
.paper-grain { position: absolute; inset: 0; opacity: .42; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); mix-blend-mode: multiply; pointer-events: none; }
.principle-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: clamp(60px, 10vw, 160px); align-items: center; }
.principle h2 { max-width: 620px; margin: 30px 0 26px; color: var(--ink); font-size: clamp(43px, 5.2vw, 72px); font-weight: 750; letter-spacing: -.08em; line-height: 1.13; }
.principle h2 em { color: #966f2a; }
.principle-copy > p { max-width: 465px; margin: 0; color: #5d5040; font-size: 14px; line-height: 2.2; }
.principle-rule { max-width: 410px; gap: 14px; margin-top: 47px; color: #95723a; font-size: 10px; letter-spacing: .05em; }
.principle-rule i { display: block; flex: 1; height: 1px; background: #bda276; }
.material-reference { width: min(100%, 465px); margin: 0 auto; cursor: pointer; }
.reference-frame { position: relative; aspect-ratio: 1 / 1.18; padding: 13px; border: 1px solid rgba(69,51,27,.38); background: #e3d5c2; box-shadow: 18px 18px 0 rgba(120,91,48,.12); transform: rotate(-2.1deg); transition: transform .7s var(--ease), box-shadow .7s ease; }
.material-reference:hover .reference-frame, .material-reference.is-focused .reference-frame { transform: rotate(0deg) translateY(-7px); box-shadow: 24px 24px 0 rgba(120,91,48,.14); }
.reference-frame::before { position: absolute; inset: 7px; border: 1px solid rgba(69,51,27,.21); content: ""; pointer-events: none; }
.reference-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) sepia(.11); }
.reference-stamp { position: absolute; bottom: 30px; left: 30px; padding: 9px 12px; border: 1px solid rgba(244,225,183,.56); background: rgba(35,25,16,.73); color: var(--gold-pale); font-size: 9px; font-weight: 760; letter-spacing: .12em; line-height: 1.3; }
.material-reference figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; color: #806e54; font-size: 9px; }
.material-reference figcaption span:last-child { color: #aa977d; text-align: left; }
.measure-line { display: flex; align-items: center; gap: 12px; color: #a68b5b; font-size: 9px; letter-spacing: .1em; }
.measure-line i { flex: 1; height: 1px; background: rgba(131,101,48,.38); }
.measure-line--principle { position: absolute; right: 5%; bottom: 53px; width: 36%; }

/* Catalogue */
.catalogue { position: relative; padding: var(--section-space) 0; overflow: hidden; }
.catalogue::after { position: absolute; top: 0; right: 7%; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(228,196,123,.14) 15%, rgba(228,196,123,.14) 82%, transparent); content: ""; pointer-events: none; }
.catalogue-top { position: relative; z-index: 1; display: grid; grid-template-columns: .65fr 1.35fr; gap: 40px; align-items: start; margin-bottom: 84px; }
.catalogue-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: end; }
.catalogue h2 { margin: -18px 0 0; color: #fff9ed; font-size: clamp(49px, 6.2vw, 85px); font-weight: 740; letter-spacing: -.1em; line-height: 1.02; }
.catalogue h2 em { color: var(--gold-light); }
.catalogue-intro p { max-width: 270px; margin: 0 0 5px; color: #a99c87; font-size: 13px; line-height: 2.1; }
.project-archive { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 84px 44px; }
.project { min-width: 0; }
.project--wide { grid-column: 1 / -1; }
.project--portrait { grid-column: 1 / span 5; display: grid; gap: 24px; align-self: start; }
.project--inset { grid-column: 7 / -1; align-self: start; margin-top: 0; }
.project--quiet { grid-column: 1 / span 7; align-self: start; margin-top: 0; }
.project--tall { grid-column: 8 / -1; align-self: start; margin-top: 0; }
.project-visual { position: relative; }
.project-visual--diptych { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: end; gap: 10px; }
.static-media { position: relative; overflow: hidden; border: 1px solid rgba(228,196,123,.27); background: #3e3429; }
.static-media .slot-art { transition: transform .8s var(--ease), filter .8s ease; }
.static-media:hover .slot-art, .project.is-focused .static-media .slot-art { transform: scale(1.045); filter: saturate(1.12); }
.static-media--before { background: #665d50; }
.static-media--after { background: #73501f; }
.static-media .static-label { position: absolute; z-index: 2; top: 17px; right: 17px; display: grid; place-items: center; min-width: 45px; height: 26px; padding: 0 9px; border: 1px solid rgba(255,246,216,.31); border-radius: 999px; background: rgba(23,19,15,.61); color: #fff3d4; font-size: 10px; }
.static-media .media-status { right: 17px; bottom: 15px; }
.project-visual--diptych .static-media:first-child { aspect-ratio: .6 / 1; }
.project-visual--diptych .static-media:last-child { aspect-ratio: 1.5 / 1; }
.project--wide .project-info { margin-top: 19px; }
.project-info { gap: 20px; border-top: 1px solid var(--line-dark); padding-top: 18px; }
.project-info > div { flex: 1; }
.project-number { align-self: flex-start; color: var(--gold-light); font-size: 11px; letter-spacing: .1em; }
.project-info h3 { position: relative; width: fit-content; margin: 0 0 3px; color: #f5eddf; font-size: 21px; font-weight: 720; letter-spacing: -.05em; }
.project-info h3::after { position: absolute; right: 0; bottom: -4px; width: 100%; height: 1px; background: var(--gold-light); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.project:hover .project-info h3::after, .project.is-focused .project-info h3::after { transform: scaleX(1); }
.project-info p { margin: 0; color: #9e927f; font-size: 11px; line-height: 1.9; }
.project-arrow { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid rgba(228,196,123,.4); border-radius: 50%; color: var(--gold-light); font-size: 15px; transition: background .25s ease, transform .25s var(--ease); }
.project:hover .project-arrow, .project.is-focused .project-arrow { background: rgba(228,196,123,.13); transform: translate(-4px, -4px) rotate(8deg); }
.project { cursor: pointer; transition: transform .45s var(--ease); }
.project:hover, .project.is-focused { transform: translateY(-5px); }
.project:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 9px; }
.project--portrait .project-info { order: 2; border-top: 0; border-bottom: 1px solid var(--line-dark); padding: 0 0 18px; }
.project-visual--portrait { display: grid; grid-template-columns: 1fr; gap: 10px; }
.project-visual--portrait .static-media { aspect-ratio: .9 / 1; }
.project-visual--portrait .static-media:first-child { margin-left: 0; }
.project-index-vertical { position: absolute; left: -37px; bottom: 75px; color: rgba(228,196,123,.52); font-size: 9px; letter-spacing: .14em; transform: rotate(-90deg); transform-origin: left center; transition: color .3s ease, letter-spacing .3s ease; }
.project:hover .project-index-vertical, .project.is-focused .project-index-vertical { color: var(--gold-light); letter-spacing: .2em; }
.project--inset .project-visual--feature { display: grid; grid-template-columns: 1fr .3fr; align-items: end; gap: 15px; }
.feature-surface { position: relative; min-height: 370px; overflow: hidden; border: 1px solid rgba(228,196,123,.3); background: #744e1a; }
.feature-surface .media-status { right: 20px; bottom: 20px; }
.before-inset { position: relative; z-index: 2; aspect-ratio: .73 / 1; margin-bottom: 22px; overflow: hidden; border: 5px solid var(--ink); box-shadow: 0 13px 35px rgba(0,0,0,.3); background: #63594e; }
.before-inset .slot-dimensions { display: none; }
.before-inset > span:last-child { position: absolute; right: -20px; bottom: -2px; color: var(--gold-light); font-size: 9px; white-space: nowrap; transform: rotate(-90deg); transform-origin: right bottom; }
.project--inset .project-info { max-width: 690px; margin-top: 21px; }
.project--quiet .project-visual--quiet-pair { display: grid; grid-template-columns: .95fr 1.15fr; gap: 10px; }
.project-visual--quiet-pair .static-media { aspect-ratio: 1.12 / 1; }
.project--quiet .project-info { max-width: 570px; margin-top: 18px; }
.project--tall .project-visual--tall { display: grid; grid-template-columns: .92fr 1fr; gap: 10px; }
.project-visual--tall .static-media { aspect-ratio: .73 / 1.13; }
.project--tall .project-info { margin-top: 18px; }
.archive-note { display: none; }
.archive-note-mark { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--gold-light); border-radius: 50%; color: var(--gold-light); font-size: 18px; font-weight: 300; line-height: 1; }
.archive-note strong { display: block; margin-bottom: 5px; color: #f1e5d1; font-size: 13px; font-weight: 720; }
.archive-note p { margin: 0; color: #988d7a; font-size: 10px; line-height: 2; }

/* Second interactive proof */
.second-proof { position: relative; padding: var(--section-space) 0; overflow: hidden; }
.paper-blueprint { position: absolute; inset: 0; opacity: .48; pointer-events: none; }
.paper-blueprint::before, .paper-blueprint::after { position: absolute; content: ""; border: 1px solid rgba(117,93,49,.13); border-radius: 50%; }
.paper-blueprint::before { top: -28%; right: -11%; width: 55vw; aspect-ratio: 1; }
.paper-blueprint::after { right: -2%; bottom: -55%; width: 48vw; aspect-ratio: 1; }
.paper-blueprint span { position: absolute; top: 12%; bottom: 8%; width: 1px; background: rgba(117,93,49,.11); }
.paper-blueprint span:nth-child(1) { right: 24%; }
.paper-blueprint span:nth-child(2) { right: 42%; }
.paper-blueprint span:nth-child(3) { right: 74%; }
.paper-blueprint i { position: absolute; top: 34%; right: 9%; width: 75%; height: 1px; background: rgba(117,93,49,.13); }
.paper-blueprint b { position: absolute; top: 30%; right: 19%; width: 260px; height: 110px; border: 1px solid rgba(117,93,49,.16); transform: rotate(-9deg); }
.second-proof-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .77fr 1.23fr; gap: clamp(60px, 8vw, 122px); align-items: center; }
.second-proof-number { display: block; margin-top: 47px; color: #9a783d; font-size: 12px; letter-spacing: .18em; }
.second-proof h2 { margin: 18px 0 24px; color: var(--ink); font-size: clamp(44px, 5.5vw, 74px); font-weight: 740; letter-spacing: -.09em; line-height: 1.08; }
.second-proof h2 em { color: #8e6727; }
.second-proof-copy > p { max-width: 355px; margin: 0; color: #645745; font-size: 13px; line-height: 2.2; }
.architectural-caption { max-width: 340px; gap: 12px; margin-top: 48px; color: #96743f; font-size: 9px; letter-spacing: .1em; }
.architectural-caption i { flex: 1; height: 1px; background: rgba(126,95,43,.33); }
.second-proof-visual { min-width: 0; }
.comparison--architectural { aspect-ratio: 1.36 / 1; border-color: rgba(93,70,31,.42); border-radius: 7px; box-shadow: 20px 20px 0 rgba(152,116,52,.13); }
.comparison--architectural .comparison-scene--before { background: #a69b8a; }
.comparison--architectural .comparison-scene--after { background: #a6752c; }
.comparison--architectural .comparison-label { border-color: rgba(37,28,17,.26); background: rgba(247,238,218,.65); color: #3b2e20; }
.comparison--architectural .comparison-handle { background: #f6ecd9; color: #7b5721; border-color: #b78b3d; }
.comparison--architectural .comparison-handle span { background-color: #8c6529; }
.comparison--architectural .comparison-handle b::before, .comparison--architectural .comparison-handle b::after { color: #8c6529; }
.comparison--architectural .comparison-divider { background: #a37731; }
.comparison--architectural .media-status { background: rgba(247,239,221,.76); color: #4d3b23; border-color: rgba(70,52,24,.22); }
.comparison--architectural .comparison-corner { color: rgba(76,57,26,.72); }
.drag-hint--ink { margin-top: 23px; color: #80602b; justify-content: flex-end; }

/* Closing */
.closing { position: relative; min-height: 700px; padding: 135px 0 29px; overflow: hidden; background: radial-gradient(circle at 70% 19%, rgba(126,81,19,.3), transparent 31%), linear-gradient(135deg, #17130f 0%, #231a12 53%, #4b3215 100%); }
.closing::before { position: absolute; inset: 0; background: repeating-linear-gradient(113deg, transparent 0 86px, rgba(228,196,123,.05) 87px 88px); content: ""; opacity: .45; }
.closing-ornament { position: absolute; top: 20%; left: -5%; width: 46vw; height: 46vw; border: 1px solid rgba(228,196,123,.17); border-radius: 50%; transform: rotate(19deg); }
.closing-ornament span { position: absolute; inset: 10%; border: 1px solid rgba(228,196,123,.09); border-radius: 50%; }
.closing-ornament span:nth-child(2) { inset: 21%; }
.closing-ornament span:nth-child(3) { inset: 34%; }
.closing-inner { position: relative; z-index: 1; max-width: 810px; margin-inline: auto; text-align: center; }
.closing-kicker { margin-bottom: 47px; color: #b79b62; font-size: 10px; letter-spacing: .11em; }
.closing h2 { margin: 0; color: #fff7e9; font-size: clamp(45px, 6.5vw, 91px); font-weight: 740; letter-spacing: -.1em; line-height: 1.07; }
.closing h2 em { color: var(--gold-light); }
.closing p { max-width: 375px; margin: 28px auto 31px; color: #c0b29d; font-size: 13px; line-height: 2; }
.site-footer { position: absolute; z-index: 1; right: 0; bottom: 28px; left: 0; color: #8c795b; font-size: 9px; letter-spacing: .08em; }
.site-footer a { color: #bda06a; }

.closing-inner {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 8vw, 130px);
  align-items: center;
  max-width: 1120px;
  text-align: initial;
  direction: ltr;
}

.closing-copy {
  direction: rtl;
  text-align: center;
}

.closing-copy p {
  margin-inline: auto;
  text-align: center;
}

.closing-copy .closing-action {
  display: flex;
  justify-content: center;
  width: 100%;
}

.closing-contact {
  direction: rtl;
  justify-self: start;
  width: min(100%, 310px);
  margin: 0;
  padding: 25px 28px;
  border: 1px solid rgba(215, 221, 225, .24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(215, 221, 225, .12), rgba(11, 15, 18, .32));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
  font-style: normal;
  text-align: right;
}

.closing-contact__eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
}

.closing-contact__phone {
  display: inline-block;
  margin-bottom: 16px;
  color: #f1d38a;
  font-family: Tahoma, sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: .04em;
}

.closing-contact__phone--secondary {
  display: block;
  margin-bottom: 6px;
  color: #d3dce0;
  font-size: 17px;
}

.closing-contact p {
  max-width: none;
  margin: 0;
  color: #d3dce0;
  font-size: 15px;
  line-height: 2;
}

.closing-contact__note {
  margin-top: 18px !important;
  color: #c8d1d5 !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  text-align: center;
}

.closing-contact__action {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.closing-contact__action .button {
  min-height: 46px;
  padding-inline: 16px;
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .closing-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    direction: rtl;
  }

  .closing-contact {
    justify-self: center;
    order: 2;
  }

  .closing-copy {
    order: 1;
  }
}

/* Deliberate reveal motion */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s var(--ease); }
.reveal--hero { transform: translateX(28px); transition-duration: .95s; }
.reveal--proof { transform: translateX(-28px) scale(.985); transition-duration: 1.1s; }
.reveal--slow { transition-duration: 1.25s; }
.reveal--delay { transition-delay: .12s; }
.reveal.is-visible { opacity: 1; transform: none; }
body:not(.motion-ready) .reveal { opacity: 1; transform: none; }

@media (max-width: 1060px) {
  :root { --page: min(100% - 48px, 880px); }
  .site-header { gap: 18px; }
  .desktop-nav { gap: 16px; }
  .hero { min-height: auto; padding-top: 150px; padding-bottom: 102px; }
  .hero-inner { grid-template-columns: 1fr; gap: 58px; }
  .hero-copy { max-width: 650px; }
  .hero-proof { max-width: 760px; margin-inline: auto; width: 100%; }
  .principle-grid, .second-proof-grid { gap: 55px; }
  .catalogue-intro { gap: 30px; }
  .project--portrait { grid-column: 1 / span 5; }
  .project--inset { grid-column: 7 / -1; }
}

@media (max-width: 720px) {
  :root { --page: calc(100% - 36px); }
  .site-header { position: absolute; inset: 14px 0 auto; width: var(--page); gap: 0; }
  .site-header.is-scrolled { inset: 9px 0 auto; width: calc(100% - 24px); padding: 6px 9px 6px 12px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 16px; }
  .brand-caption { font-size: 8px; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { position: relative; display: grid; place-content: center; gap: 5px; width: 38px; height: 38px; margin-inline-start: auto; border: 1px solid rgba(228,196,123,.44); border-radius: 50%; background: transparent; color: var(--gold-light); cursor: pointer; }
  .menu-toggle span:not(.sr-only) { display: block; width: 15px; height: 1px; background: currentColor; transition: transform .3s var(--ease); }
  .site-header.menu-active .menu-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
  .site-header.menu-active .menu-toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
  .mobile-nav { position: absolute; top: calc(100% + 11px); right: 0; left: 0; display: grid; gap: 5px; max-height: 0; padding: 0 12px; overflow: hidden; border: 1px solid transparent; border-radius: 20px; background: rgba(35,27,18,.96); opacity: 0; transition: max-height .45s var(--ease), opacity .35s ease, padding .45s var(--ease); }
  .site-header.menu-active .mobile-nav { max-height: 220px; padding: 11px 12px; border-color: rgba(228,196,123,.24); opacity: 1; }
  .mobile-nav a { padding: 10px 8px; border-bottom: 1px solid rgba(228,196,123,.13); color: #f6ead5; font-size: 12px; }
  .mobile-nav a:last-child { border-bottom: 0; }
  .hero { padding-top: 127px; padding-bottom: 82px; }
  .hero h1 { margin-top: 24px; font-size: clamp(39px, 12vw, 60px); }
  .hero-lede { font-size: 13px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 29px; }
  .comparison--hero { min-height: 350px; }
  .comparison { border-radius: 22px; }
  .comparison-corner { font-size: 8px; }
  .comparison-corner--tl { top: 16px; left: 16px; }
  .comparison-corner--br { bottom: 17px; }
  .comparison-label { top: 16px; min-width: 45px; min-height: 26px; font-size: 10px; }
  .comparison-label--before { left: 16px; right: auto; }
  .comparison-label--after { right: 16px; left: auto; }
  .media-status { right: 16px; bottom: 15px; font-size: 8px; }
  .comparison-scene--after .media-status { left: 16px; }
  .proof-caption { align-items: flex-start; flex-direction: column; gap: 17px; }
  .hero-foot { right: 18px; bottom: 26px; left: 18px; width: auto; }
  .hero-foot > span:first-child, .hero-foot > span:last-child { display: none; }
  .hero-foot .scroll-cue { margin-inline: auto; }
  .principle { padding: 105px 0 123px; }
  .principle-grid { grid-template-columns: 1fr; gap: 65px; }
  .principle h2 { margin-top: 23px; font-size: clamp(40px, 11vw, 57px); }
  .principle-copy > p { font-size: 13px; }
  .material-reference { width: min(100%, 390px); margin-inline: auto 0; }
  .measure-line--principle { right: 9%; bottom: 43px; width: 65%; }
  .catalogue { padding: 108px 0 118px; }
  .catalogue-top { grid-template-columns: 1fr; gap: 38px; margin-bottom: 73px; }
  .catalogue-intro { display: block; }
  .catalogue h2 { margin: 0 0 23px; font-size: clamp(45px, 13vw, 65px); }
  .catalogue-intro p { max-width: 420px; font-size: 12px; }
  .project-archive { display: flex; flex-direction: column; gap: 78px; }
  .project--portrait, .project--inset, .project--quiet, .project--tall { margin-top: 0; }
  .project--portrait { width: min(88%, 465px); margin-inline-start: 0; }
  .project--inset { width: min(100%, 575px); margin-inline-start: auto; }
  .project--quiet { width: min(93%, 620px); margin-inline-end: auto; }
  .project--tall { width: min(92%, 520px); margin-inline-start: auto; }
  .project--wide .project-info, .project--quiet .project-info, .project--tall .project-info { align-items: flex-start; }
  .project-info h3 { font-size: 18px; }
  .project-info p { font-size: 10px; }
  .project--inset .project-visual--feature { grid-template-columns: 1fr .35fr; }
  .feature-surface { min-height: 320px; }
  .archive-note { width: min(100%, 440px); margin-top: -13px; }
  .second-proof { padding: 112px 0 132px; }
  .second-proof-grid { grid-template-columns: 1fr; gap: 54px; }
  .second-proof-number { margin-top: 35px; }
  .second-proof h2 { font-size: clamp(41px, 11vw, 59px); }
  .second-proof-copy > p { font-size: 12px; }
  .second-proof-visual { width: min(100%, 670px); margin-inline: auto; }
  .comparison--architectural { box-shadow: 12px 12px 0 rgba(152,116,52,.13); }
  .closing { min-height: 650px; padding: 104px 0 95px; }
  .closing h2 { font-size: clamp(42px, 12vw, 62px); }
  .closing-kicker { margin-bottom: 37px; }
  .closing p { font-size: 12px; }
  .site-footer { right: var(--page); left: var(--page); width: auto; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
  .site-footer span:nth-child(2) { display: none; }
}

/* Reliability pass 02: stable geometry, readable hierarchy, and honest project media. */
:root {
  --section-space: clamp(84px, 7.5vw, 116px);
  --motion-fast: 180ms;
  --motion-base: 260ms;
}

section[id] { scroll-margin-top: 96px; }
html, body { max-width: 100%; overflow-x: clip; }
.brand-caption, .eyebrow, .proof-meta, .project-index, .comparison-label,
.static-media .static-label, .process-card__copy > span, .detail-card figcaption > span,
.editorial-controls span, .closing-kicker, .site-footer, .process-story__note,
.material-reference figcaption, .reference-stamp, .architectural-caption,
.principle-rule, .measure-line { font-size: 11px; }
.desktop-nav, .header-cta, .button, .button--large { font-size: 14px; }
.desktop-nav a, .header-cta { min-height: 44px; display: inline-flex; align-items: center; }
.header-cta { padding-inline: 18px; }
.hero-lede, .principle-copy > p, .catalogue-intro p, .second-proof-copy > p,
.closing p, .process-story__intro p, .process-card__copy p,
.project-details__head > p, .detail-card p, .project-info p, .proof-caption p,
.archive-note p { font-size: 16px; line-height: 1.9; }
.hero-note, .drag-hint { font-size: 13px; }

.hero { min-height: min(880px, 100svh); padding: clamp(132px, 12vh, 164px) 0 76px; }
.hero-inner { grid-template-columns: minmax(300px, .78fr) minmax(520px, 1.22fr); gap: clamp(44px, 6vw, 96px); }
.hero h1 { font-size: clamp(46px, 5.1vw, 74px); letter-spacing: -.055em; line-height: 1.16; }
.hero-proof { padding-top: 0; }
.hero-media { position: relative; min-height: 470px; overflow: hidden; border: 1px solid rgba(228,196,123,.34); border-radius: 28px; background: #292016; box-shadow: 0 32px 72px rgba(0,0,0,.28); }
.hero-media::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(16,11,7,.48)); content: ""; pointer-events: none; }
.hero-media__main { width: 100%; height: 100%; min-height: 470px; object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.03); }
.hero-media__inset { position: absolute; z-index: 2; left: 22px; bottom: 22px; width: min(34%, 210px); margin: 0; padding: 8px; border: 1px solid rgba(255,244,214,.42); background: rgba(23,19,15,.9); box-shadow: 0 16px 34px rgba(0,0,0,.35); }
.hero-media__inset img { width: 100%; aspect-ratio: 1.2 / 1; object-fit: cover; }
.hero-media__inset-media { display: block; width: 100%; aspect-ratio: 1.2 / 1; object-fit: cover; }
.hero-media__inset figcaption { padding-top: 7px; color: #e7d6b3; font-size: 11px; }
.hero-media__badge { position: absolute; z-index: 2; top: 20px; right: 20px; min-height: 34px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid rgba(255,244,214,.4); border-radius: 999px; background: rgba(23,19,15,.72); color: #fff0cd; font-size: 12px; backdrop-filter: blur(10px); }
.hero-media__line { position: absolute; z-index: 2; top: 0; bottom: 0; right: 31%; width: 1px; background: linear-gradient(transparent, rgba(228,196,123,.54), transparent); }
.proof-caption { align-items: flex-start; }
.proof-caption h2 { font-size: 23px; line-height: 1.45; }
.proof-caption p { max-width: 46ch; }

.principle { padding: var(--section-space) 0; }
.principle-grid { gap: clamp(48px, 7vw, 104px); }
.principle h2, .catalogue h2, .second-proof h2, .closing h2,
.process-story__intro h2, .project-details__head h2 { line-height: 1.16; letter-spacing: -.05em; overflow: visible; }
.catalogue h2 { margin-top: 0; }
.catalogue-top { margin-bottom: clamp(52px, 6vw, 76px); }
.project-archive { gap: 64px 36px; }
.process-story, .project-details, .catalogue, .second-proof { overflow: visible; }
.process-story__head, .project-details__head { align-items: center; }
.process-story__intro { grid-template-columns: minmax(0,1.15fr) minmax(260px,.75fr); }
.editorial-controls { grid-template-columns: 44px auto 44px; }
.editorial-controls button { width: 44px; height: 44px; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.editorial-controls button:hover:not(:disabled), .editorial-controls button:focus-visible { transform: none; box-shadow: 0 0 0 4px rgba(198,154,63,.16); }
.project-info { padding-top: 18px; }
.static-media img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--motion-base) ease, transform var(--motion-base) ease; }
.static-media:hover img, .project.is-focused .static-media img { transform: scale(1.012); filter: saturate(1.05) contrast(1.02); }
.project, .reference-frame, .button, .header-cta, .project-arrow { transition-duration: var(--motion-base); }
.project:hover, .project.is-focused, .header-cta:hover, .button--gold:hover { transform: none; }
.project:hover .project-arrow, .project.is-focused .project-arrow { transform: rotate(8deg); }
.material-reference:hover .reference-frame, .material-reference.is-focused .reference-frame { transform: rotate(-.6deg) scale(1.01); }
.closing { min-height: 620px; padding: 108px 0 92px; }
.closing-kicker { margin-bottom: 28px; }
.closing-action { display: inline-flex; min-width: 44px; min-height: 60px; }
.site-footer { bottom: 24px; }

@media (max-width: 1060px) {
  .hero { min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media, .hero-media__main { min-height: 440px; }
}

@media (max-width: 720px) {
  :root { --section-space: 76px; }
  .site-header, .menu-toggle { min-height: 44px; }
  .menu-toggle { width: 44px; height: 44px; }
  .mobile-nav a { min-height: 44px; display: flex; align-items: center; font-size: 14px; }
  .hero { padding-top: 118px; padding-bottom: 68px; }
  .hero h1 { font-size: clamp(40px, 11vw, 55px); line-height: 1.18; }
  .hero-media, .hero-media__main { min-height: 360px; }
  .hero-media__inset { left: 14px; bottom: 14px; width: 42%; }
  .hero-media__badge { top: 14px; right: 14px; }
  .proof-caption { gap: 13px; }
  .principle, .catalogue, .second-proof, .process-story, .project-details { padding: var(--section-space) 0; }
  .catalogue h2, .principle h2, .second-proof h2, .process-story__intro h2,
  .project-details__head h2 { font-size: clamp(38px, 10.5vw, 54px); line-height: 1.2; }
  .project-archive { gap: 54px; }
  .process-story__intro { grid-template-columns: 1fr; }
  .project-info p, .catalogue-intro p, .second-proof-copy > p,
  .principle-copy > p, .closing p { font-size: 16px; }
  .closing { min-height: 600px; padding: 84px 0 108px; }
  .closing h2 { font-size: clamp(39px, 10.5vw, 54px); line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 59 v0.3 integration layer. The retained source stylesheet is unchanged. */
.hero.tf9-three-host { isolation: isolate; }
.hero .tf9-three-ambient { opacity: .38; mix-blend-mode: screen; }
.hero.tf9-three-host > .hero-inner,
.hero.tf9-three-host > .hero-foot { position: relative; z-index: 1; }
.tf9-magnetic { display: inline-flex; width: fit-content; }
.hero-actions.tf9-magnetic { display: flex; width: auto; }
.project.tf9-tilt-card, .hero-proof.tf9-tilt-card, .second-proof-visual.tf9-tilt-card {
  transform-origin: center;
  backface-visibility: hidden;
}
.eyebrow-line.tf9-effect { opacity: 1; }
.catalogue-top.tf9-effect { --tf9-distance: 34px; --tf9-stagger: 120ms; }
.closing-inner.tf9-effect { --tf9-distance: 38px; --tf9-stagger: 105ms; }

@media (hover: none), (pointer: coarse) {
  .project.tf9-tilt-card, .hero-proof.tf9-tilt-card, .second-proof-visual.tf9-tilt-card { transform: none !important; }
}

/* Approved workshop footage mounts here only after the generated manifest opts in. */
.process-story { position: relative; padding: var(--section-space) 0; overflow: clip; border-top: 1px solid rgba(228,196,123,.16); }
.process-story[hidden], [data-process-link][hidden] { display: none !important; }
.process-story__head { display: grid; grid-template-columns: minmax(170px,.46fr) minmax(0,1.3fr) auto; gap: clamp(24px,5vw,82px); align-items: end; margin-bottom: clamp(34px,5vw,74px); }
.process-story__intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.55fr); gap: clamp(24px,4vw,64px); align-items: end; }
.process-story__intro h2 { margin: 0; font-size: clamp(42px,5.2vw,84px); line-height: .96; letter-spacing: -.045em; }
.process-story__intro h2 em { color: var(--gold); font-style: normal; }
.process-story__intro p { margin: 0; max-width: 34ch; color: rgba(255,247,230,.62); line-height: 1.9; }
.process-story__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px,42vw); gap: clamp(16px,2.2vw,34px); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: var(--gold) rgba(255,255,255,.08); padding-bottom: 20px; }
.process-card { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid rgba(228,196,123,.2); background: rgba(255,255,255,.035); }
.process-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0b09; }
.process-card--portrait .process-card__media { aspect-ratio: 9 / 16; }
.process-card__media video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.04); }
.process-card__copy { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; align-content: start; padding: clamp(20px,2.2vw,32px); }
.process-card__copy > span { grid-row: 1 / 3; color: var(--gold); font: 600 11px/1 sans-serif; letter-spacing: .12em; }
.process-card__copy h3 { margin: 0; font-size: clamp(24px,2.3vw,36px); line-height: 1.1; }
.process-card__copy p { margin: 0; color: rgba(255,247,230,.58); line-height: 1.8; }
.process-story__note { margin-top: 18px; color: rgba(255,247,230,.38); font-size: 11px; }
.editorial-controls { display: grid; grid-template-columns: 42px auto 42px; align-items: center; gap: 10px; direction: rtl; }
.editorial-controls button { width: 42px; height: 42px; border: 1px solid rgba(228,196,123,.34); border-radius: 50%; background: rgba(255,255,255,.035); color: var(--gold-light); cursor: pointer; transition: background .25s ease, color .25s ease, opacity .25s ease, transform .25s var(--ease); }
.editorial-controls button:hover:not(:disabled), .editorial-controls button:focus-visible { background: var(--gold); color: #17130f; transform: translateY(-2px); }
.editorial-controls button:disabled { opacity: .28; cursor: default; }
.editorial-controls span { min-width: 60px; color: rgba(255,247,230,.54); font: 600 11px/1 sans-serif; text-align: center; }
.editorial-controls--ink button { border-color: rgba(56,43,28,.28); background: rgba(56,43,28,.04); color: #4f3d28; }
.editorial-controls--ink span { color: rgba(56,43,28,.6); }

.project-details { position: relative; padding: var(--section-space) 0; overflow: clip; }
.project-details__head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(320px,1.1fr) minmax(240px,.65fr) auto; gap: clamp(28px,5vw,78px); align-items: end; margin-bottom: clamp(38px,5vw,72px); }
.project-details__head h2 { margin: 24px 0 0; color: var(--ink); font-size: clamp(44px,5.4vw,84px); line-height: .96; letter-spacing: -.045em; }
.project-details__head h2 em { color: #9a6b2f; font-style: normal; }
.project-details__head > p { margin: 0; color: rgba(48,38,26,.68); line-height: 1.95; }
.project-details__rail { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px,39vw); gap: clamp(18px,2.3vw,36px); padding-bottom: 22px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: #9a6b2f rgba(54,41,25,.1); }
.detail-card { scroll-snap-align: start; margin: 0; min-width: 0; border: 1px solid rgba(54,41,25,.16); background: rgba(255,255,255,.38); }
.detail-card__media { aspect-ratio: 1.34 / 1; overflow: hidden; background: #d7cebe; }
.detail-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter 1s ease; }
.detail-card:hover .detail-card__media img, .detail-card:focus-within .detail-card__media img { transform: scale(1.035); filter: saturate(1.06) contrast(1.025); }
.detail-card figcaption { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: clamp(20px,2.2vw,32px); }
.detail-card figcaption > span { color: #9a6b2f; font: 600 11px/1 sans-serif; }
.detail-card h3 { margin: 0 0 8px; color: var(--ink); font-size: clamp(23px,2vw,32px); }
.detail-card p { margin: 0; color: rgba(48,38,26,.62); line-height: 1.85; }

@media (max-width: 920px) {
  .process-story__head, .process-story__intro, .project-details__head { grid-template-columns: 1fr; }
  .editorial-controls { justify-self: start; }
  .process-story__rail { grid-auto-columns: minmax(280px,76vw); }
  .project-details__rail { grid-auto-columns: minmax(290px,76vw); }
}

@media (max-width: 520px) {
  .process-story__rail { grid-auto-columns: 86vw; }
  .project-details__rail { grid-auto-columns: 86vw; }
  .process-card__copy { grid-template-columns: auto 1fr; }
}

/* 59 polish pass 01: denser archive rhythm and project-specific graphic language. */
.project-visual--portrait {
  grid-template-columns: 1fr 1fr;
  align-items: end;
}
.project-visual--portrait .static-media { aspect-ratio: .72 / 1; }
.project-visual--portrait .static-media:first-child { margin-top: 13%; }

.project[data-project="03"] .slot-art--before {
  background: linear-gradient(155deg, #514d49 0 34%, #a8a099 35% 58%, #69615a 59%);
}
.project[data-project="03"] .slot-art--before::before {
  background: repeating-linear-gradient(74deg, transparent 0 36px, rgba(255,255,255,.11) 37px 38px);
}
.project[data-project="03"] .slot-art--after {
  background: radial-gradient(ellipse at 50% 30%, rgba(255,235,171,.76), transparent 16%), linear-gradient(180deg, #9b6d2e, #3c2919);
}
.project[data-project="03"] .slot-art--after::before {
  top: 13%; right: 19%; width: 62%; height: 67%; border-radius: 50% 50% 9px 9px;
}
.project[data-project="03"] .slot-art--after::after {
  right: 21%; bottom: 13%; width: 58%; height: 9%; border-radius: 999px;
}

.project[data-project="04"] .slot-art--after {
  background: linear-gradient(122deg, #2d2117 0 19%, #a9782d 20% 68%, #4c311a 69%);
}
.project[data-project="04"] .slot-art--after::before {
  top: 14%; right: 29%; width: 54%; height: 58%; transform: skewX(-7deg);
}
.project[data-project="04"] .slot-art--after::after { right: 7%; width: 74%; }

.project[data-project="05"] .slot-art--before {
  background: repeating-linear-gradient(90deg, #777068 0 16%, #938b80 16% 32%);
}
.project[data-project="05"] .slot-art--after {
  background: radial-gradient(circle at 24% 22%, rgba(255,238,185,.72), transparent 8%), linear-gradient(145deg, #bd9044, #4b301a 78%);
}
.project[data-project="05"] .slot-art--after::before {
  right: 11%; width: 72%; border-radius: 999px 999px 7px 7px;
}

.project[data-project="06"] .slot-art--before::before {
  background: repeating-linear-gradient(110deg, transparent 0 44px, rgba(28,22,17,.24) 45px 46px), linear-gradient(90deg, transparent 48%, rgba(255,255,255,.13) 49% 51%, transparent 52%);
}
.project[data-project="06"] .slot-art--after {
  background: linear-gradient(160deg, #261b12 0 25%, #a87a32 26% 66%, #e0bd6e 67% 69%, #382417 70%);
}
.project[data-project="06"] .slot-art--after::before {
  top: 7%; right: 15%; width: 67%; height: 79%; transform: perspective(300px) rotateY(-9deg);
}

@media (max-width: 720px) {
  :root { --section-space: 106px; }
  .project-archive { gap: 66px; }
  .project--portrait { width: min(94%, 465px); }
  .project-visual--portrait { gap: 7px; }
  .project-visual--portrait .static-media:first-child { margin-top: 16%; }
  .project-index-vertical { left: -29px; }
  .comparison--hero { min-height: 320px; }
}

/* Keep the reliability constraints last so later component layers cannot regress them. */
.process-story, .project-details { overflow: visible; }
.process-story__head, .project-details__head { align-items: center; }
.process-story__intro { grid-template-columns: minmax(0,1.15fr) minmax(260px,.75fr); }
.process-story__intro h2, .project-details__head h2 { line-height: 1.16; letter-spacing: -.05em; }
.process-story__intro p, .process-card__copy p, .project-details__head > p, .detail-card p { font-size: 16px; }
.brand { min-height: 44px; }
.desktop-nav a { min-width: 44px; justify-content: center; padding-inline: 5px; }
.site-footer a { flex: 0 0 auto; min-width: 110px; min-height: 44px; display: inline-flex; align-items: center; }
.reveal--hero, .reveal--proof { transform: translateY(18px); }
.process-story__note { font-size: 16px; }
.editorial-controls { grid-template-columns: 44px auto 44px; }
.editorial-controls button { width: 44px; height: 44px; }
.editorial-controls button:hover:not(:disabled), .editorial-controls button:focus-visible { transform: none; box-shadow: 0 0 0 4px rgba(198,154,63,.16); }
.detail-card__media img { transition-duration: var(--motion-base); }
.detail-card:hover .detail-card__media img, .detail-card:focus-within .detail-card__media img { transform: scale(1.012); }

@media (max-width: 920px) {
  .process-story__intro { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --section-space: 76px; }
  .project-archive { gap: 54px; }
}

/* Interaction and legibility pass 03: visible navigation, tactile cards, and switchable hero media. */
.site-header { min-height: 82px; padding-block: 13px; }
.brand-name { font-size: 21px; }
.brand-caption { font-size: 14px; line-height: 1.35; }
.desktop-nav { gap: clamp(18px, 2vw, 30px); font-size: 15px; font-weight: 650; }
.header-cta { min-height: 48px; padding-inline: 18px; font-size: 14px; font-weight: 740; }

.eyebrow, .proof-meta, .project-index, .proof-state,
.hero-foot, .principle-rule, .material-reference figcaption,
.reference-stamp, .measure-line, .static-media .static-label,
.project-number, .project-index-vertical, .architectural-caption,
.closing-kicker, .site-footer { font-size: 14px; }
.eyebrow, .proof-meta, .project-index, .proof-state,
.hero-foot, .principle-rule, .material-reference figcaption,
.reference-stamp, .measure-line, .static-media .static-label,
.project-number, .project-index-vertical, .architectural-caption { font-size: 14px; }
.hero-lede { font-size: 17px; line-height: 1.9; }
.hero-note, .drag-hint { font-size: 14px; }
.proof-caption p { font-size: 16px; }
.catalogue-intro p { max-width: 36ch; color: #c3b7a4; font-size: 17px; line-height: 1.9; }

.hero-media__main {
  transition: transform 320ms var(--ease), filter 320ms ease, opacity 180ms ease;
  transform-origin: center;
}
.hero-media:hover .hero-media__main { transform: scale(1.016); filter: saturate(1.02) contrast(1.05); }
.hero-media.is-switching .hero-media__main { animation: hero-frame-in 340ms var(--ease) both; }
@keyframes hero-frame-in {
  from { opacity: .58; transform: scale(1.028); }
  to { opacity: 1; transform: scale(1.016); }
}
.hero-media__inset {
  display: grid;
  gap: 0;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: transform 260ms var(--ease), border-color 220ms ease, box-shadow 260ms ease, background 220ms ease;
  touch-action: manipulation;
}
.hero-media__inset span { padding-top: 8px; color: #f0dfbc; font-size: 14px; font-weight: 650; line-height: 1.5; }
.hero-media__inset b { margin-top: 5px; color: var(--gold-light); font-size: 14px; font-weight: 740; line-height: 1.4; }
.hero-media__inset:hover {
  border-color: rgba(255,239,197,.82);
  background: rgba(35,27,19,.96);
  box-shadow: 0 20px 44px rgba(0,0,0,.48), 0 0 0 4px rgba(228,196,123,.12);
  transform: translateY(-5px) scale(1.025);
}
.hero-media__inset:active { transform: translateY(-2px) scale(.985); }
.hero-media__inset:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 5px; }
.hero-media.is-detail-main .hero-media__line { right: 67%; }
.hero-media__line { transition: right 340ms var(--ease); }

.process-story__head { grid-template-columns: minmax(180px,.42fr) minmax(0,1.58fr); align-items: start; margin-bottom: 28px; }
.project-details__head { grid-template-columns: minmax(360px,1.15fr) minmax(300px,.72fr); align-items: end; margin-bottom: 28px; }
.editorial-controls-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 20px;
}
.rail-navigation-label { color: rgba(255,247,230,.78); font-size: 14px; font-weight: 700; }
.editorial-controls-wrap--ink .rail-navigation-label { color: #58452e; }
.editorial-controls {
  grid-template-columns: 52px auto 52px;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(228,196,123,.3);
  border-radius: 999px;
  background: rgba(18,14,10,.8);
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.editorial-controls button {
  width: 52px;
  height: 52px;
  border-color: rgba(228,196,123,.62);
  background: rgba(228,196,123,.1);
  font-size: 20px;
}
.editorial-controls button:hover:not(:disabled), .editorial-controls button:focus-visible {
  background: var(--gold-light);
  color: #17130f;
  box-shadow: 0 0 0 4px rgba(228,196,123,.18);
}
.editorial-controls button:disabled { opacity: .42; }
.editorial-controls span { min-width: 70px; color: #fff5df; font-size: 14px; font-weight: 750; }
.editorial-controls-wrap--ink .editorial-controls {
  border-color: rgba(66,48,28,.24);
  background: rgba(255,252,245,.88);
  box-shadow: 0 14px 34px rgba(70,48,23,.13);
}
.editorial-controls--ink button { border-color: rgba(85,59,31,.4); background: rgba(154,107,47,.1); color: #3d2b18; }
.editorial-controls--ink span { color: #3d2b18; }

.detail-card, .process-card {
  position: relative;
  overflow: hidden;
  transition: transform 280ms var(--ease), border-color 220ms ease, box-shadow 280ms ease, background 220ms ease;
}
.detail-card:hover, .detail-card:focus-within {
  border-color: rgba(154,107,47,.58);
  background: rgba(255,255,255,.72);
  box-shadow: 0 22px 50px rgba(67,46,22,.16);
  transform: translateY(-5px);
}
.process-card:hover, .process-card:focus-within {
  border-color: rgba(228,196,123,.55);
  background: rgba(255,255,255,.065);
  box-shadow: 0 22px 50px rgba(0,0,0,.25);
  transform: translateY(-5px);
}
.detail-card:hover .detail-card__media img, .detail-card:focus-within .detail-card__media img { transform: scale(1.026); filter: saturate(1.08) contrast(1.035); }
.process-card__media video { transition: transform 320ms var(--ease), filter 320ms ease; }
.process-card:hover .process-card__media video, .process-card:focus-within .process-card__media video { transform: scale(1.018); filter: saturate(.95) contrast(1.06); }

.catalogue-top { display: block; margin-bottom: 70px; }
.catalogue-top > .eyebrow { margin-bottom: 34px; }
.catalogue-intro { grid-template-columns: minmax(0,1.25fr) minmax(280px,.62fr); gap: clamp(42px,7vw,110px); align-items: end; }
.catalogue h2 { max-width: 10ch; margin: 0; font-size: clamp(52px,5.8vw,82px); line-height: 1.14; letter-spacing: -.065em; }
.project-details__head > p, .detail-card p, .project-info p,
.archive-note p, .process-story__intro p, .process-card__copy p,
.principle-copy > p, .second-proof-copy > p, .closing p,
.catalogue-intro p, .proof-caption p, .process-story__note { font-size: 17px; }

@media (max-width: 920px) {
  .site-header { min-height: 72px; }
  .process-story__head, .project-details__head { grid-template-columns: 1fr; }
  .editorial-controls-wrap { justify-content: space-between; }
  .catalogue-intro { grid-template-columns: 1fr; gap: 24px; }
  .catalogue h2 { max-width: 12ch; }
}

@media (max-width: 720px) {
  .brand-name { font-size: 18px; }
  .brand-caption { font-size: 14px; }
  .eyebrow, .proof-meta, .project-index, .proof-state, .hero-foot,
  .principle-rule, .material-reference figcaption, .reference-stamp,
  .measure-line, .static-media .static-label, .project-number,
  .architectural-caption, .closing-kicker, .site-footer { font-size: 14px; }
  .hero-lede, .catalogue-intro p { font-size: 17px; }
  .hero-media__inset { width: min(48%, 190px); }
  .hero-media__inset span, .hero-media__inset b { font-size: 14px; }
  .editorial-controls { grid-template-columns: 48px auto 48px; }
  .editorial-controls button { width: 48px; height: 48px; }
  .rail-navigation-label { font-size: 14px; }
  .catalogue-top > .eyebrow { margin-bottom: 25px; }
  .catalogue h2 { font-size: clamp(43px,12vw,60px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media:hover .hero-media__main, .hero-media.is-switching .hero-media__main,
  .hero-media__inset:hover, .detail-card:hover, .process-card:hover { animation: none; transform: none; }
}

/* Keep the approved portrait hero geometry stable while either source is active. */
.hero-media {
  aspect-ratio: 1263 / 1600;
  min-height: 0;
  contain: layout paint;
}
.hero-media__main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

/* Zarrindezh identity */
.brand-mark--zarrindezh {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--gold-light);
  background: #221a13;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}


/* Keep supplied images inside the existing placeholder art frames. */
.slot-art img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }

/* Two-metal identity — warm gold for value and action, polished silver for structure. */
.site-header.is-scrolled {
  border-color: rgba(214, 173, 88, .34);
  background: rgba(17, 20, 23, .86);
}
.brand-mark { border-color: rgba(214, 173, 88, .68); }
.brand-mark--zarrindezh { color: #e7bd69; background: #211b14; }
.brand-caption, .eyebrow, .project-index, .project-number, .drag-hint,
.process-story__intro h2 em, .process-card__copy > span { color: #d9ad55; }
.desktop-nav { color: #c5ccd1; }
.header-cta { border-color: rgba(214, 173, 88, .46); color: #edf1f3; }
.header-cta:hover { border-color: #e7bd69; background: rgba(214, 173, 88, .14); }
.button--gold {
  background: linear-gradient(135deg, #f0d38b 0%, #c69437 48%, #e8c574 100%);
  color: #1a1712;
  box-shadow: 0 14px 32px rgba(198, 154, 63, .28);
}
.button--gold:hover { background: linear-gradient(135deg, #fff0bf 0%, #d8aa4f 52%, #f3d990 100%); box-shadow: 0 18px 35px rgba(198, 154, 63, .4); }
.eyebrow--ink { color: #68737c; }
.status-dot { background: #e1ba68; box-shadow: 0 0 0 4px rgba(214, 173, 88, .12); }
.status-dot--outline { border-color: #d9dfe3; }

.hero::before { background: radial-gradient(circle at 10% 16%, rgba(214, 173, 88, .14), transparent 28%), linear-gradient(117deg, rgba(255,255,255,.045), transparent 37%); }
.hero-ambient { border-color: rgba(214, 173, 88, .16); }
.hero-ambient--two { border-color: rgba(215, 221, 225, .12); }
.hero h1, .catalogue h2, .closing h2 { color: #f5f7f8; }
.hero h1 em, .catalogue h2 em, .closing h2 em { color: #e0b35b; }
.principle h2 em, .second-proof h2 em { color: #7a6337; }
.hero-lede { color: #b6bec5; }
.hero-note, .proof-meta { color: #aeb7be; }
.hero-foot { color: #98a2aa; }
.scroll-cue { color: #c2cbd1; }
.comparison, .hero-media { border-color: rgba(215, 221, 225, .38); background: #22282d; }
.comparison-divider { background: #e0b35b; box-shadow: 0 0 0 1px rgba(17,20,23,.24), 0 0 20px rgba(224,179,91,.52); }
.comparison-handle { border-color: #e8c574; background: #171c20; color: #d7dde1; }
.comparison:hover .comparison-handle, .comparison.is-dragging .comparison-handle { background: #262d32; box-shadow: 0 0 0 7px rgba(214,173,88,.16), 0 15px 35px rgba(0,0,0,.36); }
.comparison-handle b::before, .comparison-handle b::after { color: #e0b35b; }
.proof-caption h2 { color: #eef2f4; }
.proof-caption p { color: #aeb6bd; }
.drag-hint-icon { border-color: rgba(215, 221, 225, .5); }
.scroll-cue i { background: #d9dfe3; }
.hero-media::after { background: linear-gradient(180deg, transparent 55%, rgba(8, 11, 14, .55)); }
.hero-media__inset { border-color: rgba(228, 234, 237, .5); background: rgba(20, 24, 28, .92); }
.hero-media__inset span { color: #e8edf0; }
.hero-media__inset:hover { border-color: #f1f4f5; background: rgba(31,37,42,.97); box-shadow: 0 20px 44px rgba(0,0,0,.48), 0 0 0 4px rgba(215,221,225,.14); }
.hero-media__badge { border-color: rgba(228,234,237,.45); background: rgba(20,24,28,.76); color: #f1f4f5; }
.hero-media__line { background: linear-gradient(transparent, rgba(215,221,225,.6), transparent); }

.project-details__head h2 em { color: #7a6337; }
.principle-copy > p, .second-proof-copy > p { color: #4f5961; }
.principle-rule { color: #66727b; }
.principle-rule i { background: #aab3ba; }
.reference-frame { border-color: rgba(62, 71, 79, .38); background: #d7dde1; box-shadow: 18px 18px 0 rgba(75, 87, 96, .13); }
.material-reference:hover .reference-frame, .material-reference.is-focused .reference-frame { box-shadow: 24px 24px 0 rgba(75, 87, 96, .17); }
.reference-frame::before { border-color: rgba(62,71,79,.23); }
.reference-frame img { filter: saturate(.7) grayscale(.14) contrast(1.03); }
.reference-stamp { border-color: rgba(234,239,241,.62); background: rgba(27,32,37,.76); color: #e8edf0; }
.material-reference figcaption { color: #68737b; }
.material-reference figcaption span:last-child { color: #8e989f; }
.measure-line { color: #7d8992; }
.measure-line i { background: rgba(87, 100, 110, .38); }

.catalogue::after { background: linear-gradient(transparent, rgba(215,221,225,.18) 15%, rgba(215,221,225,.18) 82%, transparent); }
.catalogue-intro p { color: #b6bec5; }
.static-media { border-color: rgba(215,221,225,.3); background: #30383e; }
.static-media--after, .feature-surface { background: #4b565e; }
.static-media .static-label { border-color: rgba(238,242,244,.36); background: rgba(20,24,28,.68); color: #eff3f5; }
.project-info h3, .archive-note strong { color: #edf1f3; }
.project-info p, .archive-note p { color: #aeb6bd; }
.project-arrow { border-color: rgba(215,221,225,.48); color: #d7dde1; }
.project:hover .project-arrow, .project.is-focused .project-arrow { background: rgba(215,221,225,.15); }
.project-index-vertical { color: rgba(215,221,225,.58); }
.archive-note-mark { border-color: #d7dde1; color: #d7dde1; }

.paper-blueprint::before, .paper-blueprint::after { border-color: rgba(89,101,111,.16); }
.paper-blueprint span { background: rgba(89,101,111,.13); }
.paper-blueprint i { background: rgba(89,101,111,.15); }
.paper-blueprint b { border-color: rgba(89,101,111,.18); }
.second-proof-number, .architectural-caption, .drag-hint--ink { color: #69757e; }
.architectural-caption i { background: rgba(92,104,114,.36); }
.comparison--architectural { border-color: rgba(83,96,106,.42); box-shadow: 20px 20px 0 rgba(99,113,124,.16); }
.comparison--architectural .comparison-scene--after { background: #7d8991; }
.comparison--architectural .comparison-label { border-color: rgba(52,61,69,.26); background: rgba(245,248,249,.7); color: #30383f; }
.comparison--architectural .comparison-handle { background: #f2f5f6; color: #46515a; border-color: #9ba6ad; }
.comparison--architectural .comparison-handle b::before, .comparison--architectural .comparison-handle b::after { color: #46515a; }
.comparison--architectural .comparison-divider { background: #8b969e; }

.closing { background: radial-gradient(circle at 70% 19%, rgba(167,179,187,.24), transparent 31%), linear-gradient(135deg, #101316 0%, #1d2429 53%, #3c464e 100%); }
.closing::before { background: repeating-linear-gradient(113deg, transparent 0 86px, rgba(215,221,225,.065) 87px 88px); }
.closing-ornament { border-color: rgba(215,221,225,.2); }
.closing-ornament span { border-color: rgba(215,221,225,.11); }
.closing-kicker, .site-footer a { color: #bcc5cb; }
.closing p { color: #c5cdd2; }
.site-footer { color: #99a4ab; }

.process-story { border-top-color: rgba(215,221,225,.18); }
.process-story__intro p, .process-card__copy p { color: rgba(235,240,242,.64); }
.process-story__rail { scrollbar-color: #aeb8bf rgba(255,255,255,.08); }
.process-card { border-color: rgba(215,221,225,.24); }
.process-card:hover, .process-card:focus-within { border-color: rgba(215,221,225,.62); }
.editorial-controls { border-color: rgba(215,221,225,.36); background: rgba(18,23,27,.84); }
.editorial-controls button { border-color: rgba(215,221,225,.52); background: rgba(215,221,225,.11); color: #dce2e5; }
.editorial-controls button:hover:not(:disabled), .editorial-controls button:focus-visible { background: #d7dde1; color: #161b1f; box-shadow: 0 0 0 4px rgba(215,221,225,.2); }
.editorial-controls span, .rail-navigation-label { color: #e0e5e8; }
.editorial-controls-wrap--ink .rail-navigation-label { color: #56616a; }
.editorial-controls-wrap--ink .editorial-controls { border-color: rgba(75,87,96,.28); background: rgba(250,252,252,.9); box-shadow: 0 14px 34px rgba(56,67,75,.14); }
.editorial-controls--ink button { border-color: rgba(82,95,105,.42); background: rgba(111,125,136,.1); color: #3e4951; }
.editorial-controls--ink span { color: #3e4951; }
.project-details__head > p, .detail-card p { color: rgba(48,59,67,.68); }
.project-details__rail { scrollbar-color: #7d8992 rgba(54,65,72,.1); }
.detail-card { border-color: rgba(65,77,86,.18); background: rgba(255,255,255,.5); }
.detail-card__media { background: #d2d9dd; }
.detail-card figcaption > span { color: #66737d; }
.detail-card:hover, .detail-card:focus-within { border-color: rgba(101,114,124,.62); box-shadow: 0 22px 50px rgba(57,68,76,.16); }

/* Catalogue before/after system: every project uses matching landscape frames. */
.catalogue .project-visual--diptych,
.catalogue .project-visual--portrait,
.catalogue .project-visual--feature,
.catalogue .project-visual--quiet-pair,
.catalogue .project-visual--tall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}
.catalogue .project-visual--diptych .static-media,
.catalogue .project-visual--portrait .static-media,
.catalogue .project-visual--feature .static-media,
.catalogue .project-visual--quiet-pair .static-media,
.catalogue .project-visual--tall .static-media { aspect-ratio: 3 / 2; }
.catalogue .static-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 280ms var(--ease), filter 280ms ease;
}
.catalogue .static-media:hover > img,
.catalogue .static-media:focus-within > img {
  transform: scale(1.026);
  filter: saturate(1.08) contrast(1.035);
}

/* Keep the opening wide project prominent; normalize every later project to one shared card width. */
.catalogue .project-archive > .project:not(.project--wide) {
  grid-column: span 6;
  width: 100%;
  margin-inline: 0;
}
.catalogue .project-archive > .project:not(.project--wide) .project-visual .static-media:first-child {
  margin-top: 0;
}

/* The workshop rail now uses portrait, logo-marked footage throughout. */
.process-story__rail {
  grid-auto-columns: minmax(250px, 27vw);
  align-items: stretch;
}
.process-story__rail .process-card__media,
.process-card--portrait .process-card__media {
  width: 100%;
  aspect-ratio: 9 / 16;
}
.process-story__rail .process-card {
  height: auto;
  align-self: stretch;
}
.process-story__rail .process-card__copy {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding-top: clamp(52px, 4vw, 64px);
}
.process-story__rail .process-card__copy > span {
  position: absolute;
  top: clamp(20px, 2.2vw, 32px);
  right: clamp(20px, 2.2vw, 32px);
  display: block;
  grid-row: auto;
  margin: 0;
}
.process-story__rail .process-card__copy h3 {
  width: 100%;
  margin-bottom: 10px;
}
.process-story__rail .process-card__copy h3,
.process-story__rail .process-card__copy p {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

/* The architectural comparison is intentionally reduced to imagery, divider, and drag control. */
.comparison--architectural .comparison-scene--after::after { display: none; }

@media (max-width: 720px) {
  .menu-toggle { border-color: rgba(215,221,225,.48); color: #dce2e5; }
  .mobile-nav { background: rgba(24,30,35,.97); }
  .site-header.menu-active .mobile-nav { border-color: rgba(215,221,225,.28); }
  .mobile-nav a { border-bottom-color: rgba(215,221,225,.16); color: #edf1f3; }
}

/* Side-button rails: keep the carousel clean while preserving keyboard and touch scrolling. */
.editorial-controls--sides {
  width: 100%;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.editorial-controls--sides.editorial-controls--ink {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.editorial-controls--sides > button {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  transition: transform 220ms var(--ease), background .25s ease, color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.editorial-controls--sides > button:not(:disabled) {
  animation: rail-arrow-breathe 4.8s ease-in-out infinite;
}
.editorial-controls--sides > button:hover:not(:disabled),
.editorial-controls--sides > button:focus-visible {
  animation-play-state: paused;
  transform: translateY(-10px) scale(1.06);
}
.editorial-controls--sides > button:active:not(:disabled) {
  transform: translateY(-1px) scale(.94);
}
.editorial-controls--sides > button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.editorial-controls--sides .process-story__rail,
.editorial-controls--sides .project-details__rail {
  min-width: 0;
  padding-bottom: 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.editorial-controls--sides .process-story__rail::-webkit-scrollbar,
.editorial-controls--sides .project-details__rail::-webkit-scrollbar {
  display: none;
}
.editorial-carousel--ink .editorial-controls--sides > button {
  border-color: rgba(82,95,105,.42);
  background: rgba(111,125,136,.1);
  color: #3e4951;
}

@keyframes rail-arrow-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215,221,225,0); }
  50% { box-shadow: 0 0 0 5px rgba(215,221,225,.08); }
}

/* Let the final before/after comparison glide with the divider instead of snapping. */
.comparison--architectural .comparison-scene--after {
  transition: clip-path 260ms var(--ease), filter 260ms ease;
}
.comparison--architectural .comparison-divider {
  transition: right 260ms var(--ease), box-shadow 260ms ease;
}
.comparison--architectural.is-dragging .comparison-scene--after,
.comparison--architectural.is-dragging .comparison-divider {
  transition-duration: 90ms;
}
.comparison--architectural.is-dragging .comparison-divider {
  box-shadow: 0 0 0 1px rgba(17,20,23,.24), 0 0 26px rgba(215,221,225,.7);
}
.comparison--architectural.is-dragging .comparison-handle {
  animation: comparison-handle-pulse 1.15s ease-in-out infinite;
}

@keyframes comparison-handle-pulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(215,221,225,.14), 0 15px 35px rgba(0,0,0,.36); }
  50% { box-shadow: 0 0 0 12px rgba(215,221,225,.05), 0 18px 40px rgba(0,0,0,.4); }
}

@media (max-width: 720px) {
  .editorial-controls--sides {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 8px;
  }
  .editorial-controls--sides > button {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 920px) {
  .process-story__rail {
    grid-auto-columns: minmax(250px, 44vw);
  }
}

@media (max-width: 520px) {
  .process-story__rail {
    grid-auto-columns: 78vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-controls--sides > button:not(:disabled),
  .comparison--architectural.is-dragging .comparison-handle {
    animation: none;
  }
  .comparison--architectural .comparison-scene--after,
  .comparison--architectural .comparison-divider {
    transition: none;
  }
}

/* Final palette pass: gold carries the brand; silver keeps the interface crisp. */
:root {
  --gold: #c99a3f;
  --gold-light: #e1ba68;
  --gold-pale: #f5e5bd;
  --paper: #edf0f2;
  --paper-warm: #f8f7f3;
  --line-dark: rgba(215, 221, 225, .2);
}

.brand-caption, .eyebrow, .project-index, .project-number, .drag-hint,
.process-story__intro h2 em, .process-card__copy > span { color: var(--gold-light); }
.brand-mark--zarrindezh { color: var(--gold-light); }
.header-cta, .project-arrow, .archive-note-mark { border-color: rgba(225, 186, 104, .48); }
.header-cta:hover, .project:hover .project-arrow, .project.is-focused .project-arrow { background: rgba(201, 154, 63, .15); }
.project-arrow, .archive-note-mark { color: var(--gold-light); }
.project-info h3::after { background: var(--gold-light); }
.project-details__head h2 em { color: var(--gold-light); }
.process-story__rail { scrollbar-color: var(--gold) rgba(255,255,255,.08); }
.editorial-controls button:hover:not(:disabled), .editorial-controls button:focus-visible { background: var(--gold-light); box-shadow: 0 0 0 4px rgba(201,154,63,.2); }
.comparison--architectural.is-dragging .comparison-divider { box-shadow: 0 0 0 1px rgba(17,20,23,.24), 0 0 26px rgba(225,186,104,.7); }

/* Make the silver material visible in the page surface, not only in 1px details. */
@keyframes silver-drift {
  0%, 100% { background-position: 0% 50%, 100% 0%; }
  50% { background-position: 100% 50%, 0% 100%; }
}

.hero,
.process-story,
.catalogue {
  background-color: #101519;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(210, 219, 224, .23), transparent 27%),
    linear-gradient(118deg, #0b0f12 4%, #263038 48%, #11171b 78%, #58656d 145%);
  background-size: 180% 180%, 220% 220%;
  animation: silver-drift 18s ease-in-out infinite;
}

.hero::before {
  background:
    radial-gradient(ellipse at 64% 44%, rgba(226, 233, 236, .16), transparent 24%),
    linear-gradient(122deg, transparent 12%, rgba(178, 190, 198, .1) 48%, transparent 74%);
  background-size: 165% 165%, 190% 190%;
  animation: silver-drift 14s ease-in-out infinite reverse;
}

.closing {
  background-color: #101519;
  background-image:
    radial-gradient(circle at 70% 19%, rgba(210, 219, 224, .26), transparent 30%),
    linear-gradient(135deg, #0b0f12 0%, #202a30 48%, #59666e 125%);
  background-size: 180% 180%, 220% 220%;
  animation: silver-drift 20s ease-in-out infinite reverse;
}

.site-header.is-scrolled {
  background: linear-gradient(110deg, rgba(12, 16, 19, .94), rgba(57, 67, 74, .9), rgba(16, 21, 24, .94));
  background-size: 220% 220%;
  animation: silver-drift 16s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero, .hero::before, .process-story, .catalogue, .closing, .site-header.is-scrolled {
    animation: none;
  }
}

/* Process cards: calmer Persian type scale and a shared text rhythm. */
.process-card__media video {
  display: block;
  pointer-events: none;
}

.process-story__rail .process-card__copy {
  min-height: clamp(250px, 18vw, 320px);
  padding-top: clamp(54px, 4vw, 66px);
  padding-bottom: clamp(24px, 2.5vw, 34px);
}

.process-story__rail .process-card__copy h3 {
  max-width: 9.5ch;
  min-height: 2.5em;
  margin-bottom: 16px;
  font-size: clamp(23px, 2.05vw, 31px);
  line-height: 1.25;
  text-wrap: balance;
}

.process-story__rail .process-card__copy p {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.9;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .process-story__rail .process-card__copy {
    min-height: 250px;
  }

  .process-story__rail .process-card__copy h3 {
    max-width: 11ch;
    font-size: clamp(24px, 7vw, 32px);
  }
}

/* Persistent contact action */
.floating-phone {
  position: fixed;
  z-index: 40;
  right: clamp(16px, 3vw, 42px);
  bottom: clamp(16px, 3vw, 34px);
  direction: rtl;
}

.floating-phone a {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 56px;
  padding: 8px 18px 8px 13px;
  border: 1px solid rgba(225, 186, 104, .54);
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(10, 14, 18, .94), rgba(61, 71, 78, .94));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34), 0 0 0 5px rgba(215, 221, 225, .06);
  color: #f0f3f4;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}

.floating-phone a:hover,
.floating-phone a:focus-visible {
  border-color: var(--gold-light);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .4), 0 0 0 5px rgba(225, 186, 104, .12);
  transform: translateY(-4px);
}

.floating-phone__icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(225, 186, 104, .7);
  border-radius: 50%;
  color: var(--gold-light);
  font-size: 15px;
  line-height: 1;
}

.floating-phone__number {
  color: #f4dfaa;
  font-family: Tahoma, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.floating-phone__label {
  padding-inline-start: 13px;
  border-inline-start: 1px solid rgba(215, 221, 225, .28);
  color: #d7dfe3;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .floating-phone {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .floating-phone a {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding-inline: 14px;
  }

  .floating-phone__number { font-size: 14px; }
}

/* Use the supplied Zarrin Dezh lockup in the top bar. */
.brand-mark--zarrindezh {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(225, 186, 104, .58);
  border-radius: 50%;
  background: #f8f5ee;
  overflow: hidden;
}

.brand-mark--zarrindezh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
  transform: translateY(-3px) scale(1.06);
}

@media (max-width: 720px) {
  .brand-mark--zarrindezh {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .brand-mark--zarrindezh img {
    transform: translateY(-9px) scale(1.06);
  }
}

/* Restore the original full portrait video treatment. */
.process-story__rail .process-card__media,
.process-card--portrait .process-card__media {
  aspect-ratio: 9 / 16;
  background: #0d0b09;
}

.process-card__media video {
  object-fit: cover;
  background: transparent;
}

.process-story__rail .process-card__copy {
  min-height: clamp(214px, 15vw, 260px);
  padding-top: clamp(46px, 3.2vw, 56px);
  padding-bottom: clamp(20px, 2vw, 28px);
}

.process-story__rail .process-card__copy h3 {
  max-width: none;
  min-height: 1.25em;
  margin-bottom: 12px;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.22;
  white-space: nowrap;
}

.process-story__rail .process-card__copy p {
  line-height: 1.75;
}

@media (max-width: 720px) {
  .process-story__rail .process-card__copy {
    min-height: 220px;
  }

  .process-story__rail .process-card__copy h3 {
    font-size: clamp(18px, 5vw, 23px);
  }
}

/* Keep the catalogue headline on one line on the wide section layout. */
@media (min-width: 921px) {
  .catalogue h2 {
    max-width: none;
    white-space: nowrap;
  }

  .process-story__intro h2 {
    width: max-content;
    max-width: none;
    position: relative;
    left: clamp(36px, 8vw, 130px);
  }
}

/* Branded loading state for the first paint and deferred media. */
.brand-loader {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background: #11181d;
  opacity: 1;
  transition: opacity .65s ease, visibility .65s ease;
}

.brand-loader.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.brand-loader__mark {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid rgba(225, 186, 104, .65);
  border-radius: 50%;
  background: #f8f5ee;
  box-shadow: 0 0 0 8px rgba(215, 221, 225, .06), 0 18px 45px rgba(0, 0, 0, .3);
  animation: loader-breathe 1.8s ease-in-out infinite;
}

.brand-loader__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(-10px) scale(1.06);
  mix-blend-mode: multiply;
}

.brand-loader__line {
  position: relative;
  display: block;
  width: 112px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(215, 221, 225, .18);
}

.brand-loader__line::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), #e9eef0, var(--gold));
  content: "";
  animation: loader-sweep 1.25s ease-in-out infinite;
}

@keyframes loader-breathe {
  50% { transform: translateY(-4px) scale(1.035); box-shadow: 0 0 0 12px rgba(215, 221, 225, .04), 0 22px 52px rgba(0, 0, 0, .36); }
}

@keyframes loader-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(280%); }
}

.detail-card__media,
.static-media,
.process-card__media,
.hero-media {
  background-image: url("assets/support/zarrin-dezh-mark.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 54px;
}

.detail-card__media.media-loaded,
.static-media.media-loaded,
.process-card__media.media-loaded,
.hero-media.media-loaded {
  background-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .brand-loader__mark, .brand-loader__line::after { animation: none; }
}

/* Mobile responsiveness pass: consolidated overrides after legacy layers. */
@media (max-width: 920px) {
  :root {
    --page: min(100% - 40px, 720px);
    --section-space: clamp(76px, 11vw, 104px);
  }

  body { padding-bottom: 84px; }
  img, video { max-width: 100%; }

  .site-header,
  .site-header.is-scrolled {
    position: fixed;
    inset: max(8px, env(safe-area-inset-top)) 0 auto;
    width: var(--page);
    min-height: 64px;
    padding: 8px 10px;
    gap: 10px;
    border-radius: 20px;
  }

  .brand { min-width: 0; gap: 8px; }
  .brand-lockup { min-width: 0; }
  .brand-name { font-size: 16px; }
  .brand-caption { font-size: 10px; line-height: 1.3; }
  .brand-mark--zarrindezh { width: 42px; height: 42px; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle {
    position: relative;
    display: grid;
    place-content: center;
    width: 44px;
    height: 44px;
    margin-inline-start: auto;
    flex: 0 0 44px;
    border: 1px solid rgba(215,221,225,.48);
    border-radius: 50%;
    background: transparent;
    color: #dce2e5;
    cursor: pointer;
  }
  .menu-toggle span:not(.sr-only) {
    display: block;
    width: 16px;
    height: 1px;
    background: currentColor;
    transition: transform .3s var(--ease);
  }

  .mobile-nav {
    top: calc(100% + 8px);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.34);
  }
  .site-header.menu-active .mobile-nav { max-height: 360px; padding: 8px 12px; }
  .mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .hero {
    min-height: auto;
    padding: 112px 0 72px;
  }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: none; padding-top: 0; }
  .hero h1 {
    max-width: 10ch;
    margin: 22px 0 18px;
    font-size: clamp(40px, 10.5vw, 62px);
    line-height: 1.18;
  }
  .hero-lede { max-width: 36ch; font-size: 16px; line-height: 1.85; }
  .hero-actions { align-items: stretch; gap: 14px; margin-top: 28px; }
  .hero-actions .button { width: 100%; min-height: 52px; }
  .hero-note { justify-content: center; font-size: 13px; }
  .hero-proof { width: 100%; padding: 0; }
  .hero-media, .hero-media__main { min-height: 0; }
  .hero-media { aspect-ratio: 4 / 5; border-radius: 22px; }
  .hero-media__main { height: 100%; aspect-ratio: inherit; }
  .hero-media__inset { left: 14px; bottom: 14px; width: 36%; padding: 5px; }
  .hero-media__badge { top: 14px; right: 14px; min-height: 30px; font-size: 10px; }
  .proof-caption { margin-top: 14px; }
  .hero-foot { display: none; }

  .principle,
  .process-story,
  .project-details,
  .catalogue,
  .second-proof { padding: var(--section-space) 0; }

  .principle-grid,
  .second-proof-grid { grid-template-columns: 1fr; gap: 44px; }
  .principle h2,
  .second-proof h2,
  .catalogue h2,
  .process-story__intro h2,
  .project-details__head h2 {
    width: auto;
    max-width: 12ch;
    font-size: clamp(36px, 9.5vw, 54px);
    line-height: 1.22;
    letter-spacing: -.045em;
  }
  .principle-copy > p,
  .second-proof-copy > p,
  .catalogue-intro p,
  .process-story__intro p,
  .project-details__head > p { font-size: 16px; line-height: 1.8; }
  .material-reference { width: min(92%, 440px); margin-inline: auto; }
  .measure-line--principle { display: none; }

  .process-story__head,
  .project-details__head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }
  .process-story__intro { grid-template-columns: 1fr; gap: 18px; }
  .process-story__intro h2 { position: static; left: auto; }

  .editorial-controls--sides {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .editorial-controls--sides > button {
    width: 44px;
    height: 44px;
    animation: none;
    transform: none;
  }
  .process-story__rail,
  .project-details__rail {
    width: 100%;
    grid-auto-columns: 100%;
    gap: 12px;
  }
  .process-story__rail .process-card__copy {
    min-height: 0;
    padding: 46px 20px 24px;
  }
  .process-story__rail .process-card__copy > span { top: 18px; right: 20px; }
  .process-story__rail .process-card__copy h3 {
    max-width: none;
    min-height: 0;
    font-size: clamp(18px, 4.7vw, 23px);
    white-space: normal;
  }
  .process-story__rail .process-card__copy p {
    max-width: 30ch;
    font-size: 15px;
    line-height: 1.75;
  }
  .detail-card figcaption { padding: 20px; }
  .detail-card h3 { font-size: 24px; }
  .detail-card p { font-size: 15px; }

  .catalogue-top { margin-bottom: 44px; }
  .catalogue-top > .eyebrow { margin-bottom: 22px; }
  .catalogue-intro { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .catalogue h2 { margin: 0; white-space: normal; }
  .project-archive { display: grid; grid-template-columns: 1fr; gap: 52px; }
  .catalogue .project-archive > .project,
  .catalogue .project-archive > .project:not(.project--wide) {
    grid-column: 1;
    width: 100%;
    margin: 0;
  }
  .catalogue .project-visual--diptych,
  .catalogue .project-visual--portrait,
  .catalogue .project-visual--feature,
  .catalogue .project-visual--quiet-pair,
  .catalogue .project-visual--tall { grid-template-columns: 1fr 1fr; gap: 8px; }
  .project-info { align-items: flex-start; }
  .project-info h3 { font-size: 22px; }
  .project-info p { font-size: 15px; }
  .project-index-vertical { display: none; }

  .comparison--architectural { box-shadow: 10px 10px 0 rgba(99,113,124,.12); }
  .comparison-handle { width: 48px; height: 48px; }

  .closing {
    min-height: auto;
    padding: var(--section-space) 0 112px;
  }
  .closing-inner { grid-template-columns: 1fr; gap: 36px; }
  .closing-copy { order: 1; }
  .closing-contact {
    order: 2;
    justify-self: stretch;
    width: 100%;
    padding: 24px 20px;
  }
  .closing h2 {
    max-width: 11ch;
    margin-inline: auto;
    font-size: clamp(38px, 10vw, 56px);
    line-height: 1.2;
  }
  .closing-contact__phone { font-size: 22px; }
  .closing-contact__phone--secondary { font-size: 17px; }
  .closing-contact__action .button { width: 100%; min-height: 48px; }
  .site-footer {
    position: static;
    width: var(--page);
    margin: 48px auto 0;
    gap: 12px;
    font-size: 12px;
  }

  .floating-phone {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
  }
  .floating-phone a {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 7px 12px;
  }
  .floating-phone__label { font-size: 11px; }
}

@media (max-width: 420px) {
  :root { --page: calc(100% - 28px); }
  .brand-caption { max-width: 15ch; font-size: 9px; white-space: normal; }
  .hero h1 { font-size: clamp(36px, 11vw, 48px); }
  .hero-media { aspect-ratio: 3 / 4; }
  .editorial-controls--sides { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 5px; }
  .editorial-controls--sides > button { width: 40px; height: 40px; }
  .floating-phone__label { display: none; }
  .floating-phone__number { font-size: 14px; }
}