/* =====================================================================
   INHOUSE — Luxury Furniture & Interior Design
   Identity derived from the logo: single teal hue (#17b8a1), house mark.
   Signature device: the "gable" (roofline pitch) reused as marker + clip.
   ===================================================================== */

:root{
  /* — warm grounds (white type lives here, per brief) — */
  --ink:        #14110d;   /* warm near-black */
  --ink-soft:   #1b1712;
  --umber:      #241f17;
  --umber-2:    #2c261d;

  /* — light grounds — */
  --bone:       #f3efe6;   /* warm cream */
  --bone-deep:  #e9e2d4;
  --line-light: #d9d1c2;

  /* — neutrals / text — */
  --paper:      #faf8f3;   /* soft white */
  --stone:      #a89e8c;   /* muted on dark */
  --stone-2:    #7c7464;   /* muted on light */
  --ink-text:   #2a241c;   /* body on bone */

  /* — the brand accent — */
  --teal:       #17b8a1;
  --teal-deep:  #0e8474;
  --teal-glow:  rgba(23,184,161,.16);

  /* — type — */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* — motion — */
  --ease: cubic-bezier(.16,1,.3,1);
  --slow: 1.1s;

  --pad: clamp(5rem, 11vh, 10rem);
  --gut: clamp(1.4rem, 5vw, 6rem);
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:clamp(70px,9vh,94px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--teal); color:#04201c; }

/* shared logo mark strokes */
.mark-svg{ width:100%; height:100%; overflow:visible; }
.mark-ring{ fill:none; stroke:var(--teal); stroke-width:5.4; }
.mark-house{ fill:none; stroke:var(--teal); stroke-width:4.4; stroke-linejoin:round; stroke-linecap:round; }

/* =====================================================================
   TYPOGRAPHY PRIMITIVES
   ===================================================================== */
.display{ font-family:var(--serif); font-weight:300; line-height:.98; letter-spacing:-.01em; }
.display em{ font-style:italic; color:var(--teal); }

.eyebrow{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(.62rem,.78vw,.72rem);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--stone-2);
  display:inline-flex; align-items:center; gap:.85rem;
}
.eyebrow--light{ color:var(--stone); }

/* the gable — roofline pitch, our recurring marker */
.gable{
  width:24px; height:12px; flex:none; background:var(--teal);
  clip-path:polygon(0 100%, 50% 0, 100% 100%, 76% 100%, 50% 36%, 24% 100%);
}

/* line-mask reveal (for serif headlines) */
.line, .vline{ display:block; overflow:hidden; }
.line__in, .vline__in{
  display:block; transform:translateY(112%);
  transition:transform 1.15s var(--ease);
}
.show .line__in, .show .vline__in{ transform:translateY(0); }
.show .line:nth-child(1) .line__in{ transition-delay:.02s; }
.show .line:nth-child(2) .line__in{ transition-delay:.12s; }
.show .line:nth-child(3) .line__in{ transition-delay:.22s; }
.show .vline:nth-child(1) .vline__in{ transition-delay:.02s; }
.show .vline:nth-child(2) .vline__in{ transition-delay:.10s; }
.show .vline:nth-child(3) .vline__in{ transition-delay:.18s; }
.show .vline:nth-child(4) .vline__in{ transition-delay:.26s; }
.show .vline:nth-child(5) .vline__in{ transition-delay:.34s; }

/* generic fade-rise reveal */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  --c:var(--paper);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:500; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase;
  padding:1.15rem 2.2rem; color:var(--c);
  border-radius:2px; overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn span{ position:relative; z-index:1; }
