/* ==========================================================================
   MY DIVINE HOMES — design system
   Display : Cormorant Garamond (light, generous, editorial)
   Text/UI : Jost (geometric, architectural — reads as drafting annotation)
   ========================================================================== */

:root{
  /* ink & paper */
  --ink:#14110F;
  --ink-2:#0B0A09;
  --ink-3:#1E1A17;
  --paper:#F6F2EB;
  --paper-2:#EFE9DF;

  /* materials */
  --stone:#8A7F73;
  --sand:#C3B29B;
  --travertine:#E1D5C1;
  --walnut:#4C3323;
  --brass:#C08A4A;
  --brass-lt:#E2BB86;
  /* Deep brass — same hue, dark enough to actually register on paper.
     Use this wherever brass sits on a light ground; --brass is a light gold
     and only clears contrast on dark grounds or at large decorative sizes. */
  --brass-dk:#8A6031;

  /* semantic */
  --bg:var(--paper);
  --fg:var(--ink);
  --muted:#6E655C;
  --rule:rgba(20,17,15,.13);
  --rule-dk:rgba(246,242,235,.14);

  /* type */
  --f-dis:'Cormorant Garamond',"Times New Roman",serif;
  --f-ui:'Jost','Helvetica Neue',Arial,sans-serif;

  /* metrics */
  --gut:clamp(20px,5vw,72px);
  --maxw:1560px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.is-locked,body.is-locked{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-ui);font-weight:300;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:300;font-family:var(--f-dis);letter-spacing:-.015em;line-height:.98}
p{margin:0 0 1em}
::selection{background:var(--brass);color:#fff}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---- shared type ------------------------------------------------------- */
.eyebrow{
  display:block;font-family:var(--f-ui);font-weight:500;font-size:.66rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.sec-title{font-size:clamp(2.6rem,6.4vw,6.4rem);line-height:.94;margin:.34em 0 0}
.sec-title em,h1 em,h2 em,.contact__title em{font-style:italic;color:var(--walnut)}
.sec-lede{max-width:52ch;margin-top:1.6em;color:var(--muted);font-size:clamp(.98rem,1.15vw,1.12rem)}
.sec-head{margin-bottom:clamp(48px,7vw,110px)}
.sec-head--center{text-align:center}
.sec-head--center .sec-lede{margin-inline:auto}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  --c:var(--fg);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-ui);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1.05em 1.9em;border:1px solid var(--c);border-radius:100px;color:var(--c);
  position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--c);z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:translateY(0)}
.btn i{font-style:normal;transition:transform .45s var(--ease)}
.btn:hover i{transform:translateX(4px)}
.btn--sm{padding:.8em 1.4em;font-size:.64rem}
.btn--solid{--c:var(--fg);background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--solid::before{background:var(--walnut);transform:translateY(101%)}
.btn--solid:hover{color:#fff}

.link{
  display:inline-block;font-family:var(--f-ui);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:400;padding-bottom:.25em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease),opacity .3s;
}
.link:hover{background-size:0% 1px;opacity:.6}

/* ---- reveal ------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink-2);color:var(--paper);
  display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s;
}
.loader.done{opacity:0;visibility:hidden}
.loader__inner{display:grid;justify-items:center;gap:22px;text-align:center}
/* wide enough for the "Crafting the Art of Living" tagline to be read */
.loader__mark{width:min(72vw,320px)}
.loader__mark img{width:100%;height:auto}
.loader__bar{width:min(46vw,280px);height:1px;background:rgba(246,242,235,.18);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0%;background:var(--brass);transition:width .25s linear}
.loader__num{font-size:.66rem;letter-spacing:.3em;color:var(--stone)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--gut);
  transition:transform .6s var(--ease),background .5s,padding .5s var(--ease),box-shadow .5s;
}
.nav.stuck{background:rgba(246,242,235,.82);backdrop-filter:blur(14px);padding-block:14px;box-shadow:0 1px 0 var(--rule)}
.nav.hide{transform:translateY(-102%)}
.nav.on-dark{color:var(--paper)}
.nav.on-dark.stuck{background:rgba(11,10,9,.72);box-shadow:0 1px 0 var(--rule-dk)}

