/* ── Typefaces, which handed every
   visitor's IP to Google on page load — before any consent, on every page.
   Self-hosting removes that request entirely; it also drops two
   third-party connections and a render-blocking external stylesheet.

   One file per family per subset: asking Google for a weight range returns
   a variable font, so 300-600 interpolates from a single 37KB face instead
   of four static ones. latin-ext is not optional here — it carries ğ and ş
   for the Turkish pages. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-300-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-300-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/inter-300-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/inter-300-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   MARITZA — Brand Stylesheet
   100% Leather · 100% Handmade
   ============================================================ */

/* 1. CUSTOM PROPERTIES
-------------------------------------------------------------- */
:root {
  /* ── Colour tokens ── */
  --ink:        #1A1715;   /* warm near-black (was neutral) */
  --paper:      #FAF8F5;   /* parchment background */
  --white:      #FFFFFF;
  --teal:       #8A5A2B;   /* cognac leather — primary accent */
  --teal-deep:  #6E4621;   /* cognac hover/deep */
  --stone:      #5B544E;   /* body text — darker for WCAG AA */
  --gold:       #C4A882;   /* warm secondary, used sparingly */
  --line:       #E7E1D8;   /* subtle borders */

  /* ── Typography ── */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (1.25 ratio) */
  --fs-display: clamp(2.75rem, 6vw, 5rem);
  --fs-h1:      clamp(2rem, 4vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h3:      1.25rem;
  --fs-body:    1.0625rem;  /* 17px */
  --fs-small:   0.875rem;
  --leading-body: 1.7;
  --tracking-caps: 0.18em;

  /* ── Layout ── */
  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-gap: clamp(6rem, 10vw, 10rem);

  /* ── Motion ── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 0.35s;

  /* ── Elevation ── */
  --shadow-sm: 0 2px 10px rgba(26,23,21,0.06);
  --shadow-md: 0 8px 28px rgba(26,23,21,0.09);
  --shadow-lg: 0 20px 52px rgba(26,23,21,0.13);
}

/* 2. RESET & BASE
-------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@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;
  }
}
img, video {
  display: block;
  max-width: 100%;
  height: auto;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* 3. TYPOGRAPHY
-------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--ink);
  /* Every heading that wrapped on a phone left one word alone on the last
     line — "Manufacturing" under three shorter words, "made." under five.
     In a display serif at this size the hole is the first thing you see.
     balance evens the lines instead, and browsers only apply it to short
     blocks, which is all a heading ever is. */
  text-wrap: balance;
}

/* pretty works on the last line specifically, so running copy stops
   stranding a single word. Correct for long text, where balance would be
   ignored past a few lines anyway. */
p, li, figcaption, dd {
  text-wrap: pretty;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.0625rem; }
p {
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--stone);
  max-width: var(--maxw-text, 68ch);
}
p + p { margin-top: 1em; }
strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--teal);  /* cognac accent */
}

/* 4. LAYOUT UTILITIES
-------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-gap); }
.section--sm { padding-block: clamp(3rem, 6vw, 5rem); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

/* 5. LOGO
-------------------------------------------------------------- */
.logo-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.logo-img--footer {
  filter: brightness(0) invert(1);
}

/* 6. BUTTONS
-------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 2.25rem;
  /* Touch-target floor. The full-size padding clears this on its own, but
     .btn--sm's does not — it leaves the editorial "Inquire" buttons at 40px,
     under the 44px a thumb needs. Centring absorbs the difference, so the
     label does not move. */
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(26,23,21,0.4);
}
.btn-outline:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.btn-teal {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}
.btn-teal:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}
.btn--sm { padding: 0.55rem 1.5rem; font-size: 0.7rem; }

/* 7. NAVIGATION
-------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.site-header.scrolled {
  background: rgba(250,248,245,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(26,23,21,0.08);
}
/* Pages without hero get solid header from start */
.site-header.header-solid {
  background: rgba(250,248,245,0.97);
  box-shadow: 0 1px 0 rgba(26,23,21,0.1), 0 4px 16px rgba(26,23,21,0.04);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
}
.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.nav-links a {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
  transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--teal);
  transition: width var(--dur) var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--ink); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 4px 2px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
  transform-origin: center;
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 800;
  padding-top: 5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  /* visibility kapanırken opacity bittikten sonra gizlenir */
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0s linear 0.32s;
}
.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  /* açılırken visibility anında görünür olur */
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0s linear 0s;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink);
  padding: 0.6rem 2rem;
  transition: color var(--dur) var(--ease);
}
.mobile-nav a:hover { color: var(--teal-deep); }
/* mobile-nav-close kaldırıldı — hamburger X animasyonu kapatma işini görüyor */
.mobile-nav-close { display: none; }

