/* ==========================================================================
   VIGOR MFG — atelier design system
   Editorial serif · champagne gold · warm cream · near-black
   ========================================================================== */

:root{
  /* Surfaces */
  --ink:        #16130f;
  --ink-2:      #1e1a15;
  --ink-3:      #2a241c;
  --paper:      #ffffff;
  --paper-2:    #f4f1ea;   /* alternating band — light enough to read on */
  --paper-3:    #e8e1d3;

  /* Champagne gold */
  --gold:       #b8912f;   /* darker: passes contrast on light backgrounds */
  --gold-2:     #e9c96e;   /* light gold — for dark backgrounds only */
  --gold-3:     #856815;   /* deep gold — small text on light backgrounds */
  --gold-wash:  #f8f1df;

  /* Text — all tested against --paper and --paper-2 */
  --text:       #1a1610;
  --muted:      #554d41;   /* 8.4:1 on the beige band */
  --t-inv:      #faf7f0;
  --t-inv-2:    #cdc4b4;

  /* Hairlines */
  --hair:       rgba(26,22,16,.18);
  --hair-soft:  rgba(26,22,16,.09);
  --hair-inv:   rgba(250,247,240,.22);
  --hair-gold:  rgba(184,145,47,.5);

  --maxw:       1360px;
  --gut:        clamp(20px, 4vw, 56px);

  --serif:      'Cormorant Garamond', 'Times New Roman', serif;
  --sans:       'Manrope', system-ui, -apple-system, sans-serif;

  --ease:       cubic-bezier(.25,.46,.2,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.8;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
img,svg,video,iframe{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color .3s var(--ease), opacity .3s var(--ease); }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1.2em; }
body.nav-open{ overflow:hidden; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0 0 .45em;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:clamp(3.1rem, 1.6rem + 6vw, 7rem); }
h2{ font-size:clamp(2.3rem, 1.4rem + 3.4vw, 4.4rem); }
h3{ font-size:clamp(1.45rem, 1.2rem + 1vw, 2rem); }
h4{ font-size:1.2rem; }
h1 em, h2 em, h3 em{ font-style:italic; font-weight:400; color:var(--gold-3); }

.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-link{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--gold); color:var(--ink); padding:12px 22px; }
.skip-link:focus{ left:8px; top:8px; }

/* --- Layout ---------------------------------------------------------------- */
.wrap{ width:min(100% - (var(--gut) * 2), var(--maxw)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - (var(--gut) * 2), 880px); margin-inline:auto; }

.section{ padding:clamp(88px, 11vw, 170px) 0; }
.section--tight{ padding:clamp(56px, 7vw, 104px) 0; }
.section--beige{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:var(--t-inv); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--t-inv); }
.section--dark p{ color:var(--t-inv-2); }
.section--dark h1 em,.section--dark h2 em{ color:var(--gold-2); }

/* --- Eyebrow --------------------------------------------------------------- */
.kicker{
  display:flex; align-items:center; gap:18px;
  font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-3);
  margin:0 0 2em;
}
.kicker::before{ content:""; width:44px; height:1px; background:var(--gold); flex:none; }
.kicker--light{ color:var(--gold-2); }
.kicker--center{ justify-content:center; }
.kicker--center::after{ content:""; width:44px; height:1px; background:var(--gold); flex:none; }

.section-head{ max-width:820px; margin-bottom:clamp(48px, 6vw, 88px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.lead{
  font-family:var(--serif);
  font-size:clamp(1.2rem, 1.08rem + .6vw, 1.55rem);
  font-weight:500; font-style:italic;
  line-height:1.55;
  color:#4a4239;
}
.section--dark .lead{ color:var(--t-inv-2); }
.body-copy{ font-size:1.05rem; line-height:1.85; color:#413a31; max-width:62ch; }
.section--dark .body-copy{ color:var(--t-inv-2); }

/* --- Buttons ---------------------------------------------------------------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--sans);
  font-size:.79rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; text-indent:.13em;
  padding:21px 46px;
  border:1px solid var(--ink);
  background:transparent; color:var(--ink);
  cursor:pointer;
  transition:color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* Fill that rises from the bottom */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
/* Sheen that sweeps across on hover — the gold catching the light */
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg);
  transition:left .75s var(--ease);
}
.btn:hover{ color:var(--paper); }
.btn:hover::before{ transform:scaleY(1); }
.btn:hover::after{ left:120%; }
.btn:active{ transform:translateY(1px); }

/* Champagne — the primary action */
.btn--gold{
  border-color:transparent;
  background:linear-gradient(135deg, #a9832a 0%, #d8b357 30%, #b8912f 55%, #e4c675 78%, #a9832a 100%);
  color:#1a1610;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 30px rgba(184,145,47,.24);
}
.btn--gold::before{ background:var(--ink); }
.btn--gold:hover{ color:var(--gold-2); box-shadow:0 14px 38px rgba(26,22,16,.3); }

/* On dark backgrounds */
.btn--light{ border-color:rgba(250,247,240,.42); color:var(--t-inv); }
.btn--light::before{ background:var(--paper); }
.btn--light:hover{ color:var(--ink); border-color:var(--paper); }

.btn--goldline{ border-color:var(--hair-gold); color:var(--gold-2); }
.btn--goldline::before{ background:var(--gold); }
.btn--goldline:hover{ color:var(--ink); border-color:var(--gold); }

.btn--sm{ padding:15px 30px; font-size:.71rem; }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.btn-row--center{ justify-content:center; }

/* Underlined text link */
.tlink{
  display:inline-flex; align-items:baseline; gap:14px;
  font-size:.77rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-3);
  padding-bottom:6px;
  border-bottom:1px solid var(--hair-gold);
  transition:border-color .35s var(--ease), color .35s var(--ease), letter-spacing .35s var(--ease);
}
.tlink:hover{ color:var(--ink); border-color:var(--ink); letter-spacing:.18em; }
.section--dark .tlink:hover,
.tlink--light:hover{ color:var(--t-inv); border-color:var(--t-inv); }
.tlink--light{ color:var(--gold-2); }

/* ==========================================================================
   HEADER — transparent over the hero, solid after scroll
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:400;
  border-bottom:1px solid var(--hair-inv);
  background:transparent;
  transform:translateY(0);
  transition:transform .45s var(--ease), background .45s var(--ease);
}
/* Scrolling down — slides out of the way */
.site-header.is-hidden{ transform:translateY(-100%); }
/* Away from the very top — needs its own background to stay readable */
.site-header.is-scrolled{
  background:rgba(22,19,15,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-header__inner{
  display:flex; align-items:center; gap:30px;
  min-height:clamp(76px, 9vw, 96px);
}

.brand{
  display:flex; align-items:center; gap:14px;
  margin-right:auto; z-index:600; position:relative;
  color:var(--t-inv);
}
.brand__mark{
  width:clamp(34px, 3.4vw, 42px); height:clamp(34px, 3.4vw, 42px);
  flex:none; color:var(--gold-2);
  transition:color .4s var(--ease), transform .6s var(--ease);
}
.brand:hover .brand__mark{ color:var(--gold); transform:translateY(-2px); }
.brand__word{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem);
  letter-spacing:.18em; text-indent:.18em; text-transform:uppercase;
  color:currentColor;
}
.brand__sub{
  font-size:.55rem; font-weight:500; letter-spacing:.18em; text-indent:.18em;
  text-transform:uppercase; color:var(--gold-2); margin-top:8px;
}
.brand--footer{ color:var(--t-inv); margin-bottom:22px; }
.brand--footer .brand__mark{ width:46px; height:46px; }
.brand--footer .brand__name{ font-size:1.6rem; }

.nav{ display:flex; align-items:center; gap:44px; }
.nav__list{ display:flex; align-items:center; gap:38px; }
.nav__list a{
  position:relative;
  font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--t-inv-2); padding:10px 0;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--gold-2); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__list a:hover,.nav__list a.is-active{ color:var(--t-inv); }
.nav__list a:hover::after,.nav__list a.is-active::after{ transform:scaleX(1); }

.nav__cta{
  font-size:.89rem; letter-spacing:.2em; text-indent:.2em;
  padding:15px 30px;
}

.nav-toggle{
  display:none; z-index:600; position:relative;
  width:48px; height:48px; background:transparent;
  border:1px solid var(--hair-inv); border-radius:0; cursor:pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  display:block; width:20px; height:1px; background:var(--t-inv);
  margin-inline:auto; transition:transform .3s var(--ease), opacity .25s;
}
.nav-toggle__bars::before,.nav-toggle__bars::after{ content:""; position:relative; }
.nav-toggle__bars::before{ top:-7px; }
.nav-toggle__bars::after{ top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1080px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; top:0; left:0; width:100%;
    height:100vh; height:100dvh; z-index:450;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0;
    background:#16130f;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .45s var(--ease), visibility .45s var(--ease);
  }
  .nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
  .nav__list{ flex-direction:column; align-items:center; gap:0; }
  .nav__list a{
    display:block; padding:16px 0;
    font-family:var(--serif); font-size:clamp(1.8rem, 6vw, 2.6rem);
    font-weight:400; letter-spacing:.08em; text-transform:none;
  }
  .nav__list a::after{ bottom:10px; }
  .nav__cta{ margin-top:40px; }
}