.nav__logo{display:flex;align-items:center;gap:11px;font-family:var(--f-dis);font-size:1.16rem;letter-spacing:.03em}
/* the round gold emblem needs more size than the old line drawing to stay legible */
.nav__logo img{width:44px;height:auto;flex:none}
.nav__logo em{font-style:italic}
.nav__links{display:flex;gap:clamp(18px,2.4vw,40px)}
.nav__links a{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;position:relative;padding-block:4px;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav__act{display:flex;align-items:center;gap:14px}
.nav__burger{
  display:none;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;
  background:none;cursor:pointer;position:relative;
}
.nav__burger i{position:absolute;left:11px;width:18px;height:1px;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
.nav__burger i:nth-child(1){top:17px}
.nav__burger i:nth-child(2){top:23px}
.nav.menu-open .nav__burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.menu-open .nav__burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

@media (max-width:1080px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__act .btn--sm{display:none}
}

/* ---- menu overlay ---- */
.menu{
  position:fixed;inset:0;z-index:110;background:var(--ink-2);color:var(--paper);
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease-io);
  display:grid;align-items:center;padding:clamp(90px,12vh,140px) var(--gut) 40px;overflow-y:auto;
}
.menu.open{clip-path:inset(0 0 0 0)}
.menu__grid{width:100%;max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,6vw,90px)}
.menu .eyebrow{color:var(--stone);margin-bottom:26px}
.menu__list{list-style:none;margin:0;padding:0}
.menu__list li{overflow:hidden}
.menu__list a{
  display:flex;align-items:baseline;gap:.6em;font-family:var(--f-dis);
  font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.14;
  transform:translateY(105%);transition:transform .8s var(--ease),color .4s;
}
.menu.open .menu__list a{transform:translateY(0)}
.menu__list li:nth-child(1) a{transition-delay:.14s}
.menu__list li:nth-child(2) a{transition-delay:.2s}
.menu__list li:nth-child(3) a{transition-delay:.26s}
.menu__list li:nth-child(4) a{transition-delay:.32s}
.menu__list li:nth-child(5) a{transition-delay:.38s}
.menu__list li:nth-child(6) a{transition-delay:.44s}
.menu__list a em{font-family:var(--f-ui);font-style:normal;font-size:.62rem;letter-spacing:.2em;color:var(--brass)}
.menu__list a:hover{color:var(--brass-lt)}
.menu__sub{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
.menu__sub a{font-size:.82rem;letter-spacing:.06em;line-height:2.2;color:rgba(246,242,235,.66);transition:color .3s}
.menu__sub a:hover{color:var(--brass-lt)}
.menu__meta{margin-top:44px;padding-top:26px;border-top:1px solid var(--rule-dk);color:var(--stone);font-size:.86rem}
@media (max-width:820px){.menu__grid{grid-template-columns:1fr}.menu__col--sub{display:none}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-bottom:clamp(90px,12vh,130px)}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(224,187,134,.42),transparent 58%),
    radial-gradient(90% 70% at 8% 92%,rgba(76,51,35,.16),transparent 60%),
    linear-gradient(180deg,#FBF8F2 0%,#F1EAE0 46%,#E7DCCC 100%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
/* ── Hero line drawing ──────────────────────────────────────────
   The same room as the exploded view, drawn as brass hairlines — the
   language of the logo. It sits in the empty right half of the hero, bleeding
   off the edge so it reads as a drafting sheet rather than a picture. */
.hero__draw{
  position:absolute;z-index:-1;pointer-events:none;
  right:calc(var(--gut) * -1.6);bottom:-8%;
  width:min(76vw,1060px);aspect-ratio:7/6;
  color:var(--brass-dk);opacity:.46;
  mask-image:radial-gradient(82% 84% at 58% 46%,#000 58%,transparent 94%);
}
.hero__draw svg{width:100%;height:100%;overflow:visible}
.hero__draw path{
  fill:none;stroke:currentColor;stroke-width:1.5;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
}
/* Drafting line weights: structure reads first, texture last. */
.hero__draw .hd-key path{stroke-width:2}
.hero__draw .hd-grid{opacity:.42}
/* Each path draws itself in, staggered by index (set as --i in JS). */
.hero__draw.draw path{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:heroDraw 1.15s var(--ease) forwards;
  animation-delay:calc(var(--i) * 11ms + 220ms);
}
@keyframes heroDraw{to{stroke-dashoffset:0}}

@media (max-width:900px){
  .hero__draw{width:150vw;right:-42vw;bottom:2%;opacity:.22}
}
@media (prefers-reduced-motion:reduce){
  .hero__draw.draw path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}

.hero__grid{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:repeat(5,1fr);padding-inline:var(--gut);pointer-events:none}
.hero__grid i{border-left:1px solid rgba(20,17,15,.055)}
.hero__grid i:last-child{border-right:1px solid rgba(20,17,15,.055)}

.hero__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.hero__title{font-size:clamp(3.2rem,11.6vw,12rem);line-height:.9;letter-spacing:-.03em;margin:.22em 0 0}
/* each line clips its text for the slide-up reveal; the bottom padding leaves room for
   descenders (g, y, p) and the negative margin keeps the original line spacing */
.hero__title .line{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.18em}
.hero__title .line>span{display:block;transform:translateY(140%);transition:transform 1.25s var(--ease)}
.hero.in .hero__title .line>span{transform:translateY(0)}
.hero__title .line:nth-child(2)>span{transition-delay:.11s}
.hero__title em{font-style:italic;color:var(--walnut)}

.hero__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(34px,5vw,64px)}
.hero__foot p{max-width:50ch;color:var(--muted);font-size:clamp(.95rem,1.05vw,1.06rem);margin:0}
.hero__cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
@media (max-width:860px){.hero__foot{grid-template-columns:1fr}}

.hero__ticker{position:absolute;left:0;right:0;bottom:0;padding:16px 0;border-top:1px solid var(--rule);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__row{display:flex;gap:22px;align-items:center;width:max-content;animation:tick 42s linear infinite;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ticker__row i{color:var(--brass);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

.hero__scroll{
  position:absolute;right:calc(var(--gut) - 6px);top:50%;
  transform:translateY(-50%) rotate(90deg);transform-origin:100% 50%;
  display:flex;align-items:center;gap:14px;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.hero__scroll i{width:56px;height:1px;background:var(--brass);animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleX(0);transform-origin:0 50%}45%{transform:scaleX(1);transform-origin:0 50%}55%{transform:scaleX(1);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
@media (max-width:1080px){.hero__scroll{display:none}}

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto{padding:clamp(110px,17vw,220px) 0;background:var(--paper)}
.manifesto__text{
  font-family:var(--f-dis);font-size:clamp(1.9rem,5vw,4.5rem);line-height:1.18;
  letter-spacing:-.015em;max-width:20ch;margin:0;
}
.manifesto__text em{font-style:italic;color:var(--walnut)}
.manifesto .w{display:inline-block;opacity:.14;transition:opacity .5s var(--ease)}
.manifesto .w.lit{opacity:1}

/* ==========================================================================
   EXPLODED VIEW  ★
   ========================================================================== */
.ex{background:var(--ink-2);color:var(--paper);position:relative}
.ex::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 42%,rgba(224,187,134,.11),transparent 70%);
}
.ex__track{height:620vh;position:relative}
.ex__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}

.ex__head{position:absolute;top:clamp(84px,12vh,128px);left:var(--gut);z-index:3;pointer-events:none;max-width:min(46vw,520px)}
.ex__head .eyebrow{color:var(--brass)}
.ex__head h2{font-size:clamp(1.8rem,3.6vw,3.4rem);margin-top:.3em}
.ex__head h2 em{font-style:italic;color:var(--brass-lt)}

.ex__stage{position:absolute;inset:0;display:grid;place-items:center}
.ex__stage svg{width:100%;height:100%;overflow:visible;will-change:transform}

/* layer solids */
.layer{will-change:transform,opacity}
.layer__solid{transition:opacity .45s var(--ease)}
.layer.dim .layer__solid{opacity:.16}

/* callouts */
.lead{opacity:0;transition:opacity .5s var(--ease)}
.lead.on{opacity:1}
.lead__dot{fill:var(--brass)}
.lead__line{fill:none;stroke:rgba(224,187,134,.62);stroke-width:1.1;stroke-dasharray:4 4}
.lead__label{
  font-family:'Jost',sans-serif;font-size:19px;font-weight:500;letter-spacing:2.2px;
  fill:#F6F2EB;text-transform:uppercase;
}
.lead__spec{font-family:'Jost',sans-serif;font-size:15px;font-weight:300;letter-spacing:.4px;fill:rgba(246,242,235,.52)}
.layer.dim .lead{opacity:.22}
.layer.focus .lead__line{stroke:var(--brass-lt);stroke-dasharray:none}
.layer.focus .lead__label{fill:var(--brass-lt)}

/* readout + segmented layer ticks */
.ex__readout{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(28px,5vh,52px);z-index:3;display:grid;gap:18px;pointer-events:none}
.ex__ticks{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.ex__ticks b{display:grid;gap:9px}
.ex__ticks i{position:relative;display:block;height:2px;background:rgba(246,242,235,.13);transition:background .4s}
.ex__ticks i::after{
  content:"";position:absolute;inset:0;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease);
}
.ex__ticks b.on i::after{transform:scaleX(1)}
.ex__ticks b.act i::after{background:var(--brass-lt)}
.ex__ticks em{
  font-style:normal;font-size:.58rem;letter-spacing:.2em;color:rgba(246,242,235,.3);
  transition:color .4s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ex__ticks b.on em{color:rgba(246,242,235,.55)}
.ex__ticks b.act em{color:var(--brass-lt)}
@media (max-width:700px){.ex__ticks em{display:none}}
.ex__readout-txt{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ex__readout-txt strong{font-family:var(--f-dis);font-weight:400;font-size:clamp(1.1rem,2vw,1.7rem);letter-spacing:.01em}
.ex__readout-txt span{font-size:.76rem;letter-spacing:.1em;color:rgba(246,242,235,.5);max-width:60ch}

.ex__hint{
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:100% 50%;
  z-index:3;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--stone);
  display:flex;align-items:center;gap:12px;transition:opacity .5s;
}
.ex__hint i{width:40px;height:1px;background:var(--brass)}
.ex__hint.off{opacity:0}
@media (max-width:860px){
  .ex__hint{display:none}
  .ex__head{max-width:none;right:var(--gut)}
  .lead__label{font-size:22px;letter-spacing:1.6px}
  .lead__spec{font-size:17px}
}

/* ==========================================================================
   SPACES
   ========================================================================== */
.spaces{padding:clamp(100px,14vw,190px) 0;background:var(--paper-2)}
.spaces__list{border-top:1px solid var(--rule)}
.sp{position:relative;border-bottom:1px solid var(--rule);isolation:isolate;scroll-margin-top:84px}   /* room links land clear of the header */
.sp__row{
  position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(16px,3vw,40px);padding:clamp(20px,2.6vw,34px) 0;cursor:pointer;
}
/* the row is a <button> — strip the browser's button styling */
.sp__row{width:100%;background:none;border:0;border-radius:0;color:inherit;text-align:left;font:inherit;-webkit-tap-highlight-color:transparent}
.sp__row:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.sp__n{font-size:.66rem;letter-spacing:.2em;color:var(--muted);width:34px;transition:color .4s}
.sp__name{
  display:block;font-weight:300;letter-spacing:-.015em;font-family:var(--f-dis);font-size:clamp(1.6rem,4.4vw,3.4rem);line-height:1.05;margin:0;
  transition:transform .6s var(--ease),color .4s;
}
.sp__meta{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:right;transition:color .4s}
.sp__chev{display:block;width:12px;height:12px;position:relative}
.sp__chev::before,.sp__chev::after{
  content:"";position:absolute;left:0;top:5px;width:12px;height:1px;background:currentColor;
  transition:transform .45s var(--ease);
}
.sp__chev::after{transform:rotate(90deg)}
.sp__row::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--ease);
}
.sp__row:hover::after{transform:scaleY(1)}
.sp__row:hover .sp__name{transform:translateX(clamp(10px,2vw,28px));color:var(--paper)}
.sp__row:hover .sp__n,.sp__row:hover .sp__meta,.sp__row:hover .sp__chev{color:var(--brass-lt)}

/* the room's gallery, opened by click or tap */
.sp__panel{display:grid;gap:18px;padding:6px 0 clamp(26px,3vw,40px);animation:spOpen .55s var(--ease) both}
/* `display:grid` above outranks the UA's [hidden]{display:none}, so closed
   panels must be hidden explicitly or every one of them renders. */
.sp__panel[hidden]{display:none}
/* masonry columns: each photo keeps its own shape, so portraits are never
   cropped down to landscape tiles */
.sp__gallery{columns:3;column-gap:clamp(10px,1.2vw,18px)}
.sp__shot{margin:0 0 clamp(10px,1.2vw,18px);break-inside:avoid;aspect-ratio:var(--r,4/3)}
.sp__shot .media{border-radius:2px}
/* placeholder tile — sits under the <img>, so a real photo simply covers it */
.sp__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:12px;color:rgba(246,242,235,.62);text-align:center;
}
.sp__ph svg{width:34px;fill:none;stroke:currentColor;stroke-width:1.4}
.sp__ph em{font-style:normal;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase}
.sp__foot{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.sp__hint{display:none;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sp__foot .sp__quote{margin-left:auto}
@keyframes spOpen{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.sp__quote{justify-self:start;color:var(--clay,#7D5B43)}
.sp.open .sp__chev::after{transform:rotate(0)}
.sp.open .sp__n{color:var(--brass-dk)}

/* floating preview (pointer devices only) */
.sp__peek{
  position:fixed;top:0;left:0;width:clamp(230px,23vw,380px);aspect-ratio:16/10;z-index:60;
  pointer-events:none;opacity:0;
  transition:opacity .35s var(--ease);
  border-radius:2px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.3);
  will-change:transform;
}
.sp__peek.on{opacity:1}
.sp__peek .media,.sp__peek img{width:100%;height:100%}

@media (max-width:860px){
  .sp__row{grid-template-columns:auto 1fr auto}
  .sp__meta{display:none}
  /* phones: a swipeable strip that runs edge to edge */
  .sp__gallery{
    columns:auto;display:flex;align-items:center;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .sp__gallery::-webkit-scrollbar{display:none}
  .sp__shot{flex:none;width:min(72vw,400px);margin:0;scroll-snap-align:start}
  .sp__shot--l{width:min(86vw,560px)}
  .sp__hint{display:block}
  .sp__foot .sp__quote{margin-left:0}
}
@media (hover:none){
  .sp__chev{display:block}
  .sp__peek{display:none}
  .sp__row:hover::after{transform:scaleY(0)}
  .sp__row:hover .sp__name{transform:none;color:inherit}
  .sp__row:hover .sp__n{color:var(--muted)}
  .sp__row:hover .sp__chev{color:inherit}
}

/* material placeholder media */
.media{
  position:relative;width:100%;height:100%;overflow:hidden;background:
    radial-gradient(120% 90% at 24% 14%,var(--a,#C3B29B),transparent 62%),
    linear-gradient(150deg,var(--a,#C3B29B) 0%,var(--b,#3B2A20) 100%);
}
.media::after{
  content:"";position:absolute;inset:0;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media__tag{
  position:absolute;left:16px;bottom:14px;z-index:2;color:var(--paper);
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
}

/* ==========================================================================
   RENOVATION — the services asked for most
   ========================================================================== */
.reno{padding:clamp(100px,14vw,190px) 0;background:var(--ink);color:var(--paper)}
.reno .eyebrow{color:var(--brass)}
.reno .sec-title em{color:var(--brass-lt)}
.reno .sec-lede{color:rgba(246,242,235,.62)}
.reno__groups{display:grid;gap:clamp(44px,5.5vw,72px)}
.reno__label{display:block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);margin-bottom:18px}
.reno__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-dk)}
.reno__card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,40px) clamp(18px,2.4vw,34px) clamp(30px,3.4vw,44px) 0;border-right:1px solid var(--rule-dk);
}
.reno__card + .reno__card{padding-left:clamp(18px,2.4vw,34px)}
.reno__card:last-child{border-right:0}
.reno__card::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--brass);transition:width .9s var(--ease)}
.reno__card.in::before{width:100%}
.reno__n{font-size:.66rem;letter-spacing:.24em;color:var(--brass);margin-bottom:clamp(22px,3vw,40px)}
.reno__card h3{font-size:clamp(1.35rem,2.1vw,1.9rem);margin-bottom:.55em;color:var(--paper)}
.reno__card p{flex:1;margin:0 0 22px;font-size:.92rem;color:rgba(246,242,235,.62)}
.reno__cta{align-self:flex-start;font-size:.68rem;color:var(--brass-lt)}
.reno__cta i{font-style:normal}
@media (max-width:860px){
  .reno__list{grid-template-columns:1fr}
  .reno__card,.reno__card + .reno__card{padding-left:0;padding-right:0;border-right:0;border-bottom:1px solid var(--rule-dk)}
}

/* ==========================================================================
   METHOD
   ========================================================================== */
.method{padding:clamp(100px,14vw,190px) 0;background:var(--paper)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:1px solid var(--rule)}
.step{padding:clamp(28px,3vw,44px) clamp(18px,2vw,30px) clamp(38px,5vw,64px);border-right:1px solid var(--rule);position:relative}
.step:last-child{border-right:0}
.step__n{display:block;font-size:.66rem;letter-spacing:.24em;color:var(--brass);margin-bottom:clamp(28px,4vw,54px)}
.step h3{font-size:clamp(1.25rem,1.9vw,1.7rem);margin-bottom:.55em}
.step p{color:var(--muted);font-size:.92rem;margin:0}
.step::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--fg);transition:width .9s var(--ease)}
.step.in::before{width:100%}
@media (max-width:760px){.step{border-right:0;border-bottom:1px solid var(--rule)}}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{background:var(--ink);color:var(--paper);padding:clamp(70px,9vw,120px) 0}
.stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(28px,4vw,50px)}
.stat{text-align:center}
.stat b{display:block;font-family:var(--f-dis);font-weight:300;font-size:clamp(3rem,7vw,6.4rem);line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:.9em;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}

/* ==========================================================================
   WORK
   ========================================================================== */
.work{padding:clamp(100px,14vw,190px) 0;background:var(--paper)}
/* Ratios follow the source files: room renders are 800×500 (1.6), the on-site
   photographs are 360×500 (0.72). Nothing here asks the browser to upscale or
   to crop a landscape frame into a tall one. */
.work__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,26px);align-items:start}
.wk{position:relative;overflow:hidden;opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.wk.in{opacity:1;transform:none}
.wk .media{transition:transform 1.1s var(--ease)}
.wk:hover .media{transform:scale(1.045)}
.wk__cap{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;color:var(--paper);background:linear-gradient(transparent,rgba(11,10,9,.72))}
.wk__cap h3{font-size:clamp(1.05rem,1.7vw,1.5rem)}
.wk__cap span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.72;flex:none}
.wk--a{grid-column:span 8;aspect-ratio:16/10}
.wk--b{grid-column:span 4;aspect-ratio:4/5}
.wk--c{grid-column:span 4;aspect-ratio:4/3}
.wk--d{grid-column:span 4;aspect-ratio:4/3}
.wk--e{grid-column:span 4;aspect-ratio:4/3}
.wk--f{grid-column:span 4;aspect-ratio:4/5}
.wk--g{grid-column:span 8;aspect-ratio:16/10}
@media (max-width:860px){
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .wk{grid-column:span 1 !important;aspect-ratio:4/5 !important}
  .wk--a,.wk--g{grid-column:span 2 !important;aspect-ratio:16/11 !important}
}