/* 8. HERO — HOME
-------------------------------------------------------------- */
/* Legacy split hero (kept for other pages that may use .hero without modifier) */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  overflow: hidden;
}

/* Full-bleed editorial hero (homepage) */
.hero--fullbleed {
  display: block;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.hero--fullbleed .hero-bg {
  position: absolute;
  inset: 0;
}
.hero--fullbleed .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 8s ease;
}
.hero--fullbleed:hover .hero-bg img {
  transform: scale(1.04);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26,23,21,0.55) 0%,
    rgba(26,23,21,0.10) 50%,
    transparent 100%
  );
}
.hero-body {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 8rem max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 85%;
}
.hero-body h1 {
  font-size: clamp(1.75rem, 3.5vw, 3.25rem);
  color: var(--white);
  line-height: 1.05;
  letter-spacing: 0.01em;
  max-width: none;
  white-space: nowrap;
}

.hero-img--mobile { display: none; }
@media (max-width: 1024px) {
  .hero-img--desktop { display: none; }
  .hero-img--mobile { display: block; }
}

/* About page fullbleed variant — title bottom-left, caption bottom-right */
.hero--about { min-height: 85svh; }
.hero-overlay--bottom {
  background: linear-gradient(
    to top,
    rgba(26,23,21,0.65) 0%,
    rgba(26,23,21,0.15) 45%,
    transparent 75%
  );
}
.hero-body--about {
  top: auto;
  bottom: 0;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  padding-top: 0;
  padding-bottom: 3.5rem;
  max-width: 100%;
}
.hero-body--about h1 {
  font-size: clamp(3.5rem, 9vw, 8rem);
  white-space: normal;
  text-shadow: 0 2px 16px rgba(26,23,21,0.45);
}
.hero-caption {
  color: rgba(255,255,255,0.9);
  max-width: 320px;
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-bottom: 1.5rem;
  text-shadow: 0 1px 8px rgba(26,23,21,0.5);
}
@media (max-width: 768px) {
  .hero--about { min-height: 70svh; }
  .hero-body--about {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 2.5rem;
  }
  .hero-caption { padding-bottom: 0; }
}

.hero--fullbleed .hero-stat__num {
  color: var(--white) !important;
  text-shadow: 0 1px 3px rgba(26,23,21,0.75), 0 2px 14px rgba(26,23,21,0.6);
}
.hero--fullbleed .hero-body h1 {
  text-shadow: 0 2px 16px rgba(26,23,21,0.45);
}
.hero--fullbleed .hero-stats {
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .hero--fullbleed { min-height: 92svh; }
  .hero-body { padding: 6rem var(--gutter) 2.5rem; gap: 1.25rem; max-width: 100%; }
  .hero-body h1 { font-size: clamp(2.25rem, 7.5vw, 3.5rem); white-space: normal; }
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(26,23,21,0.6) 0%,
      rgba(26,23,21,0.38) 42%,
      transparent 70%
    );
  }
}
.trust-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* 10. SECTION HEADER
-------------------------------------------------------------- */
.section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-header--center {
  text-align: center;
}
.section-header .eyebrow { margin-bottom: 0.875rem; }
.section-header h2 { margin-bottom: 1rem; }
.section-header p {
  max-width: 540px;
}
.section-header--center p { margin-inline: auto; }

