/* ==========================================================================
   Three Arrows Cabinetry, homepage concept
   Design language: Studio Creative (type, spacing, composition, motion only)
   Palette: the shop's own colors. Their Squarespace theme is a pure greyscale
   system (white, 96.08%, 85.1%, 47.45%, black) and their logo is solid black,
   so this page is monochrome by their brand, not by default. All color on the
   page comes from their own photography.
   ========================================================================== */

:root{
  /* their greyscale, deepened only where contrast demands */
  --ink:        #0f0f0f;   /* their black, one notch softened for large fields */
  --ink-2:      #1b1b1b;
  --ink-3:      #2b2b2b;
  --paper:      #ffffff;   /* their white */
  --haze:       #f5f5f5;   /* their lightAccent, hsl 0 0% 96.08% */
  --line:       #d9d9d9;   /* their accent, hsl 0 0% 85.1% */
  --grey:       #797979;   /* their darkAccent, hsl 0 0% 47.45% */
  --text-body:  #454545;
  --text-muted: #6b6b6b;   /* their grey deepened for 4.5:1 on white and haze */
  --on-dark:        #ffffff;
  --on-dark-body:   rgba(255,255,255,0.86);
  --on-dark-muted:  rgba(255,255,255,0.68);

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --wrap: min(90%, 1280px);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 78px;

  --spring: cubic-bezier(0.34, 1.30, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--text-body);
  font-family:var(--font-body); font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-0.025em; line-height:1.02; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:var(--wrap); margin-inline:auto; }

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--font-body); font-size:0.72rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:clamp(1rem,1.6vw,1.5rem);
}
.eyebrow--light{ color:var(--on-dark-muted); }

/* three rules, taken from the flanking marks in their logo */
.mark{ display:flex; flex-direction:column; gap:5px; width:56px; margin-bottom:clamp(1.4rem,2.4vw,2.2rem); }
.mark i{ display:block; height:2px; background:var(--ink); }
.mark i:nth-child(2){ width:74%; }
.mark i:nth-child(3){ width:48%; }
.mark--light i{ background:var(--on-dark); }

.h2{ font-size:clamp(2rem, 1.2rem + 2.6vw, 3.35rem); }
.h2--wide{ font-size:clamp(2.1rem, 1.1rem + 3.2vw, 3.9rem); }
.h2--big{ font-size:clamp(2.2rem, 1.1rem + 3.6vw, 4.2rem); }

.lede{ font-size:clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem); margin-top:clamp(1.1rem,1.8vw,1.6rem); max-width:56ch; }
.lede--muted{ color:var(--text-muted); }

.btn{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:var(--font-body); font-size:0.92rem; font-weight:600; letter-spacing:0.02em;
  padding:0.95rem 1.5rem; border-radius:999px; text-decoration:none;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .5s var(--spring);
  min-height:48px;
}
.btn__dot{ width:9px; height:9px; border-radius:50%; background:currentColor; transition:transform .5s var(--spring); }
.btn:hover .btn__dot{ transform:scale(1.7); }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--ink-3); border-color:var(--ink-3); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--invert{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--invert:hover{ background:var(--haze); border-color:var(--haze); }
.btn--ghost-light{ border-color:rgba(255,255,255,0.5); color:var(--on-dark); }
.btn--ghost-light:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,0); border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-stuck{ background:rgba(255,255,255,0.93); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
.nav__inner{ width:var(--wrap); margin-inline:auto; display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); }
.nav__brand{ display:block; flex:0 0 auto; }
.nav__logo{ width:auto; height:60px; max-width:200px; object-fit:contain; }
.nav__links{ display:flex; gap:clamp(1rem,2.2vw,2rem); margin-left:auto; }
.nav__links a{
  font-size:0.9rem; font-weight:500; text-decoration:none; color:var(--ink);
  padding-block:0.4rem; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:1.5px;
  background:var(--ink); transition:right .45s var(--ease);
}
.nav__links a:hover::after{ right:0; }
.nav__cta{ padding:0.7rem 1.15rem; font-size:0.85rem; min-height:44px; }

