/* =============================================================
   Chelsea Fashions — design system
   ============================================================= */
:root{
  --ink:#15120f; --ink-2:#1f1b16; --ink-3:#2b251e;
  --bone:#f7f3ec; --bone-2:#efe7db; --bone-3:#e3d9c9;
  --brass:#b2894f; --brass-lt:#cfa968; --clay:#8c5a44;
  --muted:#7c7168; --muted-lt:#a79c91;
  --line:rgba(21,18,15,.14); --line-dk:rgba(247,243,236,.16);

  --fs-display:clamp(2.6rem,7.2vw,6.6rem);
  --fs-h1:clamp(2.2rem,5vw,4.2rem);
  --fs-h2:clamp(1.8rem,3.6vw,3.1rem);
  --fs-h3:clamp(1.25rem,1.9vw,1.7rem);
  --fs-body:clamp(1rem,1.06vw,1.125rem);
  --fs-sm:.875rem; --fs-xs:.75rem;

  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:1380px;
  --sec:clamp(4.5rem,9vw,9.5rem);
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-body);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:"ss01","cv05";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.018em}
p{margin:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--ink);color:var(--bone)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:1rem;z-index:300;background:var(--ink);color:var(--bone);padding:.7rem 1.1rem;transition:top .2s}
.skip:focus{top:1rem}

/* ---------- grain ---------- */
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