/* ---- Commercial / Residential tabs ------------------------------------- */
.work__tabs{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--rule);border-radius:100px;margin-bottom:clamp(30px,4vw,54px)}
.work__tab{
  border:0;background:none;padding:.95em 1.7em;border-radius:100px;cursor:pointer;
  font-family:var(--f-ui);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  transition:background .45s var(--ease),color .45s var(--ease);
}
.work__tab sup{font-size:.62em;margin-left:.6em;letter-spacing:.08em;color:var(--brass-dk);vertical-align:.5em}
.work__tab:hover{color:var(--fg)}
.work__tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.work__tab[aria-selected="true"] sup{color:var(--brass-lt)}
.work__tab:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
.work__panel{border-top:1px solid var(--rule);animation:spOpen .5s var(--ease) both}
.work__panel[hidden]{display:none}

/* ---- brand rows --------------------------------------------------------- */
.wb{border-bottom:1px solid var(--rule)}
.wb__row{
  width:100%;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);padding:clamp(20px,2.6vw,32px) 0;
  background:none;border:0;border-radius:0;color:inherit;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.wb__row:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.wb__n{flex:none;width:34px;font-size:.66rem;letter-spacing:.2em;color:var(--muted)}
.wb__logo{flex:none;width:clamp(40px,4vw,58px);height:clamp(30px,3vw,42px);object-fit:contain}
.wb__name{flex:1;min-width:0;font-family:var(--f-dis);font-weight:300;font-size:clamp(1.45rem,3.4vw,2.7rem);line-height:1.08;letter-spacing:-.015em;transition:color .4s}
.wb__row:hover .wb__name{color:var(--walnut)}
.wb__meta{flex:none;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.wb .sp__chev{flex:none}
.wb.open .sp__chev::after{transform:rotate(0)}
.wb.open .wb__n{color:var(--brass-dk)}

/* ---- project cards ------------------------------------------------------ */
.wb__projects{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(18px,2vw,30px);
  padding:4px 0 clamp(30px,3.6vw,48px);animation:spOpen .55s var(--ease) both;
}
.wb__projects[hidden]{display:none}
.wp{display:block;padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.wp:focus-visible{outline:1px solid var(--brass);outline-offset:6px}
.wp__media{display:block;height:auto;aspect-ratio:4/3;border-radius:2px}
.wp__media img{transition:transform 1.1s var(--ease)}
.wp:hover .wp__media img{transform:scale(1.05)}
.wp__cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px}
.wp__name{font-family:var(--f-dis);font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.18}
.wp__count{flex:none;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.wp__count i{display:inline-block;font-style:normal;transition:transform .45s var(--ease)}
.wp:hover .wp__count i{transform:translateX(4px)}
.wp__cap{align-items:flex-start}
.wp__text{display:grid;gap:7px;min-width:0}
.wp__sub{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.wp__count{padding-top:.4em}
/* single projects (no brand) share one grid */
.wp__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(30px,3vw,46px) clamp(18px,2vw,30px);padding:clamp(30px,3.6vw,48px) 0 4px;
}
.wb + .wp__grid{padding-top:clamp(40px,4.4vw,60px)}
@media (max-width:860px){
  .wb__meta{display:none}
  .work__tabs{display:flex;border-radius:28px}
  .work__tab{flex:1;padding:.95em 1em}
}

/* ---- project viewer ----------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:210;overflow-y:auto;overscroll-behavior:contain;background:var(--ink);color:var(--paper);animation:lbIn .45s var(--ease) both}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__bar{
  position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:clamp(18px,2.4vw,30px) var(--gut);background:linear-gradient(var(--ink) 70%,rgba(20,17,15,0));
}
.lb__eyebrow{color:var(--brass)}
.lb__title{margin-top:.35em;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.04;max-width:26ch}
.lb__x{
  flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--rule-dk);background:rgba(20,17,15,.6);
  color:var(--paper);font-size:1rem;cursor:pointer;transition:background .35s,border-color .35s;
}
.lb__x:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lb__grid{columns:3 280px;column-gap:clamp(10px,1.2vw,16px);max-width:var(--maxw);margin:0 auto;padding:6px var(--gut) clamp(40px,6vw,80px)}
.lb__thumb{
  display:block;width:100%;margin:0 0 clamp(10px,1.2vw,16px);padding:0;border:0;border-radius:2px;overflow:hidden;
  aspect-ratio:var(--r,4/3);background:#2A2420;cursor:zoom-in;break-inside:avoid;
}
.lb__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .4s}
.lb__thumb:hover img{transform:scale(1.04)}
.lb__thumb:focus-visible{outline:1px solid var(--brass);outline-offset:3px}

.lb__view{position:fixed;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(14,12,10,.98);touch-action:pan-y}
.lb__view[hidden]{display:none}
.lb__stage{margin:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:76px clamp(12px,7vw,110px) 70px}
.lb__stage img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;animation:lbIn .35s var(--ease) both}
.lb__back{
  position:absolute;top:clamp(18px,2.4vw,28px);left:var(--gut);z-index:2;padding:.8em 1.3em;border-radius:100px;
  border:1px solid var(--rule-dk);background:rgba(20,17,15,.6);color:var(--paper);cursor:pointer;
  font-family:var(--f-ui);font-weight:500;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
}
.lb__back:hover{border-color:var(--brass-lt);color:var(--brass-lt)}
.lb__x--view{position:absolute;top:clamp(18px,2.4vw,28px);right:var(--gut);z-index:2}
.lb__nav{
  position:absolute;top:50%;z-index:2;width:54px;height:54px;margin-top:-27px;border-radius:50%;
  border:1px solid var(--rule-dk);background:rgba(20,17,15,.55);color:var(--paper);font-size:1.1rem;cursor:pointer;
  transition:background .35s,color .35s,border-color .35s;
}
.lb__nav:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lb__nav--prev{left:clamp(8px,2vw,30px)}
.lb__nav--next{right:clamp(8px,2vw,30px)}
.lb__count{position:absolute;bottom:clamp(18px,2.6vw,30px);left:50%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.24em;color:var(--stone)}
@media (max-width:700px){
  .lb__stage{padding:72px 0 92px}
  .lb__nav{top:auto;bottom:16px;margin-top:0;width:48px;height:48px}
  .lb__nav--prev{left:var(--gut)}
  .lb__nav--next{right:var(--gut)}
  .lb__count{bottom:32px}
}

/* ==========================================================================
   STUDIO
   ========================================================================== */
.studio{padding:clamp(100px,14vw,190px) 0;background:var(--paper-2)}
.studio__grid{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(36px,6vw,100px);align-items:start}
.media--tall{aspect-ratio:3/4}
.lead-p{font-size:clamp(1.05rem,1.5vw,1.32rem);color:var(--fg) !important;font-weight:300}
.lead-p b,.studio__body p b{font-weight:500}

/* founder */
.founder{margin:0}
.founder figcaption{display:grid;gap:4px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.founder figcaption b{font-family:var(--f-dis);font-weight:400;font-size:1.4rem}
.founder figcaption span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.founder__ph{
  position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:rgba(246,242,235,.55);text-align:center;
}
.founder__ph svg{width:54px}
.founder__ph em{font-style:normal;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase}
.media.is-empty .founder__ph{display:flex}

/* vision + mission */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin:clamp(28px,4vw,44px) 0;padding:clamp(22px,3vw,30px) 0;border-block:1px solid var(--rule)}
.vm p{margin:.8em 0 0;color:var(--muted);font-size:.94rem}
@media (max-width:600px){.vm{grid-template-columns:1fr}}

/* areas of expertise */
.expertise{margin-top:clamp(60px,8vw,110px)}
.expertise ul{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:1px solid var(--rule)}
.expertise li{
  padding:18px 0;border-bottom:1px solid var(--rule);font-family:var(--f-dis);
  font-size:clamp(1.1rem,1.7vw,1.5rem);display:flex;align-items:baseline;gap:12px;
}
.expertise li::before{content:"";width:16px;height:1px;background:var(--brass-dk);flex:none}

/* visit the studio — map + address */
.locate{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:stretch;margin-top:clamp(60px,8vw,110px)}
.locate__map{
  position:relative;min-height:clamp(300px,38vw,460px);overflow:hidden;border-radius:2px;
  border:1px solid var(--rule);background:var(--sand);
}
.locate__map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  /* warmed to sit inside the palette rather than shouting Google blue */
  filter:grayscale(.42) sepia(.34) contrast(1.02) brightness(1.02);
}
.locate__body{display:flex;flex-direction:column;justify-content:center}
.locate__body p{color:var(--muted);font-size:.96rem;margin-top:1em;max-width:46ch}
.locate__list{list-style:none;margin:clamp(20px,3vw,32px) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.locate__list li{display:grid;gap:7px;padding:20px 0;border-bottom:1px solid var(--rule)}
.locate__list b{font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.locate__list span{color:var(--muted);font-size:.92rem;line-height:1.7}
.locate__list .link{justify-self:start;font-size:.68rem;color:var(--brass-dk);margin-top:3px}
@media (max-width:860px){
  .locate{grid-template-columns:1fr}
  .locate__map{min-height:280px}
}

@media (max-width:900px){
  .studio__grid{grid-template-columns:1fr}
  .founder{max-width:340px}
}
.studio__body p{color:var(--muted);max-width:56ch}
.studio__body .sec-title{margin-bottom:.7em}
.studio__points{list-style:none;margin:clamp(30px,4vw,50px) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.studio__points li{padding:20px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:20px;align-items:baseline}
.studio__points b{font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.studio__points span{color:var(--muted);font-size:.92rem}
@media (max-width:900px){
  .studio__grid{grid-template-columns:1fr}
  .studio__points li{grid-template-columns:1fr;gap:6px}
}

/* ==========================================================================
   TRUSTED BY
   ========================================================================== */
.trust{padding:clamp(100px,13vw,170px) 0;background:var(--paper)}
.trust__block{margin-bottom:clamp(44px,6vw,70px)}
.trust__label{
  display:block;text-align:center;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin-bottom:clamp(24px,3vw,36px);
}
.trust__block--brands{margin-top:clamp(60px,8vw,100px);margin-bottom:0}
/* Every row is an endless, slowly moving strip that pauses under the pointer.
   Alternate rows run the other way; the edges fade instead of cutting off. */
.trust__rail{
  overflow:hidden;padding:8px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.trust__rail + .trust__rail{margin-top:clamp(10px,1.4vw,18px)}
.trust__rail--rev .trust__row{animation-direction:reverse}
.trust__row{
  list-style:none;margin:0;padding:0;display:flex;align-items:stretch;width:max-content;
  animation:trustLoop var(--dur,48s) linear infinite;
}
.trust__rail:hover .trust__row,.trust__rail:focus-within .trust__row{animation-play-state:paused}
@keyframes trustLoop{to{transform:translate3d(-50%,0,0)}}
.trust__item{
  /* margin, not gap: the loop slides exactly -50%, which only lands cleanly
     when every tile carries its own spacing */
  flex:none;margin-right:clamp(12px,1.6vw,20px);
  display:grid;place-items:center;grid-template-rows:1fr auto;min-width:clamp(150px,17vw,220px);min-height:clamp(74px,8vw,104px);
  padding:18px 26px;border:1px solid var(--rule);border-radius:2px;
  /* White, not bone: several of these logos ship with an opaque white
     background rather than transparency, and would otherwise sit in a visible
     white box on a warm card. */
  background:#fff;
  transition:border-color .45s var(--ease),transform .5s var(--ease),box-shadow .45s;
}
.trust__item:hover{border-color:var(--brass-dk);transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,17,15,.07)}
/* Logos arrive at every imaginable ratio — 55×70 portrait through 675×180
   panoramic — so cap both axes and let object-fit sort out the rest. */
.trust__item img{max-height:48px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .45s,opacity .45s}
.trust__item:hover img{filter:none;opacity:1}
/* When no logo file exists the name stands in as a wordmark. */
.trust__item span{display:none;font-family:var(--f-dis);font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.15;text-align:center;color:var(--fg)}
.trust__item.is-word span{display:block}
.trust__cat{font-style:normal;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:10px;white-space:nowrap}
.trust__foot{text-align:center;color:var(--muted);font-size:.94rem;margin:0}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{padding:clamp(100px,14vw,190px) 0;background:var(--ink);color:var(--paper)}
.contact .eyebrow{color:var(--brass)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,100px)}
.contact__title{font-family:var(--f-dis);font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.02;font-weight:300}
.contact__title em{color:var(--brass-lt)}
.contact__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;margin-top:clamp(40px,6vw,72px);padding-top:30px;border-top:1px solid var(--rule-dk)}
.contact__meta p{color:rgba(246,242,235,.66);font-size:.92rem;margin:.8em 0 0;line-height:1.9}
.contact__meta .eyebrow{color:var(--stone)}
.contact__meta .link{font-size:.74rem;letter-spacing:.1em}

/* WhatsApp — the channel this business actually runs on */
.btn--wa{
  margin-top:clamp(28px,4vw,40px);--c:#5BbF7f;color:#8FE0AC;border-color:rgba(139,224,172,.45);
}
.btn--wa svg{width:17px;height:17px;flex:none}
.btn--wa::before{background:#25D366}
.btn--wa:hover{color:#0B2A16;border-color:#25D366}

.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);align-content:start}
.field{display:grid;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-dk);
  padding:12px 0;font-size:1rem;font-weight:300;color:var(--paper);border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical;min-height:64px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--stone) 50%),linear-gradient(135deg,var(--stone) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--ink);color:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,242,235,.26)}
