/* ==========================================================================
   M&Z Design Chicago — design system
   --------------------------------------------------------------------------
   Principles, held consistently:
   · Type carries the design. Large display sizes, tight tracking, generous
     measure. No decorative chrome doing a headline's job.
   · Photography is never dimmed more than legibility requires.
   · Squared media (editorial, architectural) against fully-rounded controls
     (soft, modern) — a deliberate pairing, applied everywhere.
   · Vertical rhythm comes from sibling selectors, not per-element margins,
     so spacing stays consistent without inline overrides.
   ========================================================================== */

/* ---------- Typefaces ----------
   Cormorant Garamond (display) and Work Sans (text), served from this site
   rather than Google's servers, so opening a page never sends the visitor's
   IP address to Google. Both are SIL Open Font License 1.1 (see the OFL-*.txt
   files in assets/fonts). One variable file per style covers every weight;
   the italic weights are listed one by one so that weights the site never
   asks for (italic 500, say) still resolve to the nearest one, exactly as
   they did when Google served them. Split by unicode-range as Google does:
   the latin-ext file is only fetched by a page that actually uses one of its
   characters (Polish or Czech names, for example). */
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src:url("assets/fonts/cormorant-garamond-latin-ext-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src:url("assets/fonts/cormorant-garamond-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/cormorant-garamond-latin-ext-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/cormorant-garamond-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:600; font-display:swap;
  src:url("assets/fonts/cormorant-garamond-latin-ext-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:600; font-display:swap;
  src:url("assets/fonts/cormorant-garamond-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Work Sans'; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/work-sans-latin-ext-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Work Sans'; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/work-sans-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("assets/fonts/work-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("assets/fonts/work-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --ivory: #F6F0E3;
  --ivory-raised: #FFFCF6;
  --stone: #EBE1CC;

  --espresso: #241B12;
  --espresso-soft: #5B4E3E;
  --espresso-faint: #756A58; /* WCAG AA: 4.67:1 on --ivory (was 3.45:1) */

  --walnut: #6B4426;
  --walnut-deep: #432A16;

  --gold: #AD8749;
  --gold-light: #D9BD8B;
  --gold-pale: #EFE2C3;
  --gold-deep: #86662F;

  --noir: #1B140D;
  --noir-line: rgba(243,236,221,0.16);
  --ivory-on-noir: #F3ECDD;

  --line: rgba(36,27,18,0.13);
  --line-strong: rgba(36,27,18,0.26);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', sans-serif;

  /* Type scale — wide dynamic range: big display, small labels. */
  --fs-hero: clamp(3.6rem, 2.1rem + 7vw, 9rem);
  --fs-h1: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --fs-h2: clamp(2.1rem, 1.7rem + 2.2vw, 3.6rem);
  --fs-h3: clamp(1.3rem, 1.2rem + 0.55vw, 1.75rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-label: 0.8125rem;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2.5rem;
  --sp-7: clamp(3.5rem, 3rem + 2vw, 5rem);
  --sp-8: clamp(5.5rem, 4.25rem + 4.5vw, 9rem);
  --sp-9: clamp(7rem, 5.5rem + 6vw, 12rem);

  --radius-pill: 980px;
  --radius-sm: 2px;
  --shadow-lift: 0 1.75rem 3.5rem -1.75rem rgba(20,15,9,0.45);

  /* Expo-out: fast departure, long settle. Used for every transition. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --measure: 62ch;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{ margin:0; background: var(--ivory); color: var(--espresso); font-family: var(--font-body); font-size: var(--fs-body); line-height:1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x:hidden; }
img{ max-width:100%; display:block; -webkit-user-drag:none; user-drag:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
svg{ width:1em; height:1em; }
::selection{ background: var(--gold-pale); color: var(--espresso); }
/* Deters casual right-click-save / copy-paste of photos and copy — see
   script.js for the matching contextmenu guard. Not real protection
   (view-source, devtools and screenshots all bypass it); the footer's
   copyright notice is what actually matters legally. Form fields stay
   selectable so people can still edit what they type. */
body{ -webkit-user-select:none; user-select:none; }
input, textarea{ -webkit-user-select:text; user-select:text; }
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:2px; }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--espresso); color:var(--ivory); padding: var(--sp-3) var(--sp-5); z-index:300; border-radius: var(--radius-sm); }
.skip-link:focus{ left: var(--sp-4); top: var(--sp-4); }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:1320px; margin-inline:auto; padding-inline: var(--sp-5); }
@media (min-width: 900px){ .container{ padding-inline: var(--sp-7); } }

.section{ padding-block: var(--sp-8); }
.section--tight{ padding-block: var(--sp-7); }
.section--paper{ background: var(--stone); }
.section--noir{ background: var(--noir); color: var(--ivory-on-noir); }

/* ---------- Typography ---------- */
h1,h2,h3{
  font-family: var(--font-display); font-weight:600; color: var(--espresso);
  line-height:1.08; letter-spacing:-0.008em;
  text-wrap: balance;
}
h1{ font-size: var(--fs-h1); letter-spacing:-0.012em; }
h2{ font-size: var(--fs-h2); letter-spacing:-0.01em; }
h3{ font-size: var(--fs-h3); }
em{ font-style:italic; font-weight:400; }
.section--noir h1, .section--noir h2, .section--noir h3{ color: var(--ivory-on-noir); }

p{ text-wrap: pretty; }
.lead{ font-size: var(--fs-lead); color: var(--espresso-soft); line-height:1.5; max-width: var(--measure); letter-spacing:-0.008em; }
.section--noir .lead{ color: rgba(243,236,221,0.78); }

.eyebrow{
  display:inline-flex; align-items:center; gap: var(--sp-3);
  font-size: var(--fs-label); font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--gold-deep);
}
.eyebrow::before{ content:""; width:1.75em; height:1px; background:currentColor; opacity:.65; }
.eyebrow--center{ justify-content:center; }
.section--noir .eyebrow{ color: var(--gold-light); }

/* Vertical rhythm via siblings — this is what removes per-element margins. */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3{ margin-top: var(--sp-4); }
h1 + .lead, h2 + .lead, h3 + .lead{ margin-top: var(--sp-5); }
.lead + .lead, .lead + p, p + p{ margin-top: var(--sp-4); }
h2 + p, h3 + p{ margin-top: var(--sp-3); }
.lead + .hero-actions, p + .hero-actions, .lead + .btn, p + .btn{ margin-top: var(--sp-6); }

