/* ═══════════════════════════════════════════════════════
   MULTI OFFICE SUPPLIES — Main Stylesheet
   Color: Deep Crimson + Charcoal + Off-White
   Font: Barlow Condensed (headings) + Lora (body)
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Barlow:wght@300;400;500;600&display=swap');

/* ── RESET & BASE ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --crimson: #8B0000;
  --crimson-light: #A61010;
  --crimson-vivid: #C0141A;
  --crimson-dark: #5C0000;
  --charcoal: #1C1C1E;
  --dark: #2A2A2A;
  --mid: #5A5A5A;
  --muted: #9A9A9A;
  --border: #E0D8D5;
  --off-white: #F8F4F1;
  --white: #FFFFFF;
  --shadow: 0 4px 24px rgba(139,0,0,0.12);
  --shadow-deep: 0 12px 48px rgba(0,0,0,0.18);
  --radius: 3px;
  --nav-h: 72px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Barlow', sans-serif;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

p { font-family: 'Barlow', sans-serif; font-weight: 400; }

a { text-decoration: none; color: inherit; }

img { max-width: 100%; display: block; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--off-white); }
::-webkit-scrollbar-thumb { background: var(--crimson); border-radius: 3px; }

/* ── UTILITIES ─────────────────────────────────────── */
.container { max-width: 1440px; margin: 0 auto; padding: 0 3rem; }
.container--wide { max-width: 1600px; margin: 0 auto; padding: 0 3rem; }

.section-tag {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  padding: 0.25rem 0;
  border-top: 2px solid var(--crimson);
  margin-bottom: 1rem;
}

.section-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: 1rem;
}

.section-heading span { color: var(--crimson); }

.section-sub {
  font-family: 'Barlow', sans-serif;
  font-size: 1.05rem;
  color: var(--mid);
  max-width: 560px;
  line-height: 1.7;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
}

.btn-primary {
  background: var(--crimson);
  color: var(--white);
  border: 2px solid var(--crimson);
}
.btn-primary:hover {
  background: var(--crimson-dark);
  border-color: var(--crimson-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}

.btn-outline-dark {
  background: transparent;
  color: var(--crimson);
  border: 2px solid var(--crimson);
}
.btn-outline-dark:hover {
  background: var(--crimson);
  color: var(--white);
}

/* ── NAVIGATION ─────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: all var(--transition);
  background: transparent;
}

#navbar.scrolled {
  background: var(--charcoal);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  /* Tall enough for the plate the scrolled state adds, so the logo does not
     resize or nudge the bar when the background comes in. */
  height: 62px;
}

.nav-logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
  transition: background var(--transition), padding var(--transition);
}

/* Same knockout problem as the footer: the letters are cut out of the red
   block, so over the dark scrolled bar they went black. brightness(0)
   invert(1) inverted the block to white and left the letters dark, which is
   the opposite of the brand. A white plate gives the letters something to
   read against and keeps the red. content-box so the 52px mark stays 52px
   with the padding added around it rather than eaten out of it. */
#navbar.scrolled .nav-logo img {
  box-sizing: content-box;
  background: var(--white);
  padding: 5px 9px;
  border-radius: var(--radius);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--crimson-vivid);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav-links a:hover, .nav-links a.active { color: var(--crimson); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

#navbar.scrolled .nav-links a { color: rgba(255,255,255,0.85); }
#navbar.scrolled .nav-links a:hover,
#navbar.scrolled .nav-links a.active { color: var(--white); }

.nav-cta {
  background: var(--crimson) !important;
  color: var(--white) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--crimson-dark) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: all var(--transition);
}

#navbar.scrolled .nav-toggle span {
  background: var(--white);
}

/* ── HERO ───────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #ffffff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%);
  z-index: 0;
}

.hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 60px,
      rgba(0,0,0,0.04) 60px,
      rgba(0,0,0,0.04) 61px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(0,0,0,0.04) 60px,
      rgba(0,0,0,0.04) 61px
    );
  z-index: 1;
}

.hero-accent {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  border: 80px solid rgba(192,20,26,0.12);
  z-index: 1;
  animation: pulse-ring 4s ease-in-out infinite;
}

.hero-accent-2 {
  position: absolute;
  right: -200px;
  top: 50%;
  transform: translateY(-50%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  border: 40px solid rgba(192,20,26,0.06);
  z-index: 1;
  animation: pulse-ring 4s ease-in-out infinite 0.5s;
}

@keyframes pulse-ring {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
  50% { transform: translateY(-50%) scale(1.03); opacity: 0.7; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  padding-top: var(--nav-h);
}

.hero-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--crimson-vivid);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.2s;
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--crimson-vivid);
}

.hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.6rem, 6.6vw, 6.5rem);
  font-weight: 900;
  color: var(--charcoal);
  line-height: 1.05;
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.4s;
}

/* One line once there is room for it; below this it wraps naturally. */
@media (min-width: 900px) {
  .hero-title { white-space: nowrap; }
}