/* ==========================================================================
   HERO — full-bleed film
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:var(--ink);
  color:var(--t-inv);
}

.hero__media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero__media video,
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
/* Sized to cover the hero box at the video's native 16:9 ratio — no extra
   zoom beyond what's needed to fill the box, so the original framing of
   the film is preserved. */
.hero__media iframe{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw;
  min-height:100%; min-width:177.78vh;
  transform:translate(-50%,-50%);
  border:0; pointer-events:none;
}

/* Poster held over the player until playback is confirmed */
.hero__poster{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  opacity:1; transition:opacity 1.1s var(--ease);
}
.hero__poster.is-hidden{ opacity:0; }

/* Transparent shield: no click ever reaches the player */
.hero__shield{ position:absolute; inset:0; z-index:1; display:block; }
/* Light scrim — only enough shading at the edges to keep the type readable,
   so the film itself stays bright and visible. */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(22,19,15,.34) 0%, transparent 26%, transparent 58%, rgba(22,19,15,.72) 100%);
}

.hero__inner{
  position:relative; z-index:2;
  padding:0 0 clamp(64px, 9vh, 110px);
}
.hero__eyebrow{
  display:flex; align-items:center; gap:20px;
  font-size:.89rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:1.6em;
  text-shadow:0 1px 14px rgba(22,19,15,.6);
}
.hero__eyebrow::before{ content:""; width:52px; height:1px; background:var(--gold); }

/* Kept deliberately small — the film is the hero, not the type. */
.hero h1{
  color:var(--t-inv); max-width:16ch; margin-bottom:.4em;
  font-size:clamp(2.1rem, 1.3rem + 3vw, 3.9rem);
  text-shadow:0 2px 26px rgba(22,19,15,.55);
}
.hero .btn-row{ margin-top:8px; }

/* Sound toggle */
.hero__sound{
  position:absolute; right:var(--gut); bottom:clamp(120px,16vh,170px); z-index:3;
  display:flex; align-items:center; gap:12px;
  padding:13px 22px;
  background:transparent;
  border:1px solid var(--hair-inv);
  color:var(--t-inv);
  font-family:var(--sans); font-size:.88rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; text-indent:.34em;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.hero__sound:hover{ border-color:var(--gold-2); color:var(--gold-2); }
.hero__sound svg{ width:14px; height:14px; }
.hero__sound .icon-off{ display:none; }
.hero__sound.is-on .icon-on{ display:none; }
.hero__sound.is-on .icon-off{ display:block; }
@media (max-width:820px){
  .hero__sound{ display:none; }
  /* A 16:9 film cropped to a portrait phone shows a blurry centre slice —
     the still photograph reads far better, so the frame is swapped out. */
  .hero__media iframe{ display:none; }
  .hero__poster{ opacity:1 !important; }
  .hero{ min-height:88svh; }
}

/* ==========================================================================
   HERO TEXT — heading + CTAs, sits below the film as its own dark band
   ========================================================================== */
.hero-text{ padding:clamp(56px, 7vw, 90px) 0 clamp(40px, 5vw, 64px); }
.hero-text .hero__eyebrow{ margin-bottom:1.6em; }
.hero-text h1{ max-width:16ch; margin-bottom:.4em; text-shadow:none; }

/* ==========================================================================
   BOOKING BAR — sits below the hero, no overlap
   ========================================================================== */
.bookbar{ position:relative; z-index:10; margin-top:0; }
.bookbar__card{
  display:grid; grid-template-columns:1.1fr 1.1fr 1fr auto;
  background:var(--ink-2);
  border:1px solid rgba(243,239,231,.1);
  box-shadow:0 40px 90px rgba(19,17,16,.35);
}
.bookbar__cell{
  padding:26px 30px;
  border-right:1px solid var(--hair-inv);
  display:flex; flex-direction:column; gap:9px;
}
.bookbar__cell label{
  font-size:.79rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2);
}
.bookbar__cell select,
.bookbar__cell input{
  appearance:none;
  width:100%;
  background:transparent; border:0; padding:0;
  font-family:var(--serif); font-size:1.25rem; font-weight:400;
  color:var(--t-inv);
  cursor:pointer;
}
.bookbar__cell select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4b876' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; background-size:11px;
  padding-right:26px;
}
.bookbar__cell select:focus,.bookbar__cell input:focus{ outline:none; }
.bookbar__cell option{ background:var(--ink-2); color:var(--t-inv); font-family:var(--sans); font-size:.95rem; }
.bookbar__cell input::placeholder{ color:rgba(243,239,231,.4); }

