/* ═══════════════════════════════════════════════════════════
   JENY - Premium Hardware
   Dark luxury industrial · architectural minimalist.
   Near-black ground, champagne-gold accents, hairline rules,
   ghost buttons, quiet sentence-case editorial type.
   Type: Open Sans (300/400/600/700)
   ═══════════════════════════════════════════════════════════ */

/* ── 0. Animatable colour tokens ─────────────────────────────
   Plain custom properties jump between values - they cannot be
   transitioned. Registering them as <color> makes the VALUES
   interpolate, so when the page flips dark <-> light every
   component that reads a token fades with it, with no
   per-component transition rules needed.                    */
@property --bg      { syntax: '<color>'; inherits: true; initial-value: #151515; }
@property --bg-2    { syntax: '<color>'; inherits: true; initial-value: #1B1B1B; }
@property --bg-3    { syntax: '<color>'; inherits: true; initial-value: #101010; }
@property --tile    { syntax: '<color>'; inherits: true; initial-value: #1E1E1E; }
@property --line    { syntax: '<color>'; inherits: true; initial-value: #2A2A2A; }
@property --line-2  { syntax: '<color>'; inherits: true; initial-value: #3A3A3A; }
@property --text    { syntax: '<color>'; inherits: true; initial-value: #F2F2F2; }
@property --muted   { syntax: '<color>'; inherits: true; initial-value: #A3A39D; }
@property --faint   { syntax: '<color>'; inherits: true; initial-value: #6F6F6A; }
@property --gold    { syntax: '<color>'; inherits: true; initial-value: #F58634; }
@property --gold-2  { syntax: '<color>'; inherits: true; initial-value: #FF9D55; }
@property --on-gold { syntax: '<color>'; inherits: true; initial-value: #151515; }
@property --header-bg { syntax: '<color>'; inherits: true; initial-value: rgba(21, 21, 21, .97); }

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --gold:   #F58634;      /* brand orange            */
  --gold-2: #FF9D55;      /* hover / brighter step   */
  --on-gold: #151515;     /* text on an orange fill  */
  --header-bg: rgba(21, 21, 21, .97);   /* sticky bar, once scrolled */

  --theme-dur: .7s;       /* dark <-> light crossfade */

  /* Surfaces */
  --bg:     #151515;      /* page ground             */
  --bg-2:   #1B1B1B;      /* raised card             */
  --bg-3:   #101010;      /* topbar / deep bands     */
  --tile:   #1E1E1E;      /* image tile ground       */
  --line:   #2A2A2A;      /* hairlines               */
  --line-2: #3A3A3A;      /* stronger hairline       */

  /* Text */
  --text:   #F2F2F2;
  --muted:  #A3A39D;
  --faint:  #6F6F6A;

  /* Type */
  --font: 'Open Sans', 'Segoe UI', system-ui, sans-serif;

  /* Fluid layout */
  --shell:    1720px;
  --gutter:   clamp(14px, 1.8vw, 28px);
  --header-h: 68px;                          /* compact, once scrolled */
  --header-top: clamp(100px, 13vh, 124px);   /* expanded, at page top  */
  --sp-section: clamp(72px, 10vw, 128px);

  /* Fluid type - quiet editorial scale */
  --fs-hero: clamp(46px, 6.6vw, 94px);
  --fs-h2:   clamp(24px, 2.9vw, 38px);
  --fs-body: clamp(14.5px, 1.05vw, 16px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .6s;
  --radius: 6px;
}

/* ── 2. Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  /* the shrinking header changes layout height; scroll anchoring
     would fight it and make the header flicker between states */
  overflow-anchor: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* animating the tokens here cascades the crossfade to every
     descendant that reads them - the whole page turns at once */
  transition:
    --bg var(--theme-dur) var(--ease),
    --bg-2 var(--theme-dur) var(--ease),
    --bg-3 var(--theme-dur) var(--ease),
    --tile var(--theme-dur) var(--ease),
    --line var(--theme-dur) var(--ease),
    --line-2 var(--theme-dur) var(--ease),
    --text var(--theme-dur) var(--ease),
    --muted var(--theme-dur) var(--ease),
    --faint var(--theme-dur) var(--ease),
    --gold var(--theme-dur) var(--ease),
    --gold-2 var(--theme-dur) var(--ease),
    --on-gold var(--theme-dur) var(--ease),
    --header-bg var(--theme-dur) var(--ease);
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font); margin: 0; letter-spacing: -.01em; }
p   { margin: 0; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--on-gold); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--on-gold); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

.accent { color: var(--gold); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 3. Layout primitives ──────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-section); }

/* ── 3b. Light mode - the WHOLE page ────────────────────────
   main.js adds .is-light to <body> while a section marked
   data-theme-light sits in the middle of the viewport. Only
   the tokens change here; because they are registered as
   <color> above and transitioned on body, every surface,
   border and label in the document crossfades together.   */
body.is-light {
  --bg:      #F6F5F2;     /* warm paper ground       */
  --bg-2:    #FFFFFF;     /* raised card             */
  --bg-3:    #EFEDE8;     /* deep band               */
  --tile:    #EDEBE6;     /* image tile ground       */
  --line:    #E3E0DA;
  --line-2:  #CBC7BF;
  --text:    #17171A;
  --muted:   #5A5852;
  --faint:   #8A887F;
  /* deeper burnt orange - the brand tone is too light to read
     as text on paper (4.6:1 here vs 2.4:1 for #F58634) */
  --gold:    #B35A0D;
  --gold-2:  #8F470A;
  --on-gold: #FFFFFF;
  --header-bg: rgba(246, 245, 242, .97);
}

.section-head { max-width: 700px; margin-bottom: clamp(40px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(12px, 1.6vw, 20px);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.18;
  color: var(--text);
}

/* short gold rule under a heading - the signature stroke */
.has-rule::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin-top: 14px;
  background: var(--gold);
}
.section-head--center .has-rule::after { margin-inline: auto; }

.section-sub {
  margin-top: 16px;
  color: var(--muted);
  max-width: 54ch;
}
.section-head--center .section-sub { margin-inline: auto; }

.row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* em-dash prefixed text link: - VIEW MORE */
.dash-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.dash-link::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width .3s var(--ease);
}
.dash-link:hover { color: var(--gold-2); }
.dash-link:hover::before { width: 38px; }

/* ── 4. Buttons - understated ghost outlines ───────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}

.btn-primary { border-color: var(--gold); color: var(--gold); }
.btn-primary:hover { background: var(--gold); color: var(--on-gold); }

.btn-dark { border-color: var(--line-2); color: var(--text); }
.btn-dark:hover { border-color: var(--gold); color: var(--gold); }

.btn-outline { border-color: var(--line-2); color: var(--muted); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-sm { padding: 9px 18px; font-size: 11px; }
.btn-lg { padding: 15px 34px; }

/* download-arrow icon used in the brochure buttons */
.icon-dl {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 5. Topbar ─────────────────────────────────────────────── */
.topbar {
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
  font-size: 12px;
  color: var(--muted);
}
.topbar-note {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
}
.topbar-links { display: flex; align-items: center; gap: 22px; }
.topbar-contact { display: flex; align-items: center; gap: 22px; }
.topbar-social  { display: flex; align-items: center; gap: 18px; }
.topbar-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.topbar-links a:hover { color: var(--gold); }
.topbar-links svg { width: 15px; height: 15px; fill: currentColor; }

/* ── Social icons ──────────────────────────────────────────
   Each brand keeps its own colour instead of inheriting the
   text colour, so the marks read the same on the dark and the
   light theme. Instagram paints itself with an inline gradient
   (see jeny_social_icons); the flat pink below is what shows
   if that gradient ever fails to resolve. */
.soc {
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.soc:hover { opacity: .8; transform: translateY(-1px); }
.topbar-links a.soc:hover,
.footer-social a.soc:hover { color: inherit; }

.soc-whatsapp  svg { fill: #25D366; }
.soc-instagram svg { fill: #E1306C; }
.soc-linkedin  svg { fill: #0A66C2; }
.soc-facebook  svg { fill: #1877F2; }
.soc-youtube   svg { fill: #FF0000; }

/* ── 6. Header ─────────────────────────────────────────────── */
/* Transparent over the hero so the full-screen image reads
   edge to edge; turns solid once the user scrolls (is-stuck). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-stuck {
  background: var(--header-bg);
  border-bottom-color: var(--line);
}

/* bar: logo left · nav centred · CTA right.
   Tall at page top, shrinking to a compact bar once the user
   scrolls. The wordmark stays put in both states - only its
   size eases down to fit the shorter bar. */
.header-inner {
  height: var(--header-top);
  display: flex;
  align-items: center;
  gap: 32px;
  transition: height .35s var(--ease);
}
.site-header.is-stuck .header-inner { height: var(--header-h); }

.logo {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 130;
}
.logo img { width: auto; }

/* horizontal wordmark - wide, so it sits lower than the old
   stacked lockup did.
   The opacity delay is the outgoing half of the theme swap:
   this logo leaves BEFORE its counterpart arrives, so the two
   versions are never on screen together. */
.logo-full {
  height: clamp(46px, 5.6vh, 60px);
  transition: height .35s var(--ease), opacity .2s var(--ease) .26s;
}
.site-header.is-stuck .logo-full { height: 40px; }

/* dark-text logo, stacked on the white-text one and revealed
   when the page turns light (the swirl mark reads on both).
   Header and footer share this pair; the .logo-ink rules are
   deliberately last so they win over .footer-logo, which the
   ink image also carries. */
.logo-ink {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .2s var(--ease);
}

body.is-light .logo-full,
body.is-light .footer-logo {
  opacity: 0;
  transition: opacity .2s var(--ease);      /* leaves first  */
}
body.is-light .logo-ink {
  opacity: 1;
  transition: opacity .2s var(--ease) .26s; /* arrives after */
}

.nav { display: contents; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3vw, 42px);
  margin-inline: auto;
}

.nav-link {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 6px;
  transition: color .3s var(--ease);
}
/* numbers appear only in the mobile overlay */
.nav-num { display: none; }

/* thin gold underline, only under the text */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link.is-active { color: var(--text); }
.nav-link.is-active::after { opacity: 1; }

/* CTA + tagline shown only inside the mobile overlay */
.nav-foot { display: none; }

/* desktop CTA - borderless, reads as a quiet gold action */
.header-cta {
  flex: none;
  border-color: transparent;
  color: var(--gold);
  padding-inline: 0;
}
.header-cta:hover {
  border-color: transparent;
  background: transparent;
  color: var(--gold-2);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 130;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--text);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── 7. Hero - full-screen image slider, copy overlaid ───────
   Each slide is a full-bleed photo behind a dark scrim with
   the text on top; the whole slide travels horizontally on
   change. Stats strip sits directly below the stage. */
.hero { background: var(--bg); }

.hero-stage {
  position: relative;
  /* fill the screen below the topbar (42px); the transparent
     header floats on top of the image */
  height: calc(100svh - 42px);
  min-height: 520px;
  margin-top: calc(-1 * var(--header-top));
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
  pointer-events: none;
  /* keep the outgoing slide visible while it travels out */
  transition: transform .65s var(--ease), visibility 0s .65s;
}
.hero-slide.is-active {
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
  transition: transform .65s var(--ease);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* dark scrim: heavy over the copy side, soft at the foot so
   the light product photos never fight the text */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(16, 16, 16, .95) 0%,
      rgba(16, 16, 16, .78) 28%,
      rgba(16, 16, 16, .34) 60%,
      rgba(16, 16, 16, .5)  100%),
    /* darkened top edge keeps the transparent nav legible */
    linear-gradient(180deg, rgba(16, 16, 16, .78) 0%, transparent 22%),
    linear-gradient(0deg, rgba(16, 16, 16, .7) 0%, transparent 30%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  /* pinned: the copy sits on a dark photo scrim in both themes */
  color: #F2F2F2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* stay clear of the floating header above and the overlaid
     slider furniture below */
  padding-top: calc(var(--header-top) * .5);
  padding-bottom: clamp(56px, 9vh, 96px);
}

/* first word gold + semibold, second line white + light */
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.hero-title .accent { font-weight: 600; }

.hero-sub {
  margin-top: clamp(14px, 2vh, 20px);
  max-width: 44ch;
  color: rgba(242, 242, 242, .82);
  font-size: clamp(15px, 1.1vw, 16.5px);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.hero-copy .dash-link { margin-top: clamp(22px, 3.2vh, 36px); }

/* slider furniture overlaid on the stage foot:
   arrows left · 1 ─── 4 right */
.hero-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(16px, 2.6vh, 26px);
}

.slide-arw {
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: rgba(242, 242, 242, .55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.slide-arw:hover { color: var(--text); }
.slide-arw:hover:last-child { transform: translateX(3px); }
.slide-arw:hover:first-child { transform: translateX(-3px); }

.hero-count {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: rgba(242, 242, 242, .55);
}
.hero-count .cur { color: var(--text); }
.count-line {
  position: relative;
  width: 72px;
  height: 1px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
}
/* fills left-to-right over the slide's display time (JS-driven) */
.count-line i {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
}

/* ── 8. Stats band ─────────────────────────────────────────── */
.stats-band {
  background:
    radial-gradient(120% 180% at 15% 0%, rgba(255,255,255,.025), transparent 55%),
    radial-gradient(100% 160% at 90% 100%, rgba(245,134,52,.04), transparent 60%),
    var(--bg-3);
  border-block: 1px solid var(--line);
}

/* five cells separated by hairlines: number · label · detail */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-block: clamp(28px, 4.2vh, 46px);
}
.stats li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-inline: clamp(18px, 2.2vw, 34px);
  border-left: 1px solid var(--line);
}
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats strong {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--text);
}
.stats-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stats-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--faint);
}

/* ── 9. Trending products ──────────────────────────────────── */
.trend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.trend-card { display: block; }

.trend-tile {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.trend-card:hover .trend-tile { border-color: var(--gold); transform: translateY(-4px); }
.trend-tile img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.trend-card:hover .trend-tile img { transform: scale(1.04); }

.trend-card figcaption {
  margin-top: 16px;
  text-align: center;
}
.t-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  transition: color .3s var(--ease);
}
.trend-card:hover .t-name { color: var(--gold); }
.t-cat {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── 10. About ─────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.about-copy p:not(.eyebrow) { color: var(--muted); max-width: 54ch; }
.about-copy p + p { margin-top: 16px; }
.about-copy .section-title { margin-bottom: 24px; }

.about-facts {
  margin-top: clamp(28px, 3.6vw, 42px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.about-facts li {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.about-facts strong {
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  color: var(--text);
}
.about-facts span { font-size: 12px; color: var(--faint); }

/* the one deliberate light image - contrast break */
.about-media {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.about-media img {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
}

/* ── 11. Categories - textured tiles ───────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.cat-tile {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,255,255,.03), transparent 55%),
    var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.cat-tile:hover { border-color: var(--gold); transform: translateY(-4px); }

.cat-media { overflow: hidden; }
.cat-media img {
  width: 100%;
  height: clamp(200px, 22vw, 280px);
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.cat-tile:hover .cat-media img { transform: scale(1.04); }

.cat-name {
  padding: 16px 20px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--line);
}
.cat-name .accent { font-weight: 600; }

.center-cta {
  margin-top: clamp(32px, 4.4vw, 52px);
  text-align: center;
}

/* ── 11b. Why choose ───────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.why-item {
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.why-item:hover { border-color: var(--gold); transform: translateY(-4px); }

.why-num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold);
}
.why-item h3 {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.why-item p {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ── map link on the address ────────────────────────────────── */
/* pin sits before the text in the topbar, after it elsewhere */
.topbar-loc .icon-pin { margin: 0 5px 0 0; }

.icon-pin {
  width: 14px; height: 14px;
  margin-left: 5px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-hint {
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--faint) !important;
}

/* ── 12. Testimonials ──────────────────────────────────────── */
.testi-arrows { display: inline-flex; gap: 4px; }

.testi-head-right {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}

/* rating line under the heading */
.testi-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.testi-score { font-weight: 700; color: var(--text); }
.testi-count { color: var(--faint); }

.testi-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
}
.testi-stars .off { color: var(--line-2); }

/* stars sit above the review text */
blockquote > .testi-stars { margin-bottom: 12px; }

/* a star-only review - kept, but visibly not a quote */
.testi-notext { color: var(--faint); }

/* shown when the rating is public but the review text is not
   available - real numbers, no invented quotes */
.testi-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: clamp(30px, 4.5vw, 52px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.testi-cta .testi-stars { font-size: 20px; }
.testi-cta p { color: var(--muted); }
.testi-cta strong { color: var(--text); }

.testi-page {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4.5vw, 64px);
}
.testi-page.is-active { display: grid; }

.testi blockquote { margin: 0; }
.testi-quote-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
}
.testi-quote-title::before { content: '\201C'; }
.testi-quote-title::after  { content: '\201D'; }
.testi blockquote p {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

.testi-who {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.testi-avatar {
  flex: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  background: var(--bg-2);
}
.testi-name { font-size: 13px; font-weight: 600; color: var(--text); }
.testi-role {
  display: block;
  font-size: 11.5px;
  color: var(--faint);
  transition: color .3s var(--ease);
}
a.testi-role:hover { color: var(--gold); }

/* real Google profile photo, when the API supplies one */
.testi-avatar--img {
  padding: 0;
  object-fit: cover;
  background: var(--tile);
}

/* ── 13. Floating CTA card ─────────────────────────────────── */
.cta-float-wrap { padding-block: 0 var(--sp-section); }

.cta-float {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  padding: clamp(30px, 4.5vw, 56px);
  /* --bg-3 sits a step below the page ground, so the card reads
     as recessed rather than raised - and it still steps down
     correctly when the page flips to light */
  background:
    radial-gradient(130% 160% at 85% 10%, rgba(245,134,52,.06), transparent 55%),
    var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.cta-float-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.2;
}
.cta-float-title .rule-word {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 5px;
}
.cta-float-sub { margin-top: 12px; color: var(--muted); font-size: 14px; }

/* generic contact band kept for sub-pages */
.cta-contact { background: var(--bg); border-top: 1px solid var(--line); }

.cta-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
}

.cta-title {
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 600;
  line-height: 1.14;
}
.cta-body {
  margin-top: 16px;
  color: var(--muted);
  max-width: 44ch;
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── 14. Footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-3);
  border-top: 1px solid var(--line);
  padding-block: clamp(52px, 7vw, 84px) 28px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr .9fr 1fr .8fr;
  gap: clamp(28px, 3.5vw, 52px);
  padding-bottom: clamp(36px, 4.6vw, 56px);
  border-bottom: 1px solid var(--line);
}

.footer-logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}
/* the footer carries the full stacked lockup (mark over
   wordmark), so it needs roughly twice the height the
   horizontal header wordmark does */
.footer-logo {
  height: clamp(84px, 8.4vw, 108px);
  width: auto;
  display: block;
  transition: opacity .2s var(--ease) .26s;
}
/* override .logo-ink's vertical centring - the footer pair is
   top-aligned inside its wrapper */
.footer-logo-wrap .logo-ink { position: absolute; left: 0; top: 0; transform: none; }
.footer-brand p { color: var(--muted); font-size: 14px; }
.footer-tag {
  margin-top: 10px !important;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold) !important;
}

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 14px;
  color: var(--muted);
  width: fit-content;
  transition: color .3s var(--ease);
}
.footer-col a:hover { color: var(--gold); }
.footer-muted { font-size: 13px; color: var(--faint); }

.footer-social { display: flex; gap: 16px; }
.footer-social a {
  color: var(--muted);
  transition: color .3s var(--ease);
}
.footer-social a:hover { color: var(--gold); }
/* size only - the colour comes from the .soc-* brand rules above */
.footer-social svg { width: 18px; height: 18px; }

.footer-bottom {
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--faint);
}

.footer-made {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
}
.footer-made a {
  color: var(--gold);
  transition: color .3s var(--ease);
}
.footer-made a:hover { color: var(--gold-2); }
.made-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ── 15. Sub-pages ─────────────────────────────────────────── */

/* page hero - short header for products / contact */
.page-hero {
  display: flex;
  align-items: center;
  /* a dark intro panel tall enough to hold the first screen -
     keeps the light content section below the fold so the
     sub-pages open dark, like the home page */
  min-height: 62vh;
  min-height: 62svh;
  padding-top: clamp(48px, 8vh, 96px);
  padding-bottom: clamp(40px, 6vh, 72px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-title {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
}
.page-title .accent { font-weight: 600; }
.page-sub {
  margin-top: clamp(16px, 2.4vh, 24px);
  color: var(--muted);
  max-width: 54ch;
  font-size: clamp(14.5px, 1.1vw, 16.5px);
}

.pill-nav {
  margin-top: clamp(24px, 4vh, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  padding: 9px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.pill:hover { border-color: var(--gold); color: var(--text); }

/* product sections */
.prod-section--alt { background: var(--bg); border-block: 1px solid var(--line); }

.prod-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }

.g-tile {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.g-tile:hover { border-color: var(--gold); transform: translateY(-3px); }
.g-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.g-tile:hover img { transform: scale(1.04); }

/* spec lists (also used inside the product modal) */
.spec-list {
  margin-block: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}
.spec-list > div {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: 18px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
}
.spec-list dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.spec-list dd { font-size: 14px; color: var(--text); }

/* spec tables */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--bg-2);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 560px;
}
.spec-table th {
  text-align: left;
  padding: 14px 18px;
  background: var(--bg-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.spec-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}
.spec-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table tr:hover td { background: var(--tile); }

.note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--faint);
}

/* ── breadcrumbs ───────────────────────────────────────────── */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.crumbs a { color: var(--muted); transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--gold); }
.crumb-sep { color: var(--line-2); }
.crumb-current { color: var(--text); }
.crumbs [hidden] { display: none; }

/* ── category-first browse ─────────────────────────────────── */
.cat-grid--all { grid-template-columns: repeat(4, 1fr); }

/* the tiles double as buttons on the products page */
.cat-tile {
  padding: 0;
  font-family: var(--font);
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}
.cat-media { display: block; }
.cat-count {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.prod-view-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 3.2vw, 38px);
}
.icon-back {
  width: 14px; height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── products page: filterable grid + detail modal ─────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.filter-bar .pill {
  font-family: var(--font);
  cursor: pointer;
}
.filter-bar .pill:hover { border-color: var(--gold); color: var(--text); }
.filter-bar .pill.is-on {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245, 134, 52, .07);
}

.filter-count {
  font-size: 12.5px;
  color: var(--faint);
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* mosaic: 4 unit-columns, dense flow so every hole gets filled.
   One row unit + column ≈ square; tiles span units:
   sq = 1×1 · wide = 2×1 · tall = 1×2 (in units)            */
.plist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 10.5vw, 150px);
  grid-auto-flow: dense;
  gap: clamp(12px, 1.4vw, 20px);   /* the single grid space */
}

.plist-card {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  text-align: left;
  font-family: var(--font);
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .35s var(--ease);
}
.plist-card:hover { border-color: var(--gold); }

/* tile sizes - one row unit is half a square.
   b3 / b4 are banner tiles used to close the last row flush */
.size-sq { grid-column: span 1; grid-row: span 2; }
.size-w  { grid-column: span 2; grid-row: span 2; }
.size-t  { grid-column: span 1; grid-row: span 4; }
.size-b3 { grid-column: span 3; grid-row: span 2; }
.size-b4 { grid-column: span 4; grid-row: span 2; }

/* the image is ALWAYS a square - bigger tiles gain a detail
   panel in their extra half instead of a stretched photo   */
.plist-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.plist-card:hover img { transform: scale(1.05); }

/* horizontal tiles: image stays a true square (width = tile
   height), details fill whatever width remains */
.size-w, .size-b3, .size-b4 { display: flex; }
.size-w img, .size-b3 img, .size-b4 img {
  position: static;
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  flex: none;
}

/* tall 1×2: square image top, details below */
.size-t { display: flex; flex-direction: column; }
.size-t img {
  position: static;
  width: 100%;
  height: 50%;
  flex: none;
}

/* dark info bar over the image foot */
.plist-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plist-cat {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.plist-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* detail panel - hidden on square tiles, fills the extra
   half of wide / tall tiles */
.plist-detail { display: none; }

.size-w .plist-info, .size-t .plist-info,
.size-b3 .plist-info, .size-b4 .plist-info { display: none; }
.size-w .plist-detail, .size-t .plist-detail,
.size-b3 .plist-detail, .size-b4 .plist-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: clamp(14px, 1.6vw, 22px);
  background: var(--bg-2);
}
.size-w .plist-detail,
.size-b3 .plist-detail,
.size-b4 .plist-detail { border-left: 1px solid var(--line); }
.size-t .plist-detail { border-top: 1px solid var(--line); }

.pd-name {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.pd-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: 5px;
}
.pd-row:first-of-type { margin-top: 4px; }
.pd-k {
  flex: none;
  width: 62px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9.5px;
  color: var(--faint);
  padding-top: 2px;
}
.pd-v {
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pd-more {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.load-wrap {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
}
#loadMore[hidden] { display: none; }

/* modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  max-height: min(88vh, 100%);
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.modal-close:hover { border-color: var(--gold); color: var(--gold); }

/* gallery column: main shot above a thumbnail strip */
.modal-gallery {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--tile);
}

.modal-media {
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* curve the inner edge so the media reads as a rounded panel
     instead of a hard-cut column. overflow clips whatever is
     inside, so the still and the video both take the curve. */
  border-radius: 0 14px 14px 0;
  overflow: hidden;
}
/* the curve is set on the element as well as on its wrapper -
   overflow clipping alone is unreliable on video */
.modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 14px 14px 0;
}

.modal-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
/* single-photo products get no strip at all */
.modal-thumbs:empty { display: none; }

/* product video inside the gallery */
.modal-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  border-radius: 0 14px 14px 0;
}
.modal-media [hidden] { display: none; }

/* play marker over a video's thumbnail */
.thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 16, 16, .42);
  color: #fff;
}
.thumb-play svg { width: 15px; height: 15px; fill: currentColor; }

/* corner badge marking a card that has video */
.vid-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(16, 16, 16, .72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vid-badge svg { width: 12px; height: 12px; fill: currentColor; margin-left: 1px; }

.modal-thumb {
  position: relative;
  flex: none;
  width: 56px; height: 56px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--tile);
  overflow: hidden;
  cursor: pointer;
  opacity: .6;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal-thumb:hover { opacity: 1; }
.modal-thumb.is-on { opacity: 1; border-color: var(--gold); }

/* what the visitor is about to receive, when there is more
   than one file */
.brochure-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.brochure-list li {
  padding: 8px 0 8px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  position: relative;
}
.brochure-list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* single-column variant for the brochure lead form */
.modal-panel--form {
  grid-template-columns: 1fr;
  width: min(500px, 100%);
}
.modal-panel--form .form-submit { width: 100%; margin-top: 10px; }

.modal-body { padding: clamp(24px, 3.4vw, 44px); }
.modal-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.16;
}
.modal-desc {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14.5px;
}
.modal-body .spec-list { margin-block: clamp(20px, 2.6vw, 30px); }
.modal-body .btn { width: 100%; }

/* contact page */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

.info-list {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
}
.info-item {
  padding-block: 20px;
  border-top: 1px solid var(--line);
}
.info-item:last-child { border-bottom: 1px solid var(--line); }
.info-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.info-item p { color: var(--muted); }
.info-item a { color: var(--text); font-weight: 500; }
.info-item a:hover { color: var(--gold); }

.info-note {
  margin-top: clamp(22px, 3vw, 32px);
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--bg-2);
  font-size: 13.5px;
  color: var(--muted);
}

/* form - dark card, underline-only fields */
.contact-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: clamp(22px, 3vw, 36px);
}
.form-title {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--text);
  transition: border-color .25s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: auto; }
.field select option { background: var(--bg-2); color: var(--text); }

.form-submit { width: auto; margin-top: 6px; }

.form-status {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
  display: none;
}
.form-status.is-ok {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--bg-3);
}
.form-status.is-bad { border-left-color: #E2564B; }

/* honeypot - off-screen, never focusable */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ── 16. Motion ────────────────────────────────────────────── */
.reveal, .reveal-img {
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal     { transform: translateY(22px); }
.reveal-img { transform: translateY(22px); }
.reveal.is-in, .reveal-img.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal-img { opacity: 1; transform: none; }
}

/* ═══ 17. Responsive ═══════════════════════════════════════ */

/* Laptop */
@media (max-width: 1180px) {
  .trend-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid--all { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid, .gallery-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .plist-grid { grid-template-columns: repeat(3, 1fr); }
  /* home mosaic is a fixed 6-tile block - 2 columns keeps it flush */
  .plist-grid--home { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet - nav becomes a full-screen overlay menu */
@media (max-width: 960px) {
  /* the address is the first thing to go - phone and email stay */
  .topbar-loc { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 120;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--header-top) + clamp(20px, 4vh, 44px)) var(--gutter) clamp(24px, 4vh, 40px);
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2%);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-inline: 0;
  }
  .nav-link::after { display: none; }
  .nav-link {
    display: inline-flex;
    align-items: baseline;
    gap: 16px;
    padding: clamp(18px, 3.4vh, 28px) 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(22px, 5.5vw, 34px);
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    /* staggered entrance */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s var(--ease);
  }
  .nav.is-open .nav-link { opacity: 1; transform: none; }
  .nav.is-open .nav-link:nth-child(1) { transition-delay: .08s; }
  .nav.is-open .nav-link:nth-child(2) { transition-delay: .16s; }
  .nav.is-open .nav-link:nth-child(3) { transition-delay: .24s; }
  .nav-link:hover, .nav-link.is-active { color: var(--gold); }
  .nav-num {
    display: inline;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
  }

  .nav-foot {
    display: block;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s var(--ease) .3s, transform .4s var(--ease) .3s;
  }
  .nav.is-open .nav-foot { opacity: 1; transform: none; }
  .nav-foot .nav-cta { width: 100%; }
  .nav-tag {
    margin-top: 16px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--faint);
  }

  .hero-stage { min-height: 440px; }
  /* bias photos right so the subject peeks out of the scrim */
  .hero-bg { object-position: 70% center; }

  /* 2-up: dividers off, row rules instead */
  .stats { grid-template-columns: 1fr 1fr; gap: 22px clamp(24px, 4vw, 48px); }
  .stats li { border-left: 0; padding-inline: 0; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }

  .about-grid { grid-template-columns: 1fr; gap: clamp(28px, 4.5vw, 48px); }

  .testi-page { grid-template-columns: 1fr; gap: 32px; }

  .gallery-grid, .gallery-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .plist-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }

  /* modal stacks: image on top, details below */
  .modal-panel { grid-template-columns: 1fr; }
  /* stacked: the media sits above the copy, so the right-edge
     curve no longer makes sense */
  .modal-media, .modal-media img, .modal-video { border-radius: 0; }
  .modal-media img { aspect-ratio: 16 / 10; height: auto; }

  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 600px) {
  /* phones: tagline on the left, social icons on the right.
     The phone number and email are long, wrap badly, and are
     one tap away in the WhatsApp icon anyway. */
  .topbar-contact { display: none; }
  .topbar-links { gap: 0; margin-left: auto; }
  .topbar-social { gap: 22px; }
  .topbar-social svg { width: 18px; height: 18px; }
  .topbar-note {
    font-size: 9.5px;
    letter-spacing: .14em;
    white-space: nowrap;
  }

  .stats { grid-template-columns: 1fr; gap: 20px; }

  .trend-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .about-facts { grid-template-columns: 1fr; gap: 12px; }

  .cta-float { flex-direction: column; align-items: stretch; }
  .cta-float .btn { width: 100%; }
  .cta-inner { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { flex: 1 1 100%; }

  .spec-list > div { grid-template-columns: 1fr; gap: 4px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}

/* Phones: mosaic off - normal uniform product grid */
@media (max-width: 700px) {
  .plist-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row;
  }
  .size-sq, .size-w, .size-t, .size-b3, .size-b4 {
    grid-column: auto;
    grid-row: auto;
    display: block;          /* undo wide/tall flex layouts */
  }
  .plist-card img {
    position: static;
    width: 100%;
    aspect-ratio: 1 / 1;     /* image stays square on phones too */
    height: auto;
  }
  .plist-info { position: static; display: flex; background: var(--bg-2); }
  .plist-detail { display: none !important; }
}

/* Very small phones */
@media (max-width: 430px) {
  .plist-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
}

/* Short landscape phones */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-stage { height: auto; min-height: 100svh; }
}

/* 4K / ultrawide */
@media (min-width: 2200px) {
  :root { --shell: 2080px; }
  body { font-size: 17px; }
}