.burger{
  display:none; width:46px; height:46px; margin-left:auto; padding:0;
  background:none; border:0; cursor:pointer; position:relative; z-index:220;
}
.burger span{
  display:block; width:24px; height:1.5px; background:var(--ink); margin:5px auto;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mmenu{
  position:fixed; inset:0; z-index:180; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.mmenu.is-open{ opacity:1; visibility:visible; }
.mmenu__inner{ display:flex; flex-direction:column; gap:0.3rem; text-align:center; padding:2rem; }
.mmenu__inner a{
  font-family:var(--font-display); font-size:clamp(1.8rem,7vw,2.6rem); font-weight:600;
  color:var(--on-dark); text-decoration:none; padding-block:0.45rem; letter-spacing:-0.02em;
}
.mmenu__rule{ display:flex; flex-direction:column; gap:5px; align-items:center; margin:1.6rem 0; }
.mmenu__rule i{ display:block; height:2px; background:rgba(255,255,255,0.5); width:56px; }
.mmenu__rule i:nth-child(2){ width:40px; }
.mmenu__rule i:nth-child(3){ width:26px; }
.mmenu__phone{ font-family:var(--font-body); font-size:1.1rem !important; color:var(--on-dark) !important; }
.mmenu__mail{ font-family:var(--font-body) !important; font-size:0.95rem !important; color:var(--on-dark-body) !important; font-weight:400 !important; }

/* ---------- hero ---------- */
.hero{
  position:relative; padding-top:calc(var(--nav-h) + clamp(2rem,5vw,4.5rem));
  padding-bottom:clamp(3rem,6vw,5.5rem);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 79%, var(--haze) 79%, var(--haze) 100%);
  min-height:100vh; min-height:100svh; display:flex; align-items:center;
}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
  gap:clamp(2rem,4.5vw,4.5rem); align-items:center; width:var(--wrap);
}
.hero__h1{
  font-size:clamp(2.35rem, 1.05rem + 4.1vw, 4.05rem);
  font-stretch:92%;
  line-height:0.99;
  max-width:18ch;
}
.hero__sub{
  margin-top:clamp(1.3rem,2.2vw,1.9rem); max-width:46ch;
  font-size:clamp(1.02rem, 0.97rem + 0.32vw, 1.19rem); color:var(--text-body);
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:clamp(1.8rem,3vw,2.6rem); }
.hero__figure{
  margin:0; position:relative;
  transform:translateY(clamp(0px,2vw,28px));
}
.hero__figure img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border:1px solid var(--line);
}
.hero__figure figcaption{
  position:absolute; left:0; bottom:-2.4rem; max-width:100%;
  font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-muted); font-weight:600;
}

/* ---------- story ---------- */
.story{ background:var(--ink); color:var(--on-dark-body); padding-block:clamp(4.5rem,9vw,8.5rem); }
.story__grid{
  display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
.story__figure{ margin:0; }
.story__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid rgba(255,255,255,0.12); }
.story h2{ color:var(--on-dark); }
.story .lede{ color:var(--on-dark-body); }
.story .lede--muted{ color:var(--on-dark-muted); }
.story__meta{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2rem,3.5vw,3rem); padding-top:clamp(1.4rem,2.4vw,2rem);
  border-top:1px solid rgba(255,255,255,0.18);
}
.story__meta div{ display:flex; flex-direction:column; gap:0.25rem; }
.story__meta span{ font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-muted); }
.story__meta strong{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--on-dark); letter-spacing:-0.01em; }

/* ---------- rooms (signature) ---------- */
.rooms{ background:var(--paper); padding-block:clamp(4.5rem,9vw,8rem); }
.rooms__head{ margin-bottom:clamp(2.5rem,5vw,4rem); max-width:26ch; }
.rooms__body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.rooms__list{ border-top:1px solid var(--line); }
.room{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1rem,2.2vw,1.8rem);
  padding:clamp(1.4rem,2.6vw,2rem) 0 clamp(1.4rem,2.6vw,2rem) 1.25rem;
  border-bottom:1px solid var(--line); cursor:default;
}
.room::before{
  content:""; position:absolute; left:0; top:clamp(1.4rem,2.6vw,2rem); width:3px; height:0;
  background:var(--ink); transition:height .45s var(--ease);
}
.room.is-active::before{ height:calc(100% - clamp(2.8rem,5.2vw,4rem)); }
.room:focus{ outline:2px solid var(--ink); outline-offset:6px; }
.room__num{
  font-family:var(--font-display); font-weight:600; font-size:0.82rem;
  color:var(--text-muted); letter-spacing:0.06em; padding-top:0.45rem;
  transition:color .4s var(--ease);
}
.room h3{
  font-size:clamp(1.35rem, 1rem + 1.2vw, 1.95rem);
}
.room p{ margin-top:0.6rem; color:var(--text-muted); font-size:0.98rem; max-width:44ch; }
.room__inline{ display:none; margin:1.1rem 0 0; grid-column:1 / -1; }
.room__inline img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); }
.room.is-active .room__num{ color:var(--ink); }