.bookbar__submit{
  display:flex; align-items:center; justify-content:center;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--sans); font-size:.77rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; text-indent:.34em;
  padding:26px 46px;
  border:0; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.bookbar__submit:hover{ background:var(--gold-2); }

@media (max-width:980px){
  .bookbar{ margin-top:0; }
  .bookbar__card{ grid-template-columns:1fr 1fr; border-left:0; border-right:0; }
  .bookbar__cell:nth-child(2){ border-right:0; }
  .bookbar__cell{ border-bottom:1px solid var(--hair-inv); }
  .bookbar__submit{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .bookbar__card{ grid-template-columns:1fr; }
  .bookbar__cell{ border-right:0; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--hair);
  padding:clamp(22px, 3vw, 34px) 0;
  background:var(--paper);
}
.marquee__track{
  display:flex; gap:0; width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee__track span{
  display:flex; align-items:center; gap:clamp(28px, 4vw, 56px);
  padding-right:clamp(28px, 4vw, 56px);
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  color:var(--ink);
  white-space:nowrap;
}
.marquee__track span::after{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--gold); flex:none;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ==========================================================================
   SYSTEMS INDEX — editorial rows, each with its own photo on the left
   ========================================================================== */
.sys-index{ border-top:1px solid var(--hair); }

.sys-row{
  position:relative;
  display:grid;
  grid-template-columns:132px 92px 1.15fr 1fr auto;
  align-items:center; gap:clamp(18px, 2.6vw, 42px);
  padding:clamp(18px, 2.2vw, 26px) clamp(8px, 1.5vw, 24px);
  border-bottom:1px solid var(--hair);
  transition:padding-left .45s var(--ease);
  isolation:isolate;
}
.sys-row::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--paper-2);
  transform:scaleY(0); transform-origin:center;
  transition:transform .45s var(--ease);
}
.sys-row:hover{ padding-left:clamp(20px, 2.5vw, 40px); }
.sys-row:hover::before{ transform:scaleY(1); }

.sys-row__thumb{
  display:block; aspect-ratio:4 / 3; overflow:hidden;
  background:var(--ink-2);
}
.sys-row__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.sys-row:hover .sys-row__thumb img{ transform:scale(1.08); }

.sys-row__num{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem, .95rem + .5vw, 1.35rem);
  color:var(--gold-3);
}
.sys-row__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem, 1.15rem + 2vw, 2.9rem);
  line-height:1.05; color:var(--ink);
}
.sys-row__tag{ font-size:.94rem; color:var(--muted); max-width:38ch; line-height:1.6; }

.sys-row__go{
  width:60px; height:60px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--hair);
  border-radius:50%;
  color:var(--ink);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.sys-row:hover .sys-row__go{ background:var(--ink); color:var(--gold-2); border-color:var(--ink); transform:rotate(-45deg); }
.sys-row__go svg{ width:20px; height:20px; }

@media (max-width:1080px){
  .sys-row{ grid-template-columns:110px 1fr auto; row-gap:4px; }
  .sys-row__thumb{ grid-row:1 / 3; }
  .sys-row__num{ grid-column:2; font-size:.95rem; }
  .sys-row__name{ grid-column:2; }
  .sys-row__tag{ display:none; }
  .sys-row__go{ grid-column:3; grid-row:1 / 3; width:52px; height:52px; }
}
@media (max-width:520px){
  .sys-row{ grid-template-columns:84px 1fr; }
  .sys-row__go{ display:none; }
}

/* ==========================================================================
   FINISH LIBRARY
   ========================================================================== */
.fin-strip{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--hair-inv); border-left:1px solid var(--hair-inv);
}
.fin{ border-right:1px solid var(--hair-inv); border-bottom:1px solid var(--hair-inv); }
@media (max-width:980px){ .fin-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .fin-strip{ grid-template-columns:1fr; } }

.fin{
  position:relative;
  background:var(--ink-2);
  padding:0;
  overflow:hidden;
}
.fin__chip{
  height:clamp(200px, 26vw, 320px);
  position:relative;
  transition:height .5s var(--ease);
}
.fin__chip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.3) 0%, transparent 30%, transparent 66%, rgba(255,255,255,.12) 100%);
}
.fin__body{ padding:26px 26px 30px; }
.fin__code{
  font-size:.79rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:10px;
}
.fin h3{ color:var(--t-inv); font-size:1.5rem; margin-bottom:.4em; }
.fin p{ font-size:.96rem; line-height:1.7; color:var(--t-inv-2); margin:0; }
.fin__pairs{
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--hair-inv);
  font-family:var(--serif); font-style:italic; font-size:.95rem;
  color:var(--gold-2);
}

/* Light variant (finishes page) */
.fin--light{ background:var(--paper); }
.fin--light h3{ color:var(--ink); }
.fin--light p{ color:var(--muted); }
.fin--light .fin__pairs{ border-color:var(--hair); color:var(--gold-3); }
.fin-strip--light{ border-top-color:var(--hair); border-left-color:var(--hair); }
.fin-strip--light .fin{ border-right-color:var(--hair); border-bottom-color:var(--hair); }

/* ==========================================================================
   SPLIT SECTIONS + FRAMES
   ========================================================================== */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(44px, 6vw, 110px); align-items:center;
}
.split--flip .split__media{ order:2; }
@media (max-width:920px){
  .split{ grid-template-columns:1fr; }
  .split--flip .split__media{ order:0; }
}

