/* ==========================================
   DESIGN TOKENS
========================================== */

:root {
  --ink: #15130f;
  --coal: #1e1d19;
  --coal-2: #27231d;
  --cream: #f7f2ea;
  --paper: #fffcf6;
  --muted: #766d61;
  --line: #dfd3c1;
  --gold: #bd9350;
  --gold-2: #d5af6a;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(17, 13, 9, 0.18);

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 0.85rem;
  --space-md: 1.5rem;
  --space-lg: 2.4rem;
  --space-xl: 4rem;
  --space-2xl: 7rem;

  /* Section padding — single source of truth */
  --section-pad-x: clamp(1.2rem, 5vw, 5rem);
  --section-pad-y: clamp(4rem, 8vw, 7rem);

  /* Max-width */
  --max-w: 82rem;
}


/* ==========================================
   RESET & BASE
========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(189, 147, 80, 0.12), transparent 30rem),
    linear-gradient(180deg, #11100d 0%, var(--cream) 26rem, var(--paper) 100%);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

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

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

button,
input,
select,
textarea {
  font: inherit;
}


/* ==========================================
   TYPOGRAPHY
========================================== */

h1,
h2,
h3 {
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1.06;
  margin: 0;
}

.eyebrow {
  color: var(--gold-2);
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.text-link {
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: 1.2rem;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.text-link:hover {
  opacity: 0.8;
}


/* ==========================================
   BUTTONS
========================================== */

.btn,
.header-cta {
  align-items: center;
  border: 1px solid rgba(189, 147, 80, 0.72);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 800;
  gap: 0.6rem;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 3rem;
  padding: 0.82rem 1.35rem;
  text-transform: uppercase;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-primary,
.header-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: inherit;
}

.btn:hover,
.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(189, 147, 80, 0.25);
}

.btn:focus-visible,
.header-cta:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}


/* ==========================================
   SITE HEADER
========================================== */

.site-header {
  align-items: center;
  color: var(--white);
  display: flex;
  gap: 2rem;
  left: 0;
  padding: 1.2rem var(--section-pad-x);
  position: fixed;
  right: 0;
  top: 0;
  transition: background 0.25s ease, border-color 0.25s ease, padding 0.25s ease;
  z-index: 50;
}

.site-header.is-scrolled,
.site-header.is-menu-open {
  background: rgba(20, 18, 15, 0.92);
  border-bottom: 1px solid rgba(213, 175, 106, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding-block: 0.85rem;
}


/* Brand */

.brand,
.footer-brand {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.18rem;
  min-width: 8.5rem;
}

.brand img,
.footer-brand img {
  height: auto;
  width: 8.1rem;
}

.brand span {
  color: var(--gold-2);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* Desktop nav */

.site-nav {
  align-items: center;
  display: flex;
  flex: 1;
  gap: clamp(0.85rem, 2vw, 2rem);
  justify-content: center;
}

.site-nav > a,
.nav-group > a {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.5rem 0;
  position: relative;
  text-transform: uppercase;
}

.site-nav > a::after,
.nav-group > a::after {
  background: var(--gold-2);
  bottom: 0.25rem;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
  width: 100%;
}

.site-nav > a:hover::after,
.nav-group:hover > a::after {
  transform: scaleX(1);
}


/* Dropdown */

.nav-group {
  position: relative;
}

.nav-dropdown {
  background: rgba(22, 20, 17, 0.96);
  border: 1px solid rgba(213, 175, 106, 0.22);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.1rem;
  left: 50%;
  min-width: 15rem;
  opacity: 0;
  padding: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: 100%;
  transform: translate(-50%, 0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  padding: 0.65rem 0.75rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown a:hover {
  background: rgba(189, 147, 80, 0.16);
  color: var(--white);
}


/* Hamburger toggle */

.nav-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: none;
  height: 2.5rem;
  width: 2.5rem;
  margin-left: auto;
  padding: 0.4rem;
  position: relative;
  z-index: 9999;
}

.nav-toggle span {
  display: block;
  width: 1.6rem;
  height: 3px;
  margin: 4px auto;
  background: #ffffff !important;
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(0,0,0,0.7);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}


/* ==========================================
   HERO
========================================== */

.hero {
  color: var(--white);
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(8, 8, 7, 0.96) 0%, rgba(11, 10, 8, 0.82) 38%, rgba(11, 10, 8, 0.2) 68%, rgba(11, 10, 8, 0.68) 100%),
    radial-gradient(circle at 72% 36%, rgba(189, 147, 80, 0.2), transparent 19rem),
    url("/images/Home.png") right center / contain no-repeat,
    url("/images/products/Equestrian_home_page.jpg") center / cover no-repeat;
  content: "";
  inset: 0;
  position: absolute;
  transform: scale(1.02);
}

/* Subtle grid texture shared by dark sections */
.hero::after,
.dark-band::after,
.catalog-strip::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 18px 18px;
  content: "";
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
}

.hero-content {
  align-content: center;
  display: grid;
  margin: 0 auto;
  max-width: var(--max-w);
  min-height: 100svh;
  padding: clamp(8.5rem, 17vh, 12rem) var(--section-pad-x) clamp(3rem, 8vh, 5.5rem);
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(2.9rem, 6.2vw, 5.7rem);
  max-width: 42rem;
}

.hero h1 span {
  color: var(--gold-2);
  display: block;
}

.hero p {
  color: rgba(255, 255, 255, 0.78);
  margin: 1.5rem 0 2rem;
  max-width: 36rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}


/* ==========================================
   STATS BAR
========================================== */

.stats {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(32, 25, 17, 0.08);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 auto;
  max-width: var(--max-w);
}

.stat {
  align-items: center;
  display: grid;
  min-height: 8rem;
  padding: 1.6rem 1rem;
  place-items: center;
  position: relative;
  text-align: center;
}

.stat + .stat::before {
  background: var(--line);
  content: "";
  height: 3.3rem;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}

.stat-icon {
  color: #7c5d36;
  font-size: 1.75rem;
  line-height: 1;
}

.stat strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 0.35rem;
}

