/* Happy Star Building Materials – oxblood + gold (from business card) */
:root {
  --oxblood: #5E1914;       /* card base 94,25,20 */
  --oxblood-deep: #561411;  /* refined deeper 86,20,17 */
  --oxblood-rich: #7A221C;  /* lighter for hovers */
  --black: #0E0A0A;         /* subtle depth only */
  --gold: #C9A24A;          /* card foil c1 */
  --gold-light: #F3D98B;    /* card foil c2 */
  --gold-deep: #A8842E;
  --cream: #FBF6EF;
  --cream-2: #F3EADF;
  --ink: #1A1210;
  --muted: #6B5A55;
  --line: #E8D9C8;
  --white: #FFFFFF;
  --radius: 14px;
  --shadow: 0 12px 36px rgba(14, 10, 10, .12);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --arabic: "Noto Kufi Arabic", "Inter", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--gold-deep); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .45em; letter-spacing: -.015em; color: var(--ink); }
p { margin: 0 0 1em; }
.container { width: min(1160px, 100% - 36px); margin-inline: auto; }

.ph {
  background: rgba(201,162,74,.18);
  color: var(--oxblood);
  border: 1px dashed var(--gold);
  border-radius: 4px;
  padding: 0 .35em;
  font-style: normal;
}

.draft-bar {
  background: var(--oxblood);
  color: var(--gold-light);
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  padding: 7px 12px;
  letter-spacing: .02em;
}
.draft-bar .ph { background: rgba(243,217,139,.15); color: var(--gold-light); border-color: var(--gold); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.35em;
  border-radius: 999px;
  font-weight: 700; font-size: .95rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--oxblood-deep);
  box-shadow: 0 6px 18px rgba(94,25,20,.25);
}
.btn-gold:hover { color: var(--black); filter: brightness(1.05); }
.btn-oxblood {
  background: var(--oxblood);
  color: var(--gold-light);
}
.btn-oxblood:hover { background: var(--oxblood-rich); color: var(--white); }
.btn-outline-gold {
  border-color: var(--gold);
  color: var(--gold-light);
  background: transparent;
}
.btn-outline-gold:hover { background: rgba(201,162,74,.15); color: var(--gold-light); }
.btn-outline-dark {
  border-color: var(--oxblood);
  color: var(--oxblood);
  background: transparent;
}
.btn-outline-dark:hover { background: var(--oxblood); color: var(--gold-light); }
.btn-sm { padding: .55em 1em; font-size: .85rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(94,25,20,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,162,74,.35);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--gold-light); }
.brand:hover { color: var(--gold-light); }
.brand img { width: 42px; height: 42px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(201,162,74,.4); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-light); }
.brand-sub { font-size: .68rem; font-weight: 500; color: rgba(243,217,139,.75); letter-spacing: .06em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.main-nav > a:not(.btn) {
  color: rgba(243,217,139,.88);
  font-weight: 600; font-size: .9rem;
}
.main-nav > a:not(.btn):hover { color: var(--gold-light); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--gold); color: var(--gold-light);
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
}

/* Hero */
.hero {
  position: relative;
  background: var(--oxblood);
  color: var(--cream);
  overflow: hidden;
  padding: 64px 0 72px;
}
.hero-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(14,10,10,.55), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(14,10,10,.4), transparent 50%),
    linear-gradient(135deg, rgba(201,162,74,.08), transparent 40%);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 40px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  color: var(--gold);
  font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 14px;
  padding: 6px 12px;
  border: 1px solid rgba(201,162,74,.45);
  border-radius: 999px;
  background: rgba(201,162,74,.1);
}
.hero h1 {
  color: var(--gold-light);
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 16px;
}
.hero .lead {
  color: rgba(251,246,239,.82);
  font-size: 1.05rem;
  max-width: 36em;
  margin-bottom: 28px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.hero-note { font-size: .88rem; color: rgba(243,217,139,.7); margin: 0; }
.hero-card {
  background: linear-gradient(160deg, rgba(14,10,10,.55), rgba(86,20,17,.85));
  border: 1px solid rgba(201,162,74,.45);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.hero-card .card-title {
  color: var(--gold-light);
  font-size: 1.15rem;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,162,74,.3);
}
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; color: rgba(251,246,239,.9); font-size: .92rem; }
.facts svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.facts strong { display: block; color: var(--gold-light); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.facts a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }

/* Sections */
.section { padding: 72px 0; }
.section-alt { background: var(--cream); }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head .eyebrow { margin-bottom: 10px; }
.section-head h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
.section-head p { color: var(--muted); margin: 0; }

/* Category grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cat-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--oxblood), var(--gold));
}
.cat-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.cat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(94,25,20,.08);
  color: var(--oxblood);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.cat-icon svg { width: 26px; height: 26px; }
.cat-card h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--oxblood-deep); }
.cat-card p { font-size: .92rem; color: var(--muted); margin: 0; }

/* Featured products */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.feat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.feat-tile {
  height: 140px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--oxblood-deep), var(--oxblood-rich));
  position: relative;
}
.feat-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(201,162,74,.25), transparent 55%);
}
.feat-tile svg { width: 52px; height: 52px; color: var(--gold); position: relative; z-index: 1; }
.feat-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.feat-brand {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 6px;
}
.feat-body h3 { font-size: 1rem; margin-bottom: 8px; color: var(--ink); }
.feat-meta { font-size: .82rem; color: var(--muted); margin-bottom: 14px; flex: 1; }
.feat-cta { align-self: flex-start; }

/* Brands */
.brands {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}
.brand-pill {
  min-width: 160px;
  padding: 22px 36px;
  border-radius: 14px;
  border: 1px solid rgba(201,162,74,.5);
  background: linear-gradient(160deg, var(--oxblood), var(--oxblood-deep));
  color: var(--gold-light);
  text-align: center;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .08em;
  box-shadow: var(--shadow);
}
.brand-pill span {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,217,139,.7);
  margin-top: 6px;
}

/* Why us */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.why-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.why-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--gold-light);
  font-weight: 800; font-size: .9rem;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.why-card h3 { font-size: 1.05rem; color: var(--oxblood-deep); margin-bottom: 8px; }
.why-card p { margin: 0; color: var(--muted); font-size: .93rem; }

