/* =========================================================
   BAYT SIWA — stylesheet
   ========================================================= */

:root{
  --sand:     #e8dcc5;
  --sand-2:   #d9c7a4;
  --cream:    #f6efe1;
  --paper:    #fbf8f1;
  --clay:     #b58c60;
  --bronze:   #8d6a3f;
  --earth:    #4b3a2a;
  --ink:      #1e1812;
  --ink-70:   rgba(30,24,18,.70);
  --ink-50:   rgba(30,24,18,.50);
  --ink-20:   rgba(30,24,18,.20);
  --ink-10:   rgba(30,24,18,.10);
  --line:     rgba(30,24,18,.14);

  --f-serif: "Cormorant Garamond", "Cormorant", ui-serif, Georgia, serif;
  --f-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.2,.65,.25,1);
  --dur:  .7s;

  --w: 1360px;
  --pad: clamp(20px, 4vw, 56px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--clay);color:var(--paper)}

/* ============ typography ============ */
.display,
.h-display,
.page-hero h1,
.gallery-head h1{
  font-family:var(--f-serif);
  font-weight:400;
  letter-spacing:-.012em;
  line-height:1.02;
  margin:0;
}
.display{ font-size: clamp(44px, 8vw, 120px); }
.h-display{ font-size: clamp(32px, 4.5vw, 64px); line-height:1.06 }
.display em, .h-display em{ font-style:italic; font-weight:300; color:var(--bronze) }
.display.white em, .h-display.white em{ color:#e4c79a }
/* Over the dark hero: lighten the italic accent so "Bayt" reads against photos */
.hero .display em, .hero .h-display em{
  color: #f2dfb5;
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
}

.eyebrow{
  font-family:var(--f-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bronze);
  margin:0 0 18px;
}
.eyebrow.light{ color:#e4c79a }

.label{
  font-family:var(--f-sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-70);
  margin:0 0 14px;
}
.label.small{ margin-bottom:10px }

.lede{
  font-size: clamp(17px, 1.4vw, 20px);
  line-height:1.6;
  color:var(--ink-70);
  max-width:58ch;
}

.small{ font-size:13px; color:var(--ink-70); line-height:1.5 }
.muted{ color:var(--ink-50) }
.white{ color:#f8ecd1 }

p{margin:0 0 14px}

/* ============ NAV ============ */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:grid;
  grid-template-columns: auto 1fr auto auto;
  align-items:center;
  gap: 28px;
  padding: 20px var(--pad);
  color:#f8ecd1;
  transition: background .4s var(--ease), color .4s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-scrolled{
  background: rgba(251,248,241,.96);
  color: var(--ink);
  padding: 14px var(--pad);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(8px);
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-serif);
  font-size:22px;
  letter-spacing:.02em;
}
.brand-mark{display:inline-flex}
.brand-text em{ font-style:italic; margin-left:4px; color:currentColor; opacity:.9 }
.brand-logo{ display:block; height:100px; width:auto; transition: height .3s var(--ease) }
.nav.is-scrolled .brand-logo{ height:40px }
.foot .brand-logo{ height:64px; margin-bottom: 10px }
.brand-logo--dark{ display:none }
.nav.is-scrolled .brand-logo--light{ display:none }
.nav.is-scrolled .brand-logo--dark{ display:block }

/* architect bio — two paragraphs with photo */
.bio-split{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.bio-split-text p{
  color: var(--ink-70);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.75;
  margin: 0 0 24px;
}
.bio-split-text p:last-child{ margin-bottom: 0 }
.bio-split-text em{ font-style: italic; color: var(--earth) }
.bio-split-media{ position: sticky; top: 110px }
.bio-split-media img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
@media (max-width: 860px){
  .bio-split{ grid-template-columns: 1fr; gap: 36px }
  .bio-split-media{ position: static }
  .bio-split-media img{ aspect-ratio: 4 / 3 }
}

/* Over the hero (nav not yet scrolled) — boost brand legibility against varied photos */
.nav:not(.is-scrolled) .brand{
  color: #fff9ea;
  font-weight: 300;
  text-shadow: 0 2px 22px rgba(0,0,0,.35), 0 0 18px rgba(255,240,210,.25);
}
.nav:not(.is-scrolled) .brand-text em{ opacity: 1 }

/* Soft top scrim under the nav so it stays legible over the bright video */
.nav:not(.is-scrolled){ position: fixed }
.nav:not(.is-scrolled)::before{
  content: "";
  position: absolute;
  inset: 0;
  height: 180%;
  background: linear-gradient(180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.40) 30%,
    rgba(0,0,0,.18) 65%,
    rgba(0,0,0,0)   100%);
  pointer-events: none;
  z-index: -1;
}

/* Over the hero — boost nav links + button against the brighter video */
.nav:not(.is-scrolled) .nav-links a{
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.45);
}
.nav:not(.is-scrolled) .nav-book{
  color: #ffffff;
  border-color: rgba(255,255,255,.7);
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.nav:not(.is-scrolled) .nav-book:hover{
  background: #ffffff;
  color: var(--ink);
  border-color: #ffffff;
  text-shadow: none;
}

.nav-links{
  display:flex; gap:28px; justify-content:center; align-items:center;
}
.nav-links a{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.82;
  position:relative;
  padding:6px 0;
}
.nav-links a:hover{ opacity:1 }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:currentColor; opacity:.6;
}

.nav-book{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid currentColor;
  padding: 12px 18px;
  border-radius:999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-book:hover{ background: currentColor; color:var(--paper) }
.nav.is-scrolled .nav-book:hover{ color:var(--paper) }

.nav-toggle{
  display:none; width:40px; height:40px;
  flex-direction:column; justify-content:center; gap:6px;
  padding:8px;
}
.nav-toggle span{ display:block; height:1.5px; background:currentColor; transition:transform .3s var(--ease), opacity .3s }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  align-items:end;
  overflow:hidden;
  color:#f8ecd1;
  isolation:isolate;
}
.hero-stage{ position:absolute; inset:0; z-index:0 }
.hero-stage .slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08);
  transition: opacity 1.6s var(--ease), transform 8s linear;
}
.hero-stage .slide.is-active{ opacity:1; transform:scale(1.0) }

