/* ============================================================
   RBW Design
   ============================================================ */

:root{
  --paper:#ffffff;
  --soft:#f7f5f1;
  --hair:#e4dfd6;
  --bronze:#8c7a5e;
  --body:#554e45;
  --muted:#7e7668;
  --ink:#1a1815;

  --display:"Cormorant Garamond", Cambria, Georgia, serif;
  --sans:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --gut:clamp(20px, 5vw, 72px);
  --rule:1px solid var(--hair);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent}

h1,h2,h3{font-family:var(--display); font-weight:300; color:var(--ink); margin:0; letter-spacing:.005em}
h1{font-size:clamp(2rem, 4.6vw, 3.55rem); line-height:1.12}
h2{font-size:clamp(1.65rem, 3.5vw, 2.7rem); line-height:1.16}
h3{font-size:clamp(1.15rem, 1.9vw, 1.45rem); line-height:1.25}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wrap{max-width:1360px; margin:0 auto; padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bronze); margin:0 0 1.1rem;
}
.lede{font-size:clamp(1rem,1.25vw,1.12rem); color:var(--muted); max-width:62ch}
section{padding-block:clamp(70px, 9vw, 150px)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; background:var(--paper);
  border-bottom:var(--rule);
  transform:translateY(-102%); transition:transform .55s var(--ease);
}
.nav.show{transform:none}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:74px}
.nav-in img{width:84px}
.nav ul{display:flex; gap:clamp(14px,2.2vw,34px); list-style:none; margin:0; padding:0}
.nav a{
  font-size:.74rem; letter-spacing:.14em; color:var(--muted);
  transition:color .3s var(--ease); padding-block:6px;
}
.nav a:hover,.nav a.on{color:var(--ink)}
.burger{display:none; background:none; border:0; padding:8px; cursor:pointer}
.burger span{display:block; width:22px; height:1px; background:var(--ink); margin:5px 0; transition:.3s var(--ease)}

@media (max-width:860px){
  .burger{display:block}
  .nav ul{
    position:absolute; top:74px; left:0; right:0; background:var(--paper);
    flex-direction:column; gap:0; padding:0 var(--gut);
    max-height:0; overflow:hidden; border-bottom:0;
    transition:max-height .45s var(--ease), padding .45s var(--ease);
  }
  .nav.open ul{max-height:340px; padding:8px var(--gut) 26px; border-bottom:var(--rule)}
  .nav ul a{display:block; padding:13px 0; font-size:.86rem; letter-spacing:.1em}
}

/* ---------- landing ---------- */
.landing{
  min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:var(--gut); position:relative;
}
.landing .mark{width:min(260px,52vw); margin-inline:auto}
.landing .place{
  font-size:.72rem; letter-spacing:.42em; color:var(--muted);
  text-transform:uppercase; margin:1.9rem 0 0;
}
.landing .line{font-family:var(--display); font-style:italic; font-size:clamp(1.05rem,2vw,1.4rem); color:#4a443c; margin:1.5rem 0 0}
.enter{
  display:inline-block; margin-top:3.2rem; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); font-weight:500;
  border-bottom:1px solid var(--ink); padding-bottom:7px;
  transition:opacity .3s var(--ease);
}
.enter:hover{opacity:.55}
.landing .foot{
  position:absolute; inset:auto var(--gut) clamp(20px,4vw,42px); display:flex;
  justify-content:space-between; font-size:.7rem; color:#b0a89a; gap:16px; flex-wrap:wrap;
}

