/* ==========================================================================
   NP Real Estate — stylesheet
   Warm stone ground, navy ink, brass accent. Motion-led layout.
   All tokens live in :root.
   ========================================================================== */

:root{
  --stone:        #F2EFEA;
  --stone-2:      #E7E3DB;
  --stone-line:   #D5D0C6;
  --ink:          #091A24;
  --ink-2:        #0D2531;
  --ink-line:     #1B3745;
  --brass:        #A87B37;
  --brass-lite:   #E0C79A;
  --grey:         #6E7A7F;
  --grey-light:   #93A0A6;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Bodoni Moda", Didot, Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --t--1: clamp(.7rem, .68rem + .1vw, .78rem);
  --t-0:  clamp(.95rem, .9rem + .2vw, 1.05rem);
  --t-1:  clamp(1.1rem, 1rem + .5vw, 1.45rem);
  --t-2:  clamp(1.5rem, 1.2rem + 1.3vw, 2.4rem);
  --t-3:  clamp(2rem, 1.4rem + 2.8vw, 4.2rem);
  --t-4:  clamp(2.6rem, 1.4rem + 5.6vw, 7rem);
  --t-5:  clamp(3rem, 1rem + 9vw, 11rem);

  --gut: clamp(1.25rem, 3.5vw, 3.5rem);
  --max: 1680px;
  --sec: clamp(5.5rem, 12vw, 12rem);
  --e:   cubic-bezier(.19,1,.22,1);
  --e2:  cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-0);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ==========================================================================
   Page background — fixed skyline image behind all content, tinted by a
   translucent stone wash so it reads as a subtle parallax backdrop.
   The image renders at full strength; only the wash layer (::after) is
   translucent. This avoids the near-invisible result you get from putting
   opacity directly on an element that also has a light background-color.
   ========================================================================== */
.page-bg{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:var(--page-bg-img, none);
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  pointer-events:none;
}
.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--stone);
  opacity:.7; /* lower = more skyline visible, higher = more washed out */
}

main{ position:relative; z-index:1; }
.footer{ position:relative; z-index:1; }

/* Let content sections show the fixed image through them */
main .sec:not(.ink){ background:rgba(242,239,234,.82); }
.strip,.tick{ background:rgba(242,239,234,.82); }
main .sec.ink{ background:var(--ink); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
::selection{ background:var(--ink); color:var(--stone); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:4px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:var(--sec); position:relative; }
.sec--tight{ padding-block:calc(var(--sec)*.55); }
.ink{ background:var(--ink); color:var(--stone); }
.ink .muted{ color:var(--grey-light); }
.muted{ color:var(--grey); }

/* Type ------------------------------------------------------------------ */
.h-xl,.h-lg,.h-md{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.95;
}
.h-xl{ font-size:var(--t-4); }
.h-lg{ font-size:var(--t-3); line-height:1; }
.h-md{ font-size:var(--t-2); line-height:1.08; letter-spacing:-.025em; }
.h-xl em,.h-lg em,.h-md em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.statement{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--t-2);
  line-height:1.28;
  letter-spacing:-.02em;
  max-width:24ch;
}
.lede{ font-size:var(--t-1); line-height:1.45; max-width:44ch; }
.label{
  font-family:var(--mono);
  font-size:var(--t--1);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass);
}
.ink .label{ color:var(--brass-lite); }
.label--grey{ color:var(--grey); }

/* Word reveal ------------------------------------------------------------ */
.wrd{ display:inline-block; overflow:hidden; vertical-align:top; }
.wrd > i{
  display:inline-block;
  font-style:inherit;
  transform:translateY(110%);
  transition:transform 1s var(--e);
  transition-delay:var(--wd,0ms);
}
[data-reveal].in .wrd > i{ transform:none; }

[data-fade]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1.1s var(--e), transform 1.1s var(--e);
  transition-delay:var(--d,0ms);
}
[data-fade].in{ opacity:1; transform:none; }