/* === Video hero === */
.hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #1a1614;
  opacity: 0;
  transform: scale(1.08);
  animation: heroVideoIn 2s var(--ease) .2s forwards,
             heroKenBurns 28s ease-in-out 2.2s infinite alternate;
  will-change: opacity, transform;
  filter: brightness(1.45) contrast(1.05) saturate(1.1);
}
@keyframes heroVideoIn{
  from{ opacity: 0 }
  to  { opacity: 1 }
}
@keyframes heroKenBurns{
  0%   { transform: scale(1.0)  translate(0, 0) }
  100% { transform: scale(1.06) translate(-1.2%, -.6%) }
}
@media (prefers-reduced-motion: reduce){
  .hero-video{ animation: heroVideoIn 1s var(--ease) forwards; transform: none }
}

.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 0%, rgba(0,0,0,.10) 75%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.32) 100%);
}

/* Subtle filmic grain over the hero video */
.hero-grain{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96  0 0 0 0 .92  0 0 0 0 .82  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: heroGrainShift .55s steps(4) infinite;
}
@keyframes heroGrainShift{
  0%  { transform: translate(0,0) }
  25% { transform: translate(-4px, 3px) }
  50% { transform: translate(3px, -5px) }
  75% { transform: translate(-3px, -3px) }
  100%{ transform: translate(0,0) }
}
@media (prefers-reduced-motion: reduce){ .hero-grain{ animation: none } }

/* Mute toggle */
.hero-mute{
  position: absolute;
  right: var(--pad);
  bottom: calc(7vh + 60px);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  color: #f1e4c7;
  font-family: var(--f-sans);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.hero-mute:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-1px);
}
.hero-mute-icon{
  position: relative;
  display: inline-block;
  width: 14px; height: 14px;
}
.hero-mute-icon::before,
.hero-mute-icon::after{
  content: "";
  position: absolute;
  background: currentColor;
}
/* speaker shape */
.hero-mute-icon::before{
  left: 0; top: 4px;
  width: 4px; height: 6px;
}
.hero-mute-icon::after{
  left: 4px; top: 1px;
  width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  background: transparent;
}
/* slash for muted state */
.hero-mute[aria-pressed="true"]::after{
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 22px; height: 1.5px;
  background: currentColor;
  transform-origin: left center;
  transform: translateY(-50%) rotate(-22deg);
  border-radius: 2px;
}
.hero-inner{
  position:relative; z-index:2;
  padding: 0 var(--pad) 14vh;
  max-width: var(--w);
  width:100%; margin:0 auto;
}
.hero-inner .eyebrow{ color:#e9cfa0 }
.hero-sub{
  max-width: 48ch;
  font-size: clamp(15px, 1.2vw, 18px);
  color:#f1e4c7;
  opacity:.95;
  margin-top: 18px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 32px }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  padding: 16px 26px; border-radius:999px;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{
  background:#f2dfb5; color:var(--ink);
  border:1px solid #f2dfb5;
}
.btn-primary:hover{ background:#fff }
.btn-ghost{
  color:#f8ecd1; border:1px solid rgba(255,255,255,.6);
}
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff }

.hero-marquee{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
  padding:14px 0;
  overflow:hidden;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
}
.marquee-track{
  display:inline-flex; gap:48px;
  white-space:nowrap;
  animation: marquee 38s linear infinite;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:16px;
  color:#efd9a8;
  padding-left:48px;
}
@keyframes marquee{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}

.hero-dots{
  position:absolute; left:var(--pad); top: 110px;
  display:flex; gap:10px; z-index:3;
}
.dot{
  width:28px; height:4px; background:rgba(255,255,255,.35);
  transition: background .3s, width .3s;
}
.dot.is-on{ background:#f2dfb5; width:44px }

.hero-scroll{
  position:absolute; right:var(--pad); bottom: calc(14vh + 140px); z-index:3;
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:#e9cfa0;
}
.hero-scroll span{
  width:1px; height:28px; background:currentColor;
  animation: scrollNudge 1.6s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollNudge{
  0%,100%{ transform:scaleY(.3) }
  50%{ transform:scaleY(1) }
}

/* ============ SECTIONS / LAYOUT ============ */
.section{
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(80px, 11vw, 160px) var(--pad);
}
.section-head{ max-width: 820px; margin: 0 auto 60px }
.section-head.center{ text-align:center }
.section-head.center .label{ display:inline-block }

/* intro / quote */
.intro{
  text-align:center;
  max-width: 1080px;
}
.intro .quote{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:300;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height:1.25;
  color:var(--earth);
  margin: 20px auto;
  max-width: 22ch;
}
.quote-attr{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-50); margin-top:22px;
}

/* split */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items:center;
}
.split.reverse .split-media{ order:2 }
.split-text h2{ margin-bottom:22px }
.split-text p{ color:var(--ink-70); max-width: 56ch }
.split-media{ position:relative }
.split-media img{
  width:100%; height: clamp(380px, 58vh, 680px); object-fit:cover;
  border-radius: 2px;
  filter: saturate(1.02);
}
.cap{
  display:block;
  margin-top: 14px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-50);
}

.arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:4px;
  border-bottom:1px solid var(--ink-20);
  color:var(--earth);
  transition: color .25s, border-color .25s, gap .25s var(--ease);
}
.arrow-link:hover{ color:var(--bronze); border-color:var(--bronze); gap:16px }
.arrow-link.big{
  display:inline-flex;
  font-family:var(--f-serif);
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing:0; text-transform:none;
  border-bottom:1px solid var(--ink-20);
  padding-bottom:6px; margin-bottom:10px;
}

.center-link{
  display:block; width:max-content; margin:40px auto 0;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--earth); border-bottom:1px solid var(--ink-20); padding-bottom:4px;
}
.center-link:hover{ color:var(--bronze); border-color:var(--bronze) }

/* principles strip */
.strip{
  background: var(--sand);
  border-top:1px solid var(--ink-10);
  border-bottom:1px solid var(--ink-10);
  padding: clamp(70px, 9vw, 130px) var(--pad);
}
.strip-row{
  max-width:var(--w); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3.2vw, 56px);
}
.tile .num{
  font-family:var(--f-serif); font-style:italic;
  font-size:24px; color:var(--bronze);
  display:block; margin-bottom:14px;
}
.tile h3{
  font-family:var(--f-serif);
  font-weight:400;
  font-size: clamp(22px, 1.8vw, 28px);
  margin: 0 0 12px;
}
.tile p{ color:var(--ink-70); max-width: 30ch }

/* bleed (full-width image section) */
.bleed{
  position:relative;
  min-height: 80vh;
  background-size:cover;
  background-position:center;
  background-attachment: fixed;
  color:#f8ecd1;
  display:flex; align-items:flex-end;
}
.bleed::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55));
}
.bleed-inner{
  position:relative; z-index:2;
  max-width: var(--w);
  margin: 0 auto; width:100%;
  padding: 14vh var(--pad) 10vh;
}
.bleed-inner h2{ max-width: 20ch }

/* horizontal scroll cards */
.hscroll{
  margin: 60px calc(-1 * var(--pad)) 0;
  padding: 0 var(--pad) 20px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar{ display:none }
.hscroll-track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns: clamp(280px, 32vw, 420px);
  gap: 28px;
}
.ex-card{
  scroll-snap-align:start;
  display:block;
  padding-bottom: 8px;
  transition: transform .4s var(--ease);
}
.ex-card:hover{ transform: translateY(-4px) }
.ex-card .ex-img{
  aspect-ratio: 4/5;
  background-size:cover; background-position:center;
  margin-bottom: 18px;
  position:relative;
  overflow:hidden;
}
.ex-card .ex-img::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25));
  opacity:0; transition:opacity .3s;
}
.ex-card:hover .ex-img::after{ opacity:1 }
.ex-card h3{
  font-family:var(--f-serif);
  font-weight:400;
  font-size: clamp(22px, 1.8vw, 28px);
  margin:0 0 8px;
}
.ex-card p{ color:var(--ink-70); margin:0 0 10px }
.ex-meta{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronze);
}