/* ---------- two column ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5.5vw,90px); align-items:center}
.split.narrow-text .copy{max-width:53ch}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split .art{order:-1}
  .split .art img{width:100%; aspect-ratio:4/3; object-fit:cover}
}
@media (max-width:560px){ .split .art img{aspect-ratio:5/4} }

/* ---------- full bleed ---------- */
.bleed{position:relative; min-height:clamp(440px,74vh,760px); display:flex; align-items:center; overflow:hidden}
.bleed img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bleed::after{content:""; position:absolute; inset:0; background:rgba(26,24,21,.56)}
.bleed .wrap{position:relative; z-index:2}
.bleed h2, .bleed .eyebrow{color:#fff}
.bleed .eyebrow{color:#cfc6b4}
.bleed p{color:#e3ded4; max-width:56ch; margin-top:2rem}

/* ---------- principles ---------- */
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,54px) clamp(26px,3vw,46px); margin-top:clamp(36px,5vw,70px)}
.principles article p{font-size:.94rem}
.num{font-family:var(--display); font-size:1rem; color:#bfb6a6; letter-spacing:.1em; display:block; margin-bottom:.55rem}
.principles h3{margin-bottom:.7rem}
@media (max-width:900px){ .principles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .principles{grid-template-columns:1fr} }

/* ---------- lists ---------- */
.cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,56px)}
.cols h4{font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin:0 0 1.2rem}
.cols ul{list-style:none; margin:0; padding:0}
.cols li{padding:.3rem 0; font-size:.97rem}
@media (max-width:560px){ .cols{grid-template-columns:1fr} }

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:clamp(34px,4.5vw,64px)}
.steps article{background:var(--soft); padding:clamp(16px,1.6vw,24px); min-height:184px}
.steps .num{font-size:.9rem}
.steps h3{font-size:1.02rem; line-height:1.25; min-height:2.5em; margin-bottom:.55rem}
.steps p{font-size:.84rem; color:var(--muted); line-height:1.5}
@media (max-width:1040px){ .steps{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .steps{grid-template-columns:repeat(2,1fr)} .steps article{min-height:0} }

/* ---------- project grid ---------- */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.2vw,34px); margin-top:clamp(36px,5vw,68px)}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,34px); margin-top:clamp(30px,4vw,56px)}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,40px); margin-top:clamp(30px,4vw,56px)}
@media (max-width:1000px){ .grid4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .grid3{grid-template-columns:1fr} }
@media (max-width:640px){ .grid4,.grid3,.grid2{grid-template-columns:1fr} }

.card figure{margin:0; overflow:hidden; background:var(--soft)}
.card img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 1.4s var(--ease)}
@media (hover:hover){ .card:hover img{transform:scale(1.035)} }
.card h3{margin:1.05rem 0 .3rem; font-size:1.2rem}
.card .where{font-size:.86rem; color:var(--muted)}
.card .scope{font-size:.84rem; color:#a79e90; margin-top:.3rem; line-height:1.45}

/* ---------- team ---------- */
.people{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(34px,5vw,80px); margin-top:clamp(36px,5vw,70px)}
.person{display:grid; grid-template-columns:.85fr 1fr; gap:clamp(18px,2.4vw,34px); align-items:start}
.person img{width:100%; aspect-ratio:4/5; object-fit:cover}
.person h3{margin-bottom:.15rem}
.role{font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); margin:0 0 .9rem}
.person p{font-size:.92rem}
.team-note{
  margin-top:clamp(34px,4.6vw,64px); padding-top:clamp(24px,3vw,38px); border-top:var(--rule);
  font-family:var(--display); font-style:italic; font-size:clamp(1.02rem,1.5vw,1.22rem);
  color:#4a443c; max-width:88ch;
}
@media (max-width:1020px){ .people{grid-template-columns:1fr} }
@media (max-width:500px){ .person{grid-template-columns:1fr} .person img{max-width:280px} }

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,6vw,90px); margin-top:clamp(30px,4vw,56px)}
.contact-grid address{font-style:normal; font-size:1rem; line-height:1.95}
.contact-grid a:hover{color:var(--ink)}
.field{margin-bottom:1.9rem}
.field label{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#a79e90; margin-bottom:.5rem}
.field input,.field textarea{
  width:100%; border:0; border-bottom:var(--rule); background:none; padding:.45rem 0 .7rem;
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--ink);
  transition:border-color .3s var(--ease);
}
.field select{
  width:100%; border:0; border-bottom:var(--rule); border-radius:0; background:none; padding:.45rem 0 .7rem;
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--ink);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238c7a5e' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat; background-position:right .2rem center;
  transition:border-color .3s var(--ease);
}
.field select:invalid{color:#a79e90}
.field input:focus,.field textarea:focus,.field select:focus{outline:0; border-bottom-color:var(--ink)}
.field textarea{resize:vertical; min-height:74px}
.field input.err,.field textarea.err,.field select.err{border-bottom-color:#b0563f}
/* honeypot: off canvas, never shown, never focusable */
.field.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0}
.cf-turnstile{margin:0 0 1.4rem}
.cf-turnstile:empty{margin:0}
.form-note{font-size:.86rem; color:var(--muted); margin:0 0 1.2rem}
.form-note.ok{color:var(--ink); font-family:var(--display); font-style:italic; font-size:1.12rem}
button.send[disabled]{opacity:.4; cursor:default}
button.send{
  background:none; border:0; border-bottom:1px solid var(--ink); color:var(--ink);
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; padding:0 0 7px; cursor:pointer; transition:opacity .3s var(--ease);
}
button.send:hover{opacity:.55}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr} }