.stat span:last-child {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}


/* ==========================================
   GENERIC SECTION SHELL
========================================== */

.section {
  padding: var(--section-pad-y) var(--section-pad-x);
}

.section-header {
  margin: 0 auto 2.2rem;
  max-width: 48rem;
  text-align: center;
}

/* Shared heading / body sizes across layout blocks */
.section-header h2,
.split-copy h2,
.factory-copy h2,
.catalog-copy h2,
.page-hero h1 {
  font-size: clamp(2.2rem, 4vw, 4.1rem);
}

.section-header p,
.split-copy p,
.factory-copy p,
.catalog-copy p,
.page-hero p {
  color: var(--muted);
  margin: 1rem auto 0;
  max-width: 43rem;
}


/* ==========================================
   PRODUCT GRID
========================================== */

.product-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 auto;
  max-width: var(--max-w);
  align-items: stretch;
}

.product-card {
  background: var(--coal);
  box-shadow: var(--shadow);
  color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 32rem;
  overflow: hidden;
  position: relative;
}

.product-card img {
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  height: 16rem;
  object-fit: cover;
  transition: transform 0.45s ease;
  width: 100%;
}

.product-card:hover img {
  transform: scale(1.055);
}

.product-body {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
    var(--coal);
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.55rem;
}

.product-icon {
  color: var(--gold-2);
  font-size: 1.8rem;
}

.product-card h3 {
  font-family: Inter, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0.8rem 0 0.6rem;
  text-transform: uppercase;
}

.product-card p,
.product-list {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.86rem;
  margin: 0;
}


/* ==========================================
   PROCESS / STEPS
========================================== */

.process {
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.92), rgba(247, 242, 234, 0.92)),
    url("/images/Leather.jpeg") center / cover fixed;
}

.process-inner {
  align-items: center;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 2fr);
  margin: 0 auto;
  max-width: var(--max-w);
}

.split-copy .btn {
  margin-top: 1.5rem;
}

.steps {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(6, 1fr);
}

.step {
  text-align: center;
}

.step-image {
  aspect-ratio: 1 / 1.05;
  box-shadow: 0 16px 38px rgba(29, 23, 17, 0.18);
  overflow: hidden;
  position: relative;
}

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

.step h3 {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin-top: 0.95rem;
  text-transform: uppercase;
}


/* ==========================================
   DARK BAND / PARTNER GRID
========================================== */

.dark-band {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 38%),
    radial-gradient(circle at 50% 0, rgba(189, 147, 80, 0.16), transparent 24rem),
    var(--coal);
  color: var(--white);
  overflow: hidden;
  position: relative;
}

.partner-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 auto;
  max-width: var(--max-w);
  position: relative;
  z-index: 1;
}