/* ---------- kicker / rules ---------- */
.kicker{font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:.8rem}
.kicker::before{content:"";width:28px;height:1px;background:var(--brass);flex:none}
.on-dark .kicker,.dark .kicker{color:var(--muted-lt)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.9rem;border:1px solid var(--ink);
  font-size:var(--fs-sm);letter-spacing:.09em;text-transform:uppercase;font-weight:500;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover{color:var(--bone)}
.btn--solid{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn--solid::after{background:var(--brass);transform:translateY(101%)}
.btn--solid:hover{color:#fff;border-color:var(--brass)}
.btn--light{border-color:rgba(247,243,236,.5);color:var(--bone)}
.btn--light::after{background:var(--bone)}
.btn--light:hover{color:var(--ink);border-color:var(--bone)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

/* link with animated underline */
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.ul:hover::after{transform:scaleX(1);transform-origin:left}

/* =============================================================
   HEADER
   ============================================================= */
.hdr{position:fixed;top:0;left:0;right:0;z-index:150;transition:background .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.hdr::before{content:"";position:absolute;inset:0;background:var(--bone);opacity:0;transition:opacity .45s var(--ease)}
.hdr.is-stuck::before{opacity:1}
.hdr.is-stuck{box-shadow:0 1px 0 var(--line)}
.hdr__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);height:var(--header-h);transition:height .45s var(--ease)}
.hdr.is-stuck .hdr__in{height:64px}
.brand{display:flex;align-items:center;gap:.7rem;flex:none;z-index:2}
.brand img{height:40px;width:auto;transition:height .45s var(--ease),filter .5s var(--ease)}
.hdr.is-stuck .brand img{height:33px}
.brand__txt{font-family:'Fraunces',serif;font-size:1.02rem;letter-spacing:.17em;text-transform:uppercase;line-height:1;white-space:nowrap}
.brand__txt small{display:block;font-family:'Inter',sans-serif;font-size:.5rem;letter-spacing:.34em;color:var(--muted);margin-top:.33rem}

/* transparent-over-hero state */
.hdr--over:not(.is-stuck){color:var(--bone)}
.hdr--over:not(.is-stuck) .brand img{filter:invert(1) brightness(1.9)}
.hdr--over:not(.is-stuck) .brand__txt small{color:rgba(247,243,236,.65)}
.hdr--over:not(.is-stuck) .nav__top{color:var(--bone)}

/* right cluster */
.hdr__r{display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.6rem);flex:none}
.hdr__quick{display:none;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500;position:relative;padding:.4rem 0}
@media (min-width:860px){.hdr__quick{display:inline-block}}
.hdr__quick::after{content:"";position:absolute;left:0;bottom:.1rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.hdr__quick:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__cta{display:none!important}
@media (min-width:1080px){.hdr__cta{display:inline-flex!important;padding:.72rem 1.25rem;font-size:.7rem;margin-left:.4rem}}

/* burger */
.burger{display:flex;align-items:center;gap:.6rem;padding:.5rem 0 .5rem .7rem;z-index:2}
.burger__lbl{display:none;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
@media (min-width:560px){.burger__lbl{display:inline}}
.burger__b{display:flex;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;align-items:flex-end}
.burger__b span{display:block;height:1.5px;width:26px;background:var(--ink);transition:transform .45s var(--ease),opacity .3s,width .35s}
.burger__b span:nth-child(2){width:18px}
.burger:hover .burger__b span:nth-child(2){width:26px}
body.menu-open .burger__b span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger__b span:nth-child(2){opacity:0}
body.menu-open .burger__b span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:26px}
body.menu-open .burger__b span{background:var(--ink)!important}
body.menu-open .burger__lbl{color:var(--ink)}
.hdr--over:not(.is-stuck) .burger__b span{background:var(--bone)}
.hdr--over:not(.is-stuck) .burger__lbl{color:var(--bone)}

/* header reverts to dark-on-light while the mega menu is open */
body.menu-open .hdr--over:not(.is-stuck) .brand img{filter:none}
body.menu-open .hdr--over:not(.is-stuck) .brand__txt{color:var(--ink)}
body.menu-open .hdr--over:not(.is-stuck) .brand__txt small{color:var(--muted)}
body.menu-open .hdr--over:not(.is-stuck) .hdr__quick,
body.menu-open .hdr--over:not(.is-stuck) .burger__lbl{color:var(--ink)}
body.menu-open .hdr--over:not(.is-stuck) .burger__b span{background:var(--ink)}

/* =============================================================
   MEGA MENU
   ============================================================= */
.menu{position:fixed;inset:0;z-index:140;background:var(--bone);overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .78s var(--ease-out),visibility .78s}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__in{max-width:var(--maxw);margin-inline:auto;padding:calc(var(--header-h) + 2.4rem) var(--pad) 3.5rem;
  display:grid;gap:2.5rem}
@media (min-width:980px){.menu__in{grid-template-columns:1fr 290px;gap:3.2rem;padding-top:calc(var(--header-h) + 2.2rem);padding-bottom:2.5rem}}

.menu__grid{display:grid;gap:0}
@media (min-width:700px){.menu__grid{grid-template-columns:repeat(2,1fr);gap:0 2.5rem}}
@media (min-width:1180px){.menu__grid{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}}

.mcol{border-bottom:1px solid var(--line)}
@media (min-width:700px){.mcol{border-bottom:0;margin-bottom:1.75rem}}
.mcol__hd{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1.05rem 0;text-align:left;
  font-family:'Fraunces',serif;font-size:1.3rem;font-weight:300;letter-spacing:-.012em;line-height:1.15}
.mcol__hd--link{display:none}
@media (min-width:700px){
  .mcol__hd{display:none}
  .mcol__hd--link{display:block;padding:0 0 .9rem;font-size:1.22rem;position:relative;width:max-content}
  .mcol__hd--link::after{content:"";position:absolute;left:0;bottom:.55rem;width:100%;height:1px;background:var(--brass);
    transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
  .mcol__hd--link:hover::after{transform:scaleX(1);transform-origin:left}
}
.mcol.is-active .mcol__hd--link{color:var(--brass)}
.mcol__hd .pm{position:relative;width:15px;height:15px;flex:none}
.mcol__hd .pm::before,.mcol__hd .pm::after{content:"";position:absolute;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.mcol__hd .pm::before{left:0;top:7px;width:15px;height:1.4px}
.mcol__hd .pm::after{left:7px;top:0;width:1.4px;height:15px}
.mcol.open .pm::after{transform:rotate(90deg);opacity:0}

.mcol__sub{overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
@media (min-width:700px){.mcol__sub{max-height:none!important;overflow:visible}}
.mcol__sub ul{list-style:none;margin:0;padding:0 0 .9rem;display:grid;gap:.1rem}
@media (min-width:700px){.mcol__sub ul{padding:0;gap:.12rem}}
.mcol__sub a{display:block;padding:.46rem 0 .46rem 1rem;font-size:.92rem;color:var(--muted);position:relative;
  transition:color .32s,padding-left .38s var(--ease)}
@media (min-width:700px){.mcol__sub a{padding-left:0;font-size:.89rem}}
.mcol__sub a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--brass);transition:width .35s var(--ease)}
@media (min-width:700px){.mcol__sub a::before{left:-14px}}
.mcol__sub a:hover,.mcol__sub a[aria-current]{color:var(--ink)}
.mcol__sub a:hover::before{width:9px}
@media (max-width:699px){.mcol__sub a{border-left:1px solid var(--line)}.mcol__sub a:hover{padding-left:1.4rem}}

.menu__side{display:grid;gap:2rem;align-content:start;padding-top:.3rem}
@media (min-width:980px){.menu__side{border-left:1px solid var(--line);padding-left:2.5rem}}
.menu__blk{display:grid;gap:.6rem}
.menu__blk h4{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
  font-family:'Inter',sans-serif;font-weight:500;margin-bottom:.3rem}
.menu__blk a{font-size:.92rem;color:var(--muted);width:max-content;transition:color .3s}
.menu__blk a:hover{color:var(--ink)}
.menu__store{display:grid;gap:.15rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.menu__store b{font-family:'Fraunces',serif;font-size:1.02rem;font-weight:400;color:var(--ink)}
.menu__store span{font-size:.82rem;color:var(--muted);line-height:1.45}
.menu__cta{display:grid;gap:.6rem}
.menu__cta .btn{justify-content:center}

/* staggered menu reveal */
.js .menu .mcol,.js .menu__side>*{opacity:0;transform:translateY(16px)}
body.menu-open .menu .mcol,body.menu-open .menu__side>*{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
body.menu-open .menu .mcol:nth-child(1){transition-delay:.17s}
body.menu-open .menu .mcol:nth-child(2){transition-delay:.21s}
body.menu-open .menu .mcol:nth-child(3){transition-delay:.25s}
body.menu-open .menu .mcol:nth-child(4){transition-delay:.29s}
body.menu-open .menu .mcol:nth-child(5){transition-delay:.33s}
body.menu-open .menu .mcol:nth-child(6){transition-delay:.37s}
body.menu-open .menu .mcol:nth-child(7){transition-delay:.41s}
body.menu-open .menu .mcol:nth-child(8){transition-delay:.45s}
body.menu-open .menu .mcol:nth-child(9){transition-delay:.49s}
body.menu-open .menu__side>*:nth-child(1){transition-delay:.42s}
body.menu-open .menu__side>*:nth-child(2){transition-delay:.47s}
body.menu-open .menu__side>*:nth-child(3){transition-delay:.52s}
@media (prefers-reduced-motion:reduce){
  .menu{transition:none}
  .js .menu .mcol,.js .menu__side>*{opacity:1;transform:none}
}

/* =============================================================
   HERO
   ============================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--ink);color:var(--bone);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-8% 0 -8%;z-index:-2;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(.3) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(21,18,15,.84) 0%,rgba(21,18,15,.55) 38%,rgba(21,18,15,.93) 100%)}
.hero__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:calc(var(--header-h) + 5rem) var(--pad) clamp(3rem,7vw,6rem)}
.hero h1{font-size:var(--fs-display);max-width:17ch;font-weight:300;letter-spacing:-.025em;margin-bottom:1.6rem}
.hero__body{max-width:56ch;color:rgba(247,243,236,.76);font-size:clamp(1rem,1.25vw,1.19rem);margin-bottom:2.6rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(3rem,6vw,5rem);
  padding-top:2rem;border-top:1px solid var(--line-dk)}
.hero__meta div{display:flex;flex-direction:column;gap:.3rem}
.hero__meta b{font-family:'Fraunces',serif;font-size:clamp(1.7rem,2.6vw,2.5rem);font-weight:400;line-height:1}
.hero__meta span{font-size:var(--fs-xs);letter-spacing:.17em;text-transform:uppercase;color:var(--muted-lt)}
.scroll-cue{position:absolute;right:var(--pad);bottom:clamp(3rem,7vw,6rem);display:none;align-items:center;gap:.7rem;
  font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:rgba(247,243,236,.6);writing-mode:vertical-rl}
@media (min-width:900px){.scroll-cue{display:flex}}
.scroll-cue i{display:block;width:1px;height:54px;background:linear-gradient(var(--brass),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* word reveal */
.rv-line{display:block;overflow:hidden}
.rv-word{display:inline-block;will-change:transform}
.js .rv-word{transform:translateY(102%)}
.js .rv-in .rv-word{transform:translateY(0);transition:transform .95s var(--ease-out)}

/* =============================================================
   MARQUEE
   ============================================================= */
.marq{background:var(--ink);color:var(--bone);padding:1.15rem 0;overflow:hidden;border-block:1px solid var(--line-dk)}
.marq__t{display:flex;width:max-content;gap:3.2rem;animation:marq 42s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
.marq span{font-family:'Fraunces',serif;font-size:clamp(1rem,1.5vw,1.32rem);letter-spacing:.03em;white-space:nowrap;display:flex;align-items:center;gap:3.2rem;color:rgba(247,243,236,.82)}
.marq span::after{content:"";width:5px;height:5px;background:var(--brass);border-radius:50%;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* =============================================================
   REVEAL
   ============================================================= */
.js [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv-stag]>*{opacity:0;transform:translateY(26px)}
.js [data-rv-stag].in>*{opacity:1;transform:none;transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js [data-rv],.js [data-rv-stag]>*,.js .rv-word{opacity:1!important;transform:none!important;transition:none!important}
  .marq__t{animation:none}.scroll-cue i{animation:none}
}

/* =============================================================
   SECTION HEAD
   ============================================================= */
.shead{display:grid;gap:1.3rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.shead{grid-template-columns:1fr 1fr;align-items:end;gap:3rem}}
.shead h2{font-size:var(--fs-h2);max-width:16ch;font-weight:300}
.shead p{color:var(--muted);max-width:50ch}
.shead__l{display:grid;gap:1.1rem}

/* =============================================================
   DIVISIONS
   ============================================================= */
.divs{display:grid;gap:1px;background:var(--line)}
@media (min-width:720px){.divs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.divs{grid-template-columns:repeat(3,1fr)}}
.div-card{position:relative;background:var(--bone);display:block;padding:clamp(1.5rem,2.4vw,2.2rem);min-height:clamp(250px,27vw,340px);
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate;color:var(--ink);
  transition:color .55s var(--ease)}
.div-card__img{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s var(--ease)}
.div-card__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.1s var(--ease-out);filter:brightness(.42) grayscale(.25)}
.div-card:hover{color:var(--bone)}
.div-card:hover .div-card__img{opacity:1}
.div-card:hover .div-card__img img{transform:scale(1)}
.div-card__n{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--muted);transition:color .55s}
.div-card:hover .div-card__n{color:var(--brass)}
.div-card h3{font-size:var(--fs-h3);max-width:12ch;font-weight:300}
.div-card__go{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.div-card:hover .div-card__go{opacity:1;transform:none}
.div-card__body{display:grid;gap:.9rem}
.div-card--cta{background:var(--bone-2)}
.div-card--cta:hover{color:var(--bone);background:var(--ink)}
.div-card--cta .div-card__n{color:var(--brass)}

/* =============================================================
   SPLIT / ABOUT
   ============================================================= */
.split{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media (min-width:980px){.split{grid-template-columns:1.05fr 1fr}.split--rev>*:first-child{order:2}}
.split__media{position:relative;overflow:hidden;aspect-ratio:4/5}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.split__media:hover img{transform:scale(1.045)}
.split__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(21,18,15,.08)}
.split__c{display:grid;gap:1.6rem}
.split__c h2{font-size:var(--fs-h2);max-width:15ch;font-weight:300}
.split__c p{color:var(--muted)}
.dark{background:var(--ink);color:var(--bone)}
.dark p,.dark .split__c p{color:rgba(247,243,236,.72)}
.dark .shead p{color:rgba(247,243,236,.7)}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dk);margin-top:.6rem}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats div{background:var(--ink);padding:1.5rem 1.2rem;display:grid;gap:.35rem}
.stats b{font-family:'Fraunces',serif;font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:300;line-height:1}
.stats span{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-lt)}

/* =============================================================
   SHOP TILES
   ============================================================= */
.tiles{display:grid;gap:clamp(1rem,1.6vw,1.5rem)}
@media (min-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;color:var(--bone);isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.25s var(--ease-out);filter:brightness(.68)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(21,18,15,.82),rgba(21,18,15,.04) 62%);transition:opacity .5s}
.tile:hover img{transform:scale(1.07)}
.tile__c{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.3rem,2.2vw,1.9rem);display:grid;gap:.5rem}
.tile h3{font-size:var(--fs-h3);font-weight:300}
.tile__go{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass);opacity:0;transform:translateY(7px);transition:opacity .45s,transform .45s var(--ease)}
.tile:hover .tile__go{opacity:1;transform:none}

/* =============================================================
   PAGE HEADER (inner pages)
   ============================================================= */
.phead{position:relative;background:var(--ink);color:var(--bone);padding:calc(var(--header-h) + clamp(4rem,9vw,8rem)) 0 clamp(3rem,6vw,5.5rem);overflow:hidden;isolation:isolate}
.phead__bg{position:absolute;inset:0;z-index:-2}
.phead__bg img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:grayscale(.4)}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,18,15,.82),rgba(21,18,15,.95))}
.phead h1{font-size:var(--fs-h1);max-width:18ch;font-weight:300;margin-top:1.2rem}
.phead__sub{color:rgba(247,243,236,.72);max-width:58ch;margin-top:1.2rem}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-lt)}
.crumb a:hover{color:var(--bone)}
.crumb i{opacity:.5;font-style:normal}