.btn--solid{ background:var(--teal); --c:#062420; }
.btn--solid::before{
  content:""; position:absolute; inset:0; z-index:0; background:var(--paper);
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.btn--solid:hover{ --c:var(--ink); }
.btn--solid:hover::before{ transform:translateY(0); }

.btn--ghost{ border:1px solid rgba(255,255,255,.28); }
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:0; background:var(--paper);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.btn--ghost:hover{ color:var(--ink); border-color:var(--paper); }
.btn--ghost:hover::before{ transform:scaleX(1); }

/* =====================================================================
   SCROLL PROGRESS + INTRO VEIL
   ===================================================================== */
.scroll-rail{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent; }
.scroll-rail__fill{ display:block; height:100%; width:0; background:var(--teal); box-shadow:0 0 18px var(--teal-glow); }

.veil{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .8s ease, visibility .8s ease;
}
.veil.gone{ opacity:0; visibility:hidden; }
.veil__mark{ width:84px; height:84px; }
.veil .mark-ring{ stroke-dasharray:271; stroke-dashoffset:271; animation:draw 1.15s var(--ease) forwards; }
.veil .mark-house{ stroke-dasharray:130; stroke-dashoffset:130; animation:draw 1s var(--ease) .25s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1.3rem,2.4vh,2rem) var(--gut);
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  padding-top:1rem; padding-bottom:1rem;
  background:rgba(18,15,11,.72);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.brand{ display:flex; align-items:center; gap:.7rem; }
.brand__mark{ width:34px; height:34px; flex:none; }
.brand__word{
  font-family:var(--sans); font-weight:500; font-size:1.02rem;
  letter-spacing:.42em; color:var(--paper); padding-left:.42em;
}
.brand__word em{ font-style:normal; color:var(--paper); opacity:.62; }

.nav__links{ display:flex; gap:2.4rem; }
.nav__links a{
  position:relative; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper); opacity:.82; padding:.4rem 0;
  transition:opacity .4s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--teal); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.26); border-radius:2px;
  padding:.78rem 1.35rem; transition:.45s var(--ease);
}
.nav__cta:hover{ background:var(--teal); border-color:var(--teal); color:#062420; }

/* burger */
.burger{ display:none; width:42px; height:42px; background:none; border:none; cursor:pointer; position:relative; }
.burger span{ position:absolute; left:9px; right:9px; height:1.5px; background:var(--paper); transition:.4s var(--ease); }
.burger span:nth-child(1){ top:17px; } .burger span:nth-child(2){ bottom:17px; }
.burger.open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ bottom:20px; transform:rotate(-45deg); }

/* fullscreen menu */
.menu{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gut);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__nav{ display:flex; flex-direction:column; gap:.4rem; }
.menu__link{ display:flex; align-items:baseline; gap:1.2rem; padding:.4rem 0; }
.menu__link i{ font-style:normal; font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; color:var(--teal); width:2rem; }
.menu__link span{ font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,12vw,5rem); line-height:1.04; transition:color .4s; }
.menu__link:hover span{ font-style:italic; color:var(--teal); }
.menu__foot{ display:flex; justify-content:space-between; margin-top:3rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.hero__photo{
  position:absolute; inset:0;
  background-color:var(--umber);
  background-image:
    linear-gradient(180deg, rgba(15,12,9,.30) 0%, rgba(15,12,9,.10) 30%, rgba(15,12,9,.62) 78%, rgba(15,12,9,.92) 100%),
    url("../assets/hero.jpg");
  background-size:cover, cover; background-position:center;
  transform:scale(1.08); opacity:0; animation:heroIn 1.8s var(--ease) .2s forwards;
}
@keyframes heroIn{ to{ opacity:1; transform:scale(1); } }
.hero__shade{ position:absolute; inset:0;
  background:radial-gradient(120% 80% at 18% 90%, rgba(15,12,9,.55), transparent 60%); }

.hero__ghost{
  position:absolute; right:-4vw; top:8%; width:46vw; max-width:640px; height:auto; z-index:1;
  opacity:.10; pointer-events:none;
}
.hero__ghost .mark-house{ stroke:var(--paper); stroke-width:1.2; }

.hero__inner{ position:relative; z-index:2; padding:0 var(--gut) clamp(4.5rem,9vh,8rem); max-width:1500px; width:100%; }
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.2rem,10.5vw,10rem); line-height:.92; letter-spacing:-.015em;
  margin:1.6rem 0 0;
}
.hero__title em{ font-style:italic; color:var(--teal); }
.hero__sub{ max-width:46ch; margin-top:2rem; color:#e6e0d4; font-size:clamp(1rem,1.25vw,1.18rem); font-weight:300; line-height:1.85; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; }

.hero__scroll{
  position:absolute; right:var(--gut); bottom:clamp(2rem,5vh,3.4rem); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--stone);
}
.hero__scroll-line{ position:relative; width:1px; height:64px; background:rgba(255,255,255,.22); overflow:hidden; }
.hero__scroll-line i{ position:absolute; top:-30%; left:0; width:100%; height:40%; background:var(--teal); animation:scrollDown 2.4s var(--ease) infinite; }
@keyframes scrollDown{ 0%{ top:-40%; } 60%,100%{ top:100%; } }

