/* ==========================================================================
   CTS Custom Cabinets - homepage concept
   Design language: #3 Bold Contrast (type, spacing, composition, motion ONLY)
   Palette: CTS's real brand red extracted from their logo (#bf211e)
   ========================================================================== */

:root{
  /* --- Brand (CTS's real colors) --- */
  --red:            #bf211e;   /* exact dominant logo red */
  --red-hover:      #9c1a17;
  --red-bright:     #e0453f;   /* same family, lifted for small text on dark */
  --red-muted:      rgba(191,33,30,.30);
  --red-faint:      rgba(191,33,30,.08);

  /* --- Neutrals (Bold Contrast, matched to their black/white site) --- */
  --ink:            #0a0a0a;
  --ink-deep:       #050505;
  --ink-2:          #141414;
  --ink-3:          #1e1e1e;
  --paper:          #f5f4f1;
  --paper-2:        #e8e7e2;
  --white:          #ffffff;

  /* --- Text --- */
  --text-dark:      #0a0a0a;
  --text-body:      #46443f;
  --text-muted:     #6a6761;
  --text-light:     rgba(255,255,255,.86);
  --text-light-mut: rgba(255,255,255,.58);

  /* --- Type --- */
  --font-display:   'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'Outfit', 'Helvetica Neue', Arial, sans-serif;

  /* --- Layout --- */
  --wrap:           min(90%, 1180px);
  --wrap-wide:      min(94%, 1480px);
  --gutter:         clamp(1.25rem, 4vw, 3rem);
  --sec-y:          clamp(3.5rem, 7vw, 6.5rem);
  --nav-h:          74px;

  /* --- Motion --- */
  --spring:         cubic-bezier(.34,1.56,.64,1);
  --ease:           cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--text-body);
  font-family:var(--font-body); font-weight:300; font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.025em; margin:0; color:var(--text-dark); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--red-bright); outline-offset:3px; border-radius:2px; }

.wrap{ width:var(--wrap); margin-inline:auto; }
.wrap-wide{ width:var(--wrap-wide); margin-inline:auto; }
.section{ padding-block:var(--sec-y); position:relative; }
.section--dark{ background:var(--ink); color:var(--text-light); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--white); }
.section--deep{ background:var(--ink-deep); color:var(--text-light); }
.section--deep h2,.section--deep h3{ color:var(--white); }
.section--paper{ background:var(--paper); }
.section--paper-2{ background:var(--paper-2); }

/* Eyebrow */
.eyebrow{
  font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem;
}
.section--dark .eyebrow,.section--deep .eyebrow{ color:var(--red-bright); }
.eyebrow::after{ content:""; height:1px; width:clamp(28px,5vw,62px); background:currentColor; opacity:.55; }

