/* ============================================================
   JMP MEDIA — Website foundation
   Direction 01 · Refined Heritage
   brand.css — tokens, base, logo lockups, components
   Three visual directions live in themes.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bordeaux:#5C1518;
  --bordeaux-2:#6B1A1A;
  --oxblood:#2E0808;
  --champagne:#E8DCC4;
  --bone:#F5EFE3;
  --bone-2:#ECE3D2;
  --ink:#0F0E0D;
  --ink-2:#1F1D1B;
  --brass:#B8935A;
  --brass-2:#8E6F3F;

  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Inter','DM Sans',system-ui,sans-serif;

  /* Skin variables — themes & sections override these */
  --bg:var(--ink);
  --fg:var(--bone);
  --muted:rgba(245,239,227,0.62);
  --hair:rgba(184,147,90,0.22);
  --accent:var(--bordeaux);
  --accent-fg:var(--bone);
  --seam:var(--brass);

  --maxw:1320px;
  --gutter:clamp(20px,5vw,80px);
  --nav-h:76px;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }

/* ---------- type helpers ---------- */
.serif{ font-family:var(--serif); font-weight:500; }
.serif-it{ font-family:var(--serif); font-weight:400; font-style:italic; }
.micro{ font-family:var(--sans); font-weight:600; letter-spacing:0.22em; text-transform:uppercase; }
.numeral{ font-family:var(--serif); font-style:italic; font-weight:400; }

.eyebrow{
  font-family:var(--sans); font-weight:600; font-size:clamp(10px,1.1vw,12px);
  letter-spacing:0.34em; text-transform:uppercase; color:var(--seam);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:currentColor; opacity:0.8;
  display:inline-block;
}
.eyebrow.center::after{
  content:''; width:26px; height:1px; background:currentColor; opacity:0.8;
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(72px,11vw,150px); }
.section--tight{ padding-block:clamp(54px,8vw,104px); }

.section-head{ max-width:760px; }
.section-head .kicker{ margin-bottom:26px; }
.section-head h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,6vw,72px); line-height:1.02; letter-spacing:-0.01em;
  margin:0; text-wrap:balance;
}
.section-head h2 em{ font-style:italic; color:var(--accent); font-weight:400; }
.section-head .lede{
  margin-top:24px; max-width:62ch;
  font-size:clamp(16px,1.9vw,19px); line-height:1.66; color:var(--muted);
}

.idx{ font-family:var(--serif); font-style:italic; color:var(--seam); }

/* ---------- the signature slash ---------- */
.slash{
  display:inline-block; width:120px; height:9px;
  background-repeat:no-repeat; background-size:100% 100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><line x1='0' y1='6' x2='200' y2='6' stroke='%23B8935A' stroke-width='1' opacity='0.9'/><g stroke='%235C1518' stroke-width='1.6' stroke-linecap='square'><line x1='86' y1='0' x2='94' y2='12'/><line x1='96' y1='0' x2='104' y2='12'/><line x1='106' y1='0' x2='114' y2='12'/></g></svg>");
}
.slash.on-dark{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><line x1='0' y1='6' x2='200' y2='6' stroke='%23B8935A' stroke-width='1' opacity='0.9'/><g stroke='%23E8DCC4' stroke-width='1.6' stroke-linecap='square'><line x1='86' y1='0' x2='94' y2='12'/><line x1='96' y1='0' x2='104' y2='12'/><line x1='106' y1='0' x2='114' y2='12'/></g></svg>");
}

/* ---------- logo lockups (pure CSS) ---------- */
.lockup-word{ font-family:var(--serif); font-weight:300; line-height:1; letter-spacing:0.04em; }