.hero__side{
  position:absolute; left:calc(var(--gut) - .2rem); top:50%; z-index:2;
  transform:rotate(180deg) translateX(50%); transform-origin:left;
  writing-mode:vertical-rl; font-size:.62rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--stone);
}

/* =====================================================================
   ABOUT  (bone ground, asymmetric, overlapping image)
   ===================================================================== */
.about{ background:var(--bone); color:var(--ink-text); padding:var(--pad) var(--gut); position:relative; }
.about__grid{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(2rem,6vw,7rem);
  align-items:center;
}
.about__visual{ position:relative; will-change:transform; }
.about__photo{
  aspect-ratio:4/5; border-radius:3px;
  background-color:var(--bone-deep);
  background-image:
    linear-gradient(180deg, rgba(20,17,13,.04), rgba(20,17,13,.18)),
    url("../assets/about.jpg");
  background-size:cover, cover; background-position:center;
  box-shadow:0 40px 80px -40px rgba(20,17,13,.45);
}
.about__badge{
  position:absolute; right:-26px; bottom:-26px; width:104px; height:104px;
  background:var(--bone); border-radius:50%; padding:22px;
  box-shadow:0 20px 50px -22px rgba(20,17,13,.4);
}
.about__cap{
  position:absolute; left:0; top:-2.2rem; font-size:.64rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--stone-2);
}
.about__head{ font-size:clamp(2.6rem,6.5vw,5.6rem); margin:1.4rem 0 1.8rem; color:var(--ink); }
.about__head em{ color:var(--teal); }
.about__lede p{ font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,2.2vw,1.85rem); line-height:1.4; color:var(--ink); max-width:34ch; }
.about__body p{ margin-top:1.6rem; max-width:52ch; color:var(--ink-text); font-weight:300; font-size:1.04rem; line-height:1.9; }

.about__meta{ display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:2.8rem; padding-top:2rem; border-top:1px solid var(--line-light); }
.about__metaItem{ display:flex; flex-direction:column; gap:.35rem; }
.about__metaItem b{ font-family:var(--serif); font-weight:500; font-size:1.45rem; color:var(--ink); }
.about__metaItem span{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-2); }

/* =====================================================================
   VISION  (cinematic dark, gable-clipped image, large quote)
   ===================================================================== */