/* Display scale (Bold Contrast: extreme, oversized, uppercase) */
.d1{ font-size:clamp(2.55rem,8.2vw,6.1rem); text-transform:uppercase; letter-spacing:-.035em; }
.d2{ font-size:clamp(2rem,4.9vw,3.55rem); text-transform:uppercase; letter-spacing:-.03em; }
.d3{ font-size:clamp(1.35rem,2.3vw,1.85rem); letter-spacing:-.02em; }
.lead{ font-size:clamp(1.06rem,1rem + .45vw,1.28rem); font-weight:300; line-height:1.6; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem; padding:.95rem 1.5rem;
  font-family:var(--font-display); font-size:.82rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; border-radius:999px; border:1.5px solid transparent;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .45s var(--spring);
  min-height:48px; cursor:pointer;
}
.btn__dot{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.18); transition:transform .5s var(--spring), background .3s var(--ease);
}
.btn__dot svg{ width:11px; height:11px; }
.btn:hover .btn__dot{ transform:translateX(3px) rotate(45deg); }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-hover); }
.btn--ghost-light{ color:#fff; border-color:rgba(255,255,255,.38); }
.btn--ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--ghost-light .btn__dot{ background:rgba(255,255,255,.16); }
.btn--ghost-light:hover .btn__dot{ background:rgba(10,10,10,.12); }
.btn--ghost-dark{ color:var(--ink); border-color:rgba(10,10,10,.28); }
.btn--ghost-dark:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--ghost-dark .btn__dot{ background:rgba(10,10,10,.09); }
.btn--white{ background:#fff; color:var(--ink); }
.btn--white:hover{ background:var(--ink); color:#fff; }
.btn--white .btn__dot{ background:rgba(10,10,10,.1); }
.btn--sm{ padding:.7rem 1.15rem; font-size:.72rem; min-height:44px; }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent; transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.nav.is-solid{ background:rgba(10,10,10,.94); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(255,255,255,.08); }
.nav__inner{ width:var(--wrap-wide); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.nav__logo{ width:auto; height:42px; max-width:145px; object-fit:contain; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.nav__links a{
  text-decoration:none; color:rgba(255,255,255,.82); font-size:.78rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; position:relative; padding-block:.4rem;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--red-bright);
  transition:width .35s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:none; }
@media(min-width:1080px){ .nav__cta{ display:inline-flex; } }

.nav__burger{
  display:grid; place-items:center; width:48px; height:48px; border:0; background:transparent;
  cursor:pointer; z-index:200; position:relative; padding:0;
}
.nav__burger span{ display:block; width:24px; height:2px; background:#fff; transition:transform .4s var(--spring), opacity .25s var(--ease); }
.nav__burger span+span{ margin-top:6px; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media(min-width:900px){ .nav__burger{ display:none; } }
@media(max-width:899px){ .nav__links{ display:none; } }

/* Mobile menu */
.mmenu{
  position:fixed; inset:0; z-index:150; background:var(--ink-deep);
  display:flex; flex-direction:column; justify-content:center; gap:0;
  padding:calc(var(--nav-h) + 1rem) var(--gutter) 2rem;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .45s var(--spring), visibility .35s;
  overflow-y:auto;
}
body.menu-open .mmenu{ opacity:1; visibility:visible; transform:none; }
.mmenu a{
  text-decoration:none; color:#fff; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem,8vw,2.6rem); text-transform:uppercase; letter-spacing:-.02em;
  padding-block:.42rem; border-bottom:1px solid rgba(255,255,255,.09);
}
.mmenu a:last-of-type{ border-bottom:0; }
.mmenu__foot{ margin-top:2rem; display:flex; flex-direction:column; gap:.9rem; }
.mmenu__foot .btn{ align-self:flex-start; }
.mmenu__meta{ color:var(--text-light-mut); font-size:.9rem; letter-spacing:.02em; }
.mmenu__meta a{ font-size:.95rem; text-transform:none; letter-spacing:0; font-weight:400; border:0; padding:0; color:var(--red-bright); }

/* ---------- Hero (asymmetric split slab) ---------- */
.hero{
  position:relative; background:var(--ink-deep); color:var(--text-light);
  min-height:100svh; display:grid; grid-template-columns:1fr; align-items:stretch;
}
@media(min-width:900px){
  .hero{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); min-height:100svh; }
}
.hero__panel{
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + clamp(2.5rem,7vw,4.5rem)) var(--gutter) clamp(2.5rem,6vw,4rem);
  position:relative; z-index:2;
}
@media(min-width:900px){
  /* --wrap-wide is min(94%,1480px); the % resolves against THIS element, not the viewport,
     so using it here inflated padding-left as the panel narrowed. Use vw so it is viewport-relative
     and the hero text lines up with the nav container. */
  .hero__panel{ padding-left:max(var(--gutter), calc((100vw - min(94vw, 1480px)) / 2)); padding-right:clamp(2rem,4vw,4rem); }
}
.hero__eyebrow{ margin-bottom:1.4rem; color:var(--red-bright); }
.hero__title{ color:#fff; max-width:14ch; font-size:clamp(2.4rem,4.35vw,4.05rem); }
.hero__title .accent{ color:var(--red-bright); }
.hero__rule{ width:70px; height:4px; background:var(--red); margin:1.6rem 0 1.4rem; }
.hero__sub{ color:var(--text-light); max-width:44ch; margin-bottom:2rem; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__media{ position:relative; overflow:hidden; min-height:56svh; }
@media(min-width:900px){ .hero__media{ min-height:0; } }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 46%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,5,5,1) 0%, rgba(5,5,5,.55) 11%, rgba(5,5,5,.14) 30%, rgba(5,5,5,0) 50%);
}
@media(max-width:899px){
  .hero__media::after{ background:linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.1) 45%, rgba(5,5,5,.55) 100%); }
}
.hero__tag{
  position:absolute; right:0; bottom:0; z-index:3; max-width:100%; background:var(--red); color:#fff;
  font-family:var(--font-display); font-size:.68rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; padding:.75rem 1.15rem; white-space:nowrap;
}

/* Contact rail under hero */
.rail{ background:var(--ink); border-top:1px solid rgba(255,255,255,.08); }
.rail__inner{
  width:var(--wrap-wide); margin-inline:auto; display:flex; flex-wrap:wrap; gap:.35rem clamp(1.2rem,3vw,3rem);
  padding-block:1.05rem; align-items:center;
}
.rail__item{
  display:flex; align-items:center; gap:.55rem; color:var(--text-light-mut);
  font-size:.82rem; letter-spacing:.03em; text-decoration:none; padding-block:.35rem;
  transition:color .25s var(--ease);
}
a.rail__item:hover{ color:#fff; }
.rail__item svg{ width:15px; height:15px; flex:none; color:var(--red-bright); }
.rail__item strong{ color:var(--text-light); font-weight:500; }

/* ---------- Intro ---------- */
.intro__grid{ display:grid; gap:clamp(1.8rem,4vw,3.5rem); }
@media(min-width:900px){ .intro__grid{ grid-template-columns:1.05fr 1fr; align-items:start; } }
.intro__body p{ font-size:clamp(1rem,.97rem + .2vw,1.1rem); }

/* Capability strip */
.caps{ display:grid; gap:1px; background:rgba(10,10,10,.12); margin-top:clamp(2.2rem,5vw,3.5rem); }
@media(min-width:640px){ .caps{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .caps{ grid-template-columns:repeat(4,1fr); } }
.cap{ background:var(--paper); padding:clamp(1.35rem,2.4vw,1.9rem); }
.cap svg{ width:26px; height:26px; color:var(--red); stroke-width:1.5; margin-bottom:.9rem; }
.cap h3{ font-size:1.02rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.4rem; text-transform:uppercase; }
.cap p{ font-size:.92rem; color:var(--text-muted); }

/* ---------- Services (offset splits) ---------- */
.svc{ display:grid; gap:0; align-items:stretch; border-top:1px solid rgba(255,255,255,.1); }
@media(min-width:900px){
  .svc{ grid-template-columns:1fr 1fr; }
  .svc:nth-child(even) .svc__media{ order:2; }
}
.svc__media{ position:relative; overflow:hidden; min-height:clamp(300px,52vw,540px); }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.svc:hover .svc__media img{ transform:scale(1.045); }
.svc__num{
  position:absolute; top:0; left:0; background:var(--red); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.14em;
  padding:.6rem .95rem;
}
.svc__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,4.5vw,3.6rem) clamp(1.4rem,4vw,3.4rem);
}
.svc__body h3{ font-size:clamp(1.6rem,3.2vw,2.4rem); text-transform:uppercase; margin-bottom:1rem; }
.svc__body p{ color:var(--text-light-mut); max-width:46ch; }
.svc__list{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.4rem; }
.svc__list li{
  font-size:.72rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2); color:var(--text-light); padding:.42rem .75rem; border-radius:999px;
}

/* Secondary service grid */
.svc-more{ display:flex; flex-wrap:wrap; gap:1px; background:rgba(255,255,255,.1); margin-top:clamp(2.5rem,5vw,4rem); }
.svc-more__item{ background:var(--ink); padding:clamp(1.4rem,2.6vw,2rem); flex:1 1 260px; }
.svc-more__item svg{ width:24px; height:24px; color:var(--red-bright); stroke-width:1.5; margin-bottom:.85rem; }
.svc-more__item h4{ font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:.01em; margin-bottom:.4rem; color:#fff; }
.svc-more__item p{ font-size:.9rem; color:var(--text-light-mut); }

/* ---------- Selections library (signature moment) ---------- */
.lib__head{ display:grid; gap:1.2rem; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
@media(min-width:900px){ .lib__head{ grid-template-columns:1.1fr .9fr; align-items:end; } }
.lib__count{
  font-family:var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted);
}
.lib__count b{ color:var(--red); font-size:1.05rem; }

.lib__controls{ display:grid; gap:.9rem; margin-bottom:1.6rem; }
.lib__filters{ display:flex; gap:.45rem; flex-wrap:wrap; }
@media(max-width:640px){
  .lib__filters{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .lib__filters::-webkit-scrollbar{ display:none; }
  .lib__filters>*{ flex-shrink:0; }
}
.chip{
  font-family:var(--font-display); font-size:.73rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; padding:.6rem 1rem; min-height:40px; border-radius:999px; cursor:pointer;
  border:1.5px solid rgba(10,10,10,.16); background:transparent; color:var(--text-dark);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .4s var(--spring);
}
.chip:hover{ border-color:var(--red); color:var(--red); }
.chip[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:#fff; }
.lib__search{ position:relative; max-width:420px; width:100%; }
.lib__search input{
  width:100%; font-family:var(--font-body); font-size:1rem; font-weight:300; color:var(--text-dark);
  background:var(--white); border:1.5px solid rgba(10,10,10,.14); border-radius:999px;
  padding:.8rem 1.1rem .8rem 2.6rem; min-height:48px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.lib__search input::placeholder{ color:var(--text-muted); }
.lib__search input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-faint); }
.lib__search svg{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); pointer-events:none; }

.lib__grid{ display:grid; gap:1px; background:rgba(10,10,10,.12); border:1px solid rgba(10,10,10,.12); }
@media(min-width:520px){ .lib__grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:860px){ .lib__grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1180px){ .lib__grid{ grid-template-columns:repeat(4,1fr); } }
.spec{
  background:var(--white); padding:1.05rem 1.1rem; display:flex; flex-direction:column; gap:.3rem;
  border-left:3px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--spring);
}
.spec:hover{ border-left-color:var(--red); background:#fffdfd; }
.spec__cat{ font-size:.63rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.spec__name{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; color:var(--text-dark); letter-spacing:-.01em; line-height:1.2; }
.spec__meta{ font-size:.86rem; color:var(--text-muted); }
.lib__empty{ padding:2.5rem 1.2rem; text-align:center; color:var(--text-muted); background:var(--white); }
.lib__more{ display:flex; justify-content:center; margin-top:1.4rem; }
.lib__note{ margin-top:1.2rem; font-size:.88rem; color:var(--text-muted); }

/* ---------- Gallery mosaic ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.5rem,1.2vw,.85rem); }
@media(min-width:820px){ .mosaic{ grid-template-columns:repeat(4,1fr); } }
.mos{ position:relative; overflow:hidden; background:var(--ink-2); aspect-ratio:4/5; }
.mos img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.mos:hover img{ transform:scale(1.06); }
.mos--wide{ grid-column:span 2; aspect-ratio:8/5; }
.mos--tall{ aspect-ratio:4/6; }
@media(max-width:819px){ .mos--tall{ aspect-ratio:4/5; } }
.mos__cap{
  position:absolute; left:0; bottom:0; background:rgba(5,5,5,.72); color:#fff;
  font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:.5rem .8rem; backdrop-filter:blur(4px);
}

/* ---------- Process ---------- */
.steps{ display:grid; gap:1px; background:rgba(10,10,10,.12); }
@media(min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ background:var(--paper-2); padding:clamp(1.6rem,3vw,2.4rem); }
.step__n{
  font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700;
  color:rgba(191,33,30,.78); line-height:1; margin-bottom:.7rem; letter-spacing:-.04em; /* .55 gave 2.5:1 on the light band */
}
.step h3{ font-size:1.15rem; text-transform:uppercase; margin-bottom:.5rem; }
.step p{ font-size:.95rem; color:var(--text-muted); }

/* ---------- Testimonials ---------- */
.quotes{ display:grid; gap:1px; background:rgba(255,255,255,.1); }
@media(min-width:900px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quote{ background:var(--ink); padding:clamp(1.6rem,3vw,2.3rem); display:flex; flex-direction:column; }
.quote__mark{ font-family:var(--font-display); font-size:3.2rem; font-weight:700; color:var(--red); line-height:.7; margin-bottom:.9rem; }
.quote p{ color:var(--text-light); font-size:1rem; line-height:1.62; flex:1; }
.quote__who{
  margin-top:1.3rem; font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red-bright);
}

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid rgba(10,10,10,.14); }
.faq details{ border-bottom:1px solid rgba(10,10,10,.14); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font-family:var(--font-display); font-size:clamp(1.02rem,1.6vw,1.2rem); font-weight:600;
  color:var(--text-dark); letter-spacing:-.01em; min-height:48px; display:flex; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:50%; width:13px; height:13px; margin-top:-6px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg) translateY(-3px); transition:transform .35s var(--spring);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.faq summary:hover{ color:var(--red); }
.faq__a{ padding:0 0 1.4rem; color:var(--text-muted); max-width:74ch; }

/* ---------- CTA band ---------- */
.cta{ background:var(--red); color:#fff; }
.cta h2{ color:#fff; max-width:18ch; }
.cta p{ color:rgba(255,255,255,.9); max-width:52ch; }
.cta__grid{ display:grid; gap:clamp(1.6rem,3vw,3rem); align-items:center; }
@media(min-width:900px){ .cta__grid{ grid-template-columns:1.1fr .9fr; } }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.cta__actions .btn--ghost-light{ border-color:rgba(255,255,255,.6); }

/* ---------- Footer ---------- */
.foot{ background:var(--ink-deep); color:var(--text-light-mut); padding-block:clamp(2.5rem,5vw,4rem) 1.6rem; }
.foot__grid{ display:grid; gap:2rem; }
@media(min-width:760px){ .foot__grid{ grid-template-columns:1.2fr 1fr 1fr; } }
.foot__logo{ width:auto; height:40px; max-width:150px; object-fit:contain; margin-bottom:1rem; }
.foot h4{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--red-bright); margin-bottom:1rem; }
.foot a{ text-decoration:none; color:var(--text-light-mut); transition:color .25s var(--ease); }
.foot a:hover{ color:#fff; }
.foot__links li a,.foot__contact li a,.foot__contact li span{ display:inline-block; padding-block:.4rem; font-size:.92rem; }
.foot__links li a{ padding-block:.4rem; }
.foot__bottom{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; font-size:.8rem;
}
@media(max-width:759px){ .foot__links li a,.foot__contact li a,.foot__contact li span{ padding-block:.65rem; } }

/* ---------- 404 ---------- */
.err{ min-height:100svh; display:grid; place-items:center; background:var(--ink-deep); color:var(--text-light); text-align:center; padding:calc(var(--nav-h) + 3rem) var(--gutter) 4rem; }
.err__code{ font-family:var(--font-display); font-weight:700; font-size:clamp(6rem,24vw,15rem); line-height:.85; color:var(--red-muted); letter-spacing:-.05em; }
.err h1{ color:#fff; margin:1rem 0 1rem; }
.err p{ color:var(--text-light-mut); max-width:52ch; margin-inline:auto; margin-bottom:2rem; }

/* ---------- Reveal-on-scroll ---------- */
html.js .reveal{ opacity:0; transform:translateY(26px); }
@media(prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}