.lockup-h{ display:inline-flex; align-items:center; gap:18px; color:var(--fg); }
.lockup-h .wm{
  font-family:var(--serif); font-weight:300; line-height:1; letter-spacing:0.04em;
  font-size:34px; display:flex; flex-direction:column; align-items:center; gap:5px;
}
.lockup-h .wm .slash{ width:60px; height:5px; }
.lockup-h .bar{ width:1px; align-self:stretch; background:var(--brass); opacity:0.5; margin:4px 0; }
.lockup-h .meta{ display:flex; flex-direction:column; gap:4px; line-height:1.25; }
.lockup-h .meta .label{ font-family:var(--sans); font-weight:600; letter-spacing:0.28em; text-transform:uppercase; font-size:10px; }
.lockup-h .meta .city{ font-family:var(--sans); font-weight:400; letter-spacing:0.2em; text-transform:uppercase; opacity:0.6; font-size:8.5px; }

.lockup-mark{
  width:52px; height:52px; position:relative; padding:7px; box-sizing:border-box;
  border:1px solid var(--brass); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; flex-shrink:0;
}
.lockup-mark::after{ content:''; position:absolute; inset:4px; border:1px solid var(--brass); opacity:0.32; }
.lockup-mark .wm{ font-family:var(--serif); font-weight:300; line-height:1; letter-spacing:0.04em; font-size:21px; }
.lockup-mark .slash{ width:28px; height:3px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:0.16em;
  text-transform:uppercase; padding:18px 34px; min-height:54px;
  position:relative; border:1px solid transparent; cursor:pointer;
  transition:background .45s ease,color .45s ease,border-color .45s ease,transform .45s ease;
  white-space:nowrap;
}
.btn .ar{ width:15px; height:15px; transition:transform .45s ease; }
.btn:hover .ar{ transform:translateX(5px); }

.btn--primary{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.btn--primary::after{
  content:''; position:absolute; inset:4px; border:1px solid rgba(245,239,227,0.28); pointer-events:none;
  transition:inset .45s ease,border-color .45s ease;
}
.btn--primary:hover{ background:var(--bordeaux-2); transform:translateY(-2px); }
.btn--primary:hover::after{ inset:6px; }

.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--hair); }
.btn--ghost:hover{ border-color:var(--brass); background:rgba(184,147,90,0.08); }

/* understated text link with animated brass underline */
.tlink{
  font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:0.2em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:12px;
  position:relative; padding-bottom:6px; color:var(--fg); white-space:nowrap;
}
.tlink::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--brass); transform:scaleX(0.34); transform-origin:left; opacity:0.7;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .ar{ width:14px; height:14px; transition:transform .45s ease; }
.tlink:hover .ar{ transform:translateX(5px); }

/* icon helper — inline SVG sprite, inherits theme colour via currentColor */
.ico{ display:inline-block; width:22px; height:22px; vertical-align:middle; flex-shrink:0; color:inherit; }
.ico use{ color:inherit; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease,height .4s ease;
  border-bottom:1px solid transparent;
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav.is-stuck{
  background:color-mix(in srgb,var(--ink) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--hair);
  height:calc(var(--nav-h) - 12px);
}
.nav__links{ display:flex; align-items:center; gap:38px; }
.nav__links a{
  font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--bone); opacity:0.78; position:relative; padding:6px 0;
  transition:opacity .35s ease;
}
.nav__links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--brass); transition:width .4s ease; }
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ width:100%; }
.nav__links a.is-current{ opacity:1; }
.nav__links a.is-current::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:26px; }
.nav__cta{ padding:13px 24px; min-height:44px; }

.nav__burger{ display:none; width:44px; height:44px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__burger span{ width:22px; height:1.5px; background:var(--bone); transition:transform .4s ease,opacity .3s ease; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--oxblood);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:var(--gutter);
  transform:translateY(-100%); transition:transform .6s cubic-bezier(.76,0,.24,1); visibility:hidden;
}
.mobile-menu.is-open{ transform:translateY(0); visibility:visible; }
.mobile-menu a{ font-family:var(--serif); font-size:clamp(34px,9vw,58px); color:var(--bone); padding:10px 0; border-bottom:1px solid var(--hair); }
.mobile-menu a:last-of-type{ border-bottom:none; }
.mobile-menu .mm-cta{ margin-top:24px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--ink); }
.hero__media video,.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* cinematic placeholder backdrop (until real reel is dropped in) */
.hero__plate{
  position:absolute; inset:-4% ; z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(184,147,90,0.16) 0%, rgba(0,0,0,0) 46%),
    radial-gradient(90% 70% at 78% 8%, rgba(120,150,190,0.14) 0%, rgba(0,0,0,0) 50%),
    linear-gradient(176deg, #14110d 0%, #2a1d14 30%, #553722 52%, #20140f 72%, #0b0908 100%);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{ from{ transform:scale(1.05) translate3d(0,0,0); } to{ transform:scale(1.14) translate3d(-2%,-2%,0); } }
.hero__grain{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0.14; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,0.5) 1px,transparent 1px); background-size:3px 3px; }
.hero__scrim{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,7,6,0.62) 0%, rgba(8,7,6,0.30) 32%, rgba(8,7,6,0.40) 64%, rgba(8,7,6,0.86) 100%); }
.hero__vignette{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.55) 100%); }