.field.err input,.field.err select,.field.err textarea{border-color:#C4562F}
.form__submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:10px}
.form .btn--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.form .btn--solid::before{background:var(--brass)}
.form__note{margin:0;font-size:.76rem;letter-spacing:.06em;color:var(--brass-lt);max-width:44ch;line-height:1.6}
.form__note.is-ok{color:#8FE0AC}
.form__note.is-err{color:#E8A87C}
.form button[type="submit"][disabled]{opacity:.6;pointer-events:none}
/* Honeypot — hidden from people, visible to bots that fill everything in. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
.insta{padding:clamp(80px,10vw,140px) 0;background:var(--paper);overflow:hidden}
.insta__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.insta__head .sec-title{font-size:clamp(2.2rem,5vw,4.6rem)}
.insta__head .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.insta__head .btn svg .dot{fill:currentColor;stroke:none}
.insta__rail{overflow:hidden}
/* margin, not gap: the loop slides exactly -50%, which only lands cleanly
   when every tile carries its own spacing */
.insta__track{
  list-style:none;margin:0;padding:0;display:flex;width:max-content;
  animation:instaLoop var(--dur,60s) linear infinite;
}
.insta__rail:hover .insta__track,.insta__rail:focus-within .insta__track{animation-play-state:paused}
@keyframes instaLoop{to{transform:translate3d(-50%,0,0)}}
.insta__item{flex:none;width:clamp(200px,22vw,320px);margin-right:clamp(10px,1.2vw,18px)}
.insta__item a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.insta__item .media img{transition:transform 1.1s var(--ease)}
.insta__item a::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(20,17,15,.28);opacity:0;transition:opacity .45s var(--ease)}
.insta__item a:hover::before,.insta__item a:focus-visible::before{opacity:1}
.insta__item a:hover img{transform:scale(1.05)}
.insta__ico{position:absolute;top:12px;right:12px;z-index:2;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.insta__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6}
.insta__ico svg .dot{fill:currentColor;stroke:none}
@media (max-width:600px){.insta__item{width:58vw}}

/* ==========================================================================
   ENQUIRY POPUP
   ========================================================================== */
.enq{
  width:min(720px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:0;border:0;border-radius:3px;
  background:var(--ink);color:var(--paper);box-shadow:0 40px 120px rgba(0,0,0,.45);overflow:auto;overscroll-behavior:contain;
}
.enq::backdrop{background:rgba(11,10,9,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.enq[open]{animation:enqIn .45s var(--ease) both}
@keyframes enqIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.enq__box{position:relative;padding:clamp(28px,4vw,48px)}
.enq .eyebrow{color:var(--brass)}
.enq__title{font-family:var(--f-dis);font-weight:300;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.05;margin:.3em 2.2em .35em 0}
.enq__lede{color:rgba(246,242,235,.62);font-size:.92rem;margin:0 0 clamp(22px,3vw,32px)}
.enq__form .form{opacity:1;transform:none}
.enq__x{
  position:absolute;top:clamp(16px,2.4vw,24px);right:clamp(16px,2.4vw,24px);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--rule-dk);background:transparent;color:var(--paper);font-size:.95rem;cursor:pointer;transition:background .3s,color .3s;
}
.enq__x:hover{background:var(--paper);color:var(--ink)}
.enq__alt{margin:24px 0 0;font-size:.8rem;color:var(--stone)}
.enq__alt .link{color:var(--brass-lt);font-size:.72rem}
@media (max-width:600px){
  .enq{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ink-2);color:var(--paper);padding:clamp(56px,7vw,90px) 0 30px}
.foot__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--rule-dk)}
.foot__mark{display:flex;align-items:center;gap:12px;font-family:var(--f-dis);font-size:clamp(1.4rem,2.6vw,2.2rem)}
.foot__mark img{width:56px;height:auto;flex:none}
.foot__mark em{font-style:italic}
.foot__line{font-family:var(--f-dis);font-style:italic;font-size:clamp(1.1rem,2vw,1.7rem);color:var(--stone);margin:0}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:34px;padding:clamp(40px,5vw,60px) 0}
.foot__cols .eyebrow{color:var(--brass);margin-bottom:18px}
.foot__cols ul{list-style:none;margin:0;padding:0}
.foot__cols a{font-size:.86rem;line-height:2.1;color:rgba(246,242,235,.6);transition:color .3s}
.foot__cols a:hover{color:var(--brass-lt)}
.foot__bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--rule-dk);font-size:.68rem;letter-spacing:.12em;color:var(--stone)}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
  .hero__title .line>span{transform:none}
  .manifesto .w{opacity:1}
  .ex__track{height:auto}
  .ex__pin{position:relative;height:auto;padding:80px 0}
  /* no auto-scroll: the strips become rows you swipe yourself */
  .insta__track,.trust__row{animation:none}
  .trust__rail{overflow-x:auto}
  .trust__item[aria-hidden]{display:none}
  .insta__rail{overflow-x:auto}
  .insta__item[aria-hidden]{display:none}
}