.frame{
  position:relative;
  aspect-ratio:4 / 5;
  background:var(--ink-2);
  overflow:hidden;
}
.frame--wide{ aspect-ratio:16 / 10; }
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.frame:hover img{ transform:scale(1.045); }
.frame::after{
  content:""; position:absolute; inset:18px;
  border:1px solid rgba(212,184,118,.35); pointer-events:none;
}

.ph{
  position:absolute; inset:0;
  display:grid; place-content:center; place-items:center; gap:18px;
  background:
    radial-gradient(70% 60% at 50% 32%, rgba(179,146,76,.16), transparent 72%),
    linear-gradient(155deg, var(--ink-2) 0%, var(--ink-3) 100%);
  color:rgba(212,184,118,.6);
  text-align:center; padding:28px;
}
.ph svg{ width:38px; height:38px; opacity:.7; }
.ph span{
  font-family:var(--serif); font-style:italic;
  font-size:1.05rem; letter-spacing:.04em; color:rgba(243,239,231,.55);
}

/* Spec + feature lists */
.spec-list{ display:grid; margin:0; border-top:1px solid var(--hair); }
.spec-list .row{
  display:flex; justify-content:space-between; gap:26px;
  padding:17px 2px; border-bottom:1px solid var(--hair);
  font-size:.96rem;
}
.spec-list dt{ color:var(--muted); }
.spec-list dd{ margin:0; font-family:var(--sans); font-size:.97rem; font-weight:600; color:var(--text); text-align:right; }
.section--dark .spec-list{ border-color:var(--hair-inv); }
.section--dark .spec-list .row{ border-color:var(--hair-inv); }
.section--dark .spec-list dt{ color:var(--t-inv-2); }
.section--dark .spec-list dd{ color:var(--gold-2); }

.feat-list{ display:grid; gap:15px; margin-top:28px; }
.feat-list li{
  position:relative; padding-left:34px;
  font-size:1rem; line-height:1.7; color:#413a31;
}
.feat-list li::before{
  content:""; position:absolute; left:0; top:.75em;
  width:18px; height:1px; background:var(--gold);
}
.section--dark .feat-list li{ color:var(--t-inv-2); }

/* ==========================================================================
   MODEL SLIDER — every design inside a system, as crossfading slides
   ========================================================================== */
.slider{
  position:relative;
  background:var(--ink-2);
  user-select:none;
  touch-action:pan-y;
}
.slider__track{
  position:relative;
  aspect-ratio:4 / 5;
  overflow:hidden;
}
.slider__slide{
  position:absolute; inset:0; margin:0;
  opacity:0; transform:scale(1.035);
  transition:opacity .9s var(--ease), transform 1.4s var(--ease);
  pointer-events:none;
}
.slider__slide.is-active{ opacity:1; transform:scale(1); pointer-events:auto; }
.slider__slide img{ width:100%; height:100%; object-fit:cover; }

/* Caption over the lower edge of the photo */
.slider__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:86px 88px 28px;
  background:linear-gradient(to top, rgba(22,19,15,.9), rgba(22,19,15,.5) 45%, transparent);
  color:#fff;
  font-family:var(--serif); font-size:clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
  line-height:1.25;
}

/* --- Arrows: one on the left, one on the right, over the image ------------ */
.slider__arrow{
  position:absolute; top:50%; z-index:3;
  width:clamp(48px, 4.6vw, 60px); height:clamp(48px, 4.6vw, 60px);
  transform:translateY(-50%);
  display:grid; place-items:center;
  background:rgba(22,19,15,.45);
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  color:#fff; cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.slider__arrow--prev{ left:clamp(12px, 1.6vw, 22px); }
.slider__arrow--next{ right:clamp(12px, 1.6vw, 22px); }
.slider__arrow:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.slider__arrow:active{ transform:translateY(-50%) scale(.94); }
.slider__arrow svg{ width:23px; height:23px; }

/* Control bar under the photo */
.slider__ui{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 4px 0;
}
.slider__dots{ display:flex; gap:9px; flex-wrap:wrap; }
.slider__dots button{
  width:28px; height:3px; padding:0;
  background:var(--hair); border:0; cursor:pointer;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.slider__dots button:hover{ background:var(--gold); }
.slider__dots button.is-active{ background:var(--gold); width:44px; }

.slider__counter{
  font-family:var(--serif); font-style:italic; font-size:1.08rem;
  color:var(--muted); white-space:nowrap;
}

/* ==========================================================================
   SYSTEMS PAGE — jump nav, families, construction detail, variants
   ========================================================================== */
.sysnav{
  position:sticky; top:0; z-index:90;
  background:rgba(253,252,250,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.sysnav__inner{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; }
.sysnav__inner::-webkit-scrollbar{ display:none; }
.sysnav a{
  display:flex; align-items:baseline; gap:10px;
  padding:18px 26px 16px; white-space:nowrap;
  border-bottom:1px solid transparent; margin-bottom:-1px;
  color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.sysnav a:first-child{ padding-left:0; }
.sysnav a:hover{ color:var(--ink); border-color:var(--gold); }
.sysnav__num{ font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--gold-3); }
.sysnav__name{ font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }

/* --- Front materials (dark section) --------------------------------------- */
.mat{
  padding-bottom:clamp(44px, 5.5vw, 72px);
  margin-bottom:clamp(44px, 5.5vw, 72px);
  border-bottom:1px solid var(--hair-inv);
}
.mat:last-of-type{ border-bottom:0; margin-bottom:0; padding-bottom:0; }

.mat__intro{
  display:grid; grid-template-columns:300px 1fr;
  gap:clamp(24px, 3.5vw, 48px); align-items:center;
  margin-bottom:clamp(26px, 3.5vw, 40px);
}
@media (max-width:760px){ .mat__intro{ grid-template-columns:1fr; } }

.mat__hero{ aspect-ratio:4 / 3; overflow:hidden; background:var(--ink-2); }
.mat__hero img{ width:100%; height:100%; object-fit:cover; }

.mat__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  color:var(--t-inv); margin:0 0 .3em;
}
.mat__note{ font-size:1rem; color:var(--t-inv-2); margin:0 0 .8em; max-width:52ch; }
.mat__count{
  font-size:.73rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-2); margin:0;
}

.mat__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:20px 16px; }
.mat__swatch{ margin:0; }
.mat__chip{
  display:block; aspect-ratio:1 / 1; overflow:hidden;
  border:1px solid var(--hair-inv);
  transition:border-color .35s var(--ease);
}
.mat__chip img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.mat__swatch:hover .mat__chip{ border-color:var(--gold-2); }
.mat__swatch:hover .mat__chip img{ transform:scale(1.07); }
.mat__swatch figcaption{
  margin-top:11px; font-size:.86rem; color:var(--t-inv-2); line-height:1.5;
}

/* Auto-height frame used when a family has a single photo */
.frame--auto{ aspect-ratio:auto; }
.frame--auto img{ height:auto; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.filter-bar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  margin-bottom:clamp(44px, 6vw, 72px);
  border-block:1px solid var(--hair);
}
.filter-bar button{
  font-family:var(--sans); font-size:.89rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-indent:.2em;
  padding:20px 26px;
  background:transparent; color:var(--muted);
  border:0; border-bottom:1px solid transparent; margin-bottom:-1px;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.filter-bar button:hover{ color:var(--ink); }
.filter-bar button.is-active{ color:var(--ink); border-color:var(--gold); }

/* ==========================================================================
   RECENT WORK — offset horizontal rail
   ========================================================================== */
.work{ overflow:hidden; }

.work__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  margin-bottom:clamp(38px, 5vw, 64px);
}
.work__head h2{ margin:0; }
.work__nav{ display:flex; align-items:center; gap:14px; }
.work__hint{
  font-size:.73rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-right:6px;
}
.work__arrow{
  width:54px; height:54px; flex:none;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--hair); border-radius:50%;
  color:var(--ink); cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.work__arrow:hover{ background:var(--ink); color:var(--gold-2); border-color:var(--ink); }
.work__arrow:disabled{ opacity:.28; cursor:default; }
.work__arrow:disabled:hover{ background:transparent; color:var(--ink); border-color:var(--hair); }
.work__arrow svg{ width:21px; height:21px; }
@media (max-width:600px){ .work__hint{ display:none; } }

/* The rail itself — snaps, scrolls, and staggers every second card */
.work__rail{
  display:flex; gap:clamp(18px, 2.4vw, 34px);
  padding:0 var(--gut) 24px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
}
.work__rail::-webkit-scrollbar{ display:none; }
.work__rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.work__rail::after{ content:""; flex:0 0 max(calc((100vw - var(--maxw)) / 2), var(--gut)); }

.work__card{
  flex:0 0 clamp(252px, 27vw, 400px);
  scroll-snap-align:start;
  margin:0;
}
.work__card:nth-child(even){ margin-top:clamp(28px, 4.5vw, 76px); }
.work__card a{ display:block; }

.work__media{
  display:block; position:relative;
  aspect-ratio:4 / 5; overflow:hidden;
  background:var(--ink-2);
}
.work__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.work__card:hover .work__media img{ transform:scale(1.06); }
.work__media::after{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(233,201,110,0); pointer-events:none;
  transition:border-color .5s var(--ease);
}
.work__card:hover .work__media::after{ border-color:rgba(233,201,110,.55); }

.work__index{
  position:absolute; left:0; bottom:0; z-index:2;
  min-width:64px; padding:12px 16px 10px;
  background:var(--ink); color:var(--gold-2);
  font-family:var(--serif); font-style:italic; font-size:1.3rem; line-height:1;
  text-align:center;
}

.work__body{ display:block; padding:18px 2px 0; }
.work__system{
  display:block; margin-bottom:7px;
  font-size:.73rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-3);
}
.work__cap{
  display:block;
  font-family:var(--serif); font-size:clamp(1.15rem, 1.05rem + .4vw, 1.45rem);
  line-height:1.3; color:var(--ink);
}