.section-head{ max-width: 52rem; margin-bottom: var(--sp-7); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .lead{ margin-inline:auto; }
.measure-center{ max-width: 44rem; margin-inline:auto; }

.breadcrumb{ font-size: var(--fs-label); letter-spacing:0.05em; color: var(--espresso-faint); }
.breadcrumb a:hover{ color: var(--gold-deep); }
.section--noir .breadcrumb{ color: rgba(243,236,221,0.55); }
.section--noir .breadcrumb a{ color: rgba(243,236,221,0.85); }
.section--noir .breadcrumb a:hover{ color: var(--gold-light); }

/* ---------- Buttons ----------
   Fully-rounded controls against squared media. No gradients, no shimmer —
   weight and contrast do the work. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-3);
  padding: 0.95em 1.85em; border-radius: var(--radius-pill); border:1px solid transparent;
  font-size: var(--fs-small); font-weight:600; letter-spacing:0.005em;
  cursor:pointer; white-space:nowrap; position:relative;
  transition: background-color .45s var(--ease), border-color .45s var(--ease),
              color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.btn svg{ font-size:1.05em; }
.btn:active{ transform: scale(0.98); }

.btn-primary{ background: var(--espresso); color: var(--ivory); }
.btn-primary:hover{ background: var(--walnut-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.section--noir .btn-primary, .hero .btn-primary{ background: var(--gold-light); color: var(--noir); }
.section--noir .btn-primary:hover, .hero .btn-primary:hover{ background:#fff; }

.btn-outline{ border-color: var(--line-strong); color: var(--espresso); background:transparent; }
.btn-outline:hover{ border-color: var(--espresso); background: var(--espresso); color: var(--ivory); transform: translateY(-2px); }
.section--noir .btn-outline, .hero .btn-outline{ border-color: rgba(243,236,221,0.4); color: var(--ivory-on-noir); }
.section--noir .btn-outline:hover, .hero .btn-outline:hover{ background: var(--ivory-on-noir); border-color: var(--ivory-on-noir); color: var(--noir); }

.btn-ghost{ padding:0; border-radius:0; gap: var(--sp-2); color: var(--espresso); font-weight:600; }
.btn-ghost svg{ transition: transform .45s var(--ease); }
.btn-ghost:hover{ color: var(--gold-deep); }
.btn-ghost:hover svg{ transform: translateX(5px); }
.btn-ghost:active{ transform:none; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100; padding-block: var(--sp-5);
  border-bottom:1px solid transparent;
  transition: background-color .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
}
.site-header.is-scrolled{ background: rgba(246,240,227,0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); padding-block: var(--sp-3); border-color: var(--line); }
.site-header.is-dark-hero:not(.is-scrolled){ color: var(--ivory-on-noir); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-5); }

.brand{ display:flex; align-items:center; gap: var(--sp-3); font-family: var(--font-display); font-size:1.25rem; letter-spacing:0.01em; }
.brand-badge{ width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:0.6rem; letter-spacing:0.03em; flex-shrink:0; opacity:.9; }
.brand-text small{ display:block; font-family: var(--font-body); font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; opacity:.6; margin-top:2px; }

.nav-links{ display:none; align-items:center; gap: clamp(1rem,1.6vw,2rem); font-size:var(--fs-small); font-weight:500; }
.nav-links a{ position:relative; padding-block: var(--sp-2); white-space:nowrap; opacity:.85; transition: opacity .35s var(--ease); }
.nav-links a:hover{ opacity:1; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition: transform .45s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a[aria-current="page"]{ opacity:1; color: var(--gold-deep); }
.site-header.is-dark-hero:not(.is-scrolled) .nav-links a[aria-current="page"]{ color: var(--gold-light); }
@media (min-width: 1000px){ .nav-links{ display:flex; } }

.nav-actions{ display:flex; align-items:center; gap: var(--sp-4); }
.nav-cta{ display:none; padding: 0.68em 1.4em; font-size:0.9rem; }
@media (min-width: 1000px){ .nav-cta{ display:inline-flex; } }
.nav-toggle{ display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; background:none; border:1px solid currentColor; border-radius:50%; cursor:pointer; color:inherit; transition: background-color .35s var(--ease), color .35s var(--ease); }
.nav-toggle:hover{ background: currentColor; }
.nav-toggle:hover svg{ color: var(--ivory); }
.site-header.is-dark-hero:not(.is-scrolled) .nav-toggle:hover svg{ color: var(--noir); }
@media (min-width: 1000px){ .nav-toggle{ display:none; } }

/* ---------- Mobile drawer ---------- */
.mobile-drawer{ position:fixed; inset:0; z-index:200; visibility:hidden; }
.mobile-drawer.is-open{ visibility:visible; }
.mobile-drawer .scrim{ position:absolute; inset:0; background: rgba(27,20,13,.5); backdrop-filter: blur(4px); opacity:0; transition: opacity .5s var(--ease); }
.mobile-drawer.is-open .scrim{ opacity:1; }
.mobile-drawer .panel{ position:absolute; inset:0 0 0 auto; width:min(24rem,88vw); background: var(--ivory-raised); padding: var(--sp-6); transform: translateX(100%); transition: transform .6s var(--ease); display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.mobile-drawer.is-open .panel{ transform:none; }
.mobile-drawer .panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-7); }
.mobile-drawer .close-btn{ width:2.5rem; height:2.5rem; border:1px solid var(--line-strong); border-radius:50%; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .45s var(--ease), border-color .45s var(--ease); }
.mobile-drawer .close-btn:hover{ transform: rotate(90deg); border-color: var(--espresso); }
.mobile-drawer nav{ display:flex; flex-direction:column; font-family: var(--font-display); font-size:1.6rem; letter-spacing:-0.02em; }
.mobile-drawer nav a{ padding-block: var(--sp-4); border-bottom:1px solid var(--line); transition: padding-left .45s var(--ease), color .45s var(--ease); }
.mobile-drawer nav a:hover, .mobile-drawer nav a[aria-current="page"]{ color: var(--gold-deep); padding-left: var(--sp-3); }
.mobile-drawer .drawer-foot{ margin-top:auto; padding-top: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-4); font-size: var(--fs-small); }
.mobile-drawer .drawer-foot a{ display:flex; align-items:center; gap: var(--sp-3); }

/* ---------- Hero ----------
   The scrim is focused at the bottom where type sits, and kept light
   elsewhere so the photograph stays rich rather than muddy. */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; color: var(--ivory-on-noir); overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: 50% 22%; transform: scale(1.06); animation: heroIn 2s var(--ease) forwards; }
@keyframes heroIn{ to{ transform: scale(1); } }
@media (prefers-reduced-motion: reduce){ .hero-media img{ animation:none; transform:none; } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    /* Header band — guarantees the nav reads over any photograph. */
    linear-gradient(to bottom, rgba(14,10,6,0.62) 0%, rgba(14,10,6,0.26) 55%, transparent 100%) no-repeat top / 100% 260px,
    /* Copy block */
    linear-gradient(to top, rgba(14,10,6,0.93) 0%, rgba(14,10,6,0.62) 28%, rgba(14,10,6,0.16) 56%, transparent 76%),
    linear-gradient(to right, rgba(14,10,6,0.55) 0%, rgba(14,10,6,0.16) 46%, transparent 66%);
}
.hero-body{ position:relative; z-index:1; width:100%; padding-block: calc(var(--sp-7) + 4rem) var(--sp-7); }
.hero-eyebrow{ font-size: var(--fs-label); letter-spacing:0.22em; text-transform:uppercase; color: var(--gold-light); font-weight:600; }
/* line-height 1.1, not tighter: at Cormorant's proportions anything below ~1.03em
   makes the tail of the "y" in "Luxury" run into the "k" of "like" on the line below
   (measured: -0.056em at 0.95, +0.094em at 1.1). The space under the headline comes
   from .hero-sub's margin-top; a margin-bottom here would only collapse into it. */