/* =============================================================
   CATALOGUE
   ============================================================= */
.cat-bar{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:space-between;margin-bottom:2.4rem;
  padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{padding:.5rem 1.05rem;border:1px solid var(--line);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  transition:background .35s,color .35s,border-color .35s;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.search{position:relative;flex:1;min-width:210px;max-width:290px}
.search input{width:100%;padding:.62rem .6rem .62rem 1.9rem;border:0;border-bottom:1px solid var(--line);background:transparent;
  font-size:.9rem;color:var(--ink);transition:border-color .35s}
.search input:focus{outline:0;border-color:var(--ink)}
.search input::placeholder{color:var(--muted-lt)}
.search svg{position:absolute;left:0;top:50%;translate:0 -50%;width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.6}

.grid-f{display:grid;gap:clamp(1rem,1.7vw,1.6rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,228px),1fr))}
.fab{position:relative;display:flex;flex-direction:column;background:var(--bone-2);overflow:hidden;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease)}
.fab:hover{transform:translateY(-5px);box-shadow:0 26px 44px -26px rgba(21,18,15,.45)}
.fab__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bone-3)}
.fab__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.fab:hover .fab__img img{transform:scale(1.07)}
.fab__cat{position:absolute;top:.8rem;left:.8rem;background:rgba(21,18,15,.82);color:var(--bone);backdrop-filter:blur(4px);
  padding:.33rem .7rem;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase}