/* gallery teaser grid */
.tease-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
  margin-top: 50px;
}
.tease-grid figure{ margin:0; overflow:hidden; }
.tease-grid figure img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease);
}
.tease-grid figure:hover img{ transform:scale(1.05) }
.tease-grid .tall{ grid-row: span 2 }
.tease-grid .wide{ grid-column: span 2 }

/* home — large image frames */
.big-frame{
  margin: 0;
  padding: 0 var(--pad);
  max-width: var(--w);
  margin-inline: auto;
}
.big-frame img{
  width: 100%;
  height: clamp(420px, 78vh, 820px);
  object-fit: cover;
  display: block;
}
.big-frame figcaption{
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* home — side-by-side image pair */
.big-pair{
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(80px, 11vw, 160px) var(--pad) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 36px);
}
.big-pair figure{ margin: 0 }
.big-pair img{
  width: 100%;
  height: clamp(360px, 62vh, 640px);
  object-fit: cover;
  display: block;
}
@media (max-width: 760px){
  .big-pair{ grid-template-columns: 1fr; gap: 28px }
  .big-pair img{ height: clamp(280px, 56vh, 460px) }
}

/* home — philosophy note */
.philosophy-note{
  text-align: center;
  max-width: 980px;
}
.philosophy-text{
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.4;
  color: var(--earth);
  max-width: 32ch;
  margin: 24px auto 0;
}
.philosophy-text em{
  font-style: italic;
  color: var(--bronze);
}

/* closing */
.closing{ text-align:center; max-width: 980px }
.closing h2{ margin: 8px 0 14px }
.closing-cta{
  display:flex; gap:24px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin-top: 30px;
}
.closing .btn-primary{ background:var(--earth); color:var(--cream); border-color:var(--earth) }
.closing .btn-primary:hover{ background:var(--ink); border-color:var(--ink) }

/* ============ FOOTER ============ */
.foot{
  background: var(--ink);
  color: #d9c7a4;
  padding: 80px var(--pad) 30px;
  margin-top: 40px;
}
.foot a{ color:#d9c7a4; display:block; font-size:13px; padding:3px 0; opacity:.78 }
.foot a:hover{ opacity:1; color:#f2dfb5 }

/* Social icon (Instagram) in the footer */
.foot a.social-ig{
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 1px solid rgba(217, 199, 164, .22);
  border-radius: 50%;
  color: #d9c7a4;
  opacity: .85;
  transition: background .25s, color .25s, border-color .25s, opacity .25s, transform .25s var(--ease);
}
.foot a.social-ig:hover{
  background: #f2dfb5;
  color: var(--ink);
  border-color: #f2dfb5;
  opacity: 1;
  transform: translateY(-2px);
}
.foot a.social-ig svg{ display: block }
.foot-cols{
  max-width: var(--w); margin: 0 auto;
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.foot-brand{
  font-family:var(--f-serif);
  font-size: 30px;
  margin: 12px 0 10px;
  color:#f2dfb5;
}
.foot .small{ color:#b29878 }
.foot-h{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:#f2dfb5; opacity:.8;
  margin-bottom:16px;
}
.foot-bottom{
  max-width: var(--w); margin: 60px auto 0;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; font-size:12px;
  color:#8e7a5e;
}

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{
  position:relative;
  min-height: 70vh;
  display:flex; align-items:flex-end;
  color:#f8ecd1;
  background-size:cover; background-position:center;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.65));
}
.page-hero-inner{
  position:relative; z-index:2;
  max-width: var(--w); width:100%;
  margin: 0 auto;
  padding: 18vh var(--pad) 10vh;
}
.page-hero h1{ font-size: clamp(40px, 6vw, 92px); }
.page-hero-sub{
  max-width: 50ch;
  color:#f1e4c7;
  margin-top: 18px;
  font-size: clamp(15px, 1.2vw, 18px);
}

/* ============ ROOMS ============ */
.room-grid{ display:flex; flex-direction:column; gap: clamp(80px, 8vw, 140px); }
.room{
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items:center;
}
.room.reverse .room-media{ order:2 }
.room-media img{
  width:100%; height: clamp(420px, 68vh, 720px); object-fit:cover;
}
.room-body h2{ margin:10px 0 20px; }
.spec{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
  margin: 28px 0 30px;
  padding: 22px 0;
  border-top:1px solid var(--ink-10);
  border-bottom:1px solid var(--ink-10);
}
.spec div{ display:flex; flex-direction:column; gap:4px }
.spec dt{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-50);
}
.spec dd{
  font-family:var(--f-serif);
  font-size: 20px;
  margin:0;
}

/* room notes */
.notes{ border-top:1px solid var(--ink-10); }
.notes-head{ text-align:center; max-width: 760px; margin: 0 auto 60px }
.notes-head.center .label{ display:inline-block }
.notes-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 36px 48px;
  max-width: 1180px; margin: 0 auto;
}
.notes-grid h4{
  font-family:var(--f-serif); font-weight:400; font-size: 22px;
  margin:0 0 10px;
}
.notes-grid p{ color:var(--ink-70); margin:0 }