.hero h1{ font-size: var(--fs-hero); color:#fff; font-weight:600; margin-top: var(--sp-4); max-width:16ch; line-height:1.1; letter-spacing:-0.018em; }
.hero h1 em{ color: var(--gold-light); }
.hero-sub{ font-size: var(--fs-lead); color: rgba(243,236,221,0.85); max-width:44rem; margin-top: var(--sp-5); line-height:1.5; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

.swatch-key{ display:flex; flex-wrap:wrap; gap: var(--sp-5) var(--sp-7); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top:1px solid var(--noir-line); }

/* Narrow screens — same rule: the hero resolves within one screen, so the
   swatch key is never half-cut at the bottom. */
@media (max-width: 899px){
  /* On a portrait screen the copy fills most of the hero, so its scrim has
     to reach up to the headline. The landscape scrim stops well short of it
     and left the end of the heading sitting on the bright, lit wall: on a
     375px phone the gold "you." measured 1.2:1 there (worst 10% of pixels),
     now 3.8:1; the small eyebrow and the intro line clear 4.5:1. */
  .hero-media::after{
    background:
      linear-gradient(to bottom, rgba(14,10,6,0.62) 0%, rgba(14,10,6,0.26) 55%, transparent 100%) no-repeat top / 100% 260px,
      linear-gradient(to top, rgba(14,10,6,0.93) 0%, rgba(14,10,6,0.68) 35%, rgba(14,10,6,0.55) 70%, rgba(14,10,6,0.2) 88%, transparent 100%);
  }
  .hero-body{ padding-block: calc(var(--sp-5) + 3.5rem) var(--sp-5); }
  .hero-sub{ margin-top: var(--sp-4); }
  .hero-actions{ margin-top: var(--sp-5); gap: var(--sp-3); }
  .swatch-key{ margin-top: var(--sp-5); padding-top: var(--sp-4); gap: var(--sp-3) var(--sp-5); }
  .swatch-chip{ width:1.75rem; height:1.75rem; }
  .swatch span{ font-size:.8em; }
}

/* Short viewports (most laptops) — the hero must always fit one screen,
   so the signature swatch key is never orphaned below the fold. */
@media (min-width: 900px) and (max-height: 860px){
  .hero-body{ padding-block: calc(var(--sp-5) + 3.25rem) var(--sp-5); }
  .hero h1{ font-size: clamp(3.2rem, 1.5rem + 5.6vw, 6.75rem); }
  .hero-sub{ font-size: 1.125rem; margin-top: var(--sp-4); }
  .hero-actions{ margin-top: var(--sp-5); }
  .swatch-key{ margin-top: var(--sp-5); padding-top: var(--sp-4); gap: var(--sp-4) var(--sp-6); }
  .swatch-chip{ width:1.9rem; height:1.9rem; }
}
.swatch{ display:flex; align-items:center; gap: var(--sp-3); font-size: var(--fs-small); color: rgba(243,236,221,.8); }
.swatch-chip{ width:2.25rem; height:2.25rem; border-radius:50%; border:1px solid rgba(243,236,221,.3); flex-shrink:0; }
.swatch-chip--ivory{ background: linear-gradient(135deg,#F6F0E3,#D8CBA9); }
.swatch-chip--walnut{ background: linear-gradient(135deg,#7A5231,#3C2512); }
.swatch-chip--gold{ background: linear-gradient(135deg,#E7CE9C,#96733B); }
.swatch strong{ display:block; color:#fff; font-weight:600; }
.swatch span{ opacity:.7; font-size:.85em; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ padding-block: calc(var(--sp-7) + 4.5rem) var(--sp-7); background: var(--stone); border-bottom:1px solid var(--line); }
.page-hero h1{ max-width:20ch; }
.page-hero .lead{ max-width:40rem; }
.page-hero--noir{ background: var(--noir); border-bottom-color: var(--noir-line); }

/* Full-bleed photo variant — the photograph fills the whole section behind
   the copy, same treatment as the homepage hero: darkest behind the text,
   lightening toward the opposite edge, so the work itself is the header
   instead of a framed thumbnail floating beside it. */
.page-hero--photo{ position:relative; overflow:hidden; padding-block:0; display:flex; align-items:flex-end; min-height: min(58vh, 580px); border-bottom:none; }
.page-hero-media{ position:absolute; inset:0; z-index:0; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(14,10,6,.4) 0%, rgba(14,10,6,.1) 55%, transparent 100%) no-repeat top / 100% 220px,
    linear-gradient(to right, rgba(14,10,6,.88) 0%, rgba(14,10,6,.8) 32%, rgba(14,10,6,.35) 50%, rgba(14,10,6,.05) 64%, transparent 74%);
}
.page-hero-body{ position:relative; z-index:1; width:100%; padding-block: calc(var(--sp-7) + 4rem) calc(var(--sp-7) + 1rem); }

/* Wide technical figure — shown whole, never cropped, and openable at full
   size, because the value of a drawing is in its detail. */
.figure-wide{ margin-top: var(--sp-7); }
.figure-wide img{ width:100%; height:auto; border:1px solid var(--line); background:#fff; }
.section--noir .figure-wide img{ border-color: var(--noir-line); }
.figure-wide figcaption{ margin-top: var(--sp-4); display:flex; flex-wrap:wrap; gap: var(--sp-4);
  align-items:center; justify-content:space-between; font-size: var(--fs-small); color: var(--espresso-faint); }
.figure-wide figcaption span{ max-width: 52ch; }

/* ---------- Credentials strip ---------- */
.creds-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); padding-block: var(--sp-7); border-block:1px solid var(--line); }
.creds-item{ border-left:1px solid var(--line); padding:0 var(--sp-6); }
.creds-item:first-child{ border-left:none; padding-left:0; }
.creds-item h3{ font-family: var(--font-body); font-size:0.75rem; letter-spacing:0.13em; text-transform:uppercase; font-weight:700; color: var(--gold-deep); }
.creds-item p{ margin-top: var(--sp-3); color: var(--espresso-soft); font-size: var(--fs-small); line-height:1.55; }
@media (max-width:760px){
  .creds-strip{ grid-template-columns:1fr; }
  .creds-item{ border-left:none; padding-inline:0; border-top:1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-5); }
  .creds-item:first-child{ border-top:none; padding-top:0; margin-top:0; }
}

/* ---------- Ledger ---------- */
.ledger{ display:flex; flex-direction:column; }
.ledger-item{ display:grid; grid-template-columns:1fr auto; column-gap: var(--sp-6); align-items:baseline; padding-block: var(--sp-6); border-top:1px solid var(--line); transition: background-color .5s var(--ease); }
.ledger-item:last-child{ border-bottom:1px solid var(--line); }
.ledger-item .num{ grid-row:1; font-size: var(--fs-label); font-weight:600; letter-spacing:0.08em; color: var(--gold-deep); }
.ledger-item h3{ grid-column:1; }
.ledger-item .tags{ grid-column:2; grid-row:1/3; align-self:start; text-align:right; font-size: var(--fs-small); color: var(--espresso-faint); max-width:16rem; }
.ledger-item p{ grid-column:1; margin-top: var(--sp-3); color: var(--espresso-soft); max-width: var(--measure); }
@media (max-width:680px){
  .ledger-item{ grid-template-columns:1fr; }
  .ledger-item .tags{ grid-column:1; grid-row:auto; text-align:left; margin-top: var(--sp-3); }
}

/* ---------- Process ---------- */
.process{ display:grid; gap: var(--sp-7); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:step; }
.process-step{ counter-increment:step; position:relative; padding-top: var(--sp-6); }
.process-step::before{ content:counter(step,decimal-leading-zero); position:absolute; top:0; left:0; font-family:var(--font-display); font-size:0.95rem; letter-spacing:0.05em; color: var(--gold-deep); }
.process-step::after{ content:""; position:absolute; top:0.4rem; left:2.75rem; right:0; height:1px; background: var(--line-strong); }
.section--noir .process-step::after{ background: var(--noir-line); }
.section--noir .process-step::before{ color: var(--gold-light); }
.process-step h3{ margin-top: var(--sp-4); }
.process-step p{ margin-top: var(--sp-3); color: var(--espresso-soft); font-size: var(--fs-small); }
.section--noir .process-step p{ color: rgba(243,236,221,.72); }

/* ---------- Grids & splits ---------- */
.grid{ display:grid; gap: var(--sp-6); }
.split{ display:grid; gap: var(--sp-7); grid-template-columns:1fr; align-items:center; }
.split--start{ align-items:start; }
.split--wide-first{ grid-template-columns:1fr; }

/* Long-form legal/policy text: single readable column, generous spacing
   between headings so a wall of policy text still breathes. */
.legal{ max-width: var(--measure); }
.legal h2{ font-size: var(--fs-h3); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.legal h2:first-child{ margin-top:0; }
.legal p{ color: var(--espresso-soft); margin-bottom: var(--sp-4); }
.legal ul{ color: var(--espresso-soft); margin: 0 0 var(--sp-4); padding-left: 1.25em; }
.legal li + li{ margin-top: var(--sp-3); }
.legal li strong{ color: var(--espresso); }
.legal code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88em; background: rgba(36,27,18,.06); padding:.1em .4em; border-radius: var(--radius-sm); }
.legal h2[id]{ scroll-margin-top: 7rem; }  /* clear the fixed header when linked to directly */
@media (min-width: 900px){
  .split{ grid-template-columns:1fr 1fr; gap: var(--sp-8); }
  .split--wide-first{ grid-template-columns:1.15fr 1fr; }
}

/* ---------- Media ---------- */
.frame{ overflow:hidden; background: var(--stone); position:relative; }
.frame img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.ar-1x1{ aspect-ratio:1/1; }
.ar-4x3{ aspect-ratio:4/3; }
.ar-4x5{ aspect-ratio:4/5; }
.ar-3x4{ aspect-ratio:3/4; }
.ar-16x9{ aspect-ratio:16/9; }
.ar-16x10{ aspect-ratio:16/10; }

.tile{ position:relative; overflow:hidden; margin:0; }
.tile:hover img{ transform:scale(1.045); }
.tile-cap{ position:absolute; inset:auto 0 0 0; padding: var(--sp-6) var(--sp-5); color:#fff; background: linear-gradient(to top, rgba(14,10,6,.92), rgba(14,10,6,.72) 60%, rgba(14,10,6,.2) 100%); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.tile-cap .eyebrow{ color: var(--gold-light); }
.tile-cap h3{ color:#fff; font-size:1.2rem; margin-top: var(--sp-2); }
.tile-cap p{ font-size: var(--fs-small); color: rgba(255,255,255,.75); margin-top: var(--sp-1); }

/* Editorial mosaic — varied widths/ratios, a gallery wall not a card grid. */
.mosaic{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:row dense; gap: var(--sp-5); }
.mosaic .mosaic-wide{ grid-column:span 2; }
@media (max-width:820px){ .mosaic{ grid-template-columns:1fr 1fr; gap: var(--sp-4); } }
@media (max-width:540px){ .mosaic{ grid-template-columns:1fr; } .mosaic .mosaic-wide{ grid-column:span 1; } }
/* Once the mosaic is a single column a caption covers most of a 16:10 frame (a
   three-line one nearly all of it); a square frame leaves the picture room to show
   above it. Used on the farmhouse photo and its 3D design drawing. */
@media (max-width:540px){ .mosaic .has-long-caption .frame, .mosaic .is-square-on-phones .frame{ aspect-ratio:1/1; } }

/* ---------- Originals (dark editorial rows) ---------- */
.original-card{ display:grid; gap: var(--sp-7); grid-template-columns:1fr; align-items:center; padding-block: var(--sp-8); border-top:1px solid var(--noir-line); }
.original-card:first-of-type{ border-top:none; padding-top:0; }
.original-card:last-of-type{ border-bottom:1px solid var(--noir-line); }
@media (min-width: 900px){
  .original-card{ grid-template-columns:1.05fr 1fr; gap: var(--sp-8); }
  .original-card--solo{ grid-template-columns:1fr; }
  .original-card--solo .original-copy{ max-width: var(--measure); }
  .original-card.is-reverse .original-copy{ order:2; }
  .original-card.is-reverse .frame{ order:1; }
}
.original-card .index{ font-family: var(--font-display); font-size: var(--fs-label); letter-spacing:0.1em; color: var(--gold-light); }
.section--paper .original-card .index, .section:not(.section--noir) .original-card .index{ color: var(--gold-deep); }
.original-card h3{ font-size: var(--fs-h2); margin-top: var(--sp-4); }
.original-card p{ margin-top: var(--sp-5); max-width: var(--measure); color: rgba(243,236,221,.78); }
.section--paper .original-card p, .section:not(.section--noir) .original-card p{ color: var(--espresso-soft); }
.original-card .maker{ margin-top: var(--sp-4); font-family: var(--font-display); font-style:italic; font-size: var(--fs-small); color: var(--gold-light); }
.plaque{ display:inline-flex; align-items:center; gap: var(--sp-3); margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-5); border:1px solid var(--gold-deep); border-radius: var(--radius-pill); font-size: var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color: var(--gold-light); }
.original-card .price-note{ margin-top: var(--sp-4); font-size: var(--fs-small); color: rgba(243,236,221,.6); }
.original-card .price-note strong{ color: var(--gold-light); font-weight:600; }
.section--paper .original-card .price-note, .section:not(.section--noir) .original-card .price-note{ color: var(--espresso-faint); }
.section--paper .original-card .price-note strong, .section:not(.section--noir) .original-card .price-note strong{ color: var(--gold-deep); }
.original-media{ display:flex; flex-direction:column; gap: var(--sp-4); }
.original-card .frame-caption{ font-family: var(--font-display); font-style:italic; font-size: var(--fs-small); text-align:center; color: var(--gold-light); }
.section--paper .original-card .frame-caption, .section:not(.section--noir) .original-card .frame-caption{ color: var(--espresso-soft); }

.original-gallery{ padding-bottom: var(--sp-8); }
.original-gallery__label{ font-size: var(--fs-label); letter-spacing:.04em; color: rgba(243,236,221,.5); margin-bottom: var(--sp-4); }
.section--paper .original-gallery__label, .section:not(.section--noir) .original-gallery__label{ color: var(--espresso-faint); }
.original-gallery__grid{ display:grid; gap: var(--sp-4); grid-template-columns:repeat(3,1fr); }
.original-gallery__grid--2col{ grid-template-columns:1fr 1fr; }
.original-gallery__label--under{ margin-top: var(--sp-4); margin-bottom:0; text-align:center; }
.original-card--solo .original-media{ max-width:640px; margin-inline:auto; }
.original-card .btn{ margin-top: var(--sp-6); }
/* Call for a manufacturing partner, under a piece's own description: a hairline
   sets it apart, and the rights notice is deliberately small print. */
.original-card .partner-call{ margin-top: var(--sp-6); padding-top: var(--sp-5); border-top:1px solid var(--noir-line); }
.original-card .partner-call .eyebrow{ margin-top:0; }
.original-card .partner-call .btn{ margin-top: var(--sp-5); }
.original-card .partner-call__fine{ margin-top: var(--sp-4); font-size: var(--fs-label); line-height:1.65; color: rgba(243,236,221,.6); }
.section--paper .original-card .partner-call, .section:not(.section--noir) .original-card .partner-call{ border-top-color: var(--line); }
.section--paper .original-card .partner-call__fine, .section:not(.section--noir) .original-card .partner-call__fine{ color: var(--espresso-faint); }
@media (max-width:640px){ .original-gallery__grid{ grid-template-columns:1fr 1fr; } }

/* Inspiration → invention flow */
.flow{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-6); margin-top: var(--sp-7); }
.flow .frame{ width:min(300px,100%); }
.flow-arrow{ width:2.5rem; height:2.5rem; color: var(--gold-light); flex-shrink:0; }
@media (max-width:640px){ .flow-arrow{ transform:rotate(90deg); margin-inline:auto; } }

/* ---------- Spec list ---------- */
.spec-list{ margin-top: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-3); font-size: var(--fs-small); color: var(--espresso-soft); }
.spec-list li{ padding-left: var(--sp-5); position:relative; }
.spec-list li::before{ content:""; position:absolute; left:0; top:0.7em; width:0.75rem; height:1px; background: var(--gold-deep); }

/* ---------- Stat ---------- */
.stat-card{ display:inline-block; margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6); border:1px solid var(--line-strong); background: var(--ivory-raised); }
.stat-card__value{ display:block; font-family: var(--font-display); font-size: clamp(2.5rem,2rem+2vw,3.5rem); line-height:1; letter-spacing:-0.03em; color: var(--gold-deep); }
.stat-card p{ margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--espresso-soft); max-width:30rem; }
.stat-card__lead{ font-family: var(--font-display); font-size:1.35rem !important; color: var(--espresso) !important; margin-top: var(--sp-2) !important; }
.stat-card__note{ font-size: var(--fs-label) !important; color: var(--espresso-faint) !important; border-top:1px solid var(--line); padding-top: var(--sp-3); }

/* Image provenance labels — a completed project, a visualization and an
   original concept are different claims and are never shown as the same thing. */
.tile-tag{ position:absolute; top: var(--sp-4); left: var(--sp-4); z-index:2;
  padding:.4em .9em; border-radius: var(--radius-pill);
  background: rgba(20,15,9,.72); backdrop-filter: blur(8px);
  color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.tile-tag--concept{ background: rgba(134,102,47,.85); }

/* Designer intro */
.designer{ display:grid; gap: var(--sp-7); grid-template-columns:1fr; align-items:center; }
@media (min-width: 900px){ .designer{ grid-template-columns: 0.8fr 1fr; gap: var(--sp-8); } }
.designer .frame{ background: var(--stone); }
.designer-quote{ font-family: var(--font-display); font-size: var(--fs-h3); font-style:italic; color: var(--espresso-soft); margin-top: var(--sp-5); }

/* ---------- Before / after ---------- */
.compare{ position:relative; overflow:hidden; user-select:none; }
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare > picture{ display:block; }
.compare > picture > img{ position:static; display:block; height:auto; }
.compare .after-wrap{ position:absolute; inset:0; clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0); }
.compare-handle{ position:absolute; top:50%; left:50%; width:3rem; height:3rem; background: var(--ivory); border-radius:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lift); pointer-events:none; }
.compare-handle::before{ content:""; position:absolute; left:50%; top:-1000px; bottom:-1000px; width:2px; background: var(--ivory); transform:translateX(-50%); }
.compare-tag{ position:absolute; top: var(--sp-5); padding:.45em 1em; font-size: var(--fs-label); letter-spacing:.1em; text-transform:uppercase; background: rgba(20,15,9,.7); backdrop-filter: blur(6px); color:#fff; border-radius: var(--radius-pill); }
.compare-tag--before{ left: var(--sp-5); }
.compare-tag--after{ right: var(--sp-5); }
.compare input[type="range"]{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.compare-item + .compare-item{ margin-top: var(--sp-8); }
.compare-item h3{ font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.compare-item p{ color: var(--espresso-soft); max-width: var(--measure); margin-bottom: var(--sp-4); }
.compare-item .compare{ max-width: 800px; }
.compare-item .compare--portrait{ max-width: 460px; }

/* ---------- Occasions ---------- */
.occasion-list{ display:flex; flex-wrap:wrap; gap: var(--sp-3); }
.occasion-list--center{ justify-content:center; }
.occasion-tag{ padding:.6em 1.25em; border:1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: var(--fs-small); transition: border-color .45s var(--ease), color .45s var(--ease); }
.occasion-tag:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--noir); color: var(--ivory-on-noir); padding-block: var(--sp-9); text-align:center; }
.cta-band h2{ font-size: var(--fs-h1); max-width:20ch; margin-inline:auto; }
.cta-band p{ margin-top: var(--sp-5); max-width:40rem; margin-inline:auto; color: rgba(243,236,221,.78); font-size: var(--fs-lead); }
.cta-band .hero-actions{ justify-content:center; margin-top: var(--sp-7); }
/* The CTA band and the footer are the same dark colour and would read as one
   block. A hairline as wide as the content, drawn like the one above the
   copyright row, marks where one ends and the other begins. */
.cta-band{ position:relative; }
.cta-band::after{
  content:""; position:absolute; left:0; right:0; bottom:0; margin-inline:auto; pointer-events:none;
  width: calc(min(100%, 1320px) - 2 * var(--sp-5)); border-top:1px solid var(--noir-line);
}
@media (min-width: 900px){ .cta-band::after{ width: calc(min(100%, 1320px) - 2 * var(--sp-7)); } }

/* ---------- Vision block ---------- */
.vision-block{ max-width:46rem; padding-bottom: var(--sp-6); border-bottom:1px solid var(--noir-line); }
.vision-block h2{ font-size: var(--fs-h1); margin-top: var(--sp-4); }
.vision-block h2 em{ color: var(--gold-light); }
.vision-block .lead{ margin-top: var(--sp-6); padding-left: var(--sp-5); border-left:1px solid var(--gold-deep); color: rgba(243,236,221,.82); }
.vision-tags{ display:flex; flex-wrap:wrap; gap: var(--sp-6); margin-top: var(--sp-7); }
.vision-tags li{ position:relative; padding-left: var(--sp-4); font-size: var(--fs-small); font-weight:600; letter-spacing:.04em; color: var(--gold-light); text-transform:uppercase; }
.vision-tags li::before{ content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background: var(--gold-light); }

/* ---------- Motion block ---------- */
.motion-block{ max-width:46rem; }
.motion-name{ font-family: var(--font-display); font-size: clamp(3.2rem, 2.2rem + 6vw, 7rem); font-weight:600; line-height:0.9; letter-spacing:.01em; text-transform:uppercase; color: var(--gold-light); }
.motion-block h2{ font-size: var(--fs-h1); margin-top: var(--sp-5); }
.motion-block h2 em{ color: var(--gold-light); }
.motion-block .lead{ margin-top: var(--sp-6); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; gap: var(--sp-5); grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-grid .span-2{ grid-column:1/-1; }
.field label{ display:block; font-size: var(--fs-small); font-weight:600; margin-bottom: var(--sp-2); }
.field .hint{ font-weight:400; color: var(--espresso-faint); }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size: var(--fs-body); padding:.9em 1.1em;
  background: var(--ivory-raised); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--espresso); transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--gold-deep); box-shadow:0 0 0 3px rgba(173,135,73,.15); }
.field textarea{ resize:vertical; min-height:8rem; }
/* Selects default to the OS's own dropdown chrome, which reads as a
   generic system form next to everything else here — replace it with a
   custom chevron in the site's own gold rather than leaving it bare. */
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right: 2.75em; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2386662F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1.1em center; background-size:0.7em;
}
.field select::-ms-expand{ display:none; }
.form-status{ display:none; margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--gold-deep); }
.form-status.is-visible{ display:block; }
.form-note{ margin-top: var(--sp-4); font-size: var(--fs-label); color: var(--espresso-faint); line-height:1.6; }