.vision{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:var(--pad) var(--gut); background:var(--ink); }
.vision__media{ position:absolute; inset:-10% 0; z-index:0; will-change:transform;
  /* the signature: image enters under a gabled (pitched) edge */
  clip-path:polygon(0 14%, 50% 0, 100% 14%, 100% 100%, 0 100%);
}
.vision__photo{
  position:absolute; inset:0; background-color:var(--umber-2);
  background-image:url("../assets/vision.jpg");
  background-size:cover; background-position:center; transform:scale(1.06);
}
.vision__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(15,12,9,.92) 0%, rgba(15,12,9,.74) 42%, rgba(15,12,9,.30) 100%); }
.vision__inner{ position:relative; z-index:2; max-width:1000px; }
.vision__quote{
  font-family:var(--serif); font-weight:300; font-style:normal;
  font-size:clamp(2rem,5.2vw,4.6rem); line-height:1.08; letter-spacing:-.01em;
  margin:1.8rem 0 0; color:var(--paper);
}
.vision__quote em{ font-style:italic; color:var(--teal); }
.vision__tail{ max-width:50ch; margin-top:2.2rem; color:#d8d2c6; font-weight:300; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.85; }

/* =====================================================================
   INSPIRATION  (staggered editorial gallery — not a uniform grid)
   ===================================================================== */
.insp{ background:var(--bone); color:var(--ink-text); padding:var(--pad) var(--gut); }
.insp__head{ max-width:1400px; margin:0 auto clamp(2.5rem,5vw,4rem); display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; }
.insp__title{ grid-column:1; font-size:clamp(2.6rem,6.5vw,5.4rem); margin-top:1.2rem; color:var(--ink); }
.insp__title em{ color:var(--teal); }
.insp__follow{
  grid-column:2; align-self:end; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.7rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--ink); transition:.45s var(--ease); color:var(--ink);
}
.insp__follow::after{ content:"↗"; transition:transform .4s var(--ease); }
.insp__follow:hover{ color:var(--teal); border-color:var(--teal); }
.insp__follow:hover::after{ transform:translate(3px,-3px); }

.gallery{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:clamp(1rem,2vw,1.8rem);
}
.g{ position:relative; overflow:hidden; border-radius:3px; }
.g__img{ position:absolute; inset:0; background-color:transparent; background-size:cover; background-position:center;
  transform:scale(1.02); transition:transform 1s var(--ease), filter .6s var(--ease); }
.g::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%, rgba(15,12,9,.62)); opacity:0; transition:opacity .55s var(--ease); }
.g figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem 1.5rem;
  transform:translateY(12px); opacity:0; transition:opacity .55s var(--ease), transform .55s var(--ease); color:var(--paper); }
.g figcaption span{ display:block; font-family:var(--serif); font-style:italic; font-size:1.5rem; }
.g figcaption i{ font-style:normal; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); }
.g:hover .g__img{ transform:scale(1.1); }
.g:hover::after{ opacity:1; }
.g:hover figcaption{ opacity:1; transform:translateY(0); }

/* four editorial plates — one tall feature, one wide, two squares.
   Tiles cleanly (no gaps) while staying asymmetric. Warm tonal fallbacks. */