.rooms__stage{ display:flex; flex-direction:column; gap:1.1rem; }
.stage__frame{ position:relative; aspect-ratio:4/3.15; }
.stage__bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-top:0.9rem; border-top:1px solid var(--line);
}
.stage__label{ display:flex; align-items:baseline; gap:0.7rem; }
.stage__label #stageIdx{
  font-family:var(--font-display); font-weight:600; font-size:0.78rem;
  color:var(--text-muted); letter-spacing:0.06em;
}
.stage__label #stageName{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--ink); letter-spacing:-0.015em;
}
.stage__hint{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.shot{
  margin:0; position:absolute; inset:0; opacity:0;
  transition:opacity .55s var(--ease), transform .8s var(--ease);
  transform:scale(1.02);
}
.shot.is-active{ opacity:1; transform:scale(1); }
.shot img{ width:100%; height:100%; object-fit:cover; border:1px solid var(--line); }

/* ---------- band ---------- */
.band{ position:relative; background:var(--ink); }
.band__media{ height:clamp(300px, 52vw, 620px); overflow:hidden; }
.band__media img{ width:100%; height:120%; object-fit:cover; will-change:transform; }
.band__caption{ padding-block:clamp(2rem,4vw,3rem); }
.band__caption p{
  font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(1.3rem, 0.9rem + 1.5vw, 2.1rem); color:var(--on-dark); max-width:26ch; line-height:1.12;
}

/* ---------- process ---------- */
.process{ background:var(--haze); padding-block:clamp(4.5rem,9vw,8rem); }
.process__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.steps{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1.6rem,3.5vw,3.2rem) clamp(2rem,5vw,5rem); }
.step{ padding-top:1.6rem; border-top:2px solid var(--ink); }
.step:nth-child(2), .step:nth-child(4){ margin-top:clamp(0rem,3vw,3.5rem); }
.step__num{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; color:var(--grey);
  letter-spacing:-0.04em; margin-bottom:0.8rem;
}
.step h3{ font-size:clamp(1.2rem,0.95rem + 0.7vw,1.55rem); }
.step p{ margin-top:0.7rem; color:var(--text-muted); max-width:42ch; }
.process__note{
  margin-top:clamp(2.5rem,4.5vw,3.5rem); padding-top:clamp(1.4rem,2.4vw,2rem);
  border-top:1px solid var(--line); color:var(--text-muted); max-width:60ch;
}

/* ---------- materials ---------- */
.materials{ background:var(--ink-2); color:var(--on-dark-body); padding-block:clamp(4.5rem,9vw,8rem); }
.materials__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
.materials h2{ color:var(--on-dark); }
.materials .lede{ color:var(--on-dark-body); }
.ticks{ margin-top:clamp(1.8rem,3vw,2.4rem); display:grid; gap:0.85rem; }
.ticks li{
  position:relative; padding-left:1.6rem; color:var(--on-dark-body); font-size:0.99rem;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:0.62em; width:11px; height:2px; background:var(--on-dark);
}
.materials__figure{ margin:0; }
.materials__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid rgba(255,255,255,0.12); }

/* ---------- reviews ---------- */
.reviews{ background:var(--paper); padding-block:clamp(4.5rem,9vw,8rem); }
.reviews__head{ margin-bottom:clamp(2.5rem,5vw,4rem); max-width:30ch; }
.reviews__grid{ columns:3; column-gap:clamp(1.2rem,2.4vw,2rem); }
.quote{
  break-inside:avoid; margin:0 0 clamp(1.2rem,2.4vw,2rem);
  background:var(--haze); border:1px solid var(--line); padding:clamp(1.5rem,2.6vw,2.1rem);
}
.quote--tall{ background:var(--ink); border-color:var(--ink); }
.quote blockquote{
  margin:0; font-family:var(--font-display); font-weight:500; letter-spacing:-0.015em;
  font-size:clamp(1.02rem,0.95rem + 0.35vw,1.2rem); line-height:1.38; color:var(--ink);
}
.quote figcaption{
  margin-top:1.1rem; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:600; color:var(--text-muted);
}
.quote--tall blockquote{ color:var(--on-dark); }
.quote--tall figcaption{ color:var(--on-dark-muted); }