/* Image reveal: mask opens, image un-scales ------------------------------ */
.rv{ overflow:hidden; position:relative; display:block; }
.rv > img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.22);
  transition:transform 1.6s var(--e);
  transition-delay:var(--d,0ms);
}
.rv::after{
  content:"";
  position:absolute; inset:0;
  background:var(--stone);
  transform-origin:bottom;
  transition:transform 1.25s var(--e);
  transition-delay:var(--d,0ms);
}
.ink .rv::after{ background:var(--ink); }
.rv.in > img{ transform:scale(1); }
.rv.in::after{ transform:scaleY(0); }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:grid;
  place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--e) .15s;
}
.loader__mark{
  width:min(38vw,400px);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s var(--e), transform .8s var(--e);
}
.loader.ready .loader__mark{ opacity:1; transform:none; }
.loader__bar{
  position:absolute;
  left:var(--gut); right:var(--gut); bottom:2.4rem;
  height:1px;
  background:rgba(255,255,255,.16);
}
.loader__bar i{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  background:var(--brass-lite);
  transition:width .3s linear;
}
.loader__n{
  position:absolute;
  right:var(--gut); bottom:3.2rem;
  font-family:var(--mono);
  font-size:var(--t--1);
  letter-spacing:.14em;
  color:var(--grey-light);
}
.loader.done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
body.loading{ overflow:hidden; }

/* Page-transition curtain ------------------------------------------------ */
.curtain{
  position:fixed; inset:0; z-index:190;
  background:var(--ink);
  clip-path:inset(100% 0 0 0);
  pointer-events:none;
  transition:clip-path .8s var(--e2);
}
.curtain.on{ clip-path:inset(0 0 0 0); }

/* ==========================================================================
   Chrome: top bar + floating menu pill + overlay
   ========================================================================== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:clamp(1.1rem,2.2vw,1.9rem) var(--gut);
  mix-blend-mode:difference;
  pointer-events:none;
}
.topbar > *{ pointer-events:auto; }
.topbar img{ height:80px; width:auto; filter:brightness(0) invert(1); }
.topbar__meta{
  font-family:var(--mono);
  font-size:var(--t--1);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
  display:none;
}
@media (min-width:820px){ .topbar__meta{ display:block; } }

.pill{
  position:fixed;
  right:var(--gut); bottom:clamp(1.1rem,2.4vw,2rem);
  z-index:120;
  display:inline-flex; align-items:center; gap:.9rem;
  padding:.85rem 1.25rem;
  background:var(--ink);
  color:var(--stone);
  border:1px solid var(--brass-lite);   /* <- added */
  border-radius:100px;
  font-family:var(--mono);
  font-size:var(--t--1);
  letter-spacing:.18em;
  text-transform:uppercase;
  box-shadow:0 12px 34px rgba(9,26,36,.22);
  transition:background .5s var(--e), color .5s var(--e), border-color .5s var(--e), transform .6s var(--e);
}
.pill:hover{ transform:translateY(-3px); }
.pill i{ display:grid; gap:4px; width:16px; }
.pill i::before,.pill i::after{
  content:""; height:1px; background:currentColor; width:100%;
  transition:transform .5s var(--e);
}
.menu-open .pill i::before{ transform:translateY(2.5px) rotate(45deg); }
.menu-open .pill i::after{ transform:translateY(-2.5px) rotate(-45deg); }
.menu-open .pill{ background:var(--brass-lite); color:var(--ink); }

.overlay{
  position:fixed; inset:0; z-index:110;
  background:var(--ink);
  color:var(--stone);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(4rem,10vh,7rem) var(--gut) clamp(6rem,12vh,8rem);
  clip-path:circle(0% at calc(100% - 3.5rem) calc(100% - 3.5rem));
  transition:clip-path 1s var(--e);
  pointer-events:none;
  overflow-y:auto;
}
.menu-open .overlay{ clip-path:circle(150% at calc(100% - 3.5rem) calc(100% - 3.5rem)); pointer-events:auto; }
.overlay nav{ display:grid; }
.overlay nav a{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.035em;
  font-size:clamp(2.1rem,7.5vw,5rem);
  line-height:1.16;
  border-bottom:1px solid var(--ink-line);
  padding-block:.2em;
  display:flex; align-items:baseline; gap:1.2rem;
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--e), transform .7s var(--e), color .4s var(--e);
}
.overlay nav a span{
  font-family:var(--mono);
  font-size:var(--t--1);
  letter-spacing:.16em;
  color:var(--grey-light);
}
.menu-open .overlay nav a{ opacity:1; transform:none; }
.overlay nav a:hover{ color:var(--brass-lite); }
.overlay__foot{
  margin-top:clamp(2rem,5vh,3.5rem);
  display:flex; flex-wrap:wrap; gap:1.6rem 3rem; align-items:flex-end;
  justify-content:space-between;
  opacity:0; transition:opacity .8s var(--e) .35s;
}
.menu-open .overlay__foot{ opacity:1; }