/* Closing card — the link into the full portfolio */
.work__card--end .work__all{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:14px;
  aspect-ratio:4 / 5; padding:clamp(24px, 3vw, 40px);
  background:var(--ink); color:var(--t-inv);
  transition:background .4s var(--ease);
}
.work__card--end:hover .work__all{ background:var(--ink-3); }
.work__all-num{
  font-family:var(--serif); font-size:clamp(3rem, 2rem + 3vw, 4.6rem);
  line-height:1; color:var(--gold-2);
}
.work__all-label{
  font-size:.88rem; line-height:1.6; color:var(--t-inv-2);
}
.work__all-go{
  margin-top:8px; width:52px; height:52px;
  display:grid; place-items:center;
  border:1px solid var(--hair-inv); border-radius:50%; color:var(--t-inv);
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.work__card--end:hover .work__all-go{ background:var(--gold); color:var(--ink); transform:translateX(5px); }
.work__all-go svg{ width:20px; height:20px; }

/* Progress bar + link under the rail */
.work__foot{
  display:flex; align-items:center; gap:clamp(20px, 3vw, 44px);
  margin-top:clamp(18px, 2.4vw, 30px);
}
.work__progress{
  position:relative; flex:1; height:2px; background:var(--hair);
  max-width:420px; overflow:hidden;
}
.work__progress span{
  position:absolute; left:0; top:0; height:100%; width:22%;
  background:var(--gold);
  transition:transform .18s linear;
}
@media (max-width:640px){
  .work__foot{ flex-direction:column; align-items:flex-start; gap:20px; }
  .work__progress{ max-width:none; width:100%; }
}

/* --- Finishes note bar (portfolio page) ------------------------------------ */
.fin-note{
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(24px, 3.5vw, 56px); align-items:center;
  margin-top:clamp(36px, 4.5vw, 60px);
  padding-top:clamp(32px, 4vw, 48px);
  border-top:1px solid var(--hair);
}
.fin-note h3{ font-size:clamp(1.4rem, 1.2rem + 1vw, 2rem); margin-bottom:.4em; }
@media (max-width:820px){ .fin-note{ grid-template-columns:1fr; } }

/* --- Gallery grid (portfolio page) ----------------------------------------- */
.gal-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:clamp(24px, 3vw, 40px) clamp(18px, 2.2vw, 28px);
}
.gal{ margin:0; }
.gal__media{
  display:block; position:relative;
  aspect-ratio:4 / 5; overflow:hidden;
  background:var(--ink-2);
}
.gal__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.gal:hover .gal__media img{ transform:scale(1.06); }
.gal__media::after{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(233,201,110,0); pointer-events:none;
  transition:border-color .5s var(--ease);
}
.gal:hover .gal__media::after{ border-color:rgba(233,201,110,.5); }

.gal__cap{
  margin-top:15px;
  font-family:var(--serif); font-size:1.2rem; line-height:1.35; color:var(--ink);
}

/* --- Gallery grouped by system --------------------------------------------- */
.galgroup{
  padding-bottom:clamp(48px, 6vw, 84px);
  margin-bottom:clamp(48px, 6vw, 84px);
  border-bottom:1px solid var(--hair);
}
.galgroup:last-of-type{ border-bottom:0; margin-bottom:0; padding-bottom:0; }