.hero-title em {
  font-style: italic;
  color: var(--crimson-vivid);
}

.hero-desc {
  font-family: 'Barlow', sans-serif;
  font-size: 1.15rem;
  color: rgba(30,30,30,0.65);
  max-width: 540px;
  line-height: 1.75;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.6s;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.8s;
}

.hero-stats {
  position: absolute;
  bottom: 3rem;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 0;
}

.stat-item {
  padding: 1.5rem 2.5rem;
  text-align: center;
  border-left: 1px solid rgba(0,0,0,0.1);
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
}
.stat-item:nth-child(1) { animation-delay: 1s; }
.stat-item:nth-child(2) { animation-delay: 1.1s; }
.stat-item:nth-child(3) { animation-delay: 1.2s; }

.stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--charcoal);
  line-height: 1;
}

.stat-label {
  font-family: 'Barlow', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(30,30,30,0.45);
  margin-top: 0.25rem;
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeIn 1s ease forwards 1.5s;
}

.scroll-hint span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(30,30,30,0.35);
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--crimson), transparent);
  animation: scroll-line 1.5s ease-in-out infinite;
}

@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── ABOUT ──────────────────────────────────────────── */
#about {
  padding: 7rem 0;
  background: var(--off-white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-visual {
  position: relative;
}

.about-img-frame {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--crimson);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-img-frame .about-logo {
  width: 70%;
  filter: brightness(0) invert(1);
  opacity: 0.15;
}

.about-badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 120px;
  height: 120px;
  background: var(--charcoal);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-deep);
}

.about-badge-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--crimson-vivid);
  line-height: 1;
}

.about-badge-text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
  line-height: 1.3;
}

.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.pillar {
  background: var(--white);
  padding: 1.25rem;
  border-radius: 4px;
  border-left: 3px solid var(--crimson);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.pillar-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.pillar h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0.05em;
}

.pillar p {
  font-size: 0.82rem;
  color: var(--mid);
  margin-top: 0.25rem;
  line-height: 1.5;
}

/* ── PRODUCTS ───────────────────────────────────────── */
#catalog {
  padding: 7rem 0;
  background: var(--white);
}

.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.catalog-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 2px solid var(--border);
  border-radius: 2px;
  color: var(--mid);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--white);
}

.catalog-search {
  position: relative;
  margin-bottom: 2rem;
}

.catalog-search input {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem 1rem 0.8rem 2.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  color: var(--charcoal);
  transition: border-color var(--transition);
  outline: none;
}
.catalog-search input:focus { border-color: var(--crimson); }

.catalog-search svg {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  box-shadow: var(--shadow-deep);
  transform: translateY(-4px);
  border-color: transparent;
}

.product-card-img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--crimson-dark), var(--crimson));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.product-card-img .product-icon {
  font-size: 3rem;
  opacity: 0.8;
}

.product-card-img .product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card-body h3 {
  font-size: 1.25rem;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}

.product-card-body p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-footer {
  padding: 0 1.25rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.min-order {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

.btn-inquire {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap var(--transition);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.btn-inquire:hover { gap: 0.6rem; }
.btn-inquire svg { transition: transform var(--transition); }
.btn-inquire:hover svg { transform: translateX(3px); }

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── SERVICES BANNER ─────────────────────────────────── */
#services-banner {
  background: var(--charcoal);
  padding: 5rem 0;
}

.services-banner-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: center;
}

.services-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.service-item {
  border-top: 2px solid rgba(255,255,255,0.1);
  padding-top: 1.25rem;
  transition: border-color var(--transition);
}
.service-item:hover { border-color: var(--crimson); }

.service-item-icon {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.service-item h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
  letter-spacing: 0.03em;
}

.service-item p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* ── PORTFOLIO ──────────────────────────────────────── */
#portfolio {
  padding: 7rem 0;
  background: var(--off-white);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.portfolio-card {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  transition: all var(--transition);
}
.portfolio-card:hover { box-shadow: var(--shadow-deep); transform: translateY(-4px); }

.portfolio-card-visual {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--charcoal), var(--dark));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.portfolio-card-visual .port-icon {
  font-size: 3.5rem;
  opacity: 0.5;
  z-index: 1;
}