/* ---------- confidential note ---------- */
.confidential{
  display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze); border:var(--rule); padding:.4rem .8rem; margin-bottom:1.4rem;
}

/* ---------- footer ---------- */
footer{border-top:var(--rule); padding-block:clamp(34px,4vw,56px); font-size:.78rem; color:var(--muted)}
.foot-in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
footer img{width:74px; opacity:.9}

/* ---------- project page ---------- */
.p-hero{position:relative; min-height:clamp(380px,66vh,660px); display:flex; align-items:flex-end; overflow:hidden; margin-top:74px}
.p-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.p-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,24,21,.34) 0%,rgba(26,24,21,.30) 45%,rgba(26,24,21,.62) 100%)}
.p-hero .wrap{position:relative; z-index:2; padding-bottom:clamp(34px,5vw,64px); width:100%}
.p-hero h1{color:#fff}
.p-hero .where{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:#ddd6c9; margin-top:.8rem}
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,44px) clamp(24px,4vw,60px)}
.facts dl{margin:0}
.facts dt{font-size:.7rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:#8c8478; margin-bottom:.4rem}
.facts dd{margin:0 0 1.5rem; font-size:.95rem}
.facts dd:last-child{margin-bottom:0}
.p-body{font-size:1.02rem; max-width:56ch}
.back{display:inline-block; margin-top:clamp(40px,5vw,70px); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border-bottom:var(--rule); padding-bottom:6px}
.back:hover{color:var(--ink); border-bottom-color:var(--ink)}
@media (max-width:760px){ .facts{grid-template-columns:1fr} }
.privacy{font-size:.78rem; line-height:1.6; color:var(--muted); margin:1.2rem 0 0; max-width:34em}

/* readability and project order tweaks */
.footnote{margin-top:clamp(24px,3vw,38px); font-size:.9rem; color:var(--muted); max-width:70ch}
.next-link{display:inline-block; margin-top:clamp(30px,4vw,48px); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:6px}
.next-link:hover{color:var(--bronze); border-color:var(--bronze)}
.team-note{max-width:none; text-align:center; padding-inline:clamp(0px,6vw,120px)}
.field label{font-size:.78rem; font-weight:500; color:var(--body)}
.field select:invalid{color:var(--muted)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input,.field textarea,.field select{font-weight:400}
.privacy{font-size:.86rem; color:var(--body)}
.contact-grid address{color:var(--body)}
.card .scope{font-size:.9rem; color:var(--muted)}
.card .where{color:var(--body)}
.landing .foot{color:var(--muted)}
/* land section headings just below the fixed menu instead of leaving a large gap */
section[id]{scroll-margin-top:calc(var(--navh, 76px) - clamp(70px, 9vw, 150px) + 28px)}