.galgroup__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px, 3vw, 48px); flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:clamp(26px, 3.5vw, 40px);
  border-bottom:1px solid var(--hair);
}
.galgroup__num{
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
  color:var(--gold-3); margin:0 0 .3em;
}
.galgroup__name{
  font-family:var(--serif); font-weight:400; line-height:1.05;
  font-size:clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
  color:var(--ink); margin:0 0 .25em;
}
.galgroup__tag{ font-size:.96rem; color:var(--muted); margin:0; max-width:52ch; }
.galgroup__meta{ display:flex; align-items:center; gap:clamp(16px, 2vw, 28px); flex-wrap:wrap; }
.galgroup__count{
  font-size:.73rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}

/* ==========================================================================
   GLANCE — inline figures
   ========================================================================== */
.glance{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-block:1px solid var(--hair-inv);
}
.glance__item{
  padding:clamp(36px, 5vw, 64px) clamp(16px, 2vw, 36px);
  text-align:center;
  border-right:1px solid var(--hair-inv);
}
.glance__item:last-child{ border-right:0; }
.glance__num{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 1.6rem + 3vw, 4.6rem); line-height:1;
  color:var(--gold-2);
}
.glance__num sup{ font-size:.45em; font-style:italic; }
.glance__label{
  display:block; margin-top:14px;
  font-size:.88rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--t-inv-2);
}
@media (max-width:760px){
  .glance{ grid-template-columns:1fr 1fr; }
  .glance__item:nth-child(2){ border-right:0; }
  .glance__item:nth-child(-n+2){ border-bottom:1px solid var(--hair-inv); }
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); border-top:1px solid var(--hair); }
.step{
  padding:clamp(36px, 4vw, 54px) clamp(24px, 3vw, 44px) 0 0;
  border-right:1px solid var(--hair);
  margin-right:-1px;
}
.step:last-child{ border-right:0; }
.step__num{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem, 2rem + 2vw, 4rem); line-height:1;
  color:var(--paper-3);
  -webkit-text-stroke:1px var(--gold);
  margin-bottom:22px;
}
.step h3{ font-size:1.5rem; }
.step p{ font-size:.93rem; color:var(--muted); margin:0; }
@media (max-width:720px){
  .step{ border-right:0; border-bottom:1px solid var(--hair); padding-bottom:32px; margin-bottom:0; }
  .step:last-child{ border-bottom:0; }
}

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{
  position:relative;
  background:var(--ink);
  color:var(--t-inv);
  padding:clamp(170px, 24vh, 260px) 0 clamp(70px, 9vw, 120px);
  overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 80% 0%, rgba(179,146,76,.14), transparent 65%);
}
.page-hero__inner{ position:relative; z-index:1; max-width:900px; }
.page-hero h1{ color:var(--t-inv); margin-bottom:.35em; }
.page-hero p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem, 1rem + .5vw, 1.35rem); line-height:1.55;
  color:rgba(243,239,231,.75); max-width:52ch; margin:0;
}
.breadcrumb{
  display:flex; align-items:center; gap:14px;
  font-size:.88rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--t-inv-2); margin-bottom:3em;
}
.breadcrumb::before{ content:""; width:44px; height:1px; background:var(--gold); }
.breadcrumb a:hover{ color:var(--gold-2); }

/* ==========================================================================
   FORMS — underline style
   ========================================================================== */
.form-layout{
  display:grid; grid-template-columns:1fr 360px;
  gap:clamp(40px, 5vw, 90px); align-items:start;
}
@media (max-width:1020px){ .form-layout{ grid-template-columns:1fr; } }

.form-card{ background:transparent; }

fieldset.fs{ border:0; padding:0; margin:0 0 clamp(48px, 6vw, 72px); }
legend.fs__legend{
  display:flex; align-items:baseline; gap:20px; width:100%;
  padding:0 0 18px; margin-bottom:34px;
  border-bottom:1px solid var(--hair);
}
legend.fs__legend .fs__step{
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:var(--gold-3); flex:none;
}
legend.fs__legend .fs__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem, 1.35rem + .9vw, 2.15rem);
  color:var(--ink);
}

.field-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:34px 40px; }
.field--full{ grid-column:1 / -1; }
@media (max-width:660px){ .field-grid{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:10px; }
.field > label{
  font-size:.79rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#443d33;
}
.field .req{ color:var(--gold-3); }
.field .hint{ font-size:.92rem; line-height:1.6; color:var(--muted); letter-spacing:0; text-transform:none; font-weight:400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  font-family:var(--sans); font-size:1.05rem; font-weight:500;
  color:var(--text);
  background:transparent;
  border:0; border-bottom:1.5px solid var(--hair);
  border-radius:0;
  padding:8px 2px 12px;
  transition:border-color .35s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{
  color:#7c7469; font-family:var(--sans); font-weight:400; font-size:.98rem;
}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a6d2f' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; background-size:12px;
  padding-right:30px;
}
.field textarea{ resize:vertical; min-height:110px; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 2px 0 var(--gold);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#a4432e; }
.field .err{ font-size:.92rem; font-weight:500; color:#9c3520; letter-spacing:0; text-transform:none; }

/* --- System picker --------------------------------------------------------- */
.pick-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);
}
.pick{ border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); }

.pick{ position:relative; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick label{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; height:100%; min-height:150px;
  padding:28px 18px;
  background:var(--paper);
  cursor:pointer;
  transition:background .35s var(--ease);
}
.pick label svg{ width:30px; height:30px; color:var(--gold-3); transition:color .35s var(--ease); }
.pick label span{
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  line-height:1.35; color:var(--text);
  transition:color .35s var(--ease);
}
.pick label:hover{ background:var(--paper-2); }
.pick input:checked + label{ background:var(--ink); }
.pick input:checked + label svg{ color:var(--gold-2); }
.pick input:checked + label span{ color:var(--t-inv); }
.pick input:focus-visible + label{ outline:1px solid var(--gold); outline-offset:-4px; }

/* --- Finish swatches -------------------------------------------------------- */
.swatch-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);
}
.swatch{ border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); }