.hero__inner{ position:relative; z-index:2; width:100%; text-align:center;
  display:flex; flex-direction:column; align-items:center; padding-top:var(--nav-h); }
.hero__eyebrow{ color:var(--champagne); margin-bottom:clamp(26px,4vw,42px); }
.hero h1{
  font-family:var(--serif); font-weight:400; color:var(--bone);
  font-size:clamp(40px,7.4vw,108px); line-height:0.98; letter-spacing:-0.01em;
  margin:0; max-width:16ch; text-wrap:balance; text-shadow:0 2px 40px rgba(0,0,0,0.4);
}
.hero h1 em{ font-style:italic; color:var(--champagne); }
.hero__sub{
  margin-top:clamp(22px,3vw,34px); max-width:60ch; color:rgba(245,239,227,0.82);
  font-size:clamp(16px,2vw,21px); line-height:1.55; font-family:var(--serif); font-weight:400;
}
.hero__sub.is-sans{ font-family:var(--sans); font-size:clamp(15px,1.7vw,18px); font-weight:400; }
.hero__cta{ margin-top:clamp(34px,4.5vw,52px); display:flex; flex-direction:column; align-items:center; gap:22px; }
@media (min-width:620px){ .hero__cta{ flex-direction:row; gap:34px; } }

.hero__reeltag{
  position:absolute; left:var(--gutter); bottom:30px; z-index:2;
  font-family:'DM Sans',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(245,239,227,0.5); display:flex; align-items:center; gap:10px;
}
.hero__reeltag::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--bordeaux);
  box-shadow:0 0 0 4px rgba(92,21,24,0.3); animation:rec 2s ease-in-out infinite; }
@keyframes rec{ 50%{ opacity:0.3; } }

.hero__scroll{ position:absolute; right:var(--gutter); bottom:30px; z-index:2; display:flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(245,239,227,0.55); }
.hero__scroll .line{ width:46px; height:1px; background:var(--brass); position:relative; overflow:hidden; }
.hero__scroll .line::after{ content:''; position:absolute; inset:0; background:var(--bone); transform:translateX(-100%); animation:scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine{ 50%{ transform:translateX(100%);} 100%{ transform:translateX(100%);} }

/* ============================================================
   FORK — two split panels
   ============================================================ */
.fork{ position:relative; display:grid; grid-template-columns:1fr; }
@media (min-width:840px){ .fork{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.fork__panel{
  position:relative; overflow:hidden; min-height:clamp(420px,52vw,620px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(34px,4.4vw,66px); isolation:isolate; transition:flex .6s ease;
}
.fork__panel + .fork__panel{ border-top:1px solid var(--hair); }
@media (min-width:840px){ .fork__panel + .fork__panel{ border-top:none; border-left:1px solid var(--hair); } }
.fork__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  transform:scale(1.04); transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter 1.1s ease; filter:saturate(0.6) brightness(0.5); }
.fork__tint{ position:absolute; inset:0; z-index:-1; transition:opacity .8s ease; }
.fork__panel:hover .fork__bg{ transform:scale(1.0); filter:saturate(0.92) brightness(0.62); }
.fork__num{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.4vw,30px); color:var(--brass); margin-bottom:auto; }
.fork__kicker{ color:var(--champagne); margin-bottom:18px; }
.fork__panel h3{ font-family:var(--serif); font-weight:500; font-size:clamp(32px,4.6vw,58px); line-height:1.0; margin:0; color:var(--bone); }
.fork__panel p{ margin:16px 0 26px; max-width:40ch; color:rgba(245,239,227,0.74); font-size:clamp(15px,1.7vw,17px); line-height:1.6; }
.fork__go{ display:inline-flex; align-items:center; gap:14px; font-family:var(--sans); font-weight:600;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bone); }
.fork__go .ar{ width:18px; height:18px; transition:transform .5s ease; }
.fork__panel:hover .fork__go .ar{ transform:translateX(8px); }
.fork__panel::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%); }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.trust .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(28px,4vw,54px); }
.trust__item{ display:flex; align-items:center; gap:16px; }
.stars{ display:flex; gap:4px; color:var(--brass); }
.stars .ico{ width:17px; height:17px; }
.trust__rev .n{ font-family:var(--serif); font-size:26px; line-height:1; }
.trust__rev .c{ font-family:var(--sans); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.badge107{ display:flex; align-items:center; gap:14px; padding:12px 20px; border:1px solid var(--hair); }
.badge107 .ico{ width:26px; height:26px; color:var(--brass); }
.badge107 .t1{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }
.badge107 .t2{ font-family:var(--sans); font-size:10px; letter-spacing:0.1em; color:var(--muted); margin-top:3px; }
.trust__logos{ display:flex; align-items:center; gap:clamp(20px,3vw,38px); flex-wrap:wrap; }
.clientmark{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--fg); opacity:0.5; transition:opacity .4s ease; white-space:nowrap; }
.clientmark:hover{ opacity:0.92; }
.trust__divider{ width:1px; height:42px; background:var(--hair); }
@media (max-width:760px){ .trust__divider{ display:none; } }

/* ============================================================
   WORK PREVIEW
   ============================================================ */
.work__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,60px); }
.work__grid{ display:grid; grid-template-columns:1fr; grid-auto-rows:56vw; gap:clamp(10px,1.4vw,18px); }
.work__cell{ position:relative; overflow:hidden; grid-column:span 1; grid-row:span 1; }
@media (min-width:720px){
  .work__grid{ grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:clamp(150px,15.5vw,240px); }
  .work__cell{ grid-column:span 2; }
  .work__cell.wk-a{ grid-column:span 4; grid-row:span 2; }
  .work__cell.wk-half{ grid-column:span 3; }
}
.work__cell img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter 1.1s ease; filter:saturate(0.78); }
.work__cell:hover img{ transform:scale(1.07); filter:saturate(1); }
.work__cell::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(8,7,6,0.82) 100%); }
.work__meta{ position:absolute; left:0; bottom:0; z-index:2; padding:clamp(18px,2vw,26px); transform:translateY(8px); opacity:0; transition:transform .6s ease,opacity .6s ease; }
.work__cell:hover .work__meta{ transform:none; opacity:1; }
.work__meta .cat{ font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass); }
.work__meta .ttl{ font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); color:var(--bone); margin-top:6px; line-height:1.1; }
.work__cell .pin{ position:absolute; top:16px; right:16px; z-index:2; width:34px; height:34px; border:1px solid rgba(245,239,227,0.3);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(0.8); transition:opacity .5s ease,transform .5s ease; color:var(--bone); }
.work__cell:hover .pin{ opacity:1; transform:none; }
.work__cell .pin .ico{ width:15px; height:15px; }

/* ============================================================
   PROCESS — 3 steps
   ============================================================ */
.process__grid{ display:grid; grid-template-columns:1fr; gap:clamp(8px,2vw,0); margin-top:clamp(40px,6vw,72px); }
@media (min-width:820px){ .process__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.step{ position:relative; padding:clamp(30px,3vw,44px) clamp(24px,2.4vw,40px) clamp(40px,4vw,56px); border-top:1px solid var(--seam); }
@media (min-width:820px){ .step + .step{ border-left:1px solid var(--hair); } }
.step__n{ font-family:var(--serif); font-style:italic; font-size:clamp(48px,6vw,84px); line-height:1; color:var(--accent); opacity:0.92; }
.step h3{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,32px); margin:22px 0 0; line-height:1.1; }
.step p{ margin:14px 0 0; color:var(--muted); font-size:clamp(15px,1.6vw,16.5px); line-height:1.62; max-width:38ch; }
.step .ico{ width:26px; height:26px; color:var(--brass); margin-top:26px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{ position:relative; overflow:hidden; text-align:center; }
.cta .wrap{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.cta__grain{ position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.5) 1px,transparent 1px); background-size:3px 3px; }
.cta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(38px,6.4vw,86px); line-height:1.0; letter-spacing:-0.01em; margin:0; max-width:18ch; text-wrap:balance; }
.cta h2 em{ font-style:italic; color:var(--champagne); }
.cta .lede{ margin-top:26px; max-width:52ch; font-size:clamp(16px,1.9vw,19px); line-height:1.6; color:rgba(245,239,227,0.8); }
.cta__btns{ margin-top:clamp(34px,4.4vw,48px); display:flex; flex-direction:column; align-items:center; gap:20px; }
@media (min-width:620px){ .cta__btns{ flex-direction:row; gap:30px; } }
.cta__phone{ margin-top:30px; font-family:var(--sans); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.cta__phone a{ color:var(--champagne); }
/* On the bordeaux/oxblood CTA field, the primary button needs to pop, not blend */
.cta .btn--primary{ background:var(--champagne); color:var(--oxblood); border-color:var(--champagne); }
.cta .btn--primary::after{ border-color:rgba(46,8,8,0.22); }
.cta .btn--primary:hover{ background:var(--bone); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--bone); padding-top:clamp(60px,7vw,96px); padding-bottom:40px; border-top:1px solid var(--hair); }
.footer__top{ display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,72px); }
@media (min-width:780px){ .footer__top{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); } }
.footer__brand .lockup-h{ color:var(--bone); }
.footer__tag{ margin-top:26px; font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.4vw,27px); color:var(--champagne); max-width:24ch; line-height:1.25; }
.footer__col h4{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--brass); margin:0 0 22px; }
.footer__col a,.footer__col p{ display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:15px; color:rgba(245,239,227,0.8); }
.footer__col a .ico{ width:16px; height:16px; color:var(--brass); }
.footer__col a:hover{ color:var(--bone); }
.footer__social{ display:flex; gap:12px; margin-top:8px; }
.footer__social a{ width:42px; height:42px; border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; color:var(--bone); transition:border-color .4s ease,background .4s ease; }
.footer__social a:hover{ border-color:var(--brass); background:rgba(184,147,90,0.1); }
.footer__social a .ico{ width:17px; height:17px; }
.footer__bottom{ margin-top:clamp(48px,6vw,80px); padding-top:28px; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  font-family:var(--sans); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   MOTION — reveal primitives
   ============================================================ */
/* ============================================================
   MOTION — reveal primitives (transform-only; opacity stays 1 so
   content is never blank even if transitions are frozen/disabled)
   Hidden offsets are gated on html.jsr — added by JS, so a no-JS
   or failed-JS load shows everything in its resting position.
   ============================================================ */
.reveal{ transition: transform 1.05s cubic-bezier(.22,.61,.36,1); will-change:transform; }
html.jsr .reveal:not(.is-in){ transform:translateY(34px); }
html.jsr .reveal--sm:not(.is-in){ transform:translateY(20px); }
html.jsr .reveal--left:not(.is-in){ transform:translateX(-38px); }
html.jsr .reveal--right:not(.is-in){ transform:translateX(38px); }
@media (prefers-reduced-motion:reduce){
  html.jsr .reveal:not(.is-in){ transform:none; }
  .hero__plate{ animation:none; }
}

/* ============================================================
   RESPONSIVE — nav collapse
   ============================================================ */
@media (max-width:920px){
  .nav__links{ display:none; }
  .nav__right .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}