.contact-card{ background: var(--ivory-raised); border:1px solid var(--line); padding: var(--sp-6); }
.contact-card + .contact-card{ margin-top: var(--sp-5); }
.contact-card h3{ font-size:1.15rem; }
.contact-card p{ margin-top: var(--sp-3); color: var(--espresso-soft); font-size: var(--fs-small); }
.contact-line{ display:flex; align-items:center; gap: var(--sp-4); padding-block: var(--sp-3); }
.contact-line .ic{ width:2.4rem; height:2.4rem; border-radius:50%; background: var(--gold-pale); color: var(--gold-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-line a:hover{ color: var(--gold-deep); }

/* ---------- Mobile sticky CTA bar ----------
   Below 1000px the header's own CTA button is hidden (nav-cta), leaving
   nothing persistent to tap without opening the drawer. This floats a
   thin bar above the fold at all times instead. */
.mobile-cta-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:120;
  align-items:center; gap: var(--sp-3);
  background: var(--ivory); border-top:1px solid var(--line-strong);
  padding: var(--sp-3) var(--sp-5);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(36,27,18,.1);
}
@media (max-width: 999px){ .mobile-cta-bar{ display:flex; } }
.mobile-cta-bar__call{
  flex:0 0 auto; width:3rem; height:3rem; border-radius:50%;
  border:1px solid var(--line-strong); color: var(--espresso);
  display:flex; align-items:center; justify-content:center;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.mobile-cta-bar__call:hover{ border-color: var(--espresso); background: var(--espresso); color: var(--ivory); }
.mobile-cta-bar .btn{ flex:1 1 auto; }
/* Very narrow phones: the label no longer fits beside the call button at
   full padding, so tighten up and let it wrap rather than run off-screen. */
@media (max-width: 359px){
  .mobile-cta-bar{ padding-inline: var(--sp-4); }
  .mobile-cta-bar .btn{ min-width:0; padding-inline:1em; white-space:normal; text-align:center; line-height:1.25; }
}

/* ---------- Cookie consent ----------
   A small dark-glass note in the corner — the same frosted treatment as the
   photo tags and the lightbox caption — rather than a panel. It never blocks
   the page, and both choices carry exactly the same visual weight. Its width
   tracks the viewport so that at ~1000px it still stays clear of the hero's
   swatch key. On small screens it floats just above the fixed mobile-cta-bar. */
.cookie-bar{
  position:fixed; right: var(--sp-5); bottom: var(--sp-5); z-index:180;
  width: clamp(15.5rem, 100vw - 46.5rem, 21rem);
  padding: var(--sp-4); border-radius:1.25rem; border:1px solid var(--noir-line);
  background: rgba(27,20,13,0.86); color: var(--ivory-on-noir);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(20,15,9,0.65);
  animation: cookie-in .7s var(--ease) both;
}
/* Tall viewports space the hero's swatch key wider, so give it more room. */
@media (min-width: 1000px) and (min-height: 861px){
  .cookie-bar{ width: clamp(14rem, 100vw - 50rem, 21rem); }
}
.cookie-bar.is-leaving{ pointer-events:none; animation: cookie-out .22s ease-in both; }
@keyframes cookie-in{ from{ opacity:0; transform: translateY(0.75rem); } }
@keyframes cookie-out{ to{ opacity:0; transform: translateY(0.5rem); } }
.cookie-bar__text{ font-size: var(--fs-label); line-height:1.5; color: rgba(243,236,221,0.72); }
.cookie-bar__text strong{ font-weight:500; color: var(--ivory-on-noir); }
.cookie-bar__text a{ color: var(--gold-light); text-decoration:underline; text-underline-offset:2px; transition: color .35s var(--ease); }
.cookie-bar__text a:hover{ color:#fff; }
.cookie-bar__actions{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-3); }
.cookie-bar .btn{ padding:0.5em 1em; font-size: var(--fs-label); }
.cookie-bar .btn-outline{ border-color: rgba(243,236,221,0.4); color: var(--ivory-on-noir); }
.cookie-bar .btn-outline:hover{ background: var(--ivory-on-noir); border-color: var(--ivory-on-noir); color: var(--noir); transform:none; }
.cookie-bar :focus-visible{ outline-color: var(--gold-light); }
/* While the note is open, keep keyboard focus from landing underneath it
   and, where it would sit over the footer's last lines, let those scroll
   clear. */
html:has(.cookie-bar){ scroll-padding-bottom:13rem; }
@media (max-width: 1199px){
  body:has(> .cookie-bar) .site-footer{ padding-bottom: calc(var(--sp-6) + 11.5rem); }
}
@media (max-width: 999px){
  .cookie-bar{ right: var(--sp-4); bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); width:21rem; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  /* Contact has no mobile-cta-bar, so there the note sits at the bottom edge. */
  body:not(:has(.mobile-cta-bar)) .cookie-bar{ bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  /* Slim buttons, full-size touch target. */
  .cookie-bar .btn::after{ content:""; position:absolute; inset:-5px 0; }
  html:has(.cookie-bar){ scroll-padding-bottom:17rem; }
  body:has(> .cookie-bar) .site-footer{ padding-bottom: calc(var(--sp-6) + 15.5rem); }
}
@media (max-width: 599px){
  .cookie-bar{ left: var(--sp-4); width:auto; }
}
/* Where the mobile-cta-bar's label wraps to two lines, the bar is taller. */
@media (max-width: 311px){
  .cookie-bar{ bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px)); }
}
@media print{ .cookie-bar{ display:none; } }

/* ---------- Testimonial placeholder ---------- */
.testimonial-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-3);
  text-align:center; padding: var(--sp-8) var(--sp-6); border:1px dashed var(--line-strong);
  color: var(--espresso-faint); font-size: var(--fs-small); max-width:42rem; margin-inline:auto;
}
.testimonial-placeholder strong{ font-family: var(--font-display); font-size:1.3rem; font-style:italic; color: var(--espresso-soft); line-height:1.4; }