.swatch{ position:relative; }
.swatch input{ position:absolute; opacity:0; width:0; height:0; }
.swatch label{
  display:block; cursor:pointer; height:100%;
  background:var(--paper);
  transition:background .35s var(--ease);
}
.swatch__chip{ height:96px; position:relative; }
.swatch__chip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.3) 0%, transparent 30%, transparent 68%, rgba(255,255,255,.12) 100%);
}
.swatch__name{
  display:block; padding:15px 10px;
  font-family:var(--sans); font-size:.88rem; font-weight:600;
  color:var(--text); text-align:center; line-height:1.35;
  transition:color .35s var(--ease);
}
.swatch label:hover{ background:var(--paper-2); }
.swatch input:checked + label{ background:var(--ink); }
.swatch input:checked + label .swatch__name{ color:var(--gold-2); }
.swatch input:checked + label .swatch__chip::before{
  content:""; position:absolute; inset:8px; z-index:1;
  border:1px solid rgba(243,239,231,.8);
}
.swatch input:focus-visible + label{ outline:1px solid var(--gold); outline-offset:-4px; }

/* --- Contact method --------------------------------------------------------- */
.method-grid{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);
}
.method{ border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); }
@media (max-width:560px){ .method-grid{ grid-template-columns:1fr; } }

.method{ position:relative; }
.method input{ position:absolute; opacity:0; width:0; height:0; }
.method label{
  display:flex; align-items:center; gap:18px;
  padding:26px 28px; cursor:pointer; height:100%;
  background:var(--paper);
  transition:background .35s var(--ease);
}
.method label svg{ width:24px; height:24px; flex:none; color:var(--gold-3); transition:color .35s var(--ease); }
.method__txt{ display:flex; flex-direction:column; gap:3px; }
.method__txt strong{
  font-family:var(--sans); font-weight:600; font-size:1.02rem; color:var(--text);
  transition:color .35s var(--ease);
}
.method__txt small{ font-size:.92rem; line-height:1.55; color:var(--muted); transition:color .35s var(--ease); }
.method label:hover{ background:var(--paper-2); }
.method input:checked + label{ background:var(--ink); }
.method input:checked + label svg{ color:var(--gold-2); }
.method input:checked + label .method__txt strong{ color:var(--t-inv); }
.method input:checked + label .method__txt small{ color:var(--t-inv-2); }
.method input:focus-visible + label{ outline:1px solid var(--gold); outline-offset:-4px; }

/* --- Upload ----------------------------------------------------------------- */
.upload{
  position:relative; text-align:center;
  border:1px dashed var(--hair);
  background:transparent; padding:36px 26px;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.upload:hover,.upload.is-drag{ border-color:var(--gold); background:var(--gold-wash); }
.upload input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload__icon{ width:26px; height:26px; margin:0 auto 14px; color:var(--gold-3); }
.upload__title{ font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--text); margin:0 0 6px; }
.upload__hint{ font-size:.92rem; color:var(--muted); margin:0; }
.upload__file{ margin:12px 0 0; font-size:.89rem; color:var(--gold-3); }

/* --- Checkbox / honeypot / alerts -------------------------------------------- */
.check{
  display:flex; gap:16px; align-items:flex-start;
  font-size:.95rem; line-height:1.75; color:var(--text);
  text-transform:none; letter-spacing:0; font-weight:400;
}
.check input{ margin-top:4px; width:16px; height:16px; accent-color:var(--gold-3); flex:none; }

.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.alert{ padding:20px 26px; margin-bottom:36px; border:1px solid; font-size:.94rem; }
.alert p{ margin:0; }
.alert--error{ background:#f7ebe6; border-color:#cfa093; color:#7e2a1e; }
.alert--ok{ background:var(--gold-wash); border-color:var(--hair-gold); color:#5c4a1d; }

/* --- Sidebar ------------------------------------------------------------------ */
.side-card{
  background:var(--ink); color:var(--t-inv-2);
  padding:clamp(30px, 3vw, 44px); position:sticky; top:40px;
}
.side-card h3{ color:var(--t-inv); font-size:1.6rem; }
.side-card p{ font-size:.97rem; line-height:1.8; }
.side-card ul{ display:grid; gap:22px; margin-top:28px; }
.side-card li{ display:grid; gap:6px; font-size:.96rem; line-height:1.7; padding-left:26px; position:relative; }
.side-card li::before{ content:""; position:absolute; left:0; top:.75em; width:14px; height:1px; background:var(--gold); }
.side-card li strong{
  font-size:.88rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-2);
}
.side-card__divider{ height:1px; background:var(--hair-inv); margin:32px 0; }
.side-card a{ color:var(--gold-2); }
.side-card a:hover{ color:var(--t-inv); }


/* --- Team roster (contact page) -------------------------------------------- */
.team{ margin-top:clamp(56px, 7vw, 96px); }
.team__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; padding-bottom:20px; margin-bottom:clamp(24px, 3vw, 36px);
  border-bottom:1px solid var(--hair);
}
.team__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem);
  color:var(--ink); margin:0;
}
.team__note{ font-size:.92rem; color:var(--muted); margin:0; max-width:46ch; }

.team__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);
}
@media (max-width:900px){ .team__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .team__grid{ grid-template-columns:1fr; } }

.member{
  display:flex; flex-direction:column; gap:5px;
  padding:clamp(24px, 2.8vw, 34px);
  background:var(--paper);
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  transition:background .35s var(--ease);
}
.member:hover{ background:var(--paper-2); }
.member__role{
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-3);
}
.member__name{
  font-family:var(--serif); font-size:clamp(1.35rem, 1.2rem + .6vw, 1.7rem);
  line-height:1.2; color:var(--ink);
}
.member__note{
  font-size:.88rem; line-height:1.65; color:var(--muted); margin-top:6px;
}
.member__mail{
  margin-top:14px; font-size:.94rem; color:var(--muted);
  word-break:break-all;
  border-bottom:1px solid transparent;
  align-self:flex-start;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.member__mail:hover{ color:var(--ink); border-color:var(--gold); }

/* ==========================================================================
   CONFIRMATION
   ========================================================================== */
.confirm{ text-align:center; max-width:760px; margin-inline:auto; padding:clamp(60px, 8vw, 110px) 0; }
.confirm__badge{
  width:88px; height:88px; margin:0 auto 34px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--hair-gold);
  color:var(--gold-3);
}
.confirm__ref{
  display:inline-block; margin:10px 0 30px; padding:16px 40px;
  font-family:var(--serif); font-size:1.5rem; letter-spacing:.14em;
  border:1px solid var(--hair-gold); color:var(--ink);
  background:var(--gold-wash);
}
.choice-grid{
  display:grid; grid-template-columns:1fr 1fr; margin:44px 0 0; text-align:left;
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);
}
.choice{ border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); }
@media (max-width:660px){ .choice-grid{ grid-template-columns:1fr; } }