/* Text-roll links -------------------------------------------------------- */
.roll{ display:inline-block; overflow:hidden; vertical-align:bottom; position:relative; }
.roll span{ display:block; transition:transform .55s var(--e); }
.roll span:last-child{ position:absolute; inset:0; transform:translateY(100%); }
.roll:hover span:first-child{ transform:translateY(-100%); }
.roll:hover span:last-child{ transform:translateY(0); }

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--mono);
  font-size:var(--t--1);
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:1rem 1.7rem;
  border-radius:100px;
  border:1px solid currentColor;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .5s var(--e), border-color .5s var(--e);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .6s var(--e);
}
.btn:hover{ color:var(--stone); border-color:var(--ink); }
.btn:hover::before{ transform:none; }
.ink .btn::before{ background:var(--brass-lite); }
.ink .btn:hover{ color:var(--ink); border-color:var(--brass-lite); }
.btn--fill{ background:var(--ink); color:var(--stone); border-color:var(--ink); }
.btn--fill::before{ background:var(--brass-lite); }
.btn--fill:hover{ color:var(--ink); border-color:var(--brass-lite); }
.btn--block{ width:100%; justify-content:center; }

.arrow-link{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:var(--t--1);
  letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:.5rem;
  border-bottom:1px solid currentColor;
  transition:gap .5s var(--e);
}
.arrow-link:hover{ gap:1.4rem; }
.arrow-link svg{ width:14px; height:14px; }

/* Custom cursor ---------------------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:150;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%;
  background:var(--ink);
  pointer-events:none;
  mix-blend-mode:difference;
  opacity:0;
  transition:width .45s var(--e), height .45s var(--e), margin .45s var(--e), opacity .4s var(--e), background .4s var(--e);
  display:grid; place-items:center;
}
.cursor.on{ opacity:1; }
.cursor span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
  opacity:0; transition:opacity .3s var(--e);
  white-space:nowrap;
}
.cursor.grow{ width:88px; height:88px; margin:-44px 0 0 -44px; mix-blend-mode:normal; background:var(--brass-lite); }
.cursor.grow span{ opacity:1; }
@media (hover:none),(max-width:900px){ .cursor{ display:none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hero{ position:relative; }
.hero__media{ position:relative; height:100svh; overflow:hidden; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.14);
  animation:heroIn 2.6s var(--e) .35s forwards;
}
@keyframes heroIn{ to{ transform:scale(1); } }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(9,26,36,.5),rgba(9,26,36,.05) 45%,rgba(9,26,36,.72));
}
.hero__type{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding-bottom:clamp(2.5rem,7vh,5rem);
  color:var(--stone);
}
.hero__type h1 {
  font-family: 'Montserrat';
  font-weight: 500;
  font-size: var(--t-5);
  line-height: .9;
  letter-spacing: -.045em;
} 
.hero__type h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.hero__row{
  display:flex; flex-wrap:wrap; gap:1.4rem 3rem;
  justify-content:space-between; align-items:flex-end;
  margin-top:clamp(1.6rem,4vh,3rem);
  padding-top:1.4rem;
  border-top:1px solid rgba(242,239,234,.22);
}
.hero__row p{ margin:0; max-width:34ch; color:rgba(242,239,234,.78); }
.hero__cue{
  font-family:var(--mono); font-size:var(--t--1);
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,239,234,.6);
  display:inline-flex; align-items:center; gap:.7rem;
}
.hero__cue i{
  width:1px; height:30px; display:block;
  background:linear-gradient(180deg,var(--brass-lite),transparent);
  animation:cue 2.4s var(--e) infinite; transform-origin:top;
}
@keyframes cue{ 0%,100%{ transform:scaleY(.3); opacity:.45 } 50%{ transform:scaleY(1); opacity:1 } }

/* ==========================================================================
   Scatter — images drift past a centred statement as you scroll
   ========================================================================== */
.scatter{
  position:relative;
  min-height:112vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding-block:var(--sec);
}
.scatter__type{
  position:relative; z-index:2;
  text-align:center;
  max-width:min(92vw,1080px);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.scatter__type h2{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--t-3);
  line-height:1.12;
  letter-spacing:-.03em;
}
.scatter__img{
  position:absolute;
  z-index:1;
  width:clamp(120px,15vw,260px);
  aspect-ratio:4/5;
  overflow:hidden;
  will-change:transform;
}
.scatter__img img{ width:100%; height:100%; object-fit:cover; }
.scatter__img:nth-of-type(1){ top:3%;  left:3%; }
.scatter__img:nth-of-type(2){ top:10%; right:5%; width:clamp(140px,17vw,300px); }
.scatter__img:nth-of-type(3){ bottom:7%; left:9%; width:clamp(150px,18vw,320px); }
.scatter__img:nth-of-type(4){ bottom:3%; right:8%; }
.scatter__img:nth-of-type(5){ top:44%; left:-3%; width:clamp(110px,12vw,200px); }
.scatter__img:nth-of-type(6){ top:40%; right:-2%; width:clamp(110px,12vw,200px); }
@media (max-width:760px){
  .scatter__img:nth-of-type(5),.scatter__img:nth-of-type(6){ display:none; }
  .scatter__img{ opacity:.42; }
}

/* ==========================================================================
   Horizontal strip
   ========================================================================== */
.strip{ overflow:hidden; padding-block:clamp(1.5rem,4vw,3rem); cursor:grab; }
.strip.dragging{ cursor:grabbing; }
.strip__track{ display:flex; gap:clamp(.7rem,1.4vw,1.3rem); will-change:transform; width:max-content; }
.strip__track figure{ margin:0; width:clamp(200px,24vw,380px); flex:none; }
.strip__track img{ width:100%; aspect-ratio:4/3; object-fit:cover; pointer-events:none; }
.strip__track figcaption{
  font-family:var(--mono); font-size:var(--t--1);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); padding-top:.7rem;
}
.ink .strip__track figcaption{ color:var(--grey-light); }

/* ==========================================================================
   Project rows
   ========================================================================== */
.rows{ display:grid; }
.row{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  padding-block:clamp(1.8rem,3.6vw,3rem);
  border-top:1px solid var(--stone-line);
  align-items:center;
  position:relative;
}
.rows .row:last-child{ border-bottom:1px solid var(--stone-line); }
@media (min-width:900px){
  .row{ grid-template-columns:minmax(0,.5fr) minmax(0,1fr) auto; gap:clamp(1.5rem,4vw,4rem); }
}
.row__i{
  font-family:var(--mono); font-size:var(--t--1);
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
  display:flex; gap:1.2rem;
}
.row__name{
  font-family:var(--display); font-weight:500;
  font-size:var(--t-3); line-height:1; letter-spacing:-.035em;
  transition:transform .7s var(--e), color .5s var(--e);
  position:relative;
  z-index:4;
}
.row:hover .row__name{
  transform:translateX(clamp(6px,1vw,18px));
  color:var(--stone);
  mix-blend-mode:difference;
}
.row__media{
  position:absolute;
  top:50%; left:50%;
  width:clamp(220px,22vw,340px);
  aspect-ratio:4/5;
  transform:translate(-50%,-50%) scale(.86);
  opacity:0;
  pointer-events:none;
  z-index:3;
  overflow:hidden;
  transition:opacity .55s var(--e), transform .8s var(--e);
}
.row__media img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){ .row:hover .row__media{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (max-width:1023px){ .row__media{ display:none; } }

/* Card grid --------------------------------------------------------------- */
.cards{
  display:grid; gap:clamp(1.4rem,3vw,2.6rem) clamp(1rem,2vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.card{ display:block; }
.card .rv{ aspect-ratio:4/5; }
.card__meta{ display:flex; justify-content:space-between; gap:1rem; padding-top:1rem; align-items:baseline; }
.card h3{
  font-family:var(--display); font-weight:500;
  font-size:var(--t-2); letter-spacing:-.03em; line-height:1.05;
  transition:color .4s var(--e);
}
.card:hover h3{ color:var(--brass); }
.card .label{ flex:none; }
.card__line{ height:1px; background:var(--stone-line); margin-top:1rem; position:relative; overflow:hidden; }
.card__line::after{
  content:""; position:absolute; inset:0;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--e);
}
.card:hover .card__line::after{ transform:none; }

/* ==========================================================================
   Sticky value stack
   ========================================================================== */
.stack{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
.stack__card{
  position:sticky;
  top:clamp(5rem,14vh,9rem);
  background:var(--stone-2);
  border:1px solid var(--stone-line);
  padding:clamp(1.6rem,4vw,3.2rem);
  display:grid;
  gap:1rem clamp(2rem,5vw,4rem);
}
.ink .stack__card{ background:var(--ink-2); border-color:var(--ink-line); }
@media (min-width:860px){ .stack__card{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); } }
.stack__card h3{
  font-family:var(--display); font-weight:500;
  font-size:var(--t-2); letter-spacing:-.03em; line-height:1.05;
}
.stack__card p{ margin:0; max-width:52ch; }

/* ==========================================================================
   Service list with cursor-following image
   ========================================================================== */
.svc{ position:relative; }
.svc__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--stone-line); }
.ink .svc__list{ border-color:var(--ink-line); }
.svc__list li{ border-bottom:1px solid var(--stone-line); }
.ink .svc__list li{ border-color:var(--ink-line); }
.svc__row{
  display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap;
  padding-block:clamp(1.1rem,2.4vw,1.9rem);
  font-family:var(--display); font-weight:500;
  font-size:var(--t-2); letter-spacing:-.03em;
  transition:padding-left .6s var(--e), color .5s var(--e);
}
.svc__list li:hover .svc__row{ padding-left:clamp(.6rem,1.6vw,1.6rem); color:var(--brass); }
.ink .svc__list li:hover .svc__row{ color:var(--brass-lite); }
.svc__row small{
  font-family:var(--mono); font-size:var(--t--1);
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
  font-weight:400; max-width:46ch; line-height:1.7;
}
.ink .svc__row small{ color:var(--grey-light); }
.svc__follow{
  position:absolute; top:0; left:0;
  width:clamp(180px,18vw,300px);
  aspect-ratio:4/3;
  overflow:hidden;
  pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity .5s var(--e), transform .6s var(--e);
  z-index:4;
}
.svc__follow img{ width:100%; height:100%; object-fit:cover; }
.svc__follow.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (max-width:1023px){ .svc__follow{ display:none; } }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.grid2{ display:grid; gap:clamp(2rem,5vw,5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){
  .grid2{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .grid2--even{ grid-template-columns:1fr 1fr; align-items:center; }
}
.head{ display:flex; flex-wrap:wrap; gap:1rem 3rem; justify-content:space-between; align-items:flex-end; margin-bottom:clamp(2rem,5vw,4rem); }
.stack-sm > * + *{ margin-top:1rem; }
.stack-md > * + *{ margin-top:1.9rem; }
.figure{ margin:0; }
.figure figcaption{
  font-family:var(--mono); font-size:var(--t--1);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); padding-top:.8rem;
}
.ink .figure figcaption{ color:var(--grey-light); }
.ratio-4-5{ aspect-ratio:4/5; }
.ratio-16-10{ aspect-ratio:16/10; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Spec table -------------------------------------------------------------- */
.spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); border-top:1px solid var(--stone-line); margin:0; }
.ink .spec{ border-color:var(--ink-line); }
.spec > div{ padding:1rem 1.2rem 1rem 0; border-bottom:1px solid var(--stone-line); }
.ink .spec > div{ border-color:var(--ink-line); }
.spec dt{ font-family:var(--mono); font-size:var(--t--1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:.35rem; }
.ink .spec dt{ color:var(--grey-light); }
.spec dd{ margin:0; }

.bullets{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.bullets li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.bullets li::before{ content:""; width:8px; height:1px; background:var(--brass); margin-top:.82em; }
.ink .bullets li::before{ background:var(--brass-lite); }

/* Ticker ------------------------------------------------------------------ */
.tick{ overflow:hidden; display:flex; border-block:1px solid var(--stone-line); padding-block:1.1rem; }
.ink .tick{ border-color:var(--ink-line); }
.tick__t{
  display:flex; gap:3rem; padding-right:3rem; flex:none;
  white-space:nowrap;
  animation:tick 34s linear infinite;
  font-family:var(--display); font-weight:400;
  font-size:var(--t-2); letter-spacing:-.02em;
  color:var(--grey);
}
.tick__t span{ display:inline-flex; align-items:center; gap:3rem; }
.tick__t span::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brass); }
@keyframes tick{ to{ transform:translateX(-100%); } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form{ display:grid; gap:1.2rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-family:var(--mono); font-size:var(--t--1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.ink .field label{ color:var(--grey-light); }
.field input,.field select,.field textarea{
  font:inherit; font-size:var(--t-0);
  color:inherit; background:transparent;
  border:0; border-bottom:1px solid var(--stone-line);
  padding:.8rem 0; border-radius:0; width:100%;
  transition:border-color .5s var(--e);
}
.ink .field input,.ink .field select,.ink .field textarea{ border-bottom-color:var(--ink-line); }
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--brass); }
.ink .field input:focus,.ink .field select:focus,.ink .field textarea:focus{ border-bottom-color:var(--brass-lite); }
.field select option{ background:var(--stone); color:var(--ink); }
.ink .field select option{ background:var(--ink); color:var(--stone); }
.field-row{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:620px){ .field-row{ grid-template-columns:1fr 1fr; } }
.form__note{ font-family:var(--mono); font-size:var(--t--1); line-height:1.7; color:var(--grey); }
.ink .form__note{ color:var(--grey-light); }
.form__status{ font-family:var(--mono); font-size:var(--t--1); letter-spacing:.1em; color:var(--brass); min-height:1.2em; }
.ink .form__status{ color:var(--brass-lite); }
.enquiry{ display:grid; gap:1.2rem; }
.enquiry h3{ font-family:var(--display); font-weight:500; font-size:var(--t-2); letter-spacing:-.03em; line-height:1.05; }
.enquiry > p{ margin:0; }

/* Offices ----------------------------------------------------------------- */
.offices{ display:grid; gap:clamp(1.4rem,3vw,2.4rem); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.office{ border-top:1px solid var(--stone-line); padding-top:1.3rem; }
.ink .office{ border-color:var(--ink-line); }
.office h3{ font-family:var(--display); font-weight:500; font-size:var(--t-1); letter-spacing:-.02em; margin-bottom:.7rem; }
.office address{ font-style:normal; color:var(--grey); line-height:1.85; }
.ink .office address{ color:var(--grey-light); }
.office a:hover{ color:var(--brass); }
.ink .office a:hover{ color:var(--brass-lite); }

/* Timeline ---------------------------------------------------------------- */
.tl{ border-top:1px solid var(--stone-line); }
.tl__r{ display:grid; grid-template-columns:1fr; gap:.3rem 3rem; padding-block:1.5rem; border-bottom:1px solid var(--stone-line); }
@media (min-width:760px){ .tl__r{ grid-template-columns:120px 1fr; } }
.tl__y{ font-family:var(--mono); font-size:var(--t--1); letter-spacing:.14em; color:var(--brass); padding-top:.4rem; }
.tl__r h3{ font-family:var(--display); font-weight:500; font-size:var(--t-1); letter-spacing:-.02em; margin-bottom:.2rem; }
.tl__r p{ margin:0; color:var(--grey); max-width:60ch; }

/* Page head --------------------------------------------------------------- */
.phead{ padding-top:clamp(8rem,20vh,14rem); padding-bottom:clamp(2rem,5vw,4rem); }
.phead h1{ font-family:var(--display); font-weight:500; font-size:var(--t-4); line-height:.94; letter-spacing:-.04em; }
.phead h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; }
.crumbs{ font-family:var(--mono); font-size:var(--t--1); letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:1.4rem; }

/* Project hero ------------------------------------------------------------ */
.phero{ position:relative; height:min(84svh,860px); overflow:hidden; }
.phero img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); animation:heroIn 2.4s var(--e) .3s forwards; }
.phero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,26,36,.55),rgba(9,26,36,.05) 45%,rgba(9,26,36,.78)); }
.phero__t{ position:absolute; inset:auto 0 0 0; z-index:2; padding-bottom:clamp(2rem,6vh,4rem); color:var(--stone); }
.phero__t h1{ font-family:var(--display); font-weight:500; font-size:var(--t-4); line-height:.94; letter-spacing:-.04em; }

.gallery{ display:grid; gap:clamp(.8rem,1.8vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.gallery .figure:first-child{ grid-column:1/-1; }
.gallery .rv{ aspect-ratio:16/11; }
.gallery .figure:first-child .rv{ aspect-ratio:21/9; }

/* Footer ------------------------------------------------------------------ */
.footer{ background:var(--ink); color:var(--stone); padding-top:clamp(3.5rem,8vw,6rem); padding-bottom:1.6rem; overflow:hidden; }
.footer__grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); padding-bottom:clamp(2.5rem,6vw,4.5rem); }
.footer h4{ font-family:var(--mono); font-size:var(--t--1); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lite); margin:0 0 1.2rem; font-weight:400; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.footer a{ color:var(--grey-light); transition:color .4s var(--e); }
.footer a:hover{ color:var(--stone); }
.footer img{ padding-bottom:clamp(2.5rem,6vw,2.5rem); }
.socials{ display:flex; flex-wrap:wrap; gap:.55rem; }
.socials a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--ink-line); border-radius:50%;
  color:var(--grey-light);
  transition:color .45s var(--e), background .45s var(--e), border-color .45s var(--e), transform .5s var(--e);
}
.socials a:hover{ color:var(--ink); background:var(--brass-lite); border-color:var(--brass-lite); transform:translateY(-3px); }
.socials svg{ width:16px; height:16px; fill:currentColor; }
.footer__mark{ padding-block:clamp(1.5rem,4vw,3rem); border-top:1px solid var(--ink-line); }
.footer__mark img{ width:100%; opacity:.92; }
.footer__base{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-family:var(--mono); font-size:var(--t--1); letter-spacing:.13em;
  text-transform:uppercase; color:var(--grey-light);
  border-top:1px solid var(--ink-line); padding-top:1.4rem;
}

/* WhatsApp ---------------------------------------------------------------- */
.wa{
  position:fixed; left:var(--gut); bottom:clamp(1.1rem,2.4vw,2rem); z-index:118;
  width:48px; height:48px; display:grid; place-items:center;
  border-radius:50%; background:var(--brass-lite); color:var(--ink);
  box-shadow:0 10px 26px rgba(9,26,36,.25);
  opacity:0; transform:translateY(70px);
  transition:opacity .6s var(--e), transform .6s var(--e), background .4s var(--e);
}
.wa.on{ opacity:1; transform:none; }
.wa:hover{ background:#fff; }
.wa svg{ width:22px; height:22px; fill:currentColor; }

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .wrd > i{ transform:none !important; }
  [data-fade]{ opacity:1 !important; transform:none !important; }
  .rv > img{ transform:none !important; }
  .rv::after{ transform:scaleY(0) !important; }
  .hero__media img,.phero img{ transform:none !important; }
}

/* --------------------------------------------------------------------------
   Refinements
   -------------------------------------------------------------------------- */
@media (min-width:900px){ .hero__row{ padding-right:clamp(0px,14vw,220px); } }
@media (max-width:640px){ .hero__cue{ display:none; } }

/* Scatter: keep the statement column clear of the drifting images */
.scatter__type{ max-width:min(74vw,860px); }
.scatter__type h2{ font-size:clamp(1.6rem,1.1rem + 2.1vw,3.1rem); line-height:1.16; }
.scatter__img:nth-of-type(1){ left:1%; }
.scatter__img:nth-of-type(2){ right:1%; }
.scatter__img:nth-of-type(3){ left:2%; }
.scatter__img:nth-of-type(4){ right:2%; }

/* Services: name left, description right */
@media (min-width:820px){
  .svc__row{
    display:grid;
    grid-template-columns:minmax(0,.36fr) minmax(0,1fr);
    align-items:baseline;
    gap:clamp(1.5rem,4vw,4rem);
  }
  .svc__row small{ justify-self:start; max-width:52ch; }
}

/* Cards: the meta rows are spans inside an <a>, keep them block-level */
.card__meta{ display:flex; }
.card h3{ margin:0; }

/* Card meta: title row, then area / price row, then the rule */
.card__meta{ align-items:flex-start; }
.card__meta .label{ white-space:nowrap; padding-top:.35em; }
.card__sub{
  display:flex; justify-content:space-between; gap:1.4rem;
  padding-top:.35rem; color:var(--grey); font-size:var(--t-0);
}
.card__sub > :last-child{ text-align:right; white-space:nowrap; flex:none; }

.card__line{ display:block; }