/* ---------- Review cards (preview) ----------
   Sample layout for a future reviews section — content is placeholder,
   never presented as real. Keep the preview-tag visible whenever this
   markup is in use. */
.preview-tag{
  display:inline-block; margin-top: var(--sp-4); padding:.4em 1em;
  border:1px solid var(--gold-deep); border-radius: var(--radius-pill);
  font-size: var(--fs-label); letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold-deep); font-weight:600;
}
.review-grid{ display:grid; gap: var(--sp-5); grid-template-columns:repeat(3,1fr); margin-top: var(--sp-7); }
@media (max-width:900px){ .review-grid{ grid-template-columns:1fr; max-width:32rem; margin-inline:auto; } }
.review-card{ background: var(--ivory-raised); border:1px solid var(--line); padding: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-4); }
.review-card__head{ display:flex; align-items:center; gap: var(--sp-3); }
.review-card__avatar{
  width:2.75rem; height:2.75rem; border-radius:50%; flex:0 0 auto; color:#fff;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:600; font-size:1.05rem;
}
.review-card__name{ display:block; font-size: var(--fs-small); font-weight:600; }
.review-card__stars{ color: var(--gold); font-size:.8rem; letter-spacing:1px; }
.review-card p{ font-size: var(--fs-small); color: var(--espresso-soft); margin:0; }
.review-card__foot{ display:flex; align-items:center; gap: var(--sp-2); font-size: var(--fs-label); color: var(--espresso-faint); }
.review-card__foot svg{ width:1rem; height:1rem; }