.partner-item {
  border-left: 1px solid rgba(213, 175, 106, 0.26);
  padding: 0 1.4rem;
  text-align: center;
}

.partner-item:first-child {
  border-left: 0;
}

.partner-item .stat-icon {
  color: var(--gold-2);
  margin-bottom: 0.8rem;
}

.partner-item h3 {
  color: var(--gold-2);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.partner-item p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8rem;
  margin: 0.65rem 0 0;
}


/* ==========================================
   FACTORY
========================================== */

.factory {
  background: var(--paper);
}

.factory-inner {
  align-items: stretch;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.8fr);
  margin: 0 auto;
  max-width: var(--max-w);
}

.factory-copy {
  align-self: center;
}

.factory-mosaic {
  display: grid;
  gap: 0.7rem;
  grid-auto-flow: dense;
  grid-template-columns: 1.45fr 1fr 1fr;
  grid-template-rows: repeat(2, 12.5rem);
  min-width: 0;
}

.factory-mosaic img {
  height: 100%;
  min-height: 0;
  min-width: 0;
  object-fit: cover;
  width: 100%;
}

.factory-mosaic img:first-child {
  grid-row: span 2;
}


/* ==========================================
   CATALOG STRIP
========================================== */

.catalog-strip {
  background:
    linear-gradient(90deg, rgba(24, 23, 20, 0.98), rgba(24, 23, 20, 0.88)),
    url("/images/KeyChains.jpeg") left center / 34rem auto no-repeat;
  color: var(--white);
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--section-pad-x);
  position: relative;
}

.catalog-strip::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 18px 18px;
  content: "";
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  position: absolute;
}

.catalog-inner {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 18rem minmax(0, 1fr);
  margin: 0 auto;
  max-width: var(--max-w);
  position: relative;
  z-index: 1;
}

.catalog-cover {
  align-self: stretch;
  background: url("/images/KeyChains.jpeg") center / cover no-repeat;
  display: grid;
  place-items: center;
}

.catalog-book {
  background: #171511;
  border: 1px solid rgba(213, 175, 106, 0.35);
  box-shadow: 0 26px 45px rgba(0, 0, 0, 0.36);
  padding: 2rem 1.4rem;
  text-align: center;
  transform: rotate(-8deg);
  width: 11rem;
}

.catalog-book img {
  margin: 0 auto 1.6rem;
  width: 7.5rem;
}

.catalog-book span {
  color: var(--gold-2);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalog-copy {
  align-self: center;
  max-width: 38rem;
}

.catalog-copy p {
  color: rgba(255, 255, 255, 0.66);
  margin: 1rem 0 0;
}

.catalog-copy .btn {
  margin-top: 1.5rem;
}


/* ==========================================
   CONTACT
========================================== */

.contact-section {
  background: var(--paper);
  padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

.contact-layout {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(17rem, 0.82fr) minmax(20rem, 1.18fr);
  margin: 0 auto;
  max-width: var(--max-w);
}

.contact-panel {
  background: var(--coal);
  box-shadow: var(--shadow);
  color: var(--white);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.contact-panel h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

.contact-panel p {
  color: rgba(255, 255, 255, 0.68);
  margin: 1rem 0 1.5rem;
}

.contact-list {
  display: grid;
  gap: 1.2rem;
}

.contact-list strong {
  color: var(--gold-2);
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.contact-list a,
.contact-list span {
  color: rgba(255, 255, 255, 0.78);
  display: block;
  font-size: 0.92rem;
}

.contact-form-card {
  background: var(--white);
  box-shadow: 0 20px 52px rgba(35, 27, 18, 0.12);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.contact-form {
  display: grid;
  gap: 1rem;
}

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

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 3.15rem;
  padding: 0.9rem 1rem;
  transition: border-color 0.2s ease;
  width: 100%;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--gold);
  outline: none;
}

.contact-form textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted);
}

.contact-form select {
  cursor: pointer;
}

.contact-form small {
  color: var(--muted);
  display: block;
}

.contact-form .btn {
  margin-top: 0.5rem;
  width: fit-content;
}


/* ==========================================
   FOOTER
========================================== */

.site-footer {
  background: #1a1916;
  border-top: 1px solid rgba(213, 175, 106, 0.18);
  color: var(--white);
  padding: 3.2rem var(--section-pad-x) 0;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.45fr 1fr 1fr 1.4fr;
  margin: 0 auto;
  max-width: var(--max-w);
}

.site-footer p,
.site-footer a {
  color: rgba(255, 255, 255, 0.64);
  display: block;
  font-size: 0.84rem;
  margin: 0.35rem 0;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--gold-2);
}

