@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --ink:#212120; --ink-soft:#5C5C57; --ink-faint:#9A968C;
  --paper:#F7F4EC; --paper-alt:#EEE9DB; --white:#FFFFFF;
  --teal:#6FB8AA; --teal-dark:#3E7A6E; --teal-tint:#E4F1EC;
  --line:#DBD6C7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',Arial,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Inter',Arial,sans-serif; font-weight:800; margin:0; color:var(--ink); line-height:1.05; letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
section{position:relative}
.wrap{max-width:1280px; margin:0 auto; padding:0 32px}

/* ---------- SECTION LABEL (numbered editorial marker) ---------- */
.sec-label{display:flex; align-items:baseline; gap:18px; margin-bottom:44px}
.sec-label .idx{font-size:14px; font-weight:700; letter-spacing:.28em; color:var(--teal-dark); white-space:nowrap}
.sec-label .txt{font-size:14px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap}
.sec-label .rule{flex:1; height:1px; background:var(--line)}
.sec-head h2{font-size:clamp(28px,3.6vw,44px); max-width:760px}
.sec-head p{color:var(--ink-soft); margin-top:18px; font-size:16.5px; max-width:600px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px;
  font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid var(--ink); color:var(--ink); background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease; cursor:pointer;
}
.btn-solid{background:var(--ink); color:var(--paper)}
.btn-solid:hover{background:var(--teal-dark); border-color:var(--teal-dark); color:#fff}
.btn-line:hover{background:var(--ink); color:var(--paper)}
.btn-teal{border-color:var(--teal-dark); color:var(--teal-dark)}
.btn-teal:hover{background:var(--teal-dark); color:#fff}
.btn-ondark{border-color:rgba(255,255,255,.5); color:#fff}
.btn-ondark:hover{background:var(--teal); border-color:var(--teal); color:var(--ink)}
.arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- HEADER ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:100; padding:26px 0; transition:padding .25s ease, background .25s ease, box-shadow .25s ease}
header .wrap{display:flex; align-items:center; justify-content:space-between}
header.scrolled{background:rgba(247,244,236,.94); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); padding:16px 0}
.brand{display:flex; flex-direction:column; text-decoration:none; line-height:1}
.brand .cat{font-weight:900; font-size:32px; letter-spacing:-.03em; color:var(--ink)}
.brand .sub{font-weight:300; font-size:15px; color:var(--teal-dark); letter-spacing:.01em; margin-top:1px}
nav{display:flex; align-items:center; gap:30px}
nav a{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-soft); position:relative; padding:4px 0;
}
nav a::after{content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--teal-dark); transform:scaleX(0); transform-origin:left; transition:transform .2s ease}
nav a:hover, nav a.active{color:var(--ink)}
nav a:hover::after, nav a.active::after{transform:scaleX(1)}
.nav-cta{margin-left:6px}
.burger{display:none; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; background:none; border:1.5px solid var(--ink)}
.burger span, .burger span::before, .burger span::after{content:'';display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:.2s}
.burger span::before{position:absolute; top:-6px}
.burger span::after{position:absolute; top:6px}

.mobile-nav{
  position:fixed; inset:0; background:var(--ink); z-index:99; padding:110px 32px 40px;
  transform:translateY(-100%); transition:transform .3s ease; display:flex; flex-direction:column; gap:4px; height:100vh; overflow:auto;
}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a{font-size:28px; font-weight:800; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.16); text-decoration:none; color:var(--paper)}

/* ---------- HERO ---------- */
.hero{padding-top:112px}
.hero-grid{display:grid; grid-template-columns:minmax(0,620px) 1fr; min-height:640px}
.hero-text{display:flex; align-items:center}
.hero-text .inner{padding:64px clamp(32px,5vw,64px); max-width:560px; width:100%}
.hero-eyebrow{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-dark)}
.hero-eyebrow .dot{width:8px; height:8px; background:var(--teal-dark); border-radius:50%}
.hero h1{font-size:clamp(34px,4.4vw,58px); margin-top:22px; text-transform:uppercase; overflow-wrap:break-word}
.hero h1 span{color:var(--teal-dark)}
.hero-sub{font-size:17px; color:var(--ink-soft); margin-top:26px; max-width:460px; font-weight:400}
.hero-actions{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap}
.hero-media{position:relative; background:var(--paper-alt)}
.hero-media img{width:100%; height:100%; object-fit:cover; filter:grayscale(.1) contrast(1.05)}