.portfolio-card-visual::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--crimson);
}

.portfolio-card-body { padding: 1.5rem; }

.portfolio-category {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 0.5rem;
}

.portfolio-card-body h3 {
  font-size: 1.2rem;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}

.portfolio-card-body p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.portfolio-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--crimson);
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
}

/* ── PARTNERS ───────────────────────────────────────── */
#partners {
  padding: 7rem 0;
  background: var(--white);
}

.partners-header {
  text-align: center;
  margin-bottom: 4rem;
}
.partners-header .section-sub { margin: 0 auto; }

.partners-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.partner-tab {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--border);
  border-radius: 2px;
  color: var(--mid);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}
.partner-tab:hover, .partner-tab.active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--white);
}

/* ── FILTER STRIPS ON MOBILE ────────────────────────── */
/* 21 categories wrapped into six rows of uppercase chips — a wall of text
   above the products it was meant to help find. On a phone they become a
   single swipeable row instead. Nothing is dropped: everything stays one
   swipe away, which matters because these are product categories, not page
   numbers — there is no "unimportant middle" that can be safely collapsed.
   The strip bleeds to the screen edges so a chip is always cut off at the
   boundary, which is what tells you it scrolls. */
@media (max-width: 768px) {
  .catalog-filters,
  .partners-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Cancel the container's gutter, then re-add it as padding, so the row
       runs edge to edge while the first and last chip still clear the side. */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0.25rem 1.25rem;
    min-width: 0;
  }

  /* The catalog header turns into a column at this width, and its
     align-items: flex-start sizes children to their content — which let this
     row grow to 2281px and drag the whole page sideways instead of scrolling
     inside itself. align-self: stretch cannot fix it, because the flex line
     it would stretch to is itself as wide as this item. An explicit width
     resolved against the header breaks the circle: 100% of the header plus
     the two 1.25rem gutters the negative margins above cancel, which comes to
     exactly the screen width. */
  .catalog-filters {
    width: calc(100% + 2.5rem);
  }

  .catalog-filters::-webkit-scrollbar,
  .partners-tabs::-webkit-scrollbar { display: none; }

  /* No scroll snapping: with the row's left padding, snapping parked the
     strip 20px in at rest, which lit the "more to the left" fade when there
     was nothing there. */
  .filter-btn,
  .partner-tab {
    flex: 0 0 auto;
  }

  /* Fades the edge the row can still scroll towards. The classes are set from
     main.js, so the fade disappears once you reach that end rather than
     implying content that is not there. */
  .filter-strip-more-end {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
  .filter-strip-more-start {
    -webkit-mask-image: linear-gradient(to left, #000 82%, transparent 100%);
    mask-image: linear-gradient(to left, #000 82%, transparent 100%);
  }
  .filter-strip-more-start.filter-strip-more-end {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.partner-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  transition: all var(--transition);
}
.partner-card:hover {
  border-color: var(--crimson);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.partner-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.partner-card h4 {
  font-size: 1rem;
  color: var(--charcoal);
}

.partner-type-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}
/* Badge colors are applied inline from the client type record, so a type added
   in the admin panel styles itself without a CSS change. */
.partner-type-badge { background: #F1F1F1; color: #444444; }

.partner-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.55rem;
  display: block;
}

/* ── CONTACT / INQUIRY ──────────────────────────────── */
#contact {
  padding: 7rem 0;
  background: var(--charcoal);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}

.contact-info-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--white);
  margin-bottom: 1rem;
}
.contact-info-title span { color: var(--crimson-vivid); }

.contact-info-desc {
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.contact-detail-icon {
  width: 44px;
  height: 44px;
  background: rgba(139,0,0,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.contact-detail-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson-vivid);
  margin-bottom: 0.25rem;
}

.contact-detail-value {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

/* Inquiry Form */
.inquiry-form-box {
  background: var(--white);
  border-radius: 6px;
  padding: 2.5rem;
  box-shadow: var(--shadow-deep);
}

.form-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 0.25rem;
}

.form-subtitle {
  font-size: 0.9rem;
  color: var(--mid);
  margin-bottom: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color var(--transition);
  outline: none;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--crimson);
}

.form-group textarea { resize: vertical; min-height: 110px; }

.form-group select { cursor: pointer; }