.g--a{ grid-column:1; grid-row:1 / span 2; background:linear-gradient(155deg,#2a2118,#473a2c); }
.g--b{ grid-column:2 / span 2; grid-row:1; aspect-ratio:16/9;  background:linear-gradient(150deg,#c9bfb0,#a59a88); }
.g--c{ grid-column:2; grid-row:2; aspect-ratio:5/4; background:linear-gradient(155deg,#352a1f,#574a3a); }
.g--d{ grid-column:3; grid-row:2; aspect-ratio:5/4; background:linear-gradient(150deg,#1c4640,#2c6961); }

.g1{ background-image:url("../assets/instagram-1.jpg"); }
.g2{ background-image:url("../assets/instagram-2.jpg"); }
.g3{ background-image:url("../assets/instagram-3.jpg"); }
.g4{ background-image:url("../assets/instagram-4.jpg"); }

/* =====================================================================
   CONTACT  (split editorial — two showrooms only)
   ===================================================================== */
.contact{ background:var(--ink); color:var(--paper); padding:var(--pad) var(--gut); }
.contact__grid{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,6vw,6rem); }
.contact__head{ font-size:clamp(2.6rem,6.2vw,5.4rem); margin:1.4rem 0 0; }
.contact__head em{ color:var(--teal); }

.contact__channels{ margin-top:3rem; display:flex; flex-direction:column; }
.channel{ display:flex; align-items:baseline; gap:1.4rem; padding:1.15rem 0; border-top:1px solid rgba(255,255,255,.1); transition:padding-left .45s var(--ease); }
.channel:last-child{ border-bottom:1px solid rgba(255,255,255,.1); }
.channel__k{ width:7rem; flex:none; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }
.channel__v{ font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem); color:var(--paper); transition:color .4s var(--ease); }
.channel:hover{ padding-left:.6rem; }
.channel:hover .channel__v{ color:var(--teal); font-style:italic; }

.contact__locs{ display:flex; flex-direction:column; gap:2.2rem; padding-top:.5rem; }
.loc{ border-top:1px solid rgba(255,255,255,.12); padding-top:1.6rem; }
.loc__no{ font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--teal); }
.loc__name{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; margin:.5rem 0 .9rem; }
.loc__addr{ color:#cfc8ba; font-weight:300; font-size:.98rem; line-height:1.7; }
.loc__link{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper); border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:.4rem; transition:.4s var(--ease); }
.loc__link::after{ content:"→"; transition:transform .4s var(--ease); }
.loc__link:hover{ color:var(--teal); border-color:var(--teal); }
.loc__link:hover::after{ transform:translateX(4px); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{ background:var(--ink-soft); color:var(--paper); padding:clamp(3.5rem,7vh,6rem) var(--gut) 2.4rem; border-top:1px solid rgba(255,255,255,.07); }
.foot__top{ max-width:1400px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding-bottom:clamp(2.5rem,5vh,4rem); }
.brand--foot .brand__mark{ width:40px; height:40px; }
.brand--foot .brand__word{ font-size:1.15rem; }
.foot__tag{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); }
.foot__bottom{ max-width:1400px; margin:0 auto; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.7rem; letter-spacing:.1em; color:var(--stone); }
.foot__bottom a{ transition:color .4s; }
.foot__bottom a:hover{ color:var(--teal); }

/* =====================================================================
   LOCATIONS  (bone ground — refined showroom directory)
   ===================================================================== */
.locs{ background:var(--bone); color:var(--ink-text); padding:var(--pad) var(--gut); position:relative; overflow:hidden; }
.locs__head{ position:relative; z-index:1; max-width:1400px; margin:0 auto clamp(2.4rem,5vw,3.6rem); }
.locs__title{ font-size:clamp(2.6rem,6.5vw,5.2rem); margin-top:1.2rem; color:var(--ink); }
.locs__title em{ color:var(--teal); }
.locs__intro{ margin-top:1.4rem; max-width:44ch; color:var(--ink-text); font-weight:300; font-size:1.04rem; line-height:1.85; }
.locs__grid{ position:relative; z-index:1; max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); }
.locs__ghost{ position:absolute; right:-7vw; bottom:-10%; width:42vw; max-width:540px; height:auto; z-index:0; opacity:.05; pointer-events:none; }
.locs__ghost .mark-ring, .locs__ghost .mark-house{ stroke:var(--ink); stroke-width:1.4; }

/* light-ground variant of the location card */
.loc--light{ border-top-color:var(--line-light); }
.loc--light .loc__name{ color:var(--ink); }
.loc--light .loc__addr{ color:var(--ink-text); }
.loc--light .loc__link{ color:var(--ink); border-color:rgba(20,17,13,.28); }
.loc--light .loc__link:hover{ color:var(--teal); border-color:var(--teal); }

/* =====================================================================
   FLAGSHIP  (the showroom building — signature dark moment)
   ===================================================================== */
.flagship{
  position:relative; overflow:hidden;
  color:var(--paper); padding:var(--pad) var(--gut);
  background:linear-gradient(180deg, #1b1611 0%, #15110c 100%);
}
.flagship__grid{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(2.2rem,6vw,6rem); align-items:center; }
.flagship__visual{ position:relative; will-change:transform; }
.flagship__photo{
  aspect-ratio:4/5; border-radius:3px; background-color:#0d0b08;
  background-image:linear-gradient(180deg, rgba(15,12,9,.05), rgba(15,12,9,.26)), url("../assets/building.jpg");
  background-size:cover, cover; background-position:center;
  box-shadow:0 40px 90px -52px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.05);
}
.flagship__cap{ position:absolute; left:0; bottom:-2.1rem; font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--stone); }
.flagship__title{ font-size:clamp(2.6rem,6.2vw,5.2rem); margin:1.4rem 0 0; color:var(--paper); }
.flagship__title em{ color:var(--teal); }
.flagship__text{ max-width:46ch; margin-top:1.9rem; color:#d8d2c6; font-weight:300; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.85; }
.flagship__meta{ display:flex; flex-wrap:wrap; gap:2.6rem; margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.1); }
.flagship__metaItem{ display:flex; flex-direction:column; gap:.35rem; }
.flagship__metaItem b{ font-family:var(--serif); font-weight:500; font-size:1.4rem; color:var(--paper); }
.flagship__metaItem span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }

/* contact right column (the visit prompt that points up to Locations) */
.contact__aside{ padding-top:.5rem; }
.contact__visit{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.12; color:var(--paper); margin:1.1rem 0 1.3rem; }
.contact__visit em{ font-style:italic; color:var(--teal); }
.contact__aside p{ color:#cfc8ba; font-weight:300; max-width:36ch; line-height:1.8; }
.contact__up{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper); border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:.4rem; transition:.4s var(--ease); }
.contact__up::after{ content:"↑"; transition:transform .4s var(--ease); }
.contact__up:hover{ color:var(--teal); border-color:var(--teal); }
.contact__up:hover::after{ transform:translateY(-3px); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:block; }
  .about__grid{ grid-template-columns:1fr; gap:3rem; }
  .about__visual{ max-width:460px; }
  .contact__grid{ grid-template-columns:1fr; }
  .insp__head{ grid-template-columns:1fr; align-items:start; }
  .insp__follow{ grid-column:1; justify-self:start; }
  .hero__side{ display:none; }
  .locs__grid{ grid-template-columns:1fr; gap:2.6rem; }
  .flagship__grid{ grid-template-columns:1fr; gap:3rem; }
  .flagship__visual{ max-width:460px; }
  .flagship__cap{ position:static; display:block; margin-top:1.3rem; }
}

@media (max-width:760px){
  :root{ --pad:clamp(4rem,9vh,6rem); }
  .hero{ align-items:center; }
  .hero__inner{ padding-bottom:0; padding-top:7rem; }
  .hero__scroll{ display:none; }
  .hero__ghost{ width:80vw; right:-16vw; top:auto; bottom:0; opacity:.05; }
  .about__badge{ width:78px; height:78px; right:-14px; bottom:-14px; padding:16px; }
  .vision__media{ clip-path:polygon(0 8%, 50% 0, 100% 8%, 100% 100%, 0 100%); }

  /* gallery → stacked editorial plates on small screens */
  .gallery{ grid-template-columns:1fr 1fr; }
  .g--a{ grid-column:1 / span 2; grid-row:auto; aspect-ratio:4/5; }
  .g--b{ grid-column:1 / span 2; grid-row:auto; aspect-ratio:16/10; }
  .g--c{ grid-column:1; grid-row:auto; aspect-ratio:1/1; }
  .g--d{ grid-column:2; grid-row:auto; aspect-ratio:1/1; }
  .g figcaption{ opacity:1; transform:none; } /* captions always shown on touch */
  .g::after{ opacity:.85; }

  .channel__k{ width:5.4rem; }
}

@media (max-width:420px){
  .btn{ width:100%; }
  .hero__actions{ gap:.7rem; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .line__in,.vline__in{ transform:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__photo{ opacity:1 !important; transform:none !important; }
  .veil{ display:none; }
}