/* 11. PRODUCT GRID & CARDS
-------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Editorial asymmetric grid — homepage */
.product-grid--editorial {
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.product-grid--editorial .product-card--featured {
  grid-row: span 2;
}
.product-grid--editorial .product-card--featured .product-card-img {
  aspect-ratio: unset;
  height: 100%;
  min-height: 480px;
}
@media (max-width: 900px) {
  .product-grid--editorial {
    grid-template-columns: 1fr 1fr;
  }
  .product-grid--editorial .product-card--featured {
    grid-column: span 2;
    grid-row: span 1;
  }
  .product-grid--editorial .product-card--featured .product-card-img {
    aspect-ratio: 16/9;
    height: auto;
    min-height: unset;
  }
}
@media (max-width: 768px) {
  .product-grid--editorial {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .product-grid--editorial::-webkit-scrollbar { display: none; }
  .product-grid--editorial .product-card {
    flex: 0 0 80vw;
    scroll-snap-align: start;
    grid-column: unset;
    grid-row: unset;
  }
  .product-grid--editorial .product-card-img, .product-grid--editorial .product-card--featured .product-card-img {
    aspect-ratio: 4/5;
    height: auto;
    min-height: unset;
  }
}
.product-card {
  background: var(--white);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.product-card-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--white);
  position: relative;
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .product-card-img img {
  transform: scale(1.04);
}
.product-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(26,26,26,0.3), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  display: flex;
  justify-content: flex-end;
}
.product-card:hover .product-card-overlay { opacity: 1; }
/* A touch screen never fires :hover, so on a phone this overlay stayed at
   opacity 0 while its link kept pointer-events — an invisible "Inquire"
   stretched across the bottom of every photo, which a buyer scrolling the
   carousel would hit instead of the shoe. Reveal it rather than leave a live
   target no one can see; the editorial row is built to be browsed by touch. */
@media (hover: none) {
  .product-card-overlay { opacity: 1; }
  /* On hover the white outline only had to survive a moment; standing there
     permanently it has to be read. These are white-background studio shots, and the scrim is just 0.15 behind the label — white on #ddd, 1.4:1. Fill
     the button rather than darken the photograph to compensate. */
  .product-card-overlay .btn-outline-white {
    background: rgba(26,23,21,0.8);
    border-color: transparent;
  }
}
.card-link {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card-link:hover { gap: 0.7rem; color: var(--teal); }
.card-link::after { content: '→'; }

/* JOURNAL / INSIGHTS CARDS
-------------------------------------------------------------- */
.journal-grid { gap: 2.5rem; align-items: stretch; }
.journal-card {
  background: var(--white);
  border: 1px solid rgba(154,147,139,0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.journal-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.journal-card-img {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.journal-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.6s var(--ease);
}
.journal-card:hover .journal-card-img img { transform: scale(1.05); }
.journal-card-body {
  padding: 1.75rem 1.875rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.journal-card-body .eyebrow { margin-bottom: 0.75rem; }
.journal-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  color: var(--ink);
}
.journal-card-body p {
  font-size: 0.9rem;
  color: var(--stone);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.journal-card-body .card-link { margin-top: auto; }

/* 12. SPLIT SECTION
-------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}
.split-img {
  overflow: hidden;
  background: var(--white);
  position: relative;
}
.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.8s var(--ease);
}
.split:hover .split-img img {
  transform: scale(1.03);
}
.split-content {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 6vw, 5rem);
}
.split-content .eyebrow { margin-bottom: 1rem; }
.split-content h2 { margin-bottom: 1.5rem; }
.split-content h3 { margin-bottom: 1.25rem; }
.split-content p { margin-bottom: 1.5rem; max-width: 460px; }
.split-content .btn { align-self: flex-start; }

/* Split hero modifier — homepage: full height, header clearance, display H1 */
.split--hero {
  min-height: clamp(560px, 90svh, 900px);
}
.split--hero .split-content {
  /* push content down to clear the fixed header */
  padding-top: clamp(7rem, 12vh, 9rem);
}
.split--hero .split-content h1 {
  font-size: var(--fs-display);  /* clamp(2.75rem, 6vw, 5rem) */
  line-height: 1.06;
  max-width: 12ch;
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 2.5rem;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2rem;
}
.hero-stat:first-child {
  padding-left: 0;
}
.hero-stat + .hero-stat {
  border-left: 1px solid var(--cognac);
}
.hero-stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 300;
  color: var(--cognac);
  line-height: 1;
  margin-bottom: 0.4rem;
}
@media (max-width: 768px) {
  /* stack: image top, headline below */
  .split--hero { min-height: auto; }
  .split--hero .split-content {
    padding-top: clamp(2.5rem, 8vw, 4rem);
    padding-bottom: clamp(3rem, 8vw, 5rem);
  }
  .split--hero .split-img { min-height: clamp(300px, 52vh, 460px); }
  .split--hero .split-content h1 { font-size: clamp(1.5rem, 6.5vw, 2.25rem); max-width: 100%; text-align: left; }
  .hero-stats { justify-content: center; }
  .hero-stat { align-items: center; text-align: center; }
}

/* 13. DARK BAND
-------------------------------------------------------------- */
.dark-band {
  background: var(--ink);
  color: var(--white);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  text-align: center;
}
.dark-band .eyebrow { color: var(--teal); margin-bottom: 1rem; }
.dark-band h2, .dark-band h3 {
  color: var(--white);
  margin-bottom: 1.25rem;
  max-width: 700px;
  margin-inline: auto;
}
.dark-band p {
  color: rgba(255,255,255,0.6);
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}
.dark-band .btn-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* 15. FOOTER
-------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) 2.5rem;
}
.footer-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2rem;
}
.footer-desc {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.875rem !important;
  margin-top: 1.25rem !important;
  max-width: 240px;
}
.footer-website {
  margin-top: 0.75rem;
}
.footer-website a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  transition: color var(--dur) var(--ease);
  letter-spacing: 0.05em;
}
.footer-website a:hover { color: rgba(255,255,255,0.7); }
.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 1.5rem;
  display: block;
}
.footer-col ul li {
  margin-bottom: 0.75rem;
}
.footer-col ul li a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--dur) var(--ease);
}
.footer-col ul li a:hover { color: var(--white); }
.footer-contact-item {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
  display: block;
}
.footer-contact-item a {
  color: rgba(255,255,255,0.6);
  transition: color var(--dur) var(--ease);
}
.footer-contact-item a:hover { color: var(--white); }
.footer-bottom {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-bottom p, .footer-bottom a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.28);
  transition: color var(--dur) var(--ease);
}
.footer-bottom a:hover { color: rgba(255,255,255,0.55); }