/* Marquee ticker */
.marquee{background:var(--ink); color:var(--paper); overflow:hidden; padding:16px 0; white-space:nowrap}
.marquee-track{display:inline-flex; gap:40px; animation:scroll-left 32s linear infinite}
.marquee-track span{font-size:14px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; display:inline-flex; align-items:center; gap:40px}
.marquee-track span::after{content:'—'; color:var(--teal); margin-left:40px}
@keyframes scroll-left{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- GENERIC SECTIONS ---------- */
.sec{padding:110px 0}
.sec-alt{background:var(--paper-alt)}

/* Full-bleed alternating split */
.split{display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
.split.rev .split-media{order:2}
.split-media{position:relative; min-height:460px; background:var(--paper-alt)}
.split-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.split-text{display:flex; align-items:center}
.split-text .inner{padding:64px; max-width:560px; margin-left:auto}
.split.rev .split-text .inner{margin-left:0; margin-right:auto}
.split-tag{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-dark); border-bottom:2px solid var(--teal-dark); padding-bottom:6px}
.split-text h2{margin-top:20px; font-size:clamp(26px,3.2vw,38px); text-transform:uppercase}
.split-text p.lede{margin-top:18px; color:var(--ink-soft); font-size:16px}
.feat-list{margin-top:26px; display:grid; gap:0; border-top:1px solid var(--line)}
.feat-list li{list-style:none; padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); display:flex; gap:12px}
.feat-list li::before{content:'—'; color:var(--teal-dark); font-weight:700; flex-shrink:0}

/* About / project intro */
.intro-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:start}
.intro-grid .lede{font-size:20px; font-weight:400; color:var(--ink); margin-top:0}
.intro-grid p + p{margin-top:16px; color:var(--ink-soft); font-size:15.5px}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.tag{border:1px solid var(--line); padding:9px 16px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft)}
.tag.on{border-color:var(--teal-dark); color:var(--teal-dark)}
.loc-block{margin-top:34px; padding-top:24px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft)}

/* Pillars — flat editorial list, not cards */
.pillar-list{margin-top:70px; border-top:1px solid var(--ink)}
.pillar-row{
  display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:24px;
  padding:28px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
  transition:padding-left .2s ease, background .2s ease;
}
.pillar-row:hover{padding-left:14px; background:var(--paper-alt)}
.pillar-row .num{font-size:14px; font-weight:700; color:var(--ink-faint)}
.pillar-row h3{font-size:clamp(20px,2.6vw,30px); text-transform:uppercase}
.pillar-row p{font-size:14px; color:var(--ink-soft); margin-top:4px; max-width:520px}
.pillar-row .go{font-size:22px; color:var(--teal-dark); transition:transform .2s ease}
.pillar-row:hover .go{transform:translateX(6px)}

/* Gallery — flat filmstrip */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:70px; background:var(--line)}
.gallery-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.gallery-grid.cols-3 .ph{aspect-ratio:4/3}
.gallery-item{background:var(--paper)}
.gallery-item .ph{aspect-ratio:3/4; overflow:hidden}
.gallery-item .ph img{width:100%; height:100%; object-fit:cover}
.gallery-item .cap{padding:14px 0 0; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}