.fab__c{padding:1.05rem 1.1rem 1.2rem;display:grid;gap:.85rem;flex:1;align-content:space-between}
.fab__c h3{font-size:1.06rem;font-weight:400;letter-spacing:-.005em;line-height:1.22}
.fab__wa{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:color .35s}
.fab__wa svg{width:14px;height:14px;flex:none;fill:currentColor}
.fab:hover .fab__wa{color:var(--clay)}
.dark .fab__wa{color:var(--muted-lt)}
.dark .card:hover .fab__wa{color:var(--brass)}
.cat-empty{padding:4rem 0;text-align:center;color:var(--muted);display:none}
.cat-empty.on{display:block}
.cat-count{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* =============================================================
   LINK LIST (section hubs)
   ============================================================= */
.llist{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:760px){.llist{grid-template-columns:repeat(2,1fr)}}
.lrow{background:var(--bone);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.3rem,2.4vw,2rem) clamp(1.1rem,2vw,1.8rem);position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),padding-left .45s var(--ease)}
.lrow::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateX(-101%);transition:transform .55s var(--ease-out)}
.lrow:hover{color:var(--bone);padding-left:clamp(1.6rem,2.8vw,2.6rem)}
.lrow:hover::after{transform:translateX(0)}
.lrow h3{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:300}
.lrow .ar{flex:none;transition:transform .45s var(--ease);opacity:.45}
.lrow:hover .ar{transform:translateX(6px);opacity:1}
.lrow__n{font-size:var(--fs-xs);letter-spacing:.18em;color:var(--muted);margin-bottom:.4rem;transition:color .45s}
.lrow:hover .lrow__n{color:var(--brass)}