.form-submit {
  width: 100%;
  padding: 1rem;
  background: var(--crimson);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.form-submit:hover { background: var(--crimson-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.form-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.form-feedback {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  display: none;
}
.form-feedback.success { background: #E8F5E9; color: #2E7D32; display: block; }
.form-feedback.error { background: #FFEBEE; color: #C62828; display: block; }

/* ── PRODUCT MODAL ──────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  backdrop-filter: blur(4px);
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-box {
  background: var(--white);
  border-radius: 6px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(20px);
  transition: all var(--transition);
}
.modal-overlay.active .modal-box { transform: scale(1) translateY(0); }

.modal-header {
  position: relative;
  padding: 2rem;
  background: linear-gradient(135deg, var(--crimson-dark), var(--crimson));
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.modal-icon { font-size: 2.5rem; }

.modal-icon img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.modal-header-text h2 {
  font-size: 1.75rem;
  color: var(--white);
}

.modal-header-text .modal-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.25rem;
}

.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: rgba(255,255,255,0.15);
  border: none;
  color: var(--white);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  transition: background var(--transition);
}
.modal-close:hover { background: rgba(255,255,255,0.25); }

.modal-body { padding: 2rem; }

.modal-desc {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.modal-features-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 0.75rem;
}

.modal-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.modal-feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--dark);
}

.modal-feature-item svg { color: var(--crimson); flex-shrink: 0; }

.modal-min-order {
  background: var(--off-white);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--crimson);
  font-size: 0.88rem;
  color: var(--mid);
  margin-bottom: 1.5rem;
}
.modal-min-order strong { color: var(--charcoal); }

.modal-actions { display: flex; gap: 1rem; }

/* ── FOOTER ─────────────────────────────────────────── */
#footer {
  background: #111;
  padding: 4rem 0 2rem;
  color: rgba(255,255,255,0.6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

/* The lettering in the logo is knocked out of the red block rather than drawn
   on top of it, so whatever sits behind the image shows through the letters.
   On this near-black footer that made them read as black, and the old
   brightness(0) invert(1) only made it worse — it turned the red block white
   and left the letters dark. The mark needs something light behind it for the
   letters to come back, so it sits on a white plate and keeps its own red. */
.footer-brand img {
  height: 56px;
  width: auto;
  background: var(--white);
  padding: 6px 10px;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  object-fit: contain;
}

.footer-brand p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.45);
  max-width: 280px;
}

.footer-col h5 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1rem;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }

.footer-col ul a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--crimson-vivid); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.3);
}

.footer-brand-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--crimson-vivid);
}

/* ── MOBILE NAV ─────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--charcoal);
  z-index: 999;
  padding: 1.5rem 2rem;
  flex-direction: column;
  gap: 1rem;
  border-top: 2px solid var(--crimson);
  box-shadow: var(--shadow-deep);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mobile-nav a:last-child { border: none; }

/* ── ANIMATIONS ─────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .services-banner-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  
  .hero-stats { position: static; margin-top: 3rem; }
  
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-pillars { grid-template-columns: 1fr; }
  
  .catalog-header { flex-direction: column; align-items: flex-start; }
  
  .portfolio-grid { grid-template-columns: 1fr; }
  
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  
  .form-row { grid-template-columns: 1fr; }
  
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  
  .modal-features { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column; }
  
  .hero-stats { flex-direction: row; justify-content: flex-start; }
  .stat-item { padding: 1rem 1.5rem; }
}

@media (max-width: 480px) {
  .container, .container--wide { padding: 0 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
}

/* ── PORTFOLIO PAGINATION ───────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.pagination[hidden] { display: none; }

.page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--crimson);
  color: var(--crimson);
}

.page-btn.active {
  background: var(--crimson-dark);
  border-color: var(--crimson-dark);
  color: var(--white);
  cursor: default;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-btn.page-arrow {
  font-size: 1.5rem;
  line-height: 1;
}

.page-btn:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

/* Stands in for the collapsed page numbers. Deliberately narrower than a
   button so the row stays on one line on a phone. */
.page-ellipsis {
  min-width: 20px;
  text-align: center;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  user-select: none;
}

@media (max-width: 768px) {
  .pagination { gap: 0.3rem; margin-top: 2rem; }
  .page-btn { min-width: 36px; height: 36px; padding: 0 0.45rem; font-size: 0.9rem; }
  .page-ellipsis { min-width: 16px; font-size: 0.9rem; }
}

/* The heading needs more room than the old 580px cap allowed; the paragraph
   below it limits its own width, so nothing else needs constraining. */
.portfolio-intro { margin-bottom: 1rem; }

@media (min-width: 900px) {
  .portfolio-intro .section-heading { white-space: nowrap; }
}