.site-footer h3 {
  color: var(--white);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.socials {
  display: flex;
  gap: 0.55rem;
  margin-top: 1rem;
}

.socials a {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: grid;
  height: 2rem;
  margin: 0;
  place-items: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  width: 2rem;
}

.socials a:hover {
  background: rgba(213, 175, 106, 0.14);
  border-color: var(--gold-2);
  color: var(--gold-2);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  margin: 2rem auto 0;
  max-width: var(--max-w);
  padding: 1rem 0;
}

.footer-bottom span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}


/* ==========================================
   INNER PAGES — PAGE HERO
========================================== */

.page-hero {
  background:
    linear-gradient(90deg, rgba(10, 9, 8, 0.94), rgba(10, 9, 8, 0.58)),
    var(--hero-image, none) center / cover no-repeat;
  color: var(--white);
  min-height: 31rem;
  padding: 12rem var(--section-pad-x) 5rem;
}

.page-hero-inner {
  margin: 0 auto;
  max-width: var(--max-w);
}

.page-hero p {
  color: rgba(255, 255, 255, 0.72);
  margin-left: 0;
}

.page-hero .btn {
  margin-top: 1.4rem;
}


/* ==========================================
   COLLECTION / PRODUCT DETAIL
========================================== */

.collection {
  background: var(--paper);
}

.product-detail {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  margin: 0 auto 3rem;
  max-width: var(--max-w);
}

.product-detail h2,
.responsibility-intro h2,
.responsibility-band h2 {
  font-size: clamp(2rem, 3.6vw, 3.7rem);
}

.product-detail p,
.responsibility-intro p,
.responsibility-band p {
  color: var(--muted);
  margin: 1rem 0 0;
}

.product-highlights {
  background: var(--coal);
  box-shadow: var(--shadow);
  color: var(--white);
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

.product-highlights span {
  border-bottom: 1px solid rgba(213, 175, 106, 0.22);
  color: rgba(255, 255, 255, 0.78);
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  padding-bottom: 0.85rem;
}

.product-highlights span:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.gallery-header {
  margin-bottom: 1.4rem;
}

.collection-grid {
  display: grid;
  gap: 0.8rem;
  grid-auto-columns: minmax(10.5rem, 1fr);
  grid-auto-flow: column;
  margin: 0 auto;
  max-width: var(--max-w);
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-color: var(--gold) rgba(29, 25, 20, 0.12);
  scrollbar-width: thin;
}

.collection-card {
  background: transparent;
  box-shadow: 0 14px 34px rgba(35, 27, 18, 0.12);
  overflow: hidden;
}

.collection-card img {
  aspect-ratio: 4 / 3.2;
  height: clamp(10.5rem, 15vw, 15.5rem);
  object-fit: cover;
  width: 100%;
}

.quality-note {
  background: var(--coal);
  color: var(--white);
  margin-top: 3rem;
  padding: 2rem;
}

.quality-note p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.4rem;
}


/* ==========================================
   RESPONSIBILITY
========================================== */

.responsibility-section {
  background: var(--paper);
}

.responsibility-intro {
  align-items: end;
  display: grid;
  gap: clamp(1.2rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
  margin: 0 auto 2.4rem;
  max-width: var(--max-w);
}

.responsibility-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
  max-width: var(--max-w);
}

.responsibility-card {
  background: var(--white);
  box-shadow: 0 16px 44px rgba(35, 27, 18, 0.1);
  padding: 1.35rem;
}

.responsibility-card span {
  color: var(--gold);
  display: block;
  font-weight: 900;
  margin-bottom: 1rem;
}

.responsibility-card h3 {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.responsibility-card p {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0.7rem 0 0;
}

.responsibility-band {
  align-items: center;
  background: var(--coal);
  color: var(--white);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 3rem auto 1rem;
  max-width: var(--max-w);
  padding: clamp(1.6rem, 3vw, 2.3rem);
}

.responsibility-band p {
  color: rgba(255, 255, 255, 0.68);
}

.responsibility-mosaic {
  margin: 2rem auto 0;
  max-width: var(--max-w);
}


/* ==========================================
   PAGE TRANSITION
========================================== */

#app {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    filter 220ms ease;
  will-change: opacity, transform, filter;
}

#app.is-leaving,
#app.is-entering {
  filter: blur(1px);
  opacity: 0;
  transform: translateY(6px);
}

#app.is-entered {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}

body.is-routing {
  overflow-x: hidden;
}


/* ==========================================
   RESPONSIVE BREAKPOINTS
========================================== */

/* --- Large tablet / small desktop (≤ 1180px) --- */
@media (max-width: 1180px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-grid,
  .partner-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Remove left-border dividers that only make sense in 5-col layout */
  .stat + .stat::before,
  .partner-item {
    border-left: 0;
  }

  .process-inner,
  .factory-inner,
  .catalog-inner,
  .product-detail,
  .responsibility-intro,
  .responsibility-band,
  .contact-layout {
    grid-template-columns: 1fr;
  }

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

  .catalog-cover {
    min-height: 18rem;
  }
}

/* --- Tablet (≤ 900px) --- */
@media (max-width: 900px) {
  /* Reveal hamburger, hide desktop nav */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* FIX: hamburger had no guaranteed hit area — WCAG target size is 24x24
       minimum, 44x44 recommended for touch. Padding alone won't help if the
       icon itself is tiny; force a real tap target. */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }

  .site-header {
    gap: 1rem;
    justify-content: space-between;
    padding: 0.9rem var(--section-pad-x);
  }

  .site-nav {
    background: rgba(18, 17, 14, 0.98);
    border-top: 1px solid rgba(213, 175, 106, 0.18);
    inset: 5.5rem 0 auto;
    padding: 1rem var(--section-pad-x) 1.4rem;
    position: fixed;
    /* FIX: display:none → display:grid is an instant cut, no way to animate
       it, and it ignores prefers-reduced-motion either way since there was
       never any motion to reduce. Swap to opacity/visibility so the open
       state can transition, and reduced-motion users still get an instant
       toggle (the global prefers-reduced-motion block below already zeroes
       transition-duration). */
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
  }

  .site-nav > a,
  .nav-group > a,
  .nav-dropdown a {
    display: block;
    font-size: 0.9rem;
    padding: 0.8rem 0;
  }

  .site-header.is-menu-open .site-nav {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    justify-content: stretch;
  }

  /* Flatten dropdown in mobile menu */
  .nav-dropdown,
  .nav-group:hover .nav-dropdown,
  .nav-group:focus-within .nav-dropdown {
    background: transparent;
    border: 0;
    box-shadow: none;
    left: auto;
    opacity: 1;
    padding: 0.2rem 0 0 0.8rem;
    pointer-events: auto;
    position: static;
    transform: none;
  }

  /* Hide desktop CTA pill in header */
  .header-cta {
    display: none;
  }

  /* Simplify hero overlay on smaller screens */
  .hero::before {
    background:
      linear-gradient(90deg, rgba(8, 8, 7, 0.96) 0%, rgba(11, 10, 8, 0.72) 100%),
      url("/images/Home.png") center / cover no-repeat;
  }

  .hero-content {
    padding-top: 9rem;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .factory-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 11.5rem);
  }

  .factory-mosaic img:first-child {
    grid-row: auto;
  }

  /* ============================================================
     FOOTER — centered single-column stack, tablet & mobile
     Markup: .footer-grid holds four plain, unclassed <div> columns
     (logo+blurb+socials, Quick Links, Products, Contact Us). text-align
     alone can't center them — the logo <a> and each link are block-level
     and stretch to fill the column width, so centering text doesn't move
     the boxes. Each column becomes its own centered flex stack instead,
     so every child (logo, each link, the socials row) shrinks to its own
     size and gets centered as a box.
  ============================================================ */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .footer-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
  }

  .footer-grid > div p {
    max-width: 26rem;
  }

  .footer-brand img {
    display: block;
  }

  .socials {
    justify-content: center;
  }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
  }

  .catalog-inner {
    grid-template-columns: 1fr;
  }

  .catalog-cover {
    min-height: 18rem;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
}