/* Location */
.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: stretch;
}
.loc-details {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.loc-details h2 { color: var(--oxblood-deep); margin-bottom: 18px; }
.loc-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.loc-list li { display: flex; gap: 12px; font-size: .95rem; }
.loc-list svg { width: 20px; height: 20px; color: var(--oxblood); flex-shrink: 0; margin-top: 3px; }
.loc-list strong { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 2px; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 320px;
  background: var(--cream-2);
}
.map-wrap iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* Contact strip */
.contact-strip {
  background: var(--oxblood);
  color: var(--cream);
  padding: 48px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-strip::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(14,10,10,.45), transparent 60%);
  pointer-events: none;
}
.contact-strip .container { position: relative; }
.contact-strip h2 { color: var(--gold-light); margin-bottom: 10px; }
.contact-strip p { color: rgba(251,246,239,.8); max-width: 36em; margin: 0 auto 22px; }
.contact-strip .hero-actions { justify-content: center; }

/* Footer */
.site-footer {
  background: var(--black);
  color: rgba(251,246,239,.75);
  padding: 40px 0 24px;
  border-top: 1px solid rgba(201,162,74,.25);
}
.footer-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px;
  padding-bottom: 28px; border-bottom: 1px solid rgba(201,162,74,.15);
  margin-bottom: 18px;
}
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand img { width: 40px; height: 40px; border-radius: 9px; }
.footer-brand .brand-name { color: var(--gold-light); }
.footer-brand .brand-sub { color: rgba(243,217,139,.55); }
.ar-name {
  font-family: var(--arabic);
  direction: rtl;
  color: var(--gold);
  font-size: .95rem;
  font-weight: 600;
  margin-top: 10px;
  max-width: 22em;
}
.footer-meta { text-align: right; font-size: .88rem; }
.footer-meta a { color: var(--gold-light); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: .8rem; color: rgba(251,246,239,.45);
}

/* Mobile */
@media (max-width: 900px) {
  .hero-inner, .loc-grid { grid-template-columns: 1fr; }
  .cat-grid, .feat-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .footer-meta { text-align: left; }
}
@media (max-width: 640px) {
  .main-nav { display: none; }
  .main-nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--oxblood-deep);
    padding: 16px 18px 20px;
    border-bottom: 1px solid rgba(201,162,74,.3);
    gap: 12px;
  }
  .nav-toggle { display: inline-flex; }
  .header-inner { position: relative; }
  .cat-grid, .feat-grid, .why-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 48px; }
  .section { padding: 52px 0; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}


/* Nav products dropdown */
.nav-products { position: relative; }
.nav-products-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(243,217,139,.88);
  font-weight: 600; font-size: .9rem; font-family: inherit;
  padding: 0; display: inline-flex; align-items: center; gap: 4px;
}
.nav-products-btn::after { content: "▾"; font-size: .7em; opacity: .8; }
.nav-products-btn:hover { color: var(--gold-light); }
.nav-dropdown {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 220px;
  background: var(--oxblood-deep);
  border: 1px solid rgba(201,162,74,.4);
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--shadow);
  z-index: 60;
}
.nav-dropdown.open { display: flex; flex-direction: column; gap: 2px; }
.nav-dropdown a {
  color: rgba(243,217,139,.9);
  font-weight: 600; font-size: .88rem;
  padding: 10px 12px; border-radius: 8px;
}
.nav-dropdown a:hover, .nav-dropdown a.is-active {
  background: rgba(201,162,74,.15); color: var(--gold-light);
}
.main-nav > a.is-active { color: var(--gold-light); }
@media (max-width: 640px) {
  .nav-products { width: 100%; }
  .nav-products-btn { width: 100%; justify-content: space-between; padding: 4px 0; }
  .nav-dropdown {
    position: static; margin-top: 6px;
    box-shadow: none; border-radius: 8px;
  }
}

/* Category tiles as links */
a.cat-card { color: inherit; display: block; }
a.cat-card:hover { color: inherit; }
a.cat-card h3 { color: var(--oxblood-deep); }

/* Featured browse link */
.feat-cat-link {
  display: inline-block; margin-top: 10px;
  font-size: .82rem; font-weight: 600; color: var(--oxblood);
}
.feat-cat-link:hover { color: var(--gold-deep); }