/* =============================================================
   PROSE
   ============================================================= */
.prose{max-width:66ch;display:grid;gap:1.4rem}
.prose p{color:var(--muted);font-size:clamp(1rem,1.1vw,1.12rem)}
.pull{font-family:'Fraunces',serif;font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:300;line-height:1.26;color:var(--ink);max-width:22ch;letter-spacing:-.015em}
.pull__by{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:1rem;display:block}

/* =============================================================
   CONTACT / CARDS
   ============================================================= */
.cards{display:grid;gap:clamp(1rem,1.8vw,1.6rem)}
@media (min-width:760px){.cards--2{grid-template-columns:repeat(2,1fr)}.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);padding:clamp(1.5rem,2.6vw,2.2rem);display:grid;gap:.95rem;align-content:start;
  background:var(--bone);transition:border-color .45s,transform .55s var(--ease-out),box-shadow .5s}
.card:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(21,18,15,.4)}
.card h3{font-size:var(--fs-h3);font-weight:300}
.card p,.card address{color:var(--muted);font-style:normal;font-size:.96rem}
.dark .card{background:transparent;border-color:var(--line-dk)}
.dark .card:hover{border-color:var(--brass)}
.dark .card p,.dark .card address{color:rgba(247,243,236,.7)}
.card__price{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:300}
.meta-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* contact form */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.45rem}
.field label{font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{width:100%;padding:.78rem .2rem;border:0;border-bottom:1px solid var(--line);background:transparent;
  font:inherit;font-size:.98rem;color:var(--ink);transition:border-color .4s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--brass)}