/* Manifesto / values band — flat full-bleed ink */
.manifesto{background:var(--ink); color:var(--paper); padding:100px 0}
.manifesto-quote{font-size:clamp(26px,4vw,48px); font-weight:800; text-transform:uppercase; max-width:920px; letter-spacing:-.01em}
.manifesto-quote span{color:var(--teal)}
.manifesto-points{margin-top:60px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.16)}
.manifesto-point{background:var(--ink); padding:30px 34px 30px 0}
.manifesto-point .num{font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--teal)}
.manifesto-point p{margin-top:14px; font-size:15.5px; color:#D9D5C4; font-weight:400; max-width:420px}

/* Menu — typeset like a real menu */
.menu-block{margin-top:70px}
.menu-block + .menu-block{margin-top:56px}
.menu-block-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap}
.menu-block-head h3{font-size:20px; text-transform:uppercase}
.menu-block-head .price{font-size:26px; font-weight:800; color:var(--teal-dark)}
.menu-block-head .price span{font-size:13px; font-weight:600; color:var(--ink-faint); text-transform:none}
.menu-list{margin-top:20px; border-top:1px solid var(--line)}
.menu-row{display:flex; align-items:baseline; gap:12px; padding:16px 0; border-bottom:1px solid var(--line)}
.menu-row .name{font-size:15px; font-weight:600; white-space:nowrap}
.menu-row .leader{flex:1; border-bottom:1px dotted var(--ink-faint); transform:translateY(-5px)}
.menu-row .note{font-size:13px; color:var(--ink-faint); white-space:nowrap}

/* Links / resources — flat list */
.links-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:70px}
.link-cat h4{font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-dark); padding-bottom:16px; border-bottom:1px solid var(--ink)}
.link-cat ul{list-style:none; margin:0; padding:0}
.link-cat li a{
  font-size:16px; font-weight:600; text-decoration:none; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.link-cat li a .arrow{font-size:14px; color:var(--ink-faint); transition:transform .15s ease, color .15s ease}
.link-cat li a:hover{color:var(--teal-dark)}
.link-cat li a:hover .arrow{transform:translate(3px,-3px); color:var(--teal-dark)}

/* Contact */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr}
.contact-info{background:var(--ink); color:var(--paper); padding:72px 64px}
.contact-info h2{color:#fff; font-size:clamp(26px,3vw,34px); text-transform:uppercase}
.contact-info p.lede{color:#C9C4B2; margin-top:14px; font-size:15px}
.contact-rows{margin-top:40px; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.16)}
.contact-row{padding:22px 0; border-bottom:1px solid rgba(255,255,255,.16)}
.contact-row h5{font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--teal); margin-bottom:6px}
.contact-row p, .contact-row a{font-size:16px; color:#fff; text-decoration:none; font-weight:500}
.contact-row a.big{font-size:26px; font-weight:800}
.contact-map{position:relative; min-height:440px; background:var(--paper-alt)}
.contact-map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.4) contrast(1.05)}

/* Footer */
footer{background:var(--ink); color:#B9B4A2; padding:64px 0 30px; position:relative; overflow:hidden}
.footer-ghost{position:absolute; left:0; right:0; bottom:-40px; text-align:center; font-size:min(22vw,280px); font-weight:900; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.06); text-stroke:1px rgba(255,255,255,.06); letter-spacing:-.02em; pointer-events:none; user-select:none}
.footer-grid{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px}
.footer-brand .cat{color:#fff; font-size:26px; font-weight:900}
.footer-brand .sub{color:var(--teal); font-size:13px; font-weight:300; margin-top:2px}
.footer-links{display:flex; gap:26px; flex-wrap:wrap}
.footer-links a{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:#B9B4A2}
.footer-links a:hover{color:#fff}
.footer-bottom{position:relative; z-index:1; margin-top:60px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); font-size:12px; color:#83806F; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

@media (max-width:980px){
  nav{display:none}
  .burger{display:flex}
  .hero-grid{grid-template-columns:1fr}
  .hero-media{min-height:340px; order:-1}
  .split{grid-template-columns:1fr}
  .split-media{min-height:320px; order:-1 !important}
  .split-text .inner{padding:48px 0; max-width:none; margin:0 !important}
  .intro-grid{grid-template-columns:1fr}
  .pillar-row{grid-template-columns:44px 1fr auto}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .manifesto-points{grid-template-columns:1fr}
  .links-grid{grid-template-columns:1fr; gap:40px}
  .contact-grid{grid-template-columns:1fr}
  .contact-info{padding:48px 28px}
}
@media (max-width:640px){
  .wrap{padding:0 22px}
  .sec{padding:76px 0}
  .hero-text .inner{padding:40px 22px}
  .split-text .inner{padding:40px 0}
  .gallery-grid{grid-template-columns:1fr}
  .menu-row .name{white-space:normal}
}