/* 16. PAGE HEADER (inner pages)
-------------------------------------------------------------- */
.page-header {
  background: var(--paper);
  padding: 9rem var(--gutter) 4rem;
}
.page-header .eyebrow { margin-bottom: 1rem; }
.page-header h1 { margin-bottom: 1.25rem; }
.page-header p {
  font-size: 1.0625rem;
  max-width: 560px;
  color: #3a3a3a;
}

/* 17. JOURNAL ARTICLE PAGES
   Header reuses the site's own .split component (same one index.html and
   craftsmanship.html build their image+headline sections from) rather than a
   journal-only hero — one fewer visual language for a reader to learn.
-------------------------------------------------------------- */
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.article-back::before { content: '←'; }
.article-back:hover { gap: 0.75rem; color: var(--teal-deep); }

.article-body {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.article-prose {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.article-prose .article-back { margin-bottom: 3rem; display: block; }

.article-lead {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--stone);
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(154,147,139,0.18);
}

.article-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 500;
  margin-top: 3rem;
  margin-bottom: 0.875rem;
  color: var(--ink);
}
.article-prose h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.article-prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--stone);
  margin-bottom: 1.375rem;
}
.article-prose strong { color: var(--ink); }

/* Pullquote */
.article-pullquote {
  border-left: 3px solid var(--teal);
  padding: 1rem 0 1rem 1.75rem;
  margin: 2.5rem 0;
}
.article-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* Checklist */
.article-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.article-checklist li {
  position: relative;
  padding: 0.875rem 0 0.875rem 2rem;
  border-bottom: 1px solid rgba(154,147,139,0.1);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--stone);
}
.article-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
}
.article-checklist strong { color: var(--ink); display: block; margin-bottom: 0.15rem; }

/* Byline — one line, no separators to keep balanced, no items to wrap. The
   category already lives in the split header's eyebrow, so it is not
   repeated here, and a read-time estimate was the one line item nothing else
   on the site shows. */
.article-byline {
  margin-bottom: 2.5rem;
  font-size: var(--fs-small);
  color: var(--stone);
}
.article-byline strong { color: var(--ink); font-weight: 500; }
.article-byline .article-dates {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(91,84,78,0.55);
}

/* Divider rule */
.article-rule {
  border: none;
  border-top: 1px solid rgba(154,147,139,0.18);
  margin: 3rem 0;
}
.form-success {
  display: none;
  background: rgba(31,182,193,0.08);
  border: 1px solid rgba(31,182,193,0.3);
  border-radius: 2px;
  padding: 2rem;
  text-align: center;
}
.form-success h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.form-success p { color: var(--stone); font-size: 0.9375rem; }
.filter-btn {
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  white-space: nowrap;
  background: none;
  cursor: pointer;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* 19. INTERNATIONAL CARDS
-------------------------------------------------------------- */
.intl-card {
  border: 1px solid rgba(154,147,139,0.18);
  border-radius: 3px;
  overflow: hidden;
  background: var(--white);
}
.intl-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.intl-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.intl-card:hover .intl-card-img img { transform: scale(1.03); }
.intl-card-body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.intl-card-body h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 400;
  margin: 0;
}
.intl-card-body p {
  color: var(--stone);
  font-size: 0.9375rem;
  margin: 0;
  flex: 1;
}
.intl-card-body .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* 20. TANNERY SECTION
-------------------------------------------------------------- */
.tannery-section { background: var(--white); }

.tannery-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

.tannery-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 240px 200px;
  gap: 0.625rem;
}
.tannery-photo {
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(135deg, #c9a97a 0%, #9b7443 40%, #6b4f28 100%);
  position: relative;
}
.tannery-photo--1 { grid-row: 1 / 3; }
.tannery-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* 23. CONTACT
-------------------------------------------------------------- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-detail-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.contact-detail-value {
  font-size: 1rem;
  color: var(--ink);
}
.contact-detail-value a {
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.contact-detail-value a:hover { color: var(--teal-deep); }

/* 23b. BUYER FAQ
-------------------------------------------------------------- */
.faq-container { max-width: 880px; }
.faq-item {
  border-top: 1px solid rgba(154,147,139,0.28);
  padding: 0;
}
.faq-item:last-child { border-bottom: 1px solid rgba(154,147,139,0.28); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--teal-deep);
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
.faq-item p {
  max-width: 760px;
  margin: -0.25rem 0 1.5rem;
  color: var(--stone-dark);
}
/* ── Screen-reader-only text ───────────────────────────────────────────
   .sr-only was already in the markup — faq.html labels its accordion region
   with it — but nothing ever defined the class, so that heading rendered at
   26px and the page showed a visible duplicate of its own title. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link. Every page opens with the logo, seven nav links and a language
   button; a keyboard or switch user had to pass all of them on every page
   to reach the content. Hidden until focused, then it parks top-left. */
.skip-link {
  /* fixed, not absolute: the link has to stay reachable wherever the reader
     already is. z-index clears the header's 900 — at 100 it was painted
     under a 97%-opaque bar and read as a smudge over the logo. */
  position: fixed;
  top: 0;
  left: var(--gutter);
  z-index: 1000;
  transform: translateY(-200%);
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible {
  transform: translateY(0.5rem);
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Pressed feedback. Hover says a control is live, but hover does not exist
   on touch — nothing confirmed that a tap had registered. One pixel is
   enough to read as a press without becoming an animation. */
.btn:active, .lang-switch:active, .cat-card-link:active, .cat-enquiry a:active, .hamburger:active {
  transform: translateY(1px);
}

/* ── Analytics consent ─────────────────────────────────────────────────
   Sits at the bottom rather than over the page: nothing here is urgent
   enough to block reading, and a modal would make declining feel like the
   harder path. Both buttons carry equal weight for the same reason. */
.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter);
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.consent[hidden] { display: none; }
.consent-text {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
}
.consent-text a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.consent-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
/* The outline button is drawn for light backgrounds and would be invisible
   here — the same trap the dark-band CTA fell into. */
.consent .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.55); }
.consent .btn-outline:hover { border-color: var(--white); }

/* ── Brand hero ────────────────────────────────────────────────────────
   The homepage opens on the wordmark rather than on a sentence. The photo
   is the argument; the line under it carries the two facts worth stating
   over an image — where the shoes are made and since when. The descriptive
   copy lives in the answer block immediately below, which is the passage
   that ranks anyway.

   .hero-body pins to the top with a fixed padding; the brand variant
   stretches to the full height and centres instead, so the type sits in
   the frame rather than above it. */
/* The old framing favoured the top of the shot because the type sat up there.
   With the wordmark centred, the half worth keeping is the lower one — the
   shoe, the shells, the starfish — which a narrow viewport cropped away
   entirely at center 20%. Scoped to this hero: /about shares the fullbleed
   component and wants its own framing. */
.hero--brand .hero-bg img { object-position: center 42%; }

.hero-body--brand {
  bottom: 0;
  padding-block: 7rem 5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
}
.hero-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
  margin: 0;
}
/* The word-split reveal used elsewhere staggers per word, which does nothing
   for a one-word mark. One settle for the pair reads better and keeps the
   wordmark whole. */
@keyframes hero-wordmark-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}
.hero-wordmark__name, .hero-wordmark__tagline {
  opacity: 0;
  animation: hero-wordmark-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-wordmark__tagline { animation-delay: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark__name, .hero-wordmark__tagline { animation: none; opacity: 1; }
}
.hero-wordmark__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 10vw, 7rem);
  line-height: 1;
  /* Tracking this wide leaves a trailing space after the last letter, which
     throws the wordmark off centre; the indent puts it back. */
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--white);
}
.hero-wordmark__tagline {
  font-size: clamp(0.6rem, 1.35vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--white);
  /* The h1's shadow is a wide soft glow sized for display type; at 13px it
     does nothing and the line vanished into the sand. This is the tight pair
     the hero statistics already used over this same photograph. */
  text-shadow: 0 1px 3px rgba(26,23,21,0.8), 0 2px 10px rgba(26,23,21,0.55);
}
/* Centred type needs its contrast in the middle of the frame, not at the top
   edge where the original gradient put it. Kept light so the water and the
   shoe still read. */
.hero-overlay--brand {
  background: linear-gradient(
    to bottom,
    rgba(26,23,21,0.34) 0%,
    rgba(26,23,21,0.26) 34%,
    rgba(26,23,21,0.40) 56%,
    rgba(26,23,21,0.34) 74%,
    rgba(26,23,21,0.44) 100%
  );
}

/* ── Season on a catalog card ──────────────────────────────────────────
   "SS25" alone does not say which season it is, and the three cards were
   otherwise identical apart from the photograph. The line under the code
   names it; it takes the h3's bottom margin so code and season read as one
   label rather than two stacked items. */
.cat-card--season .cat-card-body h3 { margin-bottom: 0.45rem; }
.cat-card-season {
  display: block;
  font-size: var(--fs-small);
  color: var(--stone);
}

/* Links inside running copy had no cue whatsoever — the base rule above sets
   `color: inherit; text-decoration: none`, so an <a> in a paragraph rendered
   byte-identical to the prose around it. Twenty of them were unreadable as
   links, on the homepage and the FAQ answers among others. This generalises
   the one treatment the site already had (.faq-item p a) to body copy, and
   uses :not([class]) plus the .cat-enquiry exclusion so components that style
   their own anchors — buttons, catalog cards, the "Request pricing" link —
   keep their appearance. */
main p:not(.cat-enquiry) a:not([class]), main li a:not([class]) {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.faq-item p a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* 25. SVG LINE ICONS
-------------------------------------------------------------- */
.line-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--teal);
}
.line-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 26. UTILITY
-------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-lg { margin-top: 3rem; }

/* 27. SCROLL ANIMATIONS
-------------------------------------------------------------- */
:root {
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --swift:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--spring),
              transform 0.7s var(--spring);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Directional variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.75s var(--spring), transform 0.75s var(--spring);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.75s var(--spring), transform 0.75s var(--spring);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.7s var(--spring), transform 0.7s var(--spring);
}
/* Vanilla port of Magic UI's blur-fade — no React/Motion available on this
   static site, so the same opacity/offset/blur curve is reproduced with a
   plain CSS transition and the existing IntersectionObserver reveal system. */
.reveal-blur {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  transition: opacity 0.6s var(--spring),
              transform 0.6s var(--spring),
              filter 0.6s var(--spring);
}
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible, .reveal-blur.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Delay helpers */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ---- Hero word-split entrance ---- */
.hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.1;
}
.hero-word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: wordUp 0.9s var(--spring) forwards;
}
@keyframes wordUp {
  to { transform: translateY(0); opacity: 1; }
}

/* ---- Page fade transition ---- */
.page-fade {
  animation: pageFadeIn 0.5s var(--swift) both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.page-leaving {
  animation: pageFadeOut 0.3s var(--swift) both;
  pointer-events: none;
}
@keyframes pageFadeOut {
  to { opacity: 0; }
}

/* ---- Product card shine sweep ---- */
.product-card-img {
  position: relative;
  overflow: hidden;
}
.product-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s var(--spring);
  pointer-events: none;
}
.product-card:hover .product-card-img::after {
  transform: translateX(100%);
}