.g-rating{
  display:inline-flex; align-items:center; gap: var(--sp-3); margin-top: var(--sp-4);
  background: var(--ivory-raised); border:1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding:.5em 1.1em .5em .6em;
}
.g-rating svg{ width:1.3rem; height:1.3rem; }
.g-rating__score{ font-family: var(--font-display); font-weight:600; font-size:1.1rem; }
.g-rating__stars{ color: var(--gold); font-size:.8rem; letter-spacing:1px; }
.g-rating__count{ font-size: var(--fs-label); color: var(--espresso-faint); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--noir); color: rgba(243,236,221,.85); padding-block: var(--sp-8) var(--sp-6); }
/* Room for the fixed mobile-cta-bar so it doesn't sit over the
   copyright/privacy line at the very bottom of the page. */
@media (max-width: 999px){ .site-footer{ padding-bottom: calc(var(--sp-6) + 5.5rem); } }
.footer-grid{ display:grid; gap: var(--sp-7); grid-template-columns:1.4fr repeat(3,1fr); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap: var(--sp-3); font-family: var(--font-display); font-size:1.25rem; color:#fff; }
.footer-tag{ margin-top: var(--sp-4); max-width:24rem; font-size: var(--fs-small); color: rgba(243,236,221,.6); }
.footer-col h4{ margin-bottom: var(--sp-4); font-size: var(--fs-label); letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color: var(--gold-light); }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--sp-3); font-size: var(--fs-small); }
.footer-col a{ opacity:.85; transition: opacity .35s var(--ease), color .35s var(--ease); }
.footer-col a:hover{ opacity:1; color:#fff; }
.footer-social{ display:flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social a{ width:2.4rem; height:2.4rem; border:1px solid var(--noir-line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: border-color .35s var(--ease), color .35s var(--ease); }
.footer-social a:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.footer-bottom{
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top:1px solid var(--noir-line);
  display:flex; flex-direction:column; gap: var(--sp-3);
}
.footer-bottom > span:first-child{ font-size: var(--fs-small); color: rgba(243,236,221,.72); }
.footer-bottom > span:first-child a{ color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-color: rgba(243,236,221,.35); }
.footer-bottom > span:first-child a:hover{ color:#fff; text-decoration-color:currentColor; }
.footer-legal{ display:block; max-width:46rem; font-size: var(--fs-label); color: rgba(243,236,221,.42); line-height:1.7; }
.footer-credit{ display:block; margin-top: var(--sp-3); font-size: var(--fs-label); color: rgba(243,236,221,.38);
  text-decoration:underline; text-underline-offset:2px; text-decoration-color: rgba(243,236,221,.25); }
.footer-credit:hover{ color: rgba(243,236,221,.75); text-decoration-color:currentColor; }

/* ---------- Reveal on scroll ----------
   Visible by default; the hidden state only exists once JS proves it can
   deliver the animation (adds .js-reveal). See script.js. */
.js-reveal [data-reveal]{ opacity:0; transform:translateY(32px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js-reveal [data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- Section-level modifiers ---------- */
.has-top-rule{ border-top:1px solid var(--noir-line); }
body.body-noir{ background: var(--noir); }
.grid--tight{ gap: var(--sp-4); }

/* A trailing text link after a content block gets consistent separation,
   rather than a one-off margin on the link itself. */
.ledger + .btn-ghost, .mosaic + .btn-ghost, .grid + .btn-ghost,
.split + .btn-ghost, .creds-strip + .btn-ghost{ margin-top: var(--sp-7); }

.flow-block{ padding-block: var(--sp-8); border-top:1px solid var(--noir-line); }
.flow-title{ font-size: var(--fs-h2); margin-top: var(--sp-4); }

/* ---------- FAQ ----------
   Native <details>: keyboard-accessible and works with JS disabled. */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--sp-5);
  padding-block: var(--sp-5); cursor:pointer; list-style:none;
  font-family: var(--font-display); font-size: var(--fs-h3); color: var(--espresso);
  transition: color .35s var(--ease); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color: var(--gold-deep); }
.faq summary::after{ content:"+"; font-family: var(--font-body); font-size:1.5rem; line-height:1;
  color: var(--gold-deep); flex-shrink:0; transition: transform .35s var(--ease); }
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq details > p{ padding-bottom: var(--sp-5); color: var(--espresso-soft); max-width: var(--measure); }
.faq details > p + p{ margin-top: var(--sp-4); }


/* ==========================================================================
   Motion layer
   --------------------------------------------------------------------------
   Every rule below is scoped to .js-anim, which script.js only adds once it
   has confirmed JS is running AND the visitor has not asked for reduced
   motion. Without that class the page renders fully static and fully
   visible — no animation can ever leave content stranded.
   ========================================================================== */

/* Word-mask headline reveal */
.js-anim .w{ display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.16em; margin-bottom:-.16em; }
.js-anim .w > span{ display:inline-block; transform:translateY(115%);
  transition: transform 1s var(--ease); }
.js-anim .is-in .w > span{ transform:none; }

/* Scroll progress */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%; z-index:150;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  pointer-events:none; }

/* Page transition veil */
.page-fade{ position:fixed; inset:0; background: var(--noir); z-index:400;
  opacity:0; pointer-events:none; transition: opacity .45s var(--ease); }
.is-leaving .page-fade{ opacity:1; }
.is-entering .page-fade{ opacity:1; transition:none; }

/* Material marquee — the studio's own palette, running as a band */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block: var(--sp-5);
  background: var(--ivory-raised); }
.marquee__track{ display:flex; width:max-content;
  font-family: var(--font-display); font-size: clamp(1.4rem,1rem+1.6vw,2.4rem);
  color: var(--espresso-faint); white-space:nowrap; }
.js-anim .marquee__track{ animation: marquee 152s linear infinite; }
.marquee__track span{ display:inline-flex; align-items:center; gap: var(--sp-6); margin-right: var(--sp-6); }
.marquee__track i{ font-style:normal; color: var(--gold); }
@keyframes marquee{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .js-anim .marquee__track{ animation:none; } }

/* Pinned media column */
@media (min-width: 900px){
  .split--pinned{ align-items:start; }
  .split--pinned .pin{ position:sticky; top: calc(var(--sp-7) + 3rem); }
}



/* ==========================================================================
   Signature layer — intro, cursor, inertia, horizontal gallery
   All scoped to .js-anim and injected by script.js, so none of it can
   affect a page where JS is off or reduced motion is requested.
   ========================================================================== */

/* ---- Intro curtain ---- */
.intro{ position:fixed; inset:0; z-index:600; background: var(--noir);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap: var(--sp-5);
  transition: opacity .8s var(--ease), visibility .8s; }
.intro.is-done{ opacity:0; visibility:hidden; }
.intro__mark{ width:6rem; height:6rem; border-radius:50%; border:1px solid var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:1.4rem; color: var(--gold-light); }
.intro__mark span{ opacity:0; animation: introMark .9s var(--ease) .1s forwards; }
@keyframes introMark{ to{ opacity:1; } }
.intro__bar{ width:min(220px,40vw); height:1px; background: rgba(217,189,139,.25); overflow:hidden; }
.intro__bar i{ display:block; height:100%; width:100%; background: var(--gold-light);
  transform:scaleX(0); transform-origin:0 50%; transition: transform .4s linear; }
.intro__label{ font-size: var(--fs-label); letter-spacing:.22em; text-transform:uppercase;
  color: rgba(243,236,221,.45); }

/* ---- Custom cursor ---- */
.cursor{ position:fixed; top:0; left:0; z-index:500; pointer-events:none;
  mix-blend-mode:difference; }
.cursor__dot, .cursor__ring{ position:absolute; border-radius:50%; translate:-50% -50%; }
.cursor__dot{ width:7px; height:7px; background:#fff; }
.cursor__ring{ width:40px; height:40px; border:1px solid rgba(255,255,255,.55);
  transition: width .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease); }
.cursor__label{ position:absolute; translate:-50% -50%; color:#fff;
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transition: opacity .3s var(--ease); white-space:nowrap; }
.cursor.is-media .cursor__ring{ width:92px; height:92px; border-color:rgba(255,255,255,.8); }
.cursor.is-media .cursor__label{ opacity:1; }
.cursor.is-link .cursor__ring{ width:62px; height:62px; }
.js-anim.has-cursor, .js-anim.has-cursor a, .js-anim.has-cursor button{ cursor:none; }

/* ---- Photo lightbox ---- */
html.lightbox-open{ overflow:hidden; }
.tile, .hscroll__item, .figure-wide{ cursor: zoom-in; }
.lightbox{ position:fixed; inset:0; z-index:900; background:rgba(15,11,7,.94);
  display:flex; align-items:center; justify-content:center; padding: var(--sp-6);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease); }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:92vw; max-height:92vh; width:auto; height:auto;
  object-fit:contain; border-radius: var(--radius-sm); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox__close{ position:absolute; top: var(--sp-5); right: var(--sp-5);
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(243,236,221,.35);
  background:rgba(243,236,221,.08); color:#F3ECDD; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
.lightbox__close:hover{ background:rgba(243,236,221,.16); border-color:rgba(243,236,221,.6); }
@media (prefers-reduced-motion: reduce){ .lightbox{ transition:none; } }
.js-anim.has-cursor .lightbox{ cursor:auto; }

/* ---- Horizontal scroll gallery ----
   The header sits in normal flow at the top of a column; the track fills
   whatever height is left below it. Nothing here is layered with absolute
   positioning, so the heading can never overlap the photographs — there is
   no vertical space in which they both exist at once. */
.hscroll{ position:relative; }
.hscroll__pin{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column;
  overflow:hidden; }
.hscroll__head{ flex:0 0 auto; padding-block: var(--sp-7) var(--sp-5); }
/* The gallery track runs full-bleed to the viewport edge (for the scroll
   effect), so the header above it must match that same edge instead of the
   centered, max-width .container it inherits by default — otherwise the
   heading drifts inward relative to the photos on wide screens. */
.hscroll__head .container{ max-width:none; margin-inline:0; padding-inline: var(--sp-7); }
.hscroll__track{ flex:1 1 auto; min-height:0; display:flex; align-items:center;
  gap: var(--sp-5); padding-inline: var(--sp-7); will-change:transform; }
.hscroll__item{ flex:0 0 auto; width:min(34vw,460px); height:80%; }
.hscroll__item.is-tall{ width:min(24vw,330px); height:94%; }
.hscroll__item .frame{ height:100%; }
.hscroll__hint{ flex:0 0 auto; padding: var(--sp-3) var(--sp-7) var(--sp-6); text-align:right;
  font-size: var(--fs-label); letter-spacing:.16em; text-transform:uppercase;
  color: var(--espresso-faint); display:flex; align-items:center; justify-content:flex-end; gap: var(--sp-3); }
@media (max-width: 899px){
  .hscroll{ height:auto !important; }
  .hscroll__pin{ position:static; height:auto; display:block; padding-block: var(--sp-7); }
  .hscroll__track{ transform:none !important; flex-direction:column; padding-inline:0; }
  .hscroll__item, .hscroll__item.is-tall{ width:100%; height:auto; }
  .hscroll__item .frame, .hscroll__item.is-tall .frame{ height:auto; aspect-ratio:4/3; }
  .hscroll__head{ margin-bottom: var(--sp-5); }
  .hscroll__hint{ display:none; }
}
/* On a phone the farmhouse tile's caption runs to three lines, which would
   cover two thirds of a 4:3 photo; a squarer frame lets the room show above it. */
@media (max-width: 450px){
  .hscroll__item.has-long-caption .frame{ aspect-ratio:1/1; }
}


/* The single gallery canvas sits behind the track; frames go transparent so
   it shows through, while captions stay in the DOM above it. */
.hscroll__track{ position:relative; z-index:1; }
.has-webgl .hscroll__item .frame{ background:transparent; }

/* ---------- Utilities ---------- */
.text-center{ text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }