/* ================================================================
   JLOVE RESTORATIONS — design tokens
   Editorial / premium-craft layout inherited from the shop template
   this site was built from. Alternates ink and cream sections; never
   two identically-structured sections back to back.

   Everything in this :root block is the single configurable theme
   layer — colors, fonts, and spacing are all defined here and consumed
   as var() everywhere else in this file. To retheme the whole site,
   change values in this block only; nothing below should need to
   change to reskin the site.

   The brand-color values below are neutral placeholders carried over
   from the source template — swap them for JLove's real palette here
   and the entire site (including the before/after sliders) updates.
   ================================================================ */
:root {
  /* ---------- Brand colors ---------- */
  --ink: #141416;
  --ink-2: #232227;          /* secondary ink shade, used in placeholder gradients */
  --cream: #EDE9E1;
  --cream-2: #E4DFD5;
  --grey: #E5E5E5;
  --red: #C2371F;
  --red-deep: #A02C19;
  --wood: #A9713F;
  --steel: #9BA1A8;
  --steel-dark: #6d7278;     /* nameplate panel gradient stop */
  --steel-light: #7c8188;    /* nameplate panel gradient stop */
  --rivet-hi: #e8e8ea;       /* nameplate rivet gradient stops */
  --rivet-mid: #8b8f94;
  --rivet-lo: #4a4d51;

  --ink-rgb: 20, 20, 22;
  --cream-rgb: 237, 233, 225;
  --grey-rgb: 229, 229, 229;
  --red-rgb: 194, 55, 31;
  --shadow-rgb: 0, 0, 0;

  /* Platform-brand color for the Instagram float/CTA — intentionally
     not part of the JLove palette above, same as Facebook blue stayed
     platform-accurate in the source template. */
  --social: #E4405F;
  --social-hover: #C13584;

  /* ---------- Surfaces (derived, rarely edited directly) ---------- */
  --ink-soft: rgba(var(--cream-rgb), 0.7);
  --cream-soft: rgba(var(--ink-rgb), 0.66);
  /* 0.5, not 0.14 — a hairline this faint failed WCAG 1.4.11 (needs 3:1)
     on both the old tan and the new grey; 0.5 clears 3:1 with margin. */
  --hairline-on-cream: rgba(var(--ink-rgb), 0.5);
  --hairline-on-ink: rgba(var(--cream-rgb), 0.16);

  /* ---------- Fonts ---------- */
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Libre Franklin', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ---------- Type scale ----------
     Every font-size in the file is one of these tokens. Ordered
     smallest to largest; the last three are fluid display sizes. */
  --text-3xs: 0.62rem;
  --text-2xs: 0.72rem;
  --text-xs: 0.76rem;
  --text-sm: 0.78rem;
  --text-sm-plus: 0.82rem;
  --text-base-minus: 0.85rem;
  --text-base: 0.9rem;
  --text-base-plus: 0.92rem;
  --text-md: 0.95rem;
  --text-md-plus: 1rem;
  --text-lg: 1.02rem;
  --text-lg-plus: 1.05rem;
  --text-xl: 1.35rem;
  --text-xl-plus: 1.4rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.6rem;
  --text-4xl: 3rem;
  --text-display-sm: clamp(1.2rem, 2.6vw, 1.8rem);
  --text-display-md: clamp(2rem, 4.4vw, 3.4rem);
  --text-display-lg: clamp(2.2rem, 6vw, 4.6rem);

  /* ---------- Spacing ----------
     Fluid clamp() values, one token per distinct gap/padding used in
     the layout, named after where each is used. */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --space-section: clamp(3.5rem, 9vw, 7rem);       /* vertical section rhythm */
  --space-hero-gap: clamp(1.5rem, 3vw, 2.25rem);
  --space-specialty-gap: clamp(1.5rem, 3vw, 2.5rem);
  --space-row-gap: clamp(1rem, 3vw, 2.5rem);        /* trust items / product rows */
  --space-carousel-gap: clamp(0.6rem, 2vw, 1.5rem);
  --space-carousel-pad: clamp(0.4rem, 1.5vw, 0.75rem);
  --space-lightbox-edge: clamp(0.5rem, 3vw, 2rem);
  --space-featured-gap: clamp(2rem, 5vw, 3rem);
  --space-row-pad: clamp(1.2rem, 3vw, 2rem);
  --space-panel-gap: clamp(2rem, 6vw, 5rem);        /* about-grid / contact-grid */
  --space-band: clamp(3rem, 8vw, 5.5rem);           /* ig-cta band padding */
  --space-footer-top: clamp(3rem, 7vw, 5rem);
  --space-float-offset: clamp(1rem, 3vw, 1.75rem);
  --ba-handle-size: 2.75rem;                        /* before/after slider grip */

  /* Fallback only — js/main.js measures the real #siteHeader height on
     load/resize and overwrites this on :root, since the header's
     rendered height isn't a fixed value (nav-toggle only appears
     below 900px, changing which child is tallest). Used by
     .hero-inner's padding-top so the headline never sits flush
     against the sticky nav regardless of actual header height. */
  --header-height: 74px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22, .7, .3, 1);
  --ease-out-back: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--grey);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