/* Category page hero */
.page-hero {
  background: var(--oxblood);
  color: var(--cream);
  padding: 48px 0 40px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(14,10,10,.4), transparent 50%),
    linear-gradient(135deg, rgba(201,162,74,.08), transparent 40%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 {
  color: var(--gold-light);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  margin-bottom: 12px;
}
.page-hero .lead {
  color: rgba(251,246,239,.82);
  max-width: 40em; margin-bottom: 10px;
}
.page-count {
  font-size: .88rem; color: rgba(243,217,139,.7); margin: 0;
}
.prod-grid { margin-top: 0; }
.empty-cat-wrap { max-width: 480px; }
.empty-cat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Shop with prices (product photos) */
.shop-jump { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.shop-jump a { display: inline-block; padding: 6px 14px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-light); font-size: .85rem; font-weight: 600; }
.shop-jump a:hover { background: rgba(201,162,74,.15); color: var(--gold-light); }
.shop-photo { background: var(--white); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.shop-photo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; display: block; }
.shop-price { font-size: 1.25rem; font-weight: 800; color: var(--oxblood); margin: 0 0 14px; }
.shop-price-ask { font-size: 1rem; font-weight: 700; color: var(--gold-deep); }
.shop-card .feat-meta { flex: 0; margin-bottom: 8px; }
.shop-card .feat-body h3 { flex: 1; }
.cat-photo { aspect-ratio: auto; height: 140px; }
.cat-photo img { padding: 8px; }
.prod-group-title { font-size: 1.35rem; color: var(--oxblood); margin: 8px 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
.prod-grid + .prod-group-title { margin-top: 44px; }

/* ===== Category range section (redesign 2026-11) ===== */
.range-section {
  --range-bg: #F7EFE6;      /* warm cream */
  --range-blush: #F3E3DF;   /* blush */
  --range-champ: #EFE2C8;   /* champagne */
  position: relative;
  background:
    radial-gradient(1200px 500px at 100% 0%, rgba(201,162,74,.16), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(94,25,20,.07), transparent 60%),
    var(--range-bg);
  overflow: hidden;
  isolation: isolate;
}
.range-pattern {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M28 4l4 8 8 4-8 4-4 8-4-8-8-4 8-4z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.range-head h2 { color: var(--oxblood-deep); }
.range-head p { color: #6B4F48; }
.range-eyebrow {
  color: var(--oxblood) !important;
  border-color: rgba(201,162,74,.55) !important;
  background: rgba(255,255,255,.55) !important;
}
.range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.range-card {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  background: #FFFBF6;
  border: 1px solid rgba(201,162,74,.35);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(94,25,20,.07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.range-card:hover, .range-card:focus-visible {
  color: inherit;
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(94,25,20,.16);
}
.range-card:active { transform: scale(.985); }
.range-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Media header */
.range-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 50% 60%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, var(--range-blush), var(--range-champ));
  overflow: hidden;
}
.range-media::after { /* gold rule + soft bottom shade */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--oxblood), var(--gold), var(--gold-light), var(--gold));
}
.range-media img {
  position: absolute;
  object-fit: contain;
  mix-blend-mode: multiply;   /* white photo backgrounds melt into the pastel */
  transition: transform .45s ease;
}
.range-media--collage .rm-main { width: 54%; height: 86%; left: 23%; top: 8%; z-index: 2; }
.range-media--collage .rm-left { width: 40%; height: 64%; left: 2%; top: 30%; opacity: .9; }
.range-media--collage .rm-right { width: 40%; height: 64%; right: 2%; top: 26%; opacity: .9; }
.range-media--duo .rm-main { width: 46%; height: 84%; left: 6%; top: 8%; z-index: 2; border-radius: 12px; mix-blend-mode: normal; object-fit: cover; box-shadow: 0 10px 24px rgba(94,25,20,.18); }
.range-media--duo .rm-right { width: 46%; height: 62%; right: 6%; top: 26%; border-radius: 12px; mix-blend-mode: normal; object-fit: cover; box-shadow: 0 10px 24px rgba(94,25,20,.14); }
.range-card:hover .rm-main { transform: scale(1.06); }
.range-card:hover .rm-left { transform: translateX(-4px) rotate(-3deg); }
.range-card:hover .rm-right { transform: translateX(4px) rotate(3deg); }

.range-media--icon { display: grid; place-items: center; }
.range-media--icon svg {
  width: 42%; height: 72%;
  color: var(--oxblood);
  filter: drop-shadow(0 6px 14px rgba(201,162,74,.45));
  transition: transform .45s ease;
}
.range-card:hover .range-media--icon svg { transform: scale(1.08) rotate(-4deg); }
.range-media--glow {
  background:
    radial-gradient(circle at 50% 50%, rgba(243,217,139,.85) 0%, rgba(243,217,139,0) 45%),
    repeating-radial-gradient(circle at 50% 50%, rgba(201,162,74,.18) 0 1px, transparent 1px 18px),
    linear-gradient(160deg, var(--range-blush), var(--range-champ));
}
.range-media--paint {
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(94,25,20,.12) 18% 30%, transparent 30% 38%, rgba(201,162,74,.28) 38% 52%, transparent 52% 60%, rgba(243,227,223,.9) 60% 74%, transparent 74%),
    linear-gradient(160deg, var(--range-blush), var(--range-champ));
}
.range-num {
  position: absolute; top: 12px; left: 14px; z-index: 3;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  color: var(--oxblood);
  background: rgba(255,251,246,.85);
  border: 1px solid rgba(201,162,74,.6);
  border-radius: 999px; padding: 3px 9px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* Body */
.range-body { padding: 18px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.range-body h3 { font-size: 1.14rem; margin: 0 0 6px; color: var(--oxblood-deep); }
.range-body p { font-size: .92rem; line-height: 1.5; color: #6B4F48; margin: 0 0 14px; }
.range-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 12px; border-top: 1px dashed rgba(201,162,74,.5);
}
.range-brands { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.range-go {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: .84rem; font-weight: 700; color: var(--oxblood);
  background: rgba(94,25,20,.06); border-radius: 999px; padding: 6px 12px;
  transition: background .2s, color .2s;
}
.range-go svg { width: 16px; height: 16px; transition: transform .2s; }
.range-card:hover .range-go { background: var(--oxblood); color: var(--gold-light); }
.range-card:hover .range-go svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .range-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
/* Phone: compact horizontal cards, photo panel on the left */
@media (max-width: 640px) {
  .range-grid { grid-template-columns: 1fr; gap: 12px; }
  .range-card { flex-direction: row; border-radius: 16px; min-height: 136px; }
  .range-media { aspect-ratio: auto; width: 38%; flex-shrink: 0; }
  .range-media::after { left: auto; top: 0; right: 0; bottom: 0; width: 3px; height: auto;
    background: linear-gradient(180deg, var(--oxblood), var(--gold), var(--gold-light)); }
  .range-media--collage .rm-main { width: 80%; height: 76%; left: 10%; top: 14%; }
  .range-media--collage .rm-left, .range-media--collage .rm-right { display: none; }
  .range-media--duo .rm-main { width: 70%; height: 72%; left: 15%; top: 14%; }
  .range-media--duo .rm-right { display: none; }
  .range-media--icon svg { width: 58%; height: 58%; }
  .range-num { top: 8px; left: 8px; font-size: .64rem; padding: 2px 7px; }
  .range-body { padding: 12px 14px 12px; min-width: 0; flex: 1 1 0; }
  .range-body h3 { font-size: 1.02rem; margin-bottom: 4px; }
  .range-body p { font-size: .83rem; line-height: 1.42; margin-bottom: 10px; }
  .range-foot { padding-top: 8px; }
  .range-brands { font-size: .64rem; letter-spacing: .06em; }
  .range-foot { gap: 8px; }
  .range-brands { min-width: 0; line-height: 1.35; }
  .range-go { font-size: 0; gap: 0; padding: 0; width: 30px; height: 30px; justify-content: center; background: var(--oxblood); color: var(--gold-light); }
  .range-go svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .range-card, .range-media img, .range-media svg, .range-go svg { transition: none; }
}

/* Lighting category photo */
.range-media--photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.range-card:hover .range-media--photo img { transform: scale(1.05); }
/* Fade-in cards */
.js-reveal .range-card { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease; }
.js-reveal .range-card.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lux-track { animation: none !important; }
  .lux-pause { display: none; }
  .js-reveal .range-card { opacity: 1; transform: none; }
}
/* Lighting page featured gallery */
.lux-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lux-gallery figure { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.lux-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.lux-gallery figcaption { padding: 10px 12px; font-weight: 600; font-size: .92rem; color: var(--oxblood); }
@media (max-width: 860px) { .lux-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ===== Featured: photo marquee ===== */
.fx-wrap { position: relative; margin-inline: calc(50% - 50vw); }
.fx-wrap::before, .fx-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; }
.fx-wrap::before { left: 0; background: linear-gradient(90deg, var(--cream), transparent); }
.fx-wrap::after { right: 0; background: linear-gradient(-90deg, var(--cream), transparent); }
.fx-scroller { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 8px 0 18px; outline: none; }
.fx-scroller::-webkit-scrollbar { display: none; }
.fx-track { display: flex; gap: 16px; width: max-content; padding-inline: 16px; }
.fx-card { width: 230px; flex: 0 0 auto; background: #FFFBF6; border: 1px solid #EFE2C8; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(94,25,20,.08); transition: transform .3s ease, box-shadow .3s ease; }
.fx-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(94,25,20,.14); }
.fx-media { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #FFFFFF 0%, rgba(255,255,255,0) 60%), linear-gradient(155deg, #F3E3DF, #EFE2C8); }
.fx-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--oxblood), var(--gold), var(--gold-light)); }
.fx-media img { width: 100%; height: 100%; display: block; transition: transform .45s ease; }
.fx-cut img { object-fit: contain; padding: 12%; mix-blend-mode: multiply; }
.fx-room img { object-fit: cover; }
.fx-card:hover .fx-media img { transform: scale(1.06); }
.fx-body { padding: 12px 14px 14px; }
.fx-brand { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 4px; }
.fx-body h3 { font-size: .95rem; line-height: 1.25; margin: 0 0 10px; color: var(--ink); min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-cta { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--oxblood); border: 1px solid rgba(94,25,20,.35); border-radius: 999px; padding: 5px 10px; text-decoration: none; white-space: nowrap; }
.fx-cta:hover { background: var(--oxblood); color: #fff; }
@media (max-width: 640px) {
  .fx-track { gap: 10px; padding-inline: 12px; }
  .fx-card { width: 150px; border-radius: 13px; }
  .fx-body { padding: 9px 10px 11px; }
  .fx-brand { font-size: .6rem; }
  .fx-body h3 { font-size: .8rem; margin-bottom: 8px; }
  .fx-cta { font-size: .64rem; padding: 4px 8px; }
  .fx-wrap::before, .fx-wrap::after { width: 18px; }
}
#featured { overflow-x: clip; }

/* ===== Compact hero ===== */
.hero.hero--compact { padding: 26px 0 22px; }
.hero--compact h1 { font-size: clamp(1.45rem, 3.4vw, 2.3rem); line-height: 1.15; margin: 0 0 14px; max-width: 24em; }
.hero--compact .eyebrow { margin-bottom: 10px; font-size: .7rem; padding: 4px 10px; }
.hero-compact-inner { position: relative; }
.hero-mini { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  color: var(--gold-light); border: 1px solid rgba(201,162,74,.55); text-decoration: none; background: rgba(14,10,10,.18); }
.chip svg { width: 15px; height: 15px; }
.chip-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--oxblood-deep); border-color: transparent; }
@media (max-width: 640px) { .hero.hero--compact { padding: 18px 0 16px; } }

/* ===== Showcase slideshow ===== */
.show { background: var(--oxblood-deep); }
.show-stage { position: relative; width: 100%; height: clamp(360px, 56vw, 720px); overflow: hidden; background: transparent; touch-action: pan-y; }
@media (min-width: 900px) { .show-stage { height: clamp(480px, 52vw, 720px); max-width: none; margin: 0; } }
@media (max-width: 640px) { .show-stage { height: clamp(340px, 78vw, 520px); } }
.show-slide { position: absolute; inset: 0; padding: 8px; visibility: hidden; z-index: 0; background: transparent; }
.show-slide.is-prev { visibility: visible; z-index: 1; }
.show-slide.is-active { visibility: visible; z-index: 2; animation: sIn .7s ease both; }
.show-grid { display: grid; height: 100%; gap: 8px; }
.l1 .show-grid { grid-template: 1fr / 1fr; }
.l2 .show-grid { grid-template-columns: 1fr 1fr; }
.l3 .show-grid { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
.l3 .st:first-child { grid-row: span 2; }
.l4 .show-grid { grid-template: 1fr 1fr / 1fr 1fr; }
.l6 .show-grid { grid-template: 1fr 1fr / repeat(3, 1fr); }
@media (max-width: 640px) { .l6 .show-grid { grid-template: repeat(3, 1fr) / 1fr 1fr; } .show-grid { gap: 6px; } .show-slide { padding: 6px; } }
.l1 .st-room img { object-fit: cover; object-position: center 28%; }
.st { margin: 0; position: relative; overflow: hidden; border-radius: 16px; background: #2a1210; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.st img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-cut { background: radial-gradient(circle at 50% 55%, #FFFFFF 0%, rgba(255,255,255,0) 62%), linear-gradient(155deg, #F3E3DF, #EFE2C8); }
.st-cut img { object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.show-cap { position: absolute; left: 18px; bottom: 16px; z-index: 3; margin: 0; max-width: 62%;
  color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .01em; padding: 6px 12px; border-radius: 999px;
  background: rgba(14,10,10,.5); border: 1px solid rgba(201,162,74,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-active .show-cap { animation: capIn .6s .35s ease both; }
/* gentle drift on room photos */
.is-active .st-room img { animation: drift var(--dur) linear both; }
/* transitions */
.t-kb.is-active .st img { animation: kb calc(var(--dur) + 800ms) ease-out both; }
.t-left.is-active .st { animation: inL .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 130ms); }
.t-right.is-active .st { animation: inR .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 130ms); }
.t-up.is-active .st { animation: inU .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 140ms); }
.t-scale.is-active .st { animation: inS .75s cubic-bezier(.2,.8,.25,1.15) both; animation-delay: calc(var(--i) * 110ms); }
.t-flip .show-grid { perspective: 1000px; }
.t-flip.is-active .st { animation: inF .85s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 140ms); transform-origin: left center; }
.t-wipe.is-active { animation: wipe 1.1s cubic-bezier(.65,0,.35,1) both; }
.t-circle.is-active { animation: circ 1.1s cubic-bezier(.65,0,.35,1) both; }
@keyframes sIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.0); } to { transform: scale(1.06); } }
@keyframes kb { from { transform: scale(1.16) translate(2%, 2%); } to { transform: scale(1.02) translate(0, 0); } }
@keyframes inL { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes inR { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes inU { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes inS { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes inF { from { opacity: 0; transform: rotateY(-85deg); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: polygon(0 0, 0 0, 0 0, 0 0); } to { clip-path: polygon(0 0, 220% 0, 0 220%, 0 0); } }
@keyframes circ { from { clip-path: circle(0% at 50% 45%); } to { clip-path: circle(80% at 50% 45%); } }
/* controls */
.show-pause { position: absolute; top: 18px; right: 18px; z-index: 5; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(20,8,8,.45); color: #fff; cursor: pointer; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.show-pause svg { width: 16px; height: 16px; }
.show-pause .i-play, .show-stage.is-paused .show-pause .i-pause { display: none; }
.show-stage.is-paused .show-pause .i-play { display: block; }
.show-pause:focus-visible, .show-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.show-dots { position: absolute; right: 16px; bottom: 20px; z-index: 4; display: flex; gap: 5px; }
.show-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.35); cursor: pointer; position: relative; overflow: hidden; transition: width .3s ease; }
.show-dot.is-active { width: 24px; }
.show-dot.is-active::after { content: ""; position: absolute; inset: 0; background: var(--gold-light); transform-origin: left; animation: dotFill var(--dur, 4000ms) linear forwards; }
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.show-stage.is-paused *, .show-stage.is-offscreen *, .show-stage.is-hidden * { animation-play-state: paused !important; }
@media (max-width: 640px) { .show-dots { gap: 4px; right: 10px; bottom: 18px; } .show-dot { width: 5px; height: 5px; } .show-dot.is-active { width: 18px; } .show-cap { left: 10px; bottom: 10px; font-size: .74rem; max-width: 58%; } }
.show-band { text-align: center; color: #fff; padding: 26px 20px 30px; max-width: 720px; margin: 0 auto; }
.show-band h2 { color: #fff; font-size: clamp(1.5rem, 4vw, 2.4rem); margin: 0 0 6px; letter-spacing: -.02em; }
.show-band p { color: rgba(255,255,255,.8); margin: 0 auto 16px; font-size: .98rem; }
.show-btn { border-radius: 999px; padding: 10px 22px; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) {
  .show-slide.is-active { animation: sIn .6s ease both !important; clip-path: none !important; }
  .show-slide .st, .show-slide .st img, .show-cap { animation: none !important; }
}
/* 1- and 2-photo slides fill the full stage width; no boxed side fillers */

/* ===== Kept from blend round: section gradients, header edge, brands ===== */
.hero--compact .hero-pattern { background: radial-gradient(ellipse 60% 80% at 80% 0%, rgba(233,201,143,.10), transparent 70%); }
/* ===== Soft header edge ===== */
.site-header { box-shadow: none; border-bottom: 0; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(94,20,20,.55), rgba(201,162,74,.18) 45%, rgba(247,239,230,0)); }

/* ===== Featured fades into brands ===== */
#featured.section-alt { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 70%, #F3DFB8 84%, #C9956A 92%, #7A2A1E 97%, #5E1414 100%); padding-bottom: 110px; }

/* ===== Brands: oxblood glow block blending to cream ===== */
.brands-blend { position: relative; padding: 40px 0 150px; color: #FFF7EC;
  background:
    radial-gradient(ellipse 60% 40% at 50% 48%, rgba(233,201,143,.20), rgba(233,201,143,0) 70%),
    linear-gradient(180deg, #5E1414 0%, #5E1414 58%, #7A2A1E 70%, #C9956A 82%, #F3DFB8 91%, #FBF6EF 100%); }
.brands-blend .eyebrow { color: var(--gold-light); border-color: rgba(243,217,139,.4); background: rgba(243,217,139,.08); }
.brands-blend h2 { color: #FFF7EC; }
.brands-blend .section-head p { color: rgba(255,247,236,.78); }
.brands-blend .section-head { margin-bottom: 26px; }
.bz-marquee { overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bz-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; width: max-content; animation: bzMove 38s linear infinite; }
.bz-marquee:hover .bz-track { animation-play-state: paused; }
@keyframes bzMove { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
.bz { flex: 0 0 auto; min-width: 210px; padding: 26px 30px 22px; text-align: center; border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(243,217,139,.20), rgba(201,162,74,.08) 60%, rgba(201,162,74,0) 100%); }
.bz-word { display: block; font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: .02em;
  background: linear-gradient(180deg, #FBE7B0, #E9C98F 45%, #C9A24A); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(233,201,143,.25)); }
.w-stanley { letter-spacing: .08em; font-style: italic; }
.w-dannio { letter-spacing: .22em; }
.w-milano { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.7rem; letter-spacing: .04em; }
.w-pattex { font-size: 1.6rem; letter-spacing: -.01em; }
.w-starlang { font-family: Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.35rem; }
.w-tangit { letter-spacing: .12em; text-transform: uppercase; font-size: 1.3rem; }
.w-avanti { font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: 1.2rem; }
.w-florence { font-family: Georgia, serif; font-weight: 400; font-size: 1.55rem; letter-spacing: .06em; }
.bz-cat { display: block; margin-top: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,247,236,.72); }
@media (max-width: 640px) { .bz { min-width: 170px; padding: 20px 20px 18px; } .bz-word { font-size: 1.25rem; } .w-milano, .w-pattex, .w-florence { font-size: 1.4rem; } .bz-cat { font-size: .62rem; } .brands-blend { padding-bottom: 120px; } }
@media (prefers-reduced-motion: reduce) { .bz-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .bz[aria-hidden="true"] { display: none; } }
.show::after { content: ""; display: block; height: 90px; background: linear-gradient(180deg, rgba(94,20,20,0), #7A2A1E 22%, #C9956A 55%, #F3DFB8 80%, #F7EFE6 100%); }
.show-band { padding-bottom: 14px; }
#featured.section-alt { padding-bottom: 150px; background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 58%, #F6EAD6 68%, #F0D9AE 77%, #DDB384 84%, #B06A48 90%, #7E2A20 95.5%, #5E1414 100%); }
.brands-blend { padding-top: 24px; }
.fx-scroller { padding: 14px 0 46px; }
.fx-card { box-shadow: 0 10px 22px rgba(94,25,20,.10); }
.fx-card:hover { box-shadow: 0 14px 28px rgba(94,25,20,.16); }
#featured .fx-wrap { margin-bottom: -28px; }
.fx-wrap::before, .fx-wrap::after { display: none; }
.fx-scroller { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
/* subtle warm shadow on slideshow cards */
.st { box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(243,217,139,.08); }
.site-header::after { height: 14px; background: linear-gradient(180deg, rgba(86,20,17,.45), rgba(86,20,17,0)); }

/* ===== No section fades: clean solid edges ===== */
.site-header::after { display: none; }
.site-header { border-bottom: 1px solid rgba(201,162,74,.35); }
.show::after { display: none; }
.show-band { padding-bottom: 30px; }
#featured.section-alt { background: var(--cream); padding-bottom: 72px; }
#featured .fx-wrap { margin-bottom: 0; }
.fx-scroller { padding: 8px 0 18px; }
.brands-blend { background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(233,201,143,.12), rgba(233,201,143,0) 70%), var(--oxblood); padding: 64px 0 64px; }
@media (max-width: 640px) { .brands-blend { padding: 52px 0; } #featured.section-alt { padding-bottom: 52px; } }

/* ===== HS monogram logo (from business card c3h) ===== */
.brand img.brand-mono { width: auto; height: 44px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.footer-brand img.brand-mono { height: 42px; width: auto; border-radius: 0; box-shadow: none; }
.brand-name { font-family: "Cinzel Decorative", Georgia, serif; font-weight: 700; font-size: 1.12rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.05; }
.brand-sub { letter-spacing: .12em; }
@media (max-width: 640px) { .brand img.brand-mono { height: 40px; } .brand-name { font-size: 1.02rem; } }


/* ===== Search bar ===== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.header-inner { flex-wrap: wrap; }
.site-search { position: relative; flex: 1 1 220px; min-width: 180px; max-width: 440px; }
.site-search-field {
  display: flex; align-items: center; gap: 8px;
  background: rgba(14,10,10,.35);
  border: 1px solid rgba(201,162,74,.55);
  border-radius: 999px;
  padding: 0 12px 0 12px;
  height: 38px;
}
.site-search-field:focus-within {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(201,162,74,.22);
}
.site-search-icon { width: 16px; height: 16px; color: var(--gold-light); flex-shrink: 0; }
.site-search-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  color: var(--gold-light); font: 500 .9rem var(--font);
  padding: 0; height: 100%;
}
.site-search-input::placeholder { color: rgba(243,217,139,.62); }
.site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 12px; width: 12px; background: radial-gradient(circle, rgba(243,217,139,.85) 40%, transparent 42%); cursor: pointer; }
.site-search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: min(100%, 360px); width: max(100%, 360px); max-width: min(92vw, 440px);
  max-height: min(70vh, 420px); overflow: auto;
  background: var(--oxblood-deep);
  border: 1px solid rgba(201,162,74,.45);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(14,10,10,.45);
  z-index: 80; padding: 6px;
}
.site-search-results[hidden] { display: none !important; }
.sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--cream); text-decoration: none;
}
.sr-item:hover, .sr-item.is-active { background: rgba(201,162,74,.16); color: var(--gold-light); }
.sr-thumb {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: #2a1210; border: 1px solid rgba(201,162,74,.25);
}
.sr-thumb.is-empty { display: grid; place-items: center; color: var(--gold); font-size: .7rem; font-weight: 700; }
.sr-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sr-name { font-weight: 700; font-size: .88rem; line-height: 1.25; color: var(--gold-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-meta { font-size: .72rem; color: rgba(243,217,139,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-empty, .sr-more { padding: 12px 10px; font-size: .85rem; color: rgba(243,217,139,.75); }
.sr-more { display: block; text-align: center; font-weight: 600; color: var(--gold-light); text-decoration: none; border-radius: 8px; }
.sr-more:hover { background: rgba(201,162,74,.16); }
@media (max-width: 640px) {
  .brand { order: 1; }
  .nav-toggle { order: 2; margin-left: auto; }
  .site-search { order: 3; flex: 1 1 100%; max-width: none; min-width: 0; }
  .main-nav { order: 4; }
  .header-inner { padding: 10px 0 12px; }
  .site-search-results { left: 0; right: 0; width: 100%; max-width: none; min-width: 0; }
}
.is-search-hit {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  animation: hitPulse 1.4s ease;
  scroll-margin-top: 120px;
}
.lux-gallery figure.is-search-hit { border-radius: 14px; }
@keyframes hitPulse {
  0% { box-shadow: 0 0 0 0 rgba(201,162,74,.55); }
  100% { box-shadow: 0 0 0 14px rgba(201,162,74,0); }
}

/* Search results page */
.search-page { padding: 36px 0 64px; }
.search-page h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.search-page .lead { color: var(--muted); }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sr-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 8px 20px rgba(14,10,10,.06); }
.sr-card:hover { color: inherit; border-color: var(--gold); transform: translateY(-1px); }
.sr-card img, .sr-card .sr-card-ph { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cream-2); }
.sr-card-ph { display: grid; place-items: center; color: var(--oxblood); font-weight: 700; }
.sr-card-body { padding: 12px 14px 16px; }
.sr-card-body h3 { font-size: 1rem; margin: 0 0 4px; }
.sr-card-brand { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 2px; }
.sr-card-sec { font-size: .78rem; color: var(--muted); margin: 0; }



/* ===== Galaxy night sky (oxblood milky way) ===== */
.galaxy {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background: #160505;
}
.galaxy-nebula {
  position: absolute; inset: 0;
  background:
    url("assets/galaxy-nebula.webp") center / cover no-repeat;
  opacity: .95;
}
.galaxy-stars,
.galaxy-tools {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.galaxy-stars { z-index: 1; }
.galaxy-tools { z-index: 2; opacity: .9; }
.galaxy-sheen {
  position: absolute; inset: -30% -20%;
  z-index: 3;
  background: linear-gradient(118deg,
    transparent 36%,
    rgba(255, 228, 190, .03) 44%,
    rgba(243, 217, 139, .11) 50%,
    rgba(255, 228, 190, .04) 56%,
    transparent 66%);
  mix-blend-mode: screen;
  animation: sheenSweep 18s ease-in-out infinite;
}
@keyframes sheenSweep {
  0%   { transform: translateX(-18%) translateY(-6%) rotate(0.5deg); opacity: .55; }
  50%  { transform: translateX(14%) translateY(8%) rotate(-0.5deg); opacity: 1; }
  100% { transform: translateX(-18%) translateY(-6%) rotate(0.5deg); opacity: .55; }
}
@keyframes twinkle {
  0%, 100% { opacity: .28; }
  50% { opacity: 1; }
}
.galaxy-stars .tw { animation: twinkle 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .galaxy-stars .tw, .galaxy-sheen { animation: none !important; }
}

/* Sections sit above the fixed sky; oxblood pages stay transparent so the sky is continuous */
.hero,
.page-hero,
.contact-strip,
.brands-blend,
.show,
.range-section {
  background: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 1;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 4, 4, .38) !important;
  background-image: none !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(201, 162, 74, .35);
}
.hero-pattern,
.hero--compact .hero-pattern,
.page-hero::before,
.contact-strip::before {
  background: none;
}
/* cream / solid sections cover the sky with a clean edge, no fade */
#featured.section-alt,
#why.section-alt,
#location.section,
.site-footer,
.search-page,
.empty-cat-wrap {
  position: relative;
  z-index: 1;
}

/* Range: same sky, floating island cards */
.range-section {
  --range-bg: transparent;
  isolation: auto;
  overflow: visible;
}
.range-pattern { display: none; }
.range-head h2 { color: #FFF7EC; }
.range-head p { color: rgba(255, 247, 236, .78); }
.range-eyebrow {
  color: var(--gold-light) !important;
  border-color: rgba(243, 217, 139, .45) !important;
  background: rgba(14, 6, 6, .35) !important;
}
.range-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #FFFCF8, #F7EFE6);
  border: 1px solid rgba(243, 217, 139, .5);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 18px 40px rgba(8, 0, 0, .42),
    0 6px 16px rgba(94, 25, 20, .28);
  overflow: hidden;
}
.range-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 36%);
  mix-blend-mode: soft-light;
}
.range-card { position: relative; }
.range-card:hover, .range-card:focus-visible {
  color: inherit;
  transform: translateY(-10px);
  border-color: var(--gold-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 26px 50px rgba(8, 0, 0, .5),
    0 8px 20px rgba(201, 162, 74, .18);
  animation-play-state: paused;
}
@keyframes islandFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.js-reveal .range-card.is-in {
  opacity: 1;
  transform: none;
  animation: islandFloat 6.5s ease-in-out .5s infinite;
}
.js-reveal .range-card.is-in:nth-child(2) { animation-duration: 7.2s; animation-delay: .8s; }
.js-reveal .range-card.is-in:nth-child(3) { animation-duration: 6.8s; animation-delay: .3s; }
.js-reveal .range-card.is-in:nth-child(4) { animation-duration: 7.6s; animation-delay: 1s; }
.js-reveal .range-card.is-in:nth-child(5) { animation-duration: 6.4s; animation-delay: .6s; }
.js-reveal .range-card.is-in:nth-child(6) { animation-duration: 7.1s; animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .range-card.is-in { animation: none !important; }
  .range-card:hover, .range-card:focus-visible { transform: none; }
}

/* Readable type on remaining oxblood galaxy sections */
.brands-blend { color: #FFF7EC; }
.page-hero, .contact-strip { /* already light text */ }

/* Don't let photos be CSS-upscaled past their file size: object-fit stays cover/contain, sources are 2x */
img { image-rendering: auto; -webkit-backface-visibility: hidden; }


/* ===== Glossy lacquered oxblood (no nebula, no stars) ===== */
.galaxy {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background-color: #3a0c0b;
  background-image:
    /* sharp specular glint */
    linear-gradient(122deg,
      transparent 44%,
      rgba(255, 236, 210, .00) 47%,
      rgba(255, 255, 255, .28) 49.6%,
      rgba(255, 230, 190, .20) 50.3%,
      rgba(255, 236, 210, .00) 53%,
      transparent 56%),
    /* broader lacquer streak */
    linear-gradient(122deg,
      transparent 18%,
      rgba(120, 28, 24, .18) 32%,
      rgba(232, 170, 120, .16) 46%,
      rgba(255, 220, 175, .20) 50%,
      rgba(232, 170, 120, .12) 54%,
      rgba(40, 8, 8, .28) 68%,
      transparent 82%),
    /* secondary soft sheen */
    linear-gradient(72deg,
      transparent 40%,
      rgba(201, 140, 90, .10) 58%,
      transparent 74%),
    /* depth: darker pools */
    radial-gradient(ellipse 80% 55% at 8% 0%, rgba(14, 3, 3, .55), transparent 58%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(10, 2, 2, .62), transparent 55%),
    radial-gradient(ellipse 50% 40% at 70% 20%, rgba(90, 22, 18, .35), transparent 70%),
    /* rich oxblood body */
    linear-gradient(165deg, #6a1e18 0%, #5E1914 28%, #3f0e0c 62%, #2a0808 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.galaxy-nebula,
.galaxy-stars { display: none !important; }
.galaxy-tools {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 2;
  opacity: .9;
}
.galaxy-sheen {
  position: absolute; inset: -35% -25%;
  z-index: 3;
  background: linear-gradient(122deg,
    transparent 34%,
    rgba(255, 236, 210, .00) 42%,
    rgba(255, 255, 255, .16) 49.5%,
    rgba(243, 210, 150, .14) 51%,
    rgba(255, 236, 210, .00) 58%,
    transparent 66%);
  mix-blend-mode: screen;
  animation: sheenSweep 20s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheenSweep {
  0%   { transform: translateX(-22%) translateY(-8%); opacity: .45; }
  50%  { transform: translateX(18%) translateY(10%); opacity: 1; }
  100% { transform: translateX(-22%) translateY(-8%); opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .galaxy-sheen { animation: none !important; opacity: .7; }
}

/* Featured continues the same glossy oxblood; no cream block, no fades */
.hero,
.page-hero,
.contact-strip,
.brands-blend,
.show,
.range-section,
#featured,
#featured.section-alt {
  background: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 1;
}
#featured,
#featured.section-alt {
  padding-bottom: 72px;
  overflow: visible;
}
#featured .section-head h2 { color: #FFF7EC; }
#featured .section-head p { color: rgba(255, 247, 236, .78); }
#featured .feat-eyebrow,
.feat-eyebrow {
  color: var(--gold-light) !important;
  border-color: rgba(243, 217, 139, .45) !important;
  background: rgba(14, 6, 6, .35) !important;
}
/* kill leftover cream edge fades / masks */
#featured .fx-wrap::before,
#featured .fx-wrap::after,
.fx-wrap::before,
.fx-wrap::after { display: none !important; background: none !important; }
#featured .fx-scroller,
.fx-scroller {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  padding: 18px 0 28px;
  overflow-y: visible;
}

/* ===== Tight, blended island cards (range + featured) ===== */
.range-card,
.fx-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, .78), rgba(236, 214, 196, .62) 100%);
  border: 1px solid rgba(94, 25, 20, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 14px 30px rgba(16, 3, 3, .48),
    0 0 0 1px rgba(62, 12, 10, .28);
  overflow: hidden;
}
.range-card { border-radius: 16px; }
.fx-card { border-radius: 14px; background:
    linear-gradient(180deg, rgba(255, 248, 238, .78), rgba(236, 214, 196, .62) 100%);
  border: 1px solid rgba(94, 25, 20, .42);
}
.range-card::after,
.fx-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 34%);
  mix-blend-mode: soft-light;
  z-index: 3;
}
.range-card:hover, .range-card:focus-visible,
.fx-card:hover, .fx-card:focus-visible {
  color: inherit;
  transform: translateY(-8px);
  border-color: rgba(94, 25, 20, .55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 22px 40px rgba(12, 2, 2, .55),
    0 0 0 1px rgba(94, 25, 20, .35);
  animation-play-state: paused;
}

/* Tight chrome: photos fill the card, text block is compact */
.range-body { padding: 8px 10px 9px; }
.range-body h3 { font-size: 1.02rem; margin: 0 0 3px; }
.range-body p { font-size: .84rem; line-height: 1.4; margin: 0 0 8px; }
.range-foot { padding-top: 6px; gap: 8px; }
.range-go { padding: 4px 9px; font-size: .78rem; }
.range-num { top: 6px; left: 6px; padding: 2px 7px; font-size: .64rem; background: rgba(255,251,246,.8); }
.range-media { aspect-ratio: 16 / 9.5; }
.range-media::after { height: 2px; }

.fx-body { padding: 7px 8px 8px; }
.fx-brand { font-size: .62rem; margin-bottom: 2px; }
.fx-body h3 { font-size: .86rem; margin: 0 0 6px; min-height: 0; line-height: 1.25; }
.fx-cta { padding: 3px 8px; font-size: .66rem; }
.fx-cut img { padding: 6%; }
.fx-card { width: 210px; }
.fx-track { gap: 12px; }

@media (max-width: 640px) {
  .range-body { padding: 7px 8px 8px; }
  .range-body h3 { font-size: .95rem; }
  .range-body p { font-size: .78rem; margin-bottom: 6px; }
  .range-foot { padding-top: 5px; }
  .fx-card { width: 142px; border-radius: 12px; }
  .fx-body { padding: 6px 7px 7px; }
  .fx-body h3 { font-size: .76rem; margin-bottom: 5px; }
  .fx-cta { font-size: .6rem; padding: 3px 7px; }
  #featured, #featured.section-alt { padding-bottom: 52px; }
}

/* Featured island float (same motion as range; scroller padding leaves room) */
.fx-card { animation: islandFloat 6.8s ease-in-out infinite; }
.fx-card:nth-child(3n+2) { animation-duration: 7.4s; animation-delay: .5s; }
.fx-card:nth-child(3n+3) { animation-duration: 6.6s; animation-delay: .9s; }
.fx-card:hover, .fx-card:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fx-card { animation: none !important; }
  .fx-card:hover, .fx-card:focus-visible { transform: none; }
}

html { background: #3a0c0b; }
body { background: #3a0c0b; }
#featured, .range-section { scroll-margin-top: 96px; }
@media (max-width: 640px) {
  #featured, .range-section { scroll-margin-top: 128px; }
}


/* ===== Glassy oxblood: no diagonal streaks, no sheen sweep ===== */
.galaxy {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background-color: #3a0c0b;
  background-image:
    /* gentle, very subtle horizontal top reflection — oxblood, not white */
    linear-gradient(180deg,
      rgba(210, 120, 100, .13) 0%,
      rgba(150, 48, 40, .07) 8%,
      rgba(94, 25, 20, .00) 20%,
      transparent 28%),
    /* soft lighter oxblood glow toward top centre */
    radial-gradient(ellipse 92% 68% at 50% 0%,
      rgba(126, 40, 34, .58) 0%,
      rgba(94, 25, 20, .26) 42%,
      transparent 72%),
    /* darker edges / vignette */
    radial-gradient(ellipse 78% 78% at 50% 48%,
      transparent 38%,
      rgba(22, 5, 5, .32) 76%,
      rgba(10, 2, 2, .58) 100%),
    /* smooth deep oxblood, like tinted glass */
    linear-gradient(180deg, #561814 0%, #4a1210 40%, #3a0c0b 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.galaxy-sheen {
  display: none !important;
  animation: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Slight frosted-glass header */
.site-header {
  background: rgba(32, 8, 8, .44) !important;
  background-image: none !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* Slight frost on floating cards; horizontal glass highlight only, no diagonal white */
.range-card,
.fx-card {
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.range-card::after,
.fx-card::after {
  background: linear-gradient(180deg, rgba(255, 244, 234, .14) 0%, rgba(255, 244, 234, 0) 16%) !important;
  mix-blend-mode: soft-light;
}

/* ===== Fix: cards visible without hover/JS (compositor + reveal) ===== */
/*
  Symptom: fresh loads show a blank oxblood page; only the card under the
  cursor/finger appears. Cause: a sticky header and floating cards used
  backdrop-filter over a position:fixed full-viewport .galaxy layer.
  Safari/iOS and some Chromium compositor paths then fail to paint the
  grid except in the dirty region created by .feat-card:hover { transform }.
  Cards are already in the DOM; they are not opacity:0. Hover only worked
  because transform promoted that one card onto a new layer.

  Fix: drop backdrop-filter, keep cards visible by default (no JS reveal
  hide), and give each card its own stable layer so they paint on load.
*/
.site-header,
.range-card,
.fx-card,
.range-num,
.show-cap,
.hero-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.site-header {
  background: rgba(42, 10, 9, .94) !important;
  background-image: none !important;
}

/* Visible by default — do not wait for JS or :hover */
.js-reveal .range-card,
.js-reveal .range-card.is-in,
.range-card,
.feat-card,
.fx-card,
.sr-card {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Promote cards to their own layer so they paint without a hover transform */
.feat-card,
.range-card,
.fx-card,
.sr-card {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  isolation: isolate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.feat-card:hover {
  -webkit-transform: translateY(-2px) translateZ(0);
  transform: translateY(-2px) translateZ(0);
}

.range-card::after,
.fx-card::after {
  mix-blend-mode: normal !important;
}

/* Keep the fixed sky on its own layer, under content */
.galaxy {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 0;
}

/* ===== Pull-to-refresh: never block native; gold indicator for iOS fallback ===== */
html, body {
  overscroll-behavior: auto;
  overscroll-behavior-y: auto;
}
.hs-ptr {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, var(--ptr-y, -48px));
  transition: opacity .18s ease;
}
.hs-ptr.is-visible { opacity: 1; }
.hs-ptr-ring {
  display: block;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 74, .35);
  border-top-color: #F3D98B;
  background: rgba(42, 10, 9, .94);
  box-shadow: 0 8px 18px rgba(16, 3, 3, .4), inset 0 1px 0 rgba(255, 244, 220, .22);
}
.hs-ptr.is-ready .hs-ptr-ring {
  border-color: rgba(201, 162, 74, .55);
  border-top-color: #C9A24A;
  box-shadow: 0 8px 18px rgba(16, 3, 3, .4), 0 0 0 3px rgba(201, 162, 74, .22);
}
.hs-ptr.is-loading .hs-ptr-ring {
  animation: hsPtrSpin .7s linear infinite;
}
@keyframes hsPtrSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-ptr.is-loading .hs-ptr-ring { animation: none; }
}