/* NOMADE — brand tokens from the identity deck */
@font-face{
  font-family:"Amstelvar";
  src:url("Amstelvar.woff") format("woff");
  font-weight:100 1000;
  font-display:swap;
}
:root{
  --ochre:#C2A053;
  --olive:#42492A;
  --graphite:#141414;
  --water:#44605A;
  --fire:#6F2C25;
  --milk:#F8F8F8;
  --ink:#141414;
  --ink-soft:#4a4a46;
  --milk-soft:rgba(248,248,248,.72);
  --serif:"Amstelvar","Times New Roman",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1280px;
  --gutter:clamp(20px,4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--graphite);color:var(--milk);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:400}
ul{margin:0;padding:0;list-style:none}
svg{display:block;fill:currentColor}
.i-sign{aspect-ratio:754/760.5}
.i-wm{aspect-ratio:768.12/92}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:820px}
.center{text-align:center}
.section{padding:clamp(72px,10vw,140px) 0}
.milk{background:var(--milk);color:var(--ink)}
.olive{background:var(--olive);color:var(--milk)}
.graphite{background:var(--graphite);color:var(--milk)}

.display{font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(40px,5.2vw,72px);line-height:1.02;letter-spacing:-.005em;margin-bottom:.55em}
.serif{font-family:var(--serif);font-variation-settings:"opsz" 32;font-size:1.35em;line-height:1.3}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);margin-bottom:28px}
.eyebrow.light{color:var(--milk-soft)}
.ochre{color:var(--ochre)}
.eyebrow.ochre{color:var(--ochre)}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.45;font-weight:300}
.copy p{max-width:38em}
.light-copy{color:var(--milk)}
.footnote{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--milk-soft);margin-top:40px}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px var(--gutter);color:var(--milk);background:transparent;transition:background .25s ease,padding .25s ease,box-shadow .25s ease}
.nav.scrolled{background:rgba(20,20,20,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-top:14px;padding-bottom:14px;box-shadow:0 1px 0 rgba(248,248,248,.08)}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-sign svg{height:26px}
.nav-wordmark svg{height:13px}
.nav-links{display:flex;gap:28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.nav-links a{opacity:.8;padding:6px 0}
.nav-links a:hover{opacity:1}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,8vh,120px);padding:120px var(--gutter) 72px;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 60%;z-index:-2}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.1) 35%,rgba(20,20,20,.15) 60%,rgba(20,20,20,.86) 100%)}
.hero-top{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-top:2vh;max-width:var(--wrap);width:100%;margin:0 auto}
.hero-sign svg{height:clamp(80px,min(14vw,20vh),180px);color:var(--milk)}
.hero-wordmark svg{height:clamp(24px,min(3.4vw,5vh),44px);color:var(--milk)}
.hero-bottom{max-width:var(--wrap);width:100%;margin:0 auto}
.hero-bottom .display{font-size:clamp(52px,min(8vw,13vh),124px);margin-bottom:.3em}
.hero-sub{max-width:34em;font-size:clamp(16px,1.3vw,19px);color:var(--milk-soft);margin:0}
.hero-horizon{position:absolute;left:var(--gutter);right:var(--gutter);bottom:48px;height:1px;background:rgba(248,248,248,.45)}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.grid-2.tight{margin-bottom:clamp(40px,6vw,80px)}
.grid-2.rev > .copy{order:2}
.fig{margin:0}
.fig img{width:100%;height:auto}
.fig figcaption{font-size:13px;color:var(--ink-soft);margin-top:12px;letter-spacing:.01em}
.graphite .fig figcaption{color:var(--milk-soft)}
.milk .fig{margin-top:clamp(24px,4vw,56px)}
.fig-wide{margin-top:clamp(48px,6vw,88px)}
.fig-wide img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 40%}
@media (max-width:760px){.fig-wide img{aspect-ratio:4/3}}

/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;padding:0;min-height:720px}
.split-img{margin:0;position:relative;min-height:60vh}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-text{padding:clamp(72px,9vw,128px) var(--gutter);align-self:center}
.split-text p{max-width:34em}
.order-first{order:-1}

/* MANIFESTO */
.manifesto{position:relative;overflow:hidden;background:var(--fire);padding-bottom:clamp(300px,34vw,440px)}
.manifesto::before{content:"";position:absolute;left:50%;bottom:calc(-1 * min(1500px,170vw) + clamp(200px,24vw,320px));width:min(1500px,170vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,var(--ochre) 0%,var(--ochre) 62%,rgba(194,160,83,0) 69%);pointer-events:none}
.manifesto .wrap{position:relative}
.manifesto .lead{margin:0 auto 56px;max-width:40em}
.pairs{display:flex;flex-direction:column;gap:14px;align-items:center;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.pairs li{display:flex;align-items:center;gap:18px}
.pairs i{width:48px;height:1px;background:var(--milk);opacity:.7;position:relative}
.pairs i::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-right:1px solid var(--milk);border-top:1px solid var(--milk);transform:rotate(45deg)}

/* DUO IMAGES */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.duo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.duo img:first-child{aspect-ratio:1/1;align-self:center}

/* COMFORT */
.comfort{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(24px,4vw,56px)}
.c-main{grid-column:1/13}
.c-bath{grid-column:1/4}
.c-shower{grid-column:4/7}
.c-coffee{grid-column:8/13;align-self:end;padding-bottom:28px}
.c-coffee p{max-width:26em}
.c-bath img,.c-shower img{aspect-ratio:2/3;object-fit:cover;width:100%}
.c-main img{aspect-ratio:16/9;object-fit:cover;width:100%}

/* BRITAIN — states */
.states{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.state{display:flex;flex-direction:column;color:var(--milk);border-radius:2px;overflow:hidden}
.state-art{aspect-ratio:3/4;position:relative;overflow:hidden}
.state-art::after{content:"";position:absolute;inset:0}
.state-body{padding:24px 22px 28px}
.state h3{font-family:var(--serif);font-variation-settings:"opsz" 32;font-size:26px;line-height:1.1;margin-bottom:12px;font-weight:300}
.state p{font-size:15px;line-height:1.5;margin:0;color:rgba(248,248,248,.82)}
/* water: horizon with a thin ochre band at the bottom */
.s-water{background:var(--water)}
.s-water .state-art{background:linear-gradient(180deg,var(--water) 0%,var(--water) 78%,rgba(194,160,83,.0) 78%),var(--ochre)}
.s-water .state-art::after{background:linear-gradient(180deg,rgba(68,96,90,0) 70%,var(--water) 78%,rgba(68,96,90,.6) 82%,rgba(68,96,90,0) 90%)}
/* grass: ochre sky over olive ground, blurred horizon */
.s-grass{background:var(--ochre)}
.s-grass .state-art{background:linear-gradient(180deg,var(--ochre) 0%,var(--ochre) 60%,var(--olive) 72%,var(--olive) 100%)}
.s-grass .state-body{background:var(--ochre);color:var(--graphite)}
.s-grass .state p{color:rgba(20,20,20,.78)}
/* fire: sun rising from ochre into red */
.s-fire{background:var(--fire)}
.s-fire .state-art{background:radial-gradient(ellipse 85% 70% at 50% 110%,var(--ochre) 0%,var(--ochre) 58%,rgba(194,160,83,0) 76%),var(--fire)}
/* forest: olive with a low ochre glow */
.s-forest{background:var(--olive)}
.s-forest .state-art{background:radial-gradient(ellipse 120% 55% at 50% 115%,rgba(194,160,83,.9) 0%,rgba(194,160,83,.45) 45%,rgba(194,160,83,0) 70%),var(--olive)}

/* PARTNERS */
.partners{margin:40px 0 40px;padding-top:32px;border-top:1px solid rgba(248,248,248,.18)}
.partners ul{margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.partners li{position:relative;padding-left:22px}
.partners li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--ochre)}

/* FORM */
.form-section{background:var(--olive);color:var(--milk);position:relative;overflow:hidden}
.form-section::before{content:"";position:absolute;right:-20%;bottom:-70%;width:min(1100px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(194,160,83,.5) 0%,rgba(194,160,83,.35) 50%,rgba(194,160,83,0) 68%);pointer-events:none}
.form-section .wrap{position:relative}
.form-section .lead{max-width:30em}
.form{display:flex;flex-direction:column;gap:22px;padding-top:8px}
.form label{display:flex;flex-direction:column;gap:8px}
.form label span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--milk-soft)}
.form input{height:52px;padding:0 2px;border:0;border-bottom:1px solid rgba(248,248,248,.45);background:transparent;color:var(--milk);font:inherit;font-size:17px;border-radius:0;outline:none}
.form input::placeholder{color:rgba(248,248,248,.4)}
.form input:focus{border-bottom-color:var(--ochre)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form button{align-self:flex-start;margin-top:12px;height:52px;padding:0 36px;border:1px solid var(--milk);background:transparent;color:var(--milk);font:inherit;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;cursor:pointer;border-radius:0}
.form button:hover{background:var(--milk);color:var(--olive)}
.form button:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
.form-note{font-size:13px;color:var(--milk-soft);margin:0;max-width:34em}

/* FOOTER */
.footer{padding:56px 0 40px;border-top:1px solid rgba(248,248,248,.12)}
.footer-in{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;font-size:13px;color:var(--milk-soft)}
.footer-in p{margin:0}
.footer-wordmark svg{height:14px;color:var(--milk)}
.footer-copy{margin-left:auto}

/* RESPONSIVE */
@media (max-width:980px){
  .states{grid-template-columns:repeat(2,1fr)}
  .comfort{gap:14px}
  .c-bath{grid-column:1/5}
  .c-shower{grid-column:5/9}
  .c-coffee{grid-column:9/13;padding-bottom:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{padding:14px var(--gutter)}
  .nav-links{display:none}
  .hero{padding-top:96px;padding-bottom:64px}
  .hero-horizon{bottom:40px}
  .grid-2{grid-template-columns:1fr}
  .grid-2.rev > .copy{order:0}
  .split{grid-template-columns:1fr;min-height:0}
  .split-img{min-height:0;aspect-ratio:4/5}
  .order-first{order:0}
  .duo{gap:10px}
  .c-bath{grid-column:1/7}
  .c-shower{grid-column:7/13}
  .c-coffee{grid-column:1/13;padding-top:8px}
  .states{grid-template-columns:1fr 1fr;gap:10px}
  .state-body{padding:16px 14px 20px}
  .state h3{font-size:21px}
  .state p{font-size:13.5px}
  .form .row{grid-template-columns:1fr}
  .footer-copy{margin-left:0}
}
@media (max-width:480px){
  .states{grid-template-columns:1fr}
  .state-art{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}