.choice{
  display:flex; flex-direction:column; gap:16px;
  padding:clamp(28px, 3.4vw, 44px);
  background:var(--paper);
  transition:background .4s var(--ease);
}
.choice:hover{ background:var(--paper-2); }
.choice__icon{
  width:50px; height:50px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--hair-gold); color:var(--gold-3);
}
.choice__icon svg{ width:22px; height:22px; }
.choice h3{ font-size:1.7rem; margin:0; }
.choice p{ font-size:.91rem; color:var(--muted); margin:0; flex:1; }
.choice .tlink{ align-self:flex-start; }

/* ==========================================================================
   VISIT — map card above the footer
   ========================================================================== */
.visit{
  background:var(--ink);
  padding:clamp(60px, 8vw, 110px) 0 0;
}
.visit__card{
  display:grid; grid-template-columns:1fr 1.15fr;
  align-items:stretch;
  background:var(--ink-2);
  border:1px solid var(--hair-inv);
  overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.4);
}
@media (max-width:900px){ .visit__card{ grid-template-columns:1fr; } }

.visit__info{
  padding:clamp(32px, 4.5vw, 66px);
  display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--hair-inv);
}
@media (max-width:900px){ .visit__info{ border-right:0; border-bottom:1px solid var(--hair-inv); } }

.visit__info h2{
  color:var(--t-inv); margin:0 0 .3em;
  font-size:clamp(2rem, 1.5rem + 2vw, 3.2rem);
}
.visit__info h2 em{ font-style:italic; color:var(--gold-2); }
.visit__lead{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height:1.55;
  color:var(--t-inv-2); margin:0 0 2em; max-width:44ch;
}

.visit__rows{ display:grid; gap:0; margin:0 0 34px; border-top:1px solid var(--hair-inv); }
.visit__rows > div{
  display:grid; grid-template-columns:150px 1fr; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--hair-inv);
}
@media (max-width:560px){ .visit__rows > div{ grid-template-columns:1fr; gap:4px; } }
.visit__rows dt{
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-2);
}
.visit__rows dd{ margin:0; font-size:.98rem; line-height:1.65; color:var(--t-inv); }
.visit__rows dd a:hover{ color:var(--gold-2); }

/* Left in Google's own colours — a map has to read as a map. */
.visit__map{
  position:relative; min-height:380px;
  background:#e8e6df;
}
.visit__map iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0;
}
.visit__pin{
  position:absolute; top:20px; right:20px; z-index:2;
  width:62px; height:62px;
  display:grid; place-items:center;
  background:var(--ink); border:1px solid var(--gold);
  color:var(--gold-2);
  box-shadow:0 8px 26px rgba(22,19,15,.35);
  pointer-events:none;
}
.visit__pin-mark{ width:30px; height:30px; }

/* ==========================================================================
   CTA BAND + FOOTER
   ========================================================================== */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--ink);
  color:var(--t-inv);
  padding:clamp(90px, 12vw, 170px) 0;
  text-align:center;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(55% 80% at 50% 110%, rgba(179,146,76,.2), transparent 70%);
}
.cta-band__inner{ position:relative; z-index:1; max-width:840px; margin-inline:auto; }
.cta-band h2{ color:var(--t-inv); margin-bottom:.4em; }
.cta-band p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem, 1rem + .5vw, 1.3rem);
  color:rgba(243,239,231,.72); max-width:46ch; margin:0 auto 2.6em;
}

.site-footer{
  background:var(--ink); color:var(--t-inv-2);
  border-top:1px solid var(--hair-inv);
  padding:clamp(84px, 11vw, 150px) 0 44px;
  font-size:1rem;
}

/* Grand statement line above the columns */
.footer-statement{
  font-family:var(--serif); font-weight:400; line-height:1.1;
  font-size:clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  color:var(--t-inv); max-width:22ch;
  margin:0 0 clamp(52px, 7vw, 90px);
}
.footer-statement em{ font-style:italic; color:var(--gold-2); }

.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr;
  gap:clamp(40px, 5vw, 72px);
  padding-top:clamp(44px, 6vw, 64px);
  border-top:1px solid var(--hair-inv);
}
.footer-brand .brand__name{ font-size:2.4rem; }
.footer-about{ max-width:38ch; margin-top:24px; font-size:.98rem; line-height:1.9; }
.footer-heading{
  font-size:.88rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:28px;
}
.footer-links{ display:grid; gap:16px; }
.footer-links a{
  font-family:var(--serif); font-size:1.25rem; color:var(--t-inv-2);
}
.footer-links a:hover{ color:var(--gold-2); }
.footer-contact{ display:grid; gap:22px; }
.footer-contact li{ display:grid; gap:6px; }
.footer-contact span{
  font-size:.77rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-3);
}
.footer-contact a,.footer-contact li{ color:var(--t-inv); font-size:1.02rem; line-height:1.7; }
.footer-contact a:hover{ color:var(--gold-2); }
.footer-social{ display:flex; gap:14px; margin-top:30px; }
.footer-social a{
  width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--hair-inv); color:var(--t-inv-2);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.footer-social a:hover{ border-color:var(--gold-2); color:var(--gold-2); }
.footer-social svg{ width:20px; height:20px; }
.footer-bottom{
  margin-top:clamp(60px, 8vw, 96px); padding-top:32px;
  border-top:1px solid var(--hair-inv);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.91rem; letter-spacing:.06em; color:var(--t-inv-2);
}
.footer-bottom p{ margin:0; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FLOATING WHATSAPP
   ========================================================================== */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:300;
  width:56px; height:56px;
  display:grid; place-items:center;
  background:var(--ink);
  border:1px solid var(--hair-gold);
  border-radius:50%;
  color:var(--gold-2);
  box-shadow:0 14px 40px rgba(19,17,16,.35);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.wa-float:hover{ background:var(--gold); color:var(--ink); transform:translateY(-3px); }
.wa-float svg{ width:24px; height:24px; }

/* ==========================================================================
   REVEAL
   ========================================================================== */
/* Only ever hidden when JavaScript is confirmed running (the <head> adds .js).
   Without that class the content is simply visible — a script failure, a
   blocked file or a background tab can never leave the page blank. */
.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

@media print{ .site-header,.cta-band,.site-footer,.wa-float,.hero__media{ display:none; } }