.dark .field input,.dark .field textarea{border-color:var(--line-dk);color:var(--bone)}
.row2{display:grid;gap:1.15rem}
@media (min-width:620px){.row2{grid-template-columns:1fr 1fr}}

/* =============================================================
   CTA BAND
   ============================================================= */
.band{position:relative;background:var(--ink-2);color:var(--bone);overflow:hidden;isolation:isolate}
.band__in{padding:clamp(3.5rem,7vw,6.5rem) 0;display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.band__in{grid-template-columns:1.2fr auto;gap:3rem}}
.band h2{font-size:var(--fs-h2);max-width:16ch;font-weight:300}
.band p{color:rgba(247,243,236,.7);max-width:46ch;margin-top:1rem}
.band__ct{display:flex;flex-wrap:wrap;gap:.9rem}

/* =============================================================
   FOOTER
   ============================================================= */
.ftr{background:var(--ink);color:var(--bone);padding-top:clamp(3.5rem,7vw,6rem)}
.ftr__top{display:grid;gap:3rem;padding-bottom:3.5rem}
@media (min-width:980px){.ftr__top{grid-template-columns:1.15fr 2fr}}
.ftr__brand{display:grid;gap:1.3rem;align-content:start}
.ftr__brand img{height:52px;width:auto;filter:invert(1) brightness(1.9)}
.ftr__brand p{color:rgba(247,243,236,.65);max-width:34ch;font-size:.95rem}
.fmap{display:grid;gap:2rem 1.5rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:680px){.fmap{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1180px){.fmap{grid-template-columns:repeat(4,1fr)}}
.fmap h4{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-family:'Inter',sans-serif;font-weight:500;margin-bottom:.9rem}
.fmap ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fmap a{font-size:.88rem;color:rgba(247,243,236,.68);transition:color .3s}
.fmap a:hover{color:var(--bone)}
.ftr__mid{display:grid;gap:2.2rem;padding:3rem 0;border-top:1px solid var(--line-dk)}
@media (min-width:900px){.ftr__mid{grid-template-columns:1.3fr 1fr;align-items:start;gap:4rem}}
.ftr__mid h3{font-size:clamp(1.3rem,2.1vw,1.8rem);font-weight:300;max-width:16ch}
.nl{display:flex;gap:.6rem;margin-top:1.2rem;max-width:420px}
.nl input{flex:1;padding:.8rem .2rem;border:0;border-bottom:1px solid var(--line-dk);background:transparent;color:var(--bone);font:inherit;font-size:.95rem}
.nl input:focus{outline:0;border-color:var(--brass)}
.nl input::placeholder{color:rgba(247,243,236,.4)}
.nl button{padding:.8rem 1.3rem;border:1px solid var(--line-dk);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;transition:background .4s,color .4s,border-color .4s}
.nl button:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.contact-list{display:grid;gap:1.1rem}
.contact-list div{display:grid;gap:.25rem}
.contact-list span{font-size:var(--fs-xs);letter-spacing:.17em;text-transform:uppercase;color:var(--muted-lt)}
.contact-list a,.contact-list address{color:var(--ink);font-style:normal;font-size:.95rem}
.contact-list a:hover{color:var(--brass)}
.ftr .contact-list a,.ftr .contact-list address,
.dark .contact-list a,.dark .contact-list address{color:rgba(247,243,236,.84)}
.contact-list span{color:var(--muted)}
.ftr .contact-list span,.dark .contact-list span{color:var(--muted-lt)}
.socials{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.4rem}
.socials a{width:40px;height:40px;border:1px solid var(--line-dk);display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s,transform .4s var(--ease)}
.socials a:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);transform:translateY(-3px)}
.socials svg{width:16px;height:16px;fill:currentColor}
.ftr__bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding:1.6rem 0;border-top:1px solid var(--line-dk);font-size:var(--fs-xs);color:var(--muted-lt);letter-spacing:.06em}
.ftr__bot a{color:var(--muted-lt)}
.ftr__bot a:hover{color:var(--bone)}

/* =============================================================
   FLOATING
   ============================================================= */
.wa-fab{position:fixed;right:clamp(1rem,2.4vw,1.8rem);bottom:clamp(1rem,2.4vw,1.8rem);z-index:120;
  width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.55);transition:transform .45s var(--ease),box-shadow .45s}
.wa-fab:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 18px 34px -8px rgba(37,211,102,.7)}
.wa-fab svg{width:27px;height:27px;fill:currentColor}
.top-btn{position:fixed;left:clamp(1rem,2.4vw,1.8rem);bottom:clamp(1rem,2.4vw,1.8rem);z-index:120;width:46px;height:46px;
  border:1px solid var(--line);background:var(--bone);display:grid;place-items:center;opacity:0;visibility:hidden;
  transform:translateY(10px);transition:opacity .45s,transform .45s var(--ease),visibility .45s,background .4s,color .4s}
.top-btn.on{opacity:1;visibility:visible;transform:none}
.top-btn:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.top-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}

/* progress bar */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--brass);width:0;z-index:160;transition:width .12s linear}

/* page fade-in */
.js body{opacity:0}
.js body.ready{opacity:1;transition:opacity .5s var(--ease)}