/* ---------- cta ---------- */
.cta{ background:var(--ink); color:var(--on-dark-body); padding-block:clamp(4.5rem,9vw,8rem); }
.cta__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
.cta h2{ color:var(--on-dark); }
.cta .lede{ color:var(--on-dark-body); }
.cta__btns{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:clamp(1.8rem,3vw,2.6rem); }
.cta__figure{ margin:0; }
.cta__figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid rgba(255,255,255,0.12); }

/* ---------- footer ---------- */
.footer{ background:var(--ink-2); color:var(--on-dark-muted); padding-block:clamp(3rem,5vw,4.5rem) 1.5rem; }
.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(255,255,255,0.16);
}
.footer__logo{ width:auto; height:74px; max-width:200px; object-fit:contain; filter:brightness(0) invert(1); }
.footer__brand p{ margin-top:1rem; font-size:0.94rem; max-width:30ch; }
.footer__nav{ display:flex; flex-direction:column; gap:0.15rem; }
.footer__nav a, .footer__contact a{
  color:var(--on-dark-body); text-decoration:none; font-size:0.94rem; padding-block:0.35rem;
  display:inline-block; transition:color .3s var(--ease);
}
.footer__nav a:hover, .footer__contact a:hover{ color:var(--on-dark); }
.footer__contact{ display:flex; flex-direction:column; gap:0.15rem; }
.footer__contact address{ font-style:normal; margin-top:0.7rem; font-size:0.94rem; line-height:1.6; }
.footer__base{
  display:flex; flex-wrap:wrap; gap:0.5rem 2rem; justify-content:space-between;
  padding-top:1.6rem; font-size:0.82rem;
}
.footer__base p{ margin:0; }

/* ---------- reveals ---------- */
html.js .js-rev{ opacity:0; }

/* ---------- 404 ---------- */
.err{
  min-height:100vh; min-height:100svh; display:flex; align-items:center;
  background:var(--ink); color:var(--on-dark-body);
  padding-top:calc(var(--nav-h) + 2rem); padding-bottom:3rem;
}
.err__code{
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(5rem,16vw,11rem); color:rgba(255,255,255,0.34); letter-spacing:-0.05em;
}
.err h1{ color:var(--on-dark); font-size:clamp(2rem,1.2rem + 2.8vw,3.4rem); margin-top:1rem; }
.err .lede{ color:var(--on-dark-body); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .hero__grid{ gap:clamp(1.5rem,3.5vw,3rem); }
  .rooms__body{ grid-template-columns:minmax(0,1fr) minmax(0,0.95fr); }
  .reviews__grid{ columns:2; }
  .footer__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:block; }

  .hero{
    min-height:0; height:auto;
    padding-top:calc(var(--nav-h) + 2.5rem); padding-bottom:3.5rem;
    background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 74%, var(--haze) 74%, var(--haze) 100%);
  }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .hero__h1{ max-width:18ch; }
  .hero__figure{ transform:none; }
  .hero__figure img{ aspect-ratio:4/3; }
  .hero__figure figcaption{ position:static; margin-top:0.7rem; }

  .story__grid{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
  .story__figure{ order:2; }
  .story__copy{ order:1; }

  .rooms__body{ grid-template-columns:minmax(0,1fr); }
  .rooms__stage{ display:none; }
  .room__inline{ display:block; }
  .room::before{ display:none; }
  .room{ padding-left:0; }

  .materials__grid{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
  .cta__grid{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
  .cta__figure img{ aspect-ratio:4/3; }
}

@media (max-width:768px){
  .steps{ grid-template-columns:minmax(0,1fr); }
  .step:nth-child(2), .step:nth-child(4){ margin-top:0; }
  .reviews__grid{ columns:1; }
  .footer__grid{ grid-template-columns:minmax(0,1fr); }
  .footer__nav a, .footer__contact a{ padding-block:0.65rem; }
  .footer__nav{ gap:0; }
  .footer__contact{ gap:0; }
}

@media (max-width:480px){
  .hero{ padding-top:calc(var(--nav-h) + 1.75rem); }
  .nav__logo{ height:42px; }
  .btn{ padding:0.85rem 1.25rem; font-size:0.88rem; }
  .hero__ctas .btn{ width:100%; justify-content:space-between; }
  .cta__btns .btn{ width:100%; justify-content:space-between; }
  .band__media{ height:clamp(240px, 62vw, 340px); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html.js .js-rev{ opacity:1 !important; transform:none !important; }
}