/* Contact details are click-to-call / click-to-mail on phones. */
.contact-detail-value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: border-color var(--transition), color var(--transition);
}

.contact-detail-value a:hover {
  color: var(--crimson-vivid);
  border-bottom-color: var(--crimson-vivid);
}

/* The address is only a link once a map URL is set, so without one it must not
   wear the underline that invites a click. */
.contact-detail-value a:not([href]) {
  border-bottom: 0;
  cursor: default;
}

/* ── HOMEPAGE CAROUSEL ──────────────────────────────── */
.carousel-section {
  padding: 4rem 0 0;
  background: var(--off-white);
}

.carousel-section[hidden] { display: none; }

.carousel {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  background: var(--charcoal);
}

.carousel-track {
  position: relative;
  /* Fixed aspect ratio keeps the page from jumping as slides swap. */
  aspect-ratio: 21 / 9;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.carousel-slide.active { opacity: 1; pointer-events: auto; }

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 2rem 1.75rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: var(--charcoal);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}

.carousel-arrow:hover { background: var(--white); }
.carousel-arrow[hidden] { display: none; }
.carousel-prev { left: 1rem; }
.carousel-next { right: 1rem; }

.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.carousel-dot.active {
  background: var(--white);
  transform: scale(1.25);
}

.carousel-arrow:focus-visible,
.carousel-dot:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .carousel-section { padding-top: 2.5rem; }
  .carousel-track { aspect-ratio: 4 / 3; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1.4rem; }
  .carousel-prev { left: 0.5rem; }
  .carousel-next { right: 0.5rem; }
  .carousel-slide figcaption { font-size: 1.05rem; padding: 2.5rem 1.25rem 1.5rem; }
}

/* A custom About image fills the frame instead of sitting as a watermark. */
.about-img-frame.has-custom-image { background: var(--charcoal); }

.about-img-frame.has-custom-image .about-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  opacity: 1;
}

/* ── IMAGE LIGHTBOX ─────────────────────────────────── */
/* Tapping a product photo enlarges the photo; everything else on the card
   still opens the details pop-up. Kept separate from .modal-overlay so the
   two can never be open over each other. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: rgba(12, 12, 12, 0.92);
  animation: lightbox-in 0.2s ease-out;
}

.lightbox[hidden] { display: none; }

@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox-figure img {
  max-width: 100%;
  /* Leaves room for the caption and the page gutters, so a tall photo never
     pushes its own caption off the screen. */
  max-height: calc(100vh - 11rem);
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--white);
}

.lightbox-figure figcaption {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 1.2rem;
  line-height: 1;
  transition: background var(--transition);
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Shown only when the product has more than the one photo to page through. */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 1.8rem;
  line-height: 1;
  transition: background var(--transition);
}

.lightbox-arrow[hidden] { display: none; }
.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-arrow:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }

.lightbox-counter {
  display: inline-block;
  margin-left: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.1em;
}

.lightbox-counter[hidden] { display: none; }

/* The photo area of a card is its own control now, so it should say so. */
.product-card-img.is-zoomable { cursor: zoom-in; }

@media (max-width: 768px) {
  .lightbox { padding: 3.5rem 1rem; }
  .lightbox-figure img { max-height: calc(100vh - 10rem); }
  .lightbox-close { top: 0.75rem; right: 0.75rem; }
  /* Sat over the photo at this width, so they drop below it instead. */
  .lightbox-arrow { width: 42px; height: 42px; font-size: 1.5rem; top: auto; bottom: 1rem; transform: none; }
  .lightbox-prev { left: 1.5rem; }
  .lightbox-next { right: 1.5rem; }
}

/* ── PRODUCT SAMPLE-IMAGE GALLERY ───────────────────── */
.modal-gallery {
  position: relative;
  margin-bottom: 1.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--charcoal);
}

.modal-gallery[hidden] { display: none; }

.modal-gallery-track {
  position: relative;
  aspect-ratio: 16 / 10;
}

.modal-gallery-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.modal-gallery-slide.active { opacity: 1; pointer-events: auto; }

.modal-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-gallery .carousel-arrow { width: 36px; height: 36px; font-size: 1.4rem; }
.modal-gallery .carousel-prev { left: 0.6rem; }
.modal-gallery .carousel-next { right: 0.6rem; }
.modal-gallery .carousel-dots { bottom: 0.7rem; }

@media (max-width: 768px) {
  .modal-gallery-track { aspect-ratio: 4 / 3; }
}

/* A portfolio project with an uploaded image fills its visual panel. */
.portfolio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}