/* ---- Split section directional reveals ---- */
.split .split-img { --reveal-dir: -1; }

/* ---- Trust strip number pop ---- */
.trust-num {
  display: block;
  transition: transform 0.4s var(--spring);
}

/* 28. RESPONSIVE
-------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; }

  .split { grid-template-columns: 1fr; }
  .split-img { min-height: clamp(260px, 46vh, 400px); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  /* Bölüm boşluklarını mobilde azalt */
  :root {
    --section-gap: clamp(3.5rem, 9vw, 5rem);
  }

  .main-nav { display: none; }

  /* Mobil header düzeni: hamburger sol | logo orta | dil sağ */
  .nav-inner { position: relative; }
  .logo-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Hamburger sola — 44px dokunma hedefi */
  .hamburger {
    display: flex;
    order: -1;
    width: 44px;
    height: 44px;
    padding: 10px 8px;
  }

  /* Hero yığıldığında gereksiz boş alan bırakmasın */
  .hero { min-height: auto; }
  /* Görsel üstte {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }
  .trust-num { font-size: 2rem; }

  .product-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .page-header {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }

  /* Tannery — mobilde görseller üste */
  .tannery-inner { grid-template-columns: 1fr; gap: 2rem; }
  .tannery-gallery { order: -1; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .btn { width: 100%; justify-content: center; }
  .btn + .btn { width: 100%; }
  .grid-3 { grid-template-columns: 1fr; }

  /* Tannery bölümü mobil */
  .tannery-inner { grid-template-columns: 1fr; gap: 2rem; }
  .tannery-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 150px;
    order: -1;
  }
  .tannery-photo--1 { grid-row: 1 / 3; }

  /* Başlık boyutlarını küçük ekranlar için ölçekle */
  h1 { font-size: clamp(2rem, 8.5vw, 3rem); }
  .page-header h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.6rem, 7vw, 2.5rem); }
  .section-header p { font-size: 0.9375rem; }
}

/* 29. LANGUAGE SWITCHER
-------------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  border: 1.5px solid rgba(154,147,139,0.35);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.lang-switch:hover {
  color: var(--ink);
  border-color: var(--ink);
}
/* On scrolled/solid header the button stays readable */
.header-solid .lang-switch, .site-header.scrolled .lang-switch {
  color: var(--stone);
  border-color: rgba(154,147,139,0.35);
}
.header-solid .lang-switch:hover, .site-header.scrolled .lang-switch:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* Mobilde lang-switch header'da görünür kalır — daha büyük dokunma alanı */
@media (max-width: 768px) {
  .lang-switch {
    padding: 0.6rem 0.875rem;
    min-height: 44px;
    font-size: 0.7rem;
  }
}

/* ── Transparent header (hero pages — no header-solid, not yet scrolled) ──
   White text + white logo over the hero image gradient.
   On scroll the .scrolled class kicks in and reverts everything. */
.site-header:not(.scrolled):not(.header-solid) .logo-img:not(.logo-img--footer) {
  filter: brightness(0) invert(1);
}
.site-header:not(.scrolled):not(.header-solid) .nav-links a {
  color: var(--white);
}
.site-header:not(.scrolled):not(.header-solid) .nav-links a::after {
  background: var(--white);
}
.site-header:not(.scrolled):not(.header-solid) .lang-switch {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.3);
}
.site-header:not(.scrolled):not(.header-solid) .lang-switch:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.7);
}
.site-header:not(.scrolled):not(.header-solid) .hamburger span {
  background: var(--white);
}

/* ═══════════════════════════════════════════════════════════
   COLLECTION PAGE — editorial style plates
   Photography is the hero: tiles are full-bleed, never cards.
   Product shots sit on mixed studio backgrounds (white, charcoal, lilac, indigo), so tiles carry no plate or padding of their own.
─────────────────────────────────────────────────────────── */

/* ── Hero ── */
.coll-hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}
.coll-hero-inner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.coll-hero-type h1 {
  margin-block: 0.75rem 1.5rem;
  font-size: var(--fs-display);
  line-height: 1.02;
}
.coll-hero-lead {
  max-width: 34ch;
  font-size: 1.125rem;
  color: var(--stone);
}
.coll-spec {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.coll-hero-figure { margin: 0; }
.coll-hero-figure img {
  width: 100%;
  height: auto;
  display: block;
  /* The studio shot leaves dead space above the shoes; crop to a square and
     bias downward so the product fills the frame and balances the type block. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 58%;
}

/* ── Section intro ── */
.coll-intro { max-width: 62ch; }
.coll-intro h2 { margin-bottom: 1rem; }

/* ── Season catalogs ── */
/* White plane under the catalogs so they read as their own shelf rather than
   floating in the same parchment field as the hero. */
.coll-styles { background: var(--white); }
/* The rule anchors the whole section, so it spans the container rather than
   the 62ch measure the intro block uses when it carries prose. */
.coll-styles .coll-intro {
  max-width: none;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.coll-styles .coll-intro h2 { margin-bottom: 0; }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.cat-card { margin: 0; }
.cat-card-link {
  display: grid;
  gap: 1.25rem;
  color: inherit;
  text-decoration: none;
  /* Vanishing point for the tilt effect below — must live on the parent,
     not the element being rotated, or the 3D transform renders flat. */
  perspective: 1000px;
}
.cat-card-media {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--white);
  /* transform is set inline by main.js (cursor-driven tilt, vanilla port of
     Motion Primitives' Tilt component — this static site has no React/Motion
     to install the library itself). No transition here: main.js toggles it
     directly so live tracking stays snappy and only the release-to-neutral
     eases. */
}
.cat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
  transition: transform 0.4s var(--ease);
}
.cat-card-link:hover .cat-card-media img, .cat-card-link:focus-visible .cat-card-media img { transform: scale(1.03); }

.cat-card-body { align-self: center; }
.cat-card-body h3 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  margin-block: 0 1.5rem;
  /* Cormorant defaults to oldstyle figures, which drops the "25" below the
     baseline and leaves the season mark looking uneven. Lining figures put the
     numerals at cap height so the code reads as one deliberate word. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-weight: 300;
  letter-spacing: 0.05em;
}
.cat-card-action {
  display: inline-block;
  margin-top: 1.5rem;
  padding-bottom: 0.25rem;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-card-action::after { content: " \2193"; }
.cat-card-link:hover .cat-card-action, .cat-card-link:focus-visible .cat-card-action {
  color: var(--teal-deep);
  border-bottom-color: var(--teal);
}

/* A lone catalog would sit as one orphaned tile in a three-column grid, so it
   takes the whole row and lays out horizontally instead. Adding a second
   catalog drops this rule and the grid takes over — no markup change needed. */
.cat-card:only-child { grid-column: 1 / -1; }
.cat-card:only-child .cat-card-link {
  grid-template-columns: minmax(0, 0.5fr) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* With the season mark as the only copy left on the card, it carries the whole
   right-hand column — so it is set large enough to be the thing you see. */
.cat-card:only-child .cat-card-body h3 {
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  letter-spacing: 0.02em;
}

/* Sits outside the card on purpose: the card itself is the download, this is
   the separate ask. One line, no band. */
.cat-enquiry { margin-top: clamp(2rem, 4vw, 3rem); }
.cat-enquiry a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.75rem 0.25rem;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-enquiry a::after { content: " \2192"; }
.cat-enquiry a:hover, .cat-enquiry a:focus-visible {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* ── What the catalogs cover ──
   Layout comes from the shared .grid-3 utility, which already carries its own
   breakpoints; only the frame and caption are specific to this strip. */
.coll-range-lead {
  margin-top: 0.75rem;
  max-width: 46ch;
  color: var(--stone);
}
.range-figure { margin: 0; }
.range-figure img {
  display: block;
  width: 100%;
  /* The three frames are square at source, but pinning the ratio here keeps
     the row aligned even if a later image arrives cropped differently. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--white);
}
.range-figure figcaption {
  margin-top: 1rem;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .coll-hero-inner { grid-template-columns: 1fr; }
  .coll-hero-figure { order: -1; max-width: 460px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-card:only-child .cat-card-link { grid-template-columns: 1fr; }
  .cat-card:only-child .cat-card-media { max-width: 420px; }
  /* Stacked layout gives the season mark the full column width, so it keeps
     the presence it has on desktop instead of shrinking to a label. */
  .cat-card:only-child .cat-card-body h3 { font-size: clamp(3rem, 13vw, 5rem); }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-card-media img { transition: none; }
  .cat-card-link:hover .cat-card-media img { transform: none; }
}