/* --- Mobile (≤ 640px) --- */
@media (max-width: 640px) {
  :root {
    --section-pad-x: clamp(1rem, 5vw, 1.4rem);
    --section-pad-y: 3.5rem;
  }

  .site-header {
    padding-inline: 1rem;
  }

  .brand {
    min-width: 0;
  }

  .brand img {
    width: 7rem;
  }

  .brand span {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .hero {
    min-height: 100svh;
  }

  .hero-content {
    min-height: 100svh;
    padding-top: 7.75rem;
    padding-bottom: 2.8rem;
    text-align: center;
    justify-items: center;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.7rem);
    max-width: 100%;
  }

  .hero p {
    margin: 1rem auto 1.35rem;
    max-width: 30rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    /* FIX: full-width buttons on mobile still need a comfortable tap
       height, not just whatever the desktop padding produces. */
    min-height: 44px;
    white-space: normal;
  }

  .page-hero {
    min-height: 25rem;
    padding-top: 9rem;
    text-align: center;
  }

  .page-hero-inner {
    display: grid;
    justify-items: center;
  }

  /* Center every copy block that sits beside an image on desktop —
     on mobile the image stacks above, so copy should read centered too */
  .split-copy,
  .factory-copy,
  .catalog-copy,
  .responsibility-intro > div:first-child {
    text-align: center;
  }

  .split-copy .btn,
  .factory-copy .btn,
  .catalog-copy .btn {
    margin-inline: auto;
  }

  /* FIX: in our-factory, the gap between the last paragraph and the button
     was inconsistent — it was inheriting whatever margin-bottom the desktop
     side-by-side layout used on the paragraph, which is tuned for a
     different (wider, shorter) text column. Set it explicitly here instead
     of letting two different margins stack unpredictably. */
  .factory-copy p:last-of-type {
    margin-bottom: 0;
  }

  .factory-copy .btn {
    margin-top: 1.75rem;
  }

  .stats-grid,
  .product-grid,
  .partner-grid,
  .responsibility-grid,
  .steps,
  .factory-mosaic {
    grid-template-columns: 1fr;
  }
  /* .footer-grid is already single-column and centered from the ≤900px
     breakpoint above — nothing to override here. */

  .stat + .stat::before {
    display: none;
  }

  .stat {
    min-height: 6.5rem;
    padding: 1.1rem 1rem;
  }

  /* Product cards: fixed 32rem height + 16rem image was oversized
     and cropped art awkwardly on narrow screens */
  .product-card {
    min-height: 0;
  }

  .product-card img {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .product-body {
    padding: 1.3rem;
  }

  /* Process steps: 1-column grid of 6 stacked steps reads as a long
     list with no rhythm — pair them 2-up so it still feels like steps */
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  /* FIX: an odd step count (e.g. 5) leaves a single orphaned card filling
     one half of the last row, flush left, which looks broken rather than
     intentional. Span and center it instead. */
  .steps > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin-inline: auto;
  }

  .process-inner {
    gap: 2rem;
  }

  /* Factory mosaic: collapse the asymmetric grid cleanly to a single
     column of evenly stacked images */
  .factory-mosaic {
    grid-template-rows: repeat(4, 10rem);
  }
  /* NOTE: removed the duplicate `.factory-mosaic img:first-child { grid-row:
     auto }` rule that was here — it's already set in the ≤900px block above
     and nothing in this query overrides it, so repeating it did nothing. */

  .catalog-inner {
    text-align: center;
  }

  .catalog-cover {
    min-height: 14rem;
  }

  /* FIX: merged the two separate .catalog-book blocks that existed lower
     in the file — same selector, no reason to declare it twice. */
  .catalog-book {
    margin-inline: auto;
    transform: rotate(-5deg);
  }

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

  .catalog-strip {
    padding-block: 3rem;
  }

  .contact-section {
    padding-bottom: 4rem;
  }

  .contact-panel,
  .contact-form-card {
    padding: 1.25rem;
  }

  .contact-form .btn {
    width: 100%;
    min-height: 44px;
    /* FIX: margin-inline:auto on a 100%-width element does nothing — it has
       no free space to center into. Dropped it. */
  }

  /* Responsibility band: image+text grid collapses but band keeps
     align-items:center from desktop, which crushes the image oddly */
  .responsibility-band {
    text-align: center;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  /* Footer: tighten the gap a bit further than the tablet breakpoint —
     everything is already centered and flex-stacked from the ≤900px rule
     above, this just trims spacing for the narrower viewport */
  .footer-grid {
    gap: 2rem;
  }

  .socials {
    justify-content: center;
    /* FIX: social icon links are usually small glyphs — give them a real
       tap target so they're not painful to hit on a phone. */
    gap: 1rem;
  }

  .socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .footer-bottom {
    gap: 0.4rem;
  }
}


/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #app,
  #app.is-leaving,
  #app.is-entering {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Ensure keyboard focus is always visible */
:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}