address { font-style: normal; }
::selection { background: var(--red); color: var(--cream); }

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 2000;
  background: var(--red); color: var(--cream); padding: 0.85rem 1.25rem;
  border-radius: 2px; font-weight: 700; text-decoration: none; font-family: var(--font-mono);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Type scale ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0;
}

.label {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.02em; color: var(--red-deep); margin: 0 0 1rem;
}
.label-on-dark { color: var(--red); }

.section-title { font-size: var(--text-display-md); }
.section-title.on-dark { color: var(--cream); }

.section-head { max-width: 760px; margin: 0 0 3rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm-plus); letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; padding: 0.95rem 1.8rem;
  border-radius: 2px; border: 1.5px solid currentColor; background: transparent; cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-solid { background: var(--red); border-color: var(--red); color: var(--cream); }
.btn-solid:hover, .btn-solid:focus-visible { background: var(--red-deep); border-color: var(--red-deep); }
.btn-outline-light { color: var(--cream); border-color: rgba(var(--cream-rgb), 0.5); }
.btn-outline-light:hover, .btn-outline-light:focus-visible { background: var(--cream); color: var(--ink); }
.btn-outline-dark { color: var(--ink); border-color: rgba(var(--ink-rgb), 0.4); }
.btn-outline-dark:hover, .btn-outline-dark:focus-visible { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-call { background: var(--red); color: var(--cream); border-color: var(--red); padding: 0.6rem 1.1rem; font-size: var(--text-xs); }
.btn-call:hover, .btn-call:focus-visible { background: var(--red-deep); }
.btn-call-icon { flex-shrink: 0; }
.btn-call-lg { width: 100%; padding: 1rem 1.4rem; font-size: var(--text-base); margin-top: 1.5rem; }

/* ---------- Section rhythm ---------- */
.section { padding: var(--space-section) 0; }
.section-cream { background: var(--grey); }
.section-ink { background: var(--ink); color: var(--cream); }

/* ================================================================
   HEADER / NAV
   ================================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.site-header.scrolled { background: rgba(var(--ink-rgb), 0.94); backdrop-filter: blur(8px); border-bottom-color: var(--hairline-on-ink); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); max-width: var(--container); margin: 0 auto; gap: 1.5rem; }

.brand { display: flex; align-items: center; gap: 0.6rem; }
/* Cropped the same way as .hero-logo — see that rule for why. Fixed
   height well under the header's tallest element (.nav-toggle at
   42px) so it can't grow the sticky header's height. */
.nav-logo {
  display: block; height: 30px; aspect-ratio: 2.4 / 1; width: auto;
  object-fit: cover; object-position: center; flex-shrink: 0;
}
.brand-word {
  font-family: var(--font-display); font-variation-settings: 'wdth' 112, 'wght' 800;
  text-transform: uppercase; letter-spacing: -0.01em; font-size: var(--text-lg-plus); color: var(--cream);
  display: flex; flex-direction: column; line-height: 1;
  transition: color 0.35s var(--ease);
}
.brand-word-sub { font-family: var(--font-mono); font-weight: 500; text-transform: none; letter-spacing: 0.08em; font-size: var(--text-3xs); color: var(--red); margin-top: 0.25rem; }

.nav-primary .nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--cream); position: relative; padding-bottom: 3px;
  transition: color 0.35s var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--red); transition: right 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 0.9rem; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 42px; height: 42px; background: none; border: 1px solid var(--hairline-on-ink);
  border-radius: 2px; cursor: pointer; padding: 0;
  transition: border-color 0.35s var(--ease);
}
.nav-toggle-bars span { display: block; height: 1.5px; width: 18px; background: var(--cream); transition: background 0.35s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 800; width: min(86vw, 380px);
  background: var(--ink); color: var(--cream); padding: 6rem 2rem 2.5rem;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  overflow-y: auto;
}
/* Own display:flex above ties the UA [hidden]{display:none} rule on
   specificity, so it must be restated here or a "hidden" drawer stays
   display:flex (off-screen via transform, but still in the a11y tree
   and tab order) — this is what actually removes it. */
.mobile-drawer[hidden] { display: none; }
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer-links { display: flex; flex-direction: column; gap: 1.6rem; }
.mobile-drawer-links a {
  font-family: var(--font-display); font-variation-settings: 'wdth' 112, 'wght' 800;
  text-transform: uppercase; font-size: var(--text-3xl); color: var(--cream);
}
.mobile-drawer-links a:hover, .mobile-drawer-links a:focus-visible { color: var(--red); }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 700; background: rgba(var(--ink-rgb), 0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .nav-primary { display: none; }
  .nav-toggle { display: flex; }
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative; height: 100svh; overflow: hidden;
  /* Absolute floor in addition to the viewport-relative height: on a
     short/wide viewport, cover-scaling herophoto.png so its full width
     shows means most of its height overflows and gets cropped — below
     this floor there isn't enough vertical room left to keep the sole
     in frame at any background-position. */
  min-height: max(100vh, 680px);
  background-color: var(--ink);
  background-image: url('../media/herophoto.png');
  background-size: cover; background-position: 78% 54%; background-repeat: no-repeat;
  display: flex; flex-direction: column;
}
/* Scrim: dark, built from --ink, left-to-right on desktop — heavy
   over the text column, sheer behind the logo so the shoe still
   reads. herophoto.png is a near-black shoe on a near-black ground,
   so most of the frame is already dark; this exists for the metal
   lace-hardware highlights, which are bright enough to hurt contrast
   wherever text crosses them. Flips to top-to-bottom on mobile once
   the layout stacks (see the max-width: 900px override below). */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.96) 0%, rgba(var(--ink-rgb), 0.94) 40%, rgba(var(--ink-rgb), 0.85) 58%, rgba(var(--ink-rgb), 0.55) 70%, rgba(var(--ink-rgb), 0.25) 85%, rgba(var(--ink-rgb), 0.25) 100%),
    linear-gradient(180deg, transparent 62%, rgba(var(--ink-rgb), 0.5) 100%);
}

.hero-inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: clamp(2rem, 6vw, 5rem);
  padding-top: calc(var(--header-height) + clamp(2rem, 6vw, 3.5rem));
  padding-bottom: 4.5rem;
  transition: opacity 0.15s linear;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--space-hero-gap); max-width: 800px; flex: 1 1 auto; min-width: 0; }
.hero-sub-block { text-align: left; }

.hero-headline { font-size: var(--text-display-lg); color: var(--cream); }
.hero-line { display: block; overflow: hidden; }
.hero-line > * { display: block; opacity: 0; transform: translateY(100%); }
.hero-headline em { font-style: italic; font-variation-settings: 'wdth' 100, 'wght' 500; color: var(--red); text-transform: none; }

.hero-sub { color: var(--ink-soft); font-size: var(--text-lg); margin: 0 0 1.5rem; max-width: 46ch; }
.hero-service-area {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin: -1rem 0 1.5rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Brand mark, not a full-width image — cropped via object-fit down to
   its wordmark-shaped artwork (the source PNG is a 1024x1024 canvas
   that's mostly transparent margin around a wide mark). Sized to
   carry the right side of the hero opposite the (now smaller) display
   type on the left. */
.hero-logo { flex: 0 0 auto; }
.hero-logo img {
  display: block; width: clamp(240px, 32vw, 460px); aspect-ratio: 2.4 / 1; height: auto;
  object-fit: cover; object-position: center;
}

/* Load sequence: JS toggles .is-in on #heroHeadline lines / .hero-sub-block / #heroLogo */
.hero-line > *,
.hero-sub-block,
.hero-logo { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.hero-line.is-in > * { opacity: 1; transform: translateY(0); }
.hero-sub-block.is-in { opacity: 1; }
.hero-sub-block:not(.is-in) { opacity: 0; transform: translateY(14px); }
.hero-logo.is-in { opacity: 1; transform: translateY(0); }
.hero-logo:not(.is-in) { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .hero-line > *, .hero-sub-block, .hero-logo { transition: none !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 900px) {
  .hero-inner { flex-direction: column; align-items: center; text-align: center; }
  .hero-copy { align-items: center; max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-logo img { width: clamp(160px, 46vw, 260px); }

  /* Stacked layout puts text on top, logo below — flip the scrim to
     match: heavy at the top where the headline/subhead/CTAs sit,
     easing off toward the bottom where the logo is. Portrait widths
     scale herophoto.png by height instead of width (it's square, the
     viewport isn't), so the full photo height always shows here —
     only the horizontal position needs tuning to center the shoe. */
  .hero {
    background-position: 55% 40%;
  }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(var(--ink-rgb), 0.96) 0%, rgba(var(--ink-rgb), 0.93) 30%, rgba(var(--ink-rgb), 0.8) 50%, rgba(var(--ink-rgb), 0.45) 68%, rgba(var(--ink-rgb), 0.55) 100%);
  }
}

.hero-specstrip {
  position: relative; z-index: 2; border-top: 1px solid var(--hairline-on-ink);
  background: rgba(var(--ink-rgb), 0.7); overflow: hidden; white-space: nowrap;
}
.hero-specstrip-track {
  display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.9rem var(--gutter);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); animation: specstrip-scroll 26s linear infinite;
}
.hero-specstrip .dot { color: var(--red); }
@keyframes specstrip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-specstrip-track { animation: none; } }

/* ================================================================
   SCROLL REVEAL (single system, used everywhere below the hero)
   ================================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ================================================================
   BEFORE / AFTER SLIDER — reusable image-comparison component.
   Built by js/main.js (beforeAfterSliders()) from a bare
   <div class="ba-slider" data-before data-after data-label-before
   data-label-after data-caption> mount point. A real <input
   type="range"> is the interactive divider (full native keyboard +
   screen reader support); the visible line/grip graphic is purely
   decorative and just mirrors the input's value via --ba-pos, so
   there is exactly one source of truth for the divider position.
   ================================================================ */
.ba-slider-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-specialty-gap);
}
@media (max-width: 900px) { .ba-slider-grid { grid-template-columns: 1fr; } }

.ba-slider-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden;
  background: var(--ink); touch-action: pan-y;
  --ba-pos: 50%;
}

.ba-slider-media { position: absolute; inset: 0; }
.ba-slider-media img,
.ba-slider-media .tile-placeholder { width: 100%; height: 100%; object-fit: cover; }
.ba-slider-media-after {
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
  transition: clip-path 0.05s linear;
}

.ba-badge {
  position: absolute; bottom: 0.75rem; z-index: 2; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(var(--ink-rgb), 0.72); color: var(--cream);
  padding: 0.35rem 0.7rem; border-radius: 2px;
}
.ba-badge-before { left: 0.75rem; }
.ba-badge-after { right: 0.75rem; }

.ba-slider-divider {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos); z-index: 3;
  transform: translateX(-50%); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: left 0.05s linear;
}
.ba-slider-divider::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--cream); box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), 0.25);
  transform: translateX(-50%);
}
.ba-slider-divider::after {
  content: ''; width: var(--ba-handle-size); height: var(--ba-handle-size); border-radius: 50%;
  background: var(--cream); border: 3px solid var(--red);
  box-shadow: 0 2px 10px rgba(var(--shadow-rgb), 0.4);
}

.ba-slider-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 4;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize;
}
.ba-slider-input::-webkit-slider-runnable-track { width: 100%; height: 100%; background: transparent; }
.ba-slider-input::-moz-range-track { width: 100%; height: 100%; background: transparent; border: none; }
.ba-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 3px; height: 100%; border-radius: 0;
  background: transparent; cursor: ew-resize;
}
.ba-slider-input::-moz-range-thumb {
  width: 3px; height: 100%; border-radius: 0; background: transparent; border: none; cursor: ew-resize;
}
.ba-slider-input:focus-visible ~ .ba-slider-divider::after {
  outline: 2px solid var(--red); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ba-slider-media-after, .ba-slider-divider { transition: none !important; }
}

/* ================================================================
   SPECIALTY — two square cards, corner arrow
   ================================================================ */
.specialty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-specialty-gap); }
.specialty-card-image {
  position: relative; aspect-ratio: 1 / 1; border-radius: 2px; overflow: hidden;
  background: var(--ink);
}
.specialty-card-image img { width: 100%; height: 100%; object-fit: cover; }
.specialty-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 100%);
  color: rgba(var(--cream-rgb), 0.4); font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: var(--text-sm); font-weight: 600;
}
.corner-arrow {
  position: absolute; right: 0; bottom: 0; width: 3.2rem; height: 3.2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: var(--cream);
  border-top-left-radius: 4px; transition: width 0.3s var(--ease), height 0.3s var(--ease);
}
.corner-arrow:hover, .corner-arrow:focus-visible { width: 4rem; height: 4rem; background: var(--wood); }
.specialty-card-title { margin-top: 1.2rem; font-size: var(--text-xl); }
.specialty-card-desc { margin-top: 0.6rem; color: var(--cream-soft); font-size: var(--text-md); }

@media (max-width: 900px) { .specialty-grid { grid-template-columns: 1fr; } }

/* ================================================================
   TRUST — three stat-blocks (distinct from specialty cards)
   ================================================================ */
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-item { padding: 0 var(--space-row-gap); border-left: 1px solid var(--hairline-on-ink); }
.trust-item:first-child { border-left: none; padding-left: 0; }
.trust-index { font-family: var(--font-mono); font-size: var(--text-base-minus); color: var(--red); display: block; margin-bottom: 1rem; }
.trust-title { color: var(--cream); font-size: var(--text-2xl); margin-bottom: 0.7rem; }
.trust-desc { color: var(--ink-soft); font-size: var(--text-md); }

@media (max-width: 760px) {
  .trust-row { grid-template-columns: 1fr; gap: 2.5rem; }
  .trust-item { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline-on-ink); padding-top: 2rem; }
  .trust-item:first-child { border-top: none; padding-top: 0; }
}

/* ================================================================
   GALLERY — horizontal carousel (2-up desktop / 1-up mobile) + lightbox
   ================================================================ */
.gallery-carousel { position: relative; }

.carousel-frame { display: flex; align-items: center; gap: var(--space-carousel-gap); }

.carousel-viewport { flex: 1; min-width: 0; overflow: hidden; touch-action: pan-y; }

.carousel-track {
  display: flex; margin: 0; padding: 0; list-style: none;
  transition: transform 1.5s var(--ease);
}
.carousel-track--no-transition { transition: none !important; }

.carousel-slide { flex: 0 0 auto; box-sizing: border-box; padding: 0 var(--space-carousel-pad); }

.carousel-slide .gallery-tile-btn {
  display: block; width: 100%; height: clamp(260px, 42vw, 460px); border: 0; padding: 0;
  cursor: zoom-in; background: none; border-radius: 2px; overflow: hidden;
}
.carousel-slide .gallery-tile-btn img,
.carousel-slide .tile-placeholder { width: 100%; height: 100%; object-fit: cover; }

.tile-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 100%);
  color: rgba(var(--cream-rgb), 0.4); transition: transform 0.5s var(--ease);
}
.carousel-slide .gallery-tile-btn:hover .tile-placeholder, .carousel-slide .gallery-tile-btn:focus-visible .tile-placeholder,
.carousel-slide .gallery-tile-btn:hover img, .carousel-slide .gallery-tile-btn:focus-visible img { transform: scale(1.03); }
.tp-index { font-family: var(--font-mono); font-size: var(--text-3xl); color: var(--red); font-weight: 500; }
.tp-label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 0 1rem; }

.carousel-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: var(--ink); color: var(--cream); cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.2s var(--ease);
}
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: var(--red); }
.carousel-arrow:active { transform: scale(0.94); }

.carousel-dots { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 1.75rem; }
.carousel-dot {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
}
.carousel-dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; display: block;
  background: rgba(var(--ink-rgb), 0.25); transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.carousel-dot:hover::before, .carousel-dot:focus-visible::before { background: rgba(var(--ink-rgb), 0.5); }
.carousel-dot.is-active::before { background: var(--red); transform: scale(1.4); }

@media (max-width: 640px) {
  .carousel-frame { gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track,
  .tile-placeholder,
  .carousel-slide .gallery-tile-btn:hover .tile-placeholder,
  .carousel-slide .gallery-tile-btn:hover img { transition: none !important; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(var(--ink-rgb), 0.97);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox-stage { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: min(720px, 100%); }
.lightbox-placeholder { width: 100%; aspect-ratio: 4 / 3; border-radius: 2px; }
.lightbox-placeholder .tp-index { font-size: var(--text-4xl); }
.lightbox-placeholder.lightbox-has-image { background: none; }
.lightbox-placeholder.lightbox-has-image img { width: 100%; height: 100%; object-fit: contain; border-radius: 2px; }
.lightbox-counter { font-family: var(--font-mono); font-size: var(--text-sm-plus); color: var(--ink-soft); text-align: center; margin: 0; }
.lightbox-close {
  position: absolute; top: 1.2rem; right: 1.2rem; width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--hairline-on-ink);
  border-radius: 50%; color: var(--cream); font-size: var(--text-3xl); cursor: pointer;
}
.lightbox-close:hover, .lightbox-close:focus-visible { background: var(--red); border-color: var(--red); }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--hairline-on-ink);
  border-radius: 50%; color: var(--cream); cursor: pointer;
}
.lightbox-prev { left: var(--space-lightbox-edge); }
.lightbox-next { right: var(--space-lightbox-edge); }
.lightbox-prev:hover, .lightbox-prev:focus-visible, .lightbox-next:hover, .lightbox-next:focus-visible { background: var(--red); border-color: var(--red); }

/* ================================================================
   FEATURED RESTORATION — two-column, same row-flex approach as
   .hero-inner/.hero-logo: a flexible text column plus a fixed-purpose
   media column, vertically centered against each other, stacking to
   a single left-aligned column at the same 900px breakpoint the hero
   uses. Left-aligned throughout — the checklist deliberately has no
   align-items so every row (and its checkmark) lines up on one edge
   instead of centering each row independently.
   ================================================================ */
.featured-grid {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: clamp(2rem, 6vw, 5rem);
}
.featured-copy { max-width: 640px; flex: 1 1 auto; min-width: 0; text-align: left; }
.featured-desc { color: var(--ink-soft); margin: 1.2rem 0 1.6rem; font-size: var(--text-lg); max-width: 60ch; }
.checklist { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.checklist li { display: flex; align-items: center; gap: 0.8rem; color: var(--cream); font-size: var(--text-md-plus); }

/* Same object-fit crop as .hero-logo (see that rule — the source PNG
   is a mostly-transparent square around a wide mark), just larger:
   here it's the section's sole visual anchor rather than sharing the
   frame with a background photo, so it should carry real weight. */
.featured-logo { flex: 1 1 0; min-width: 0; }
.featured-logo img {
  display: block; width: 100%; aspect-ratio: 2.4 / 1; height: auto;
  object-fit: cover; object-position: center;
}

@media (max-width: 900px) {
  .featured-grid { flex-direction: column; align-items: stretch; }
  .featured-copy { max-width: 100%; }
}
.check {
  display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--red); color: var(--cream); font-size: var(--text-base); flex-shrink: 0;
}

/* ================================================================
   SERVICES — plain rows, hover arrow
   ================================================================ */
.product-list { border-top: 1px solid var(--hairline-on-cream); }
.product-row { border-bottom: 1px solid var(--hairline-on-cream); }
.product-row-link {
  display: flex; align-items: center; gap: var(--space-row-gap);
  padding: var(--space-row-pad) 0.25rem; transition: padding-left 0.3s var(--ease);
}
.product-row-link:hover, .product-row-link:focus-visible { padding-left: 1rem; }
.product-name {
  font-family: var(--font-display); font-variation-settings: 'wdth' 112, 'wght' 800;
  text-transform: uppercase; font-size: var(--text-display-sm); flex: 1;
}
.product-arrow {
  font-size: var(--text-xl-plus); color: var(--red); opacity: 0; transform: translateX(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.product-row-link:hover .product-arrow, .product-row-link:focus-visible .product-arrow { opacity: 1; transform: translateX(0); }

/* ================================================================
   ABOUT — riveted steel nameplate panel
   ================================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-panel-gap); align-items: center; }
.about-desc { color: var(--ink-soft); margin-top: 1.3rem; font-size: var(--text-lg); max-width: 50ch; }

.nameplate {
  position: relative; background: linear-gradient(160deg, var(--steel-dark) 0%, var(--steel) 45%, var(--steel-light) 100%);
  color: var(--ink); padding: clamp(2rem, 5vw, 3rem); border-radius: 3px;
  box-shadow: 0 1.5rem 3.5rem rgba(var(--shadow-rgb), 0.4), inset 0 0 0 1px rgba(255,255,255,0.15);
}
.rivet {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--rivet-hi) 0%, var(--rivet-mid) 45%, var(--rivet-lo) 100%);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.5);
}
.rivet-tl { top: 14px; left: 14px; } .rivet-tr { top: 14px; right: 14px; }
.rivet-bl { bottom: 14px; left: 14px; } .rivet-br { bottom: 14px; right: 14px; }
.nameplate-title {
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.2em; text-transform: uppercase;
  margin: 0 0 1.4rem; color: rgba(20,20,22,0.6); text-align: center;
}
.nameplate-list { display: flex; flex-direction: column; gap: 0; }
.nameplate-row {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0;
  border-top: 1px solid rgba(20,20,22,0.18);
}
.nameplate-row dt { font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
.nameplate-row dd { font-family: var(--font-display); font-variation-settings: 'wdth' 105, 'wght' 700; text-transform: uppercase; font-size: var(--text-md); text-align: right; }

@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* ================================================================
   CONTACT
   ================================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-panel-gap); }
.contact-list { display: flex; flex-direction: column; }
.contact-row { padding: 1.1rem 0; border-top: 1px solid var(--hairline-on-ink); }
.contact-row:last-child { border-bottom: 1px solid var(--hairline-on-ink); }
.contact-row dt { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 0.4rem; }
.contact-row dd a { font-size: var(--text-lg-plus); }
.contact-row dd a:hover, .contact-row dd a:focus-visible { color: var(--red); }

@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* ================================================================
   INSTAGRAM CTA — full-bleed band
   ================================================================ */
.ig-cta { background: var(--wood); color: var(--ink); padding: var(--space-band) 0; text-align: center; }
.ig-cta-inner { display: flex; flex-direction: column; align-items: center; }
.ig-cta .label { color: var(--ink); opacity: 0.7; }
.ig-cta .btn-outline-dark { margin-top: 1.8rem; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { background: var(--ink); color: rgba(var(--cream-rgb), 0.82); padding-top: var(--space-footer-top); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--hairline-on-ink); }
.footer-tagline { margin-top: 1rem; color: var(--ink-soft); font-size: var(--text-base-plus); max-width: 28ch; }
.footer-service-area { margin-top: 0.5rem; color: var(--ink-soft); font-size: var(--text-2xs); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; max-width: 28ch; }
.footer-col h3 { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin: 0 0 1.1rem; font-weight: 600; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--red); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.6rem var(--gutter); font-size: var(--text-sm); color: var(--ink-soft); flex-wrap: wrap; max-width: var(--container); margin: 0 auto; }
.footer-call { display: none; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-call { display: inline-flex; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   INSTAGRAM FLOAT — persistent tap target, bottom-right, fades/
   slides in shortly after load
   ================================================================ */
.ig-float {
  position: fixed; right: var(--space-float-offset); bottom: var(--space-float-offset); z-index: 600;
  display: inline-flex; align-items: center; gap: 0.65rem;
  background: var(--social); color: #fff; padding: 0.7rem 1.3rem 0.7rem 0.7rem;
  border-radius: 999px; box-shadow: 0 0.75rem 1.75rem rgba(var(--shadow-rgb), 0.3);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  opacity: 0; transform: translateY(18px) scale(0.94);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ig-float.is-in { opacity: 1; transform: translateY(0) scale(1); }
.ig-float:hover, .ig-float:focus-visible { background: var(--social-hover); box-shadow: 0 1rem 2.25rem rgba(var(--shadow-rgb), 0.36); }
.ig-float-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; background: rgba(255,255,255,0.18);
}

@media (prefers-reduced-motion: reduce) {
  .ig-float { transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease) !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 640px) {
  .ig-float-text { display: none; }
  .ig-float { padding: 0.7rem; border-radius: 50%; }
  .ig-float-icon { width: 2rem; height: 2rem; background: none; }
}