/* ============ EXCURSIONS PAGE ============ */
.ex-page{
  display:flex; flex-direction:column;
  gap: clamp(90px, 9vw, 160px);
}
.ex-long{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items:center;
}
.ex-long.reverse .ex-long-media{ order:2 }
.ex-long-media img{
  width:100%; height: clamp(360px, 60vh, 640px); object-fit:cover;
}
.ex-long-body h2{ margin: 10px 0 18px; }
.ex-long-body p{ color:var(--ink-70); max-width:58ch }
.ex-spec{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px; margin-top: 26px; padding-top: 22px;
  border-top:1px solid var(--ink-10);
}
.ex-spec div{ display:flex; flex-direction:column; gap:3px }
.ex-spec dt{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-50) }
.ex-spec dd{ font-family:var(--f-serif); font-size: 19px; margin:0 }

/* ============ GALLERY ============ */
.gallery-head{
  max-width: var(--w); margin: 0 auto;
  padding: 140px var(--pad) 40px;
  text-align:center;
}
.gallery-head .display{ font-size: clamp(40px, 6vw, 88px) }
.gallery-sub{ color:var(--ink-70); max-width: 54ch; margin: 18px auto 38px }
.gallery-tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.tab{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  padding: 10px 18px; border-radius:999px;
  border:1px solid var(--ink-20);
  color:var(--ink-70);
  transition: all .25s;
}
.tab:hover{ color:var(--earth); border-color:var(--earth) }
.tab.is-on{ background:var(--earth); color:var(--paper); border-color:var(--earth) }

.masonry{
  max-width: var(--w);
  margin: 30px auto 0;
  padding: 0 var(--pad);
  column-count: 4;
  column-gap: 14px;
}
.m-item{
  break-inside: avoid;
  margin: 0 0 14px;
  overflow:hidden;
  cursor: zoom-in;
  background:var(--sand);
  position:relative;
}
.m-item img{
  width:100%; height:auto; display:block;
  transition: transform .8s var(--ease), filter .4s;
}
.m-item:hover img{ transform:scale(1.04); filter: brightness(.96) saturate(1.08) }
.m-item.is-hidden{ display:none }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background: rgba(18,14,10,.94);
  display:none;
  align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex }
.lb-img{
  max-width: 92vw; max-height: 86vh;
  object-fit:contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: lbIn .35s var(--ease);
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.98) } to{ opacity:1; transform:none } }
.lb-close, .lb-prev, .lb-next{
  position:absolute; color:#e8d7b2; font-size:38px; line-height:1;
  width:56px; height:56px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.15); border-radius:50%;
  transition: background .2s, border-color .2s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.35);
}
.lb-close{ top:22px; right:22px; font-size:28px }
.lb-prev{ left:22px; top:50%; transform:translateY(-50%) }
.lb-next{ right:22px; top:50%; transform:translateY(-50%) }
.lb-cap{
  position:absolute; bottom: 22px; left:0; right:0;
  text-align:center; color:#c9b88f;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
}

/* ============ CONTACT ============ */
.contact-wrap{
  max-width: var(--w); margin: 0 auto;
  padding: 18vh var(--pad) 100px;
  display:grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items:flex-start;
}
.contact-sticky{ position:sticky; top: 120px }
.contact-left .display{ font-size: clamp(40px, 5.4vw, 80px); margin-bottom: 22px }
.contact-lede{ color:var(--ink-70); max-width: 42ch; margin-bottom: 38px }
.contact-block{
  padding: 22px 0;
  border-top:1px solid var(--ink-10);
}
.contact-block:last-child{ border-bottom:1px solid var(--ink-10) }

.enq{
  background: var(--cream);
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid var(--ink-10);
}
.enq h2{ margin: 8px 0 30px }
.field-grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-bottom: 28px;
}
.field{ display:flex; flex-direction:column; gap:6px }
.field span{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-70);
}
.field em{ font-style:normal; color:var(--ink-50); text-transform:none; letter-spacing:0; font-size:11px }
.field input, .field select, .field textarea{
  font: inherit; font-size: 15px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-20);
  padding: 10px 0;
  color: var(--ink);
  outline:none;
  transition: border-color .2s;
  border-radius:0;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-bottom-color: var(--earth);
}
.field textarea{ resize: vertical }

.interests{
  border:0; padding:0; margin: 10px 0 28px;
  display:flex; flex-wrap:wrap; gap: 10px;
}
.interests legend{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-70); margin-bottom: 10px;
  padding:0; width:100%;
}
.interests label{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 18px;
  border: 1px solid var(--ink-20);
  border-radius: 999px;
  font-size: 13px;
  cursor:pointer;
  transition: all .2s;
}
.interests label:has(input:checked){
  background: var(--earth); color: var(--cream); border-color: var(--earth);
}
.interests input{ position:absolute; opacity:0; pointer-events:none }

.enq-actions{ display:flex; gap:20px; align-items:center; flex-wrap:wrap }
.enq .btn-primary{ background:var(--earth); color:var(--cream); border-color:var(--earth) }
.enq .btn-primary:hover{ background:var(--ink); border-color:var(--ink) }

.form-ok{
  margin-top: 18px;
  background: #e1d5bb;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--earth);
}

/* getting here */
.getting{ border-top:1px solid var(--ink-10) }
.getting-head{ max-width: 820px; margin: 0 auto 54px; text-align:center }
.getting-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  max-width: var(--w); margin: 0 auto;
}
.getting-grid div{ border-top: 1px solid var(--ink-10); padding-top: 20px }
.getting-grid .num{
  font-family:var(--f-serif); font-style:italic;
  font-size: 22px; color:var(--bronze); display:block; margin-bottom: 10px;
}
.getting-grid h4{
  font-family:var(--f-serif); font-weight:400; font-size: 22px;
  margin: 0 0 8px;
}
.getting-grid p{ color:var(--ink-70); margin:0 }

/* ============ SCROLL REVEAL ============ */
.reveal{ opacity:0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease) }
.reveal.is-in{ opacity:1; transform: none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none }
  .marquee-track, .hero-scroll span{ animation:none }
  .hero-stage .slide.is-active{ transform:none }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .strip-row{ grid-template-columns: repeat(2, 1fr) }
  .tease-grid{ grid-template-columns: repeat(3, 1fr) }
  .notes-grid{ grid-template-columns: repeat(2, 1fr) }
  .getting-grid{ grid-template-columns: repeat(2, 1fr) }
  .masonry{ column-count: 3 }
  .foot-cols{ grid-template-columns: 2fr 1fr 1fr; }
  .foot-cols > div:last-child{ grid-column: span 3 }
}
@media (max-width: 860px){
  .nav{ grid-template-columns: auto 1fr auto; }
  .nav-links{
    position:fixed; top:0; right:0;
    background: var(--paper); color: var(--ink);
    width: min(84vw, 380px); height:100vh;
    flex-direction:column; justify-content:center;
    gap: 32px; padding: 40px;
    transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,.2);
  }
  .nav-links.is-open{ transform:none }
  .nav-links a{ font-size:18px; letter-spacing:.14em }
  .nav-book{ display:none }
  .nav-toggle{ display:flex }

  .split, .split.reverse, .room, .room.reverse, .ex-long, .ex-long.reverse{
    grid-template-columns: 1fr; gap: 28px;
  }
  .split.reverse .split-media, .room.reverse .room-media, .ex-long.reverse .ex-long-media{ order:0 }

  .hero-dots{ display:none }
  .hero-scroll{ display:none }

  .strip-row{ grid-template-columns: 1fr }
  .tease-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .tease-grid .wide{ grid-column: span 2 }

  .contact-wrap{ grid-template-columns: 1fr }
  .contact-sticky{ position:static }
  .field-grid{ grid-template-columns: 1fr }
  .notes-grid{ grid-template-columns: 1fr }
  .getting-grid{ grid-template-columns: 1fr }
  .masonry{ column-count: 2 }
  .foot-cols{ grid-template-columns: 1fr 1fr; }
  .foot-cols > div:first-child, .foot-cols > div:last-child{ grid-column: span 2 }
  .foot-bottom{ flex-direction:column; gap:6px; text-align:center }
}
@media (max-width: 520px){
  .display{ font-size: 44px }
  .masonry{ column-count: 1 }
  .tease-grid{ grid-template-columns: 1fr; grid-auto-rows: 220px }
  .tease-grid .wide{ grid-column: auto }
  .tease-grid .tall{ grid-row: auto }
}

/* =========================================================
   Additions — redesigned pages
   ========================================================= */

/* hero tagline (index) */
.hero-tag{
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  color: #f1e4c7;
  margin: 18px 0 0;
  font-style: italic;
  font-weight: 300;
}
.hero-tag em{ font-style: italic; color: #e4c79a; font-weight: 400 }

/* ----- full-width image strip (used between sections) ----- */
.strip-images{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  overflow: hidden;
}
.strip-images figure{
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--sand);
}
.strip-images img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter .4s;
}
.strip-images figure:hover img{ transform: scale(1.06); filter: brightness(.95) saturate(1.05) }

/* ----- triptych (three captioned figures) ----- */
.triptych{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(60px, 8vw, 120px);
}
.triptych figure{ margin: 0; position: relative; overflow: hidden }
.triptych img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease);
}
.triptych figure:hover img{ transform: scale(1.04) }
.triptych figcaption{
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ----- materials (house.html) ----- */
.materials .section-head{ max-width: 820px; margin: 0 auto 60px; text-align: center }
.materials .section-head .label{ display: inline-block }
.materials .section-head .lede{ margin: 20px auto 0 }
.mat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mat{
  background: var(--sand);
  padding: 38px 32px;
  min-height: 300px;
  position: relative;
  transition: transform .4s var(--ease), background .3s;
}
.mat:hover{ transform: translateY(-2px); background: #e0d0b1 }
.mat-num{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--bronze);
  display: block;
  margin-bottom: 14px;
}
.mat h3{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(24px, 2vw, 30px);
  margin: 0 0 10px;
}
.mat p{ color: var(--ink-70); margin: 0 }
.mat-img{
  padding: 0;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  color: #f8ecd1;
}
.mat-img::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
  pointer-events: none;
}
.mat-cap{
  position: relative; z-index: 1;
  padding: 24px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  max-width: 30ch;
}

/* ----- features grid ----- */
.features .section-head{ max-width: 760px; margin: 0 auto 60px; text-align: center }
.features .section-head .label{ display: inline-block }
.feat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feat{
  background: transparent;
}
.feat img{
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease);
}
.feat:hover img{ transform: scale(1.03) }
.feat-body{ padding: 20px 0 0 }
.feat-body h3{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  margin: 0 0 8px;
}
.feat-body p{ color: var(--ink-70); margin: 0; max-width: 38ch }

/* ----- house-grid / mini-masonry (walk-through) ----- */
.house-grid .section-head{ max-width: 760px; margin: 0 auto 50px }
.mini-masonry{
  column-count: 4;
  column-gap: 10px;
}
.mini-masonry figure{
  break-inside: avoid;
  margin: 0 0 10px;
  overflow: hidden;
  background: var(--sand);
}
.mini-masonry img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .8s var(--ease), filter .4s;
}
.mini-masonry figure:hover img{ transform: scale(1.04); filter: brightness(.96) }

/* ----- acts (experience) ----- */
.acts{ display: flex; flex-direction: column; gap: clamp(70px, 8vw, 130px) }
.acts .section-head{ max-width: 820px; margin: 0 auto 20px; text-align: center }
.acts .section-head .label{ display: inline-block }
.act{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.act.reverse .act-media{ order: 2 }
.act-media img{
  width: 100%;
  height: clamp(380px, 62vh, 640px);
  object-fit: cover;
}
.act-time{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(32px, 3vw, 44px);
  color: var(--bronze);
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}
.act-body h3{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  margin: 0 0 18px;
}
.act-body p{ color: var(--ink-70); max-width: 56ch }

/* ----- places grid (experience) ----- */
.places .section-head{ max-width: 820px; margin: 0 auto 60px }
.place-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
}
.place{ display: flex; flex-direction: column }
.place-img{
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
  transition: transform .6s var(--ease);
}
.place:hover .place-img{ transform: scale(1.02) }
.place-num{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--bronze);
  display: block;
  margin-bottom: 8px;
}
.place-body h3{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  margin: 0 0 10px;
}
.place-body p{ color: var(--ink-70); margin: 0; max-width: 38ch }

/* ----- tenets (designer philosophy) ----- */
.philosophy .section-head{ max-width: 820px; margin: 0 auto 60px; text-align: center }
.philosophy .section-head .label{ display: inline-block }
.philosophy .section-head .lede{ margin: 18px auto 0 }
.tenets{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  border-top: 1px solid var(--ink-10);
}
.tenet{
  padding: 40px 34px;
  border-right: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  transition: background .3s;
}
.tenet:hover{ background: var(--sand) }
.tenet:nth-child(2n){ border-right: 0 }
.tenet-num{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--bronze);
  display: block;
  margin-bottom: 14px;
}
.tenet h3{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  margin: 0 0 12px;
  line-height: 1.25;
}
.tenet p{ color: var(--ink-70); margin: 0; max-width: 48ch }

/* ----- method (designer) ----- */
.method .section-head{ max-width: 820px; margin: 0 auto 60px }
.method-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-10);
  border-left: 1px solid var(--ink-10);
}
.step{
  padding: 36px 30px;
  border-right: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  background: transparent;
  transition: background .3s;
}
.step:hover{ background: var(--cream) }
.step-num{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--bronze);
  display: block;
  margin-bottom: 10px;
}
.step h4{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 8px;
}
.step p{ color: var(--ink-70); margin: 0 }

/* ----- portfolio (designer) ----- */
.portfolio .section-head{ max-width: 820px; margin: 0 auto 70px }
.work-list{
  display: flex;
  flex-direction: column;
  gap: clamp(70px, 8vw, 120px);
}
.work{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.work.reverse .work-media{ order: 2 }
.work-media img{
  width: 100%;
  height: clamp(380px, 60vh, 600px);
  object-fit: cover;
}
.work-meta{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: 0 0 14px;
}
.work-body h3{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.08;
  margin: 0 0 16px;
}
.work-body p{ color: var(--ink-70); max-width: 56ch; margin-bottom: 18px }

/* ----- press / credits ----- */
.credits{ text-align: center }
.credits .section-head{ margin-bottom: 34px }
.press{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 30px 50px;
  justify-content: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  color: var(--ink-50);
}
.press li{ opacity: .85; transition: opacity .2s, color .2s }
.press li:hover{ opacity: 1; color: var(--bronze) }

/* ----- contact hero (full-bleed image) ----- */
.contact-hero{
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: #f8ecd1;
}
.contact-hero::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.7));
}
.contact-hero-inner{
  position: relative; z-index: 2;
  max-width: var(--w);
  width: 100%;
  margin: 0 auto;
  padding: 18vh var(--pad) 9vh;
}
.contact-hero-inner h1{ font-size: clamp(48px, 7vw, 110px) }
.contact-hero-sub{
  max-width: 54ch;
  color: #f1e4c7;
  margin-top: 18px;
  font-size: clamp(15px, 1.2vw, 18px);
}

/* ----- contact direct links ----- */
.contact-direct{ padding-top: clamp(60px, 7vw, 100px); padding-bottom: 0 }
.direct-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.direct-grid--2{
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 0 auto;
}
.direct-card{
  display: block;
  padding: 32px 28px;
  background: var(--cream);
  border: 1px solid var(--ink-10);
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.direct-card:hover{
  background: var(--sand);
  border-color: var(--ink-20);
  transform: translateY(-2px);
}
.direct-line{
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.2vw, 32px);
  margin: 12px 0 18px;
  color: var(--earth);
}
.direct-go{
  display: inline-flex;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* ----- contact note (form) ----- */
.note-wrap{ padding-top: clamp(70px, 8vw, 120px) }
.note-inner{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: flex-start;
}
.note-left .label{ margin-bottom: 14px }
.note-left h2{ font-size: clamp(36px, 4vw, 60px); margin-bottom: 22px }
.note-sub{ color: var(--ink-70); max-width: 44ch; margin-bottom: 36px }
.note-img{ margin: 0 }
.note-img img{ width: 100%; aspect-ratio: 4/5; object-fit: cover }

.note-form{
  background: var(--cream);
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid var(--ink-10);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* ----- where strip ----- */
.where{ border-top: 1px solid var(--ink-10) }
.where-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.where-grid h3{ font-size: clamp(32px, 3.4vw, 48px); margin: 10px 0 18px }
.where-grid p{ color: var(--ink-70); max-width: 44ch }
.where-img{ margin: 0 }
.where-img img{ width: 100%; aspect-ratio: 3/2; object-fit: cover }

/* ============ responsive additions ============ */
@media (max-width: 1100px){
  .strip-images{ grid-template-columns: repeat(2, 1fr) }
  .triptych{ grid-template-columns: 1fr }
  .mat-grid{ grid-template-columns: repeat(2, 1fr) }
  .feat-grid{ grid-template-columns: repeat(2, 1fr) }
  .place-grid{ grid-template-columns: repeat(2, 1fr) }
  .mini-masonry{ column-count: 3 }
  .method-grid{ grid-template-columns: repeat(2, 1fr) }
  .direct-grid{ grid-template-columns: 1fr }
  .note-inner{ grid-template-columns: 1fr; gap: 30px }
  .where-grid{ grid-template-columns: 1fr }
}
@media (max-width: 860px){
  .act, .act.reverse, .work, .work.reverse{
    grid-template-columns: 1fr; gap: 24px;
  }
  .act.reverse .act-media, .work.reverse .work-media{ order: 0 }
  .tenets{ grid-template-columns: 1fr }
  .tenet:nth-child(2n){ border-right: 1px solid var(--ink-10) }
  .tenet{ border-right: 1px solid var(--ink-10) }
  .method-grid{ grid-template-columns: 1fr }
  .field-row{ grid-template-columns: 1fr }
  .mini-masonry{ column-count: 2 }
  .feat-grid, .place-grid, .mat-grid{ grid-template-columns: 1fr }
  .strip-images{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 520px){
  .mini-masonry{ column-count: 1 }
  .strip-images{ grid-template-columns: 1fr }
}