/* ============================================================
   ANJALI TEXTILE MILLS — MASTER STYLESHEET
   Hybrid Theme: T4 Palette + T3 Fonts + T1 Spacing
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Gloock&family=IBM+Plex+Serif:ital,wght@0,300;0,400;1,300;1,400&family=Barlow:wght@300;400;500&family=Barlow+Condensed:wght@300;400;500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Palette — T4 Ivory & Rust */
  --bg:          #FAF7F2;
  --off:         #F0EBE0;
  --border:      #DDD5C8;
  --muted:       #9A8A78;
  --text:        #2E2418;
  --accent:      #8C4A2A;
  --accent-lt:   #B06A44;
  --dark:        #1E1810;
  --dark-border: #2E2418;
  --dark-muted:  #6A5A48;
  --dark-dim:    #3A2E20;
  --dark-text:   #EEE8DC;
  --white:       #FDFAF6;

  /* Fonts — T3 */
  --serif:  'Gloock', Georgia, serif;
  --logo:   'IBM Plex Serif', Georgia, serif;
  --sans:   'Barlow', system-ui, sans-serif;
  --cond:   'Barlow Condensed', system-ui, sans-serif;

  /* Spacing */
  --sp1: .5rem;  --sp2: 1rem;   --sp3: 1.5rem;
  --sp4: 2rem;   --sp6: 3rem;   --sp8: 4rem;
  --sp12: 6rem;  --sp16: 8rem;

  /* Easing */
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}
a { text-decoration:none; color:inherit }
button { font-family:inherit; cursor:pointer; border:none; background:none }
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── GRAIN OVERLAY ──────────────────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px;
}

/* ── IMAGE PLACEHOLDERS ─────────────────────────────────────── */
/* Used until real images are uploaded */
.img-wrap {
  width:100%; overflow:hidden;
  position:relative; background:var(--off);
}
.img-wrap img {
  position:absolute; inset:0;
  transition:transform .65s var(--ease);
}
.img-wrap::before {
  content:'';
  display:block;
}
/* aspect ratios via padding trick */
.ar-3-4::before  { padding-top: 133.33% }
.ar-4-3::before  { padding-top: 75% }
.ar-16-9::before { padding-top: 56.25% }
.ar-2-3::before  { padding-top: 150% }
.ar-1-1::before  { padding-top: 100% }
.ar-hero::before { padding-top: 100% }
/* full-height (used in split layouts) */
.ar-full { position:absolute; inset:0 }
.ar-full::before { display:none }
.ar-full img { position:absolute; inset:0 }

/* Warm gradient placeholder shown when no image */
.img-wrap:not(:has(img[src])) ,
.img-wrap:has(img[src=""]) {
  background: linear-gradient(145deg,#D8C4A4,#B89870);
}
/* placeholder gradient variants */
.ph-a { background:linear-gradient(145deg,#D4B898,#A88460) !important }
.ph-b { background:linear-gradient(160deg,#CCBA94,#A08462) !important }
.ph-c { background:linear-gradient(130deg,#D8C4A4,#B09272) !important }
.ph-d { background:linear-gradient(150deg,#C8B090,#A07858) !important }
.ph-e { background:linear-gradient(140deg,#D0BC98,#AA8870) !important }

/* ── TYPOGRAPHY UTILITIES ───────────────────────────────────── */
.eyebrow {
  font-family: var(--cond);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items:center; gap:.6rem;
}
.eyebrow::before {
  content:'';
  width:1.6rem; height:1px;
  background: currentColor;
  opacity:.4;
}
.sec-num {
  font-family: var(--cond);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.display-xl {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem,5vw,5.5rem);
  line-height: .96;
  letter-spacing: -.01em;
}
.display-lg {
  font-family: var(--serif);
  font-size: clamp(2rem,3.5vw,3.5rem);
  font-weight: 400;
  line-height: 1;
}
.display-md {
  font-family: var(--serif);
  font-size: clamp(1.6rem,2.5vw,2.4rem);
  font-weight: 400;
  line-height: 1.1;
}
.accent-word { color: var(--accent) }
.body-lg { font-size:1.05rem; font-weight:300; line-height:1.8; color:var(--muted) }
.body-md { font-size:.95rem;  font-weight:300; line-height:1.85; color:var(--muted) }
.body-sm { font-size:.85rem;  font-weight:300; line-height:1.8; color:var(--muted) }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--cond); font-weight:500;
  font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase;
  padding:.9rem 2.2rem;
  cursor:pointer;
  transition:all .2s var(--ease);
}
.btn-dark  { background:var(--text); color:var(--white) }
.btn-dark:hover { background:var(--accent) }
.btn-rust  { background:var(--accent); color:var(--white) }
.btn-rust:hover { opacity:.85 }
.btn-line  { background:transparent; color:var(--text); border:1px solid var(--border) }
.btn-line:hover { border-color:var(--text) }
.btn-line-light { background:transparent; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.15) }
.btn-line-light:hover { border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.85) }

.link-arrow {
  font-family:var(--cond); font-weight:500;
  font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text);
  display:inline-flex; align-items:center; gap:.4rem;
  border-bottom:1px solid var(--text);
  padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.link-arrow::after { content:'↗'; font-size:.8em }
.link-arrow:hover { color:var(--accent); border-color:var(--accent) }
.link-arrow-accent {
  color:var(--accent); border-color:rgba(140,74,42,.3);
}
.link-arrow-accent:hover { color:var(--accent-lt); border-color:var(--accent-lt) }

/* ── DIVIDERS ───────────────────────────────────────────────── */
.rule { width:100%; height:1px; background:var(--border) }
.rule-dark { background:rgba(255,255,255,.08) }

/* ── SECTION WRAPPER ────────────────────────────────────────── */
.section { padding:var(--sp16) var(--sp6) }
.section-off { background:var(--off) }
.section-dark { background:var(--dark) }
.container { max-width:1200px; margin:0 auto }

/* ── SECTION HEADER ─────────────────────────────────────────── */
.sec-head {
  display:flex; align-items:flex-end;
  justify-content:space-between;
  padding-bottom:var(--sp6);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--sp8);
  gap:var(--sp4);
}
.sec-head-right {
  display:flex; flex-direction:column;
  align-items:flex-end; gap:var(--sp2);
}
.sec-head-note {
  font-size:1rem; font-weight:300;
  color:var(--muted); max-width:280px;
  text-align:right; line-height:1.7;
}

/* ── NAV ────────────────────────────────────────────────────── */
.logo-mark {
  flex-shrink: 0; display: block;
  height: 40px; width: auto;
  max-height: 40px;
  object-fit: contain;
  image-rendering: auto;
}
.site-footer .logo-mark {
  height: 30px; width: auto;
  max-height: 30px;
}
.logo-mark-fallback {
  width: 36px; height: 36px;
  background: var(--accent); color: var(--white);
  font-family: var(--serif); font-style: italic; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px; flex-shrink: 0;
}
.logo-mark-fallback-light {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
}

/* ── MOBILE HERO — full bleed bg image with gradient overlay ── */
@media(max-width:1100px) {
  .home-hero {
    position: relative;
    min-height: 100svh;
    grid-template-columns: 1fr;
  }
  .home-hero-image {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .home-hero-image .img-wrap {
    height: 100%;
    min-height: 100svh;
  }
  .home-hero-image .img-wrap img { object-position: center top }
  .home-hero-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
      to right,
      rgba(20,15,10,.85) 0%,
      rgba(20,15,10,.65) 55%,
      rgba(20,15,10,.2) 100%
    );
    z-index: 1;
  }
  .home-hero-content {
    position: relative; z-index: 2;
    border-right: none;
    padding: var(--sp12) var(--sp6) var(--sp8);
    justify-content: center;
    gap: var(--sp6);
  }
  .home-hero-kicker  { color: rgba(255,255,255,.55) }
  .home-hero-h1      { color: rgba(255,255,255,.95) }
  .home-hero-h1 .accent-word { color: #C49A52 }
  .home-hero-desc    { color: rgba(255,255,255,.55) }
  .home-hero-middle  {
    border-top-color:    rgba(255,255,255,.12);
    border-bottom-color: rgba(255,255,255,.12);
  }
  .home-hero-content .btn-line {
    color: rgba(255,255,255,.7);
    border-color: rgba(255,255,255,.25);
  }
  .home-hero-content .btn-line:hover {
    border-color: rgba(255,255,255,.6);
    color: rgba(255,255,255,.95);
  }
}
@media(max-width:768px) {
  .home-hero-content { padding: var(--sp16) var(--sp3) var(--sp8) }
  .home-hero-image::after {
    background: linear-gradient(
      to bottom,
      rgba(20,15,10,.3) 0%,
      rgba(20,15,10,.78) 50%,
      rgba(20,15,10,.9) 100%
    );
  }
}
.site-nav {
  position:sticky; top:0; z-index:900;
  background:rgba(253,250,246,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--sp6);
  height:68px;
}
.nav-logo { display:flex; flex-direction:row; align-items:center; gap:.7rem }
.nav-brand {
  font-family:var(--logo); font-style:italic;
  font-size:1.1rem; font-weight:400;
  color:var(--text); letter-spacing:.01em;
}
.nav-tagline {
  font-family:var(--cond); font-size:.52rem;
  font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}
.nav-links {
  display:flex; gap:2.4rem; list-style:none;
}
.nav-links a {
  font-family:var(--cond); font-size:.72rem;
  font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-4px; left:0; width:0; height:1px;
  background:var(--accent);
  transition:width .25s var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color:var(--text) }
.nav-links a:hover::after,
.nav-links a.active::after { width:100% }
.nav-right { display:flex; justify-content:flex-end }
.nav-menu-btn {
  display:none;
  flex-direction:column; gap:5px;
  padding:.5rem; cursor:pointer;
}
.nav-menu-btn span {
  display:block; width:22px; height:1.5px;
  background:var(--text);
  transition:all .25s var(--ease);
}

/* Mobile nav drawer */
.nav-drawer {
  position:fixed; top:68px; left:0; right:0;
  background:rgba(253,250,246,.98);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:var(--sp4) var(--sp4);
  display:none; flex-direction:column; gap:var(--sp3);
  z-index:899;
}
.nav-drawer.open { display:flex }
.nav-drawer a {
  font-family:var(--cond); font-size:.9rem;
  font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  padding:.5rem 0; border-bottom:1px solid var(--border);
}
.nav-drawer a:hover { color:var(--text) }
.nav-drawer .btn { align-self:flex-start; margin-top:var(--sp1) }

/* ── FLOAT WA ────────────────────────────────────────────────── */
.float-wa {
  position:fixed; bottom:2rem; right:2rem; z-index:800;
  width:3rem; height:3rem; border-radius:50%;
  background:var(--accent); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(140,74,42,.35);
  transition:transform .2s, box-shadow .2s;
}
.float-wa:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(140,74,42,.5) }
.float-wa svg { width:1.4rem; height:1.4rem }

/* ── PAGE HERO ───────────────────────────────────────────────── */
.page-hero {
  background:var(--off);
  border-bottom:1px solid var(--border);
  padding:var(--sp16) var(--sp6) var(--sp12);
}
.page-hero .eyebrow { margin-bottom:var(--sp3) }

/* ── HOMEPAGE HERO ───────────────────────────────────────────── */
.home-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:calc(100svh - 68px);
  background:var(--off);
}
.home-hero-content {
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:var(--sp12) var(--sp8) var(--sp8) var(--sp6);
  border-right:1px solid var(--border);
}
.home-hero-top { }
.home-hero-kicker {
  font-family:var(--cond); font-size:.72rem;
  font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:var(--sp8);
}
.home-hero-h1 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(4rem,6.5vw,7.5rem);
  line-height:.9; letter-spacing:-.02em;
  color:var(--text);
}
.home-hero-middle {
  padding:var(--sp6) 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.home-hero-desc {
  font-size:1.05rem; font-weight:300;
  color:var(--muted); line-height:1.8;
  max-width:440px; margin-bottom:var(--sp4);
}
.home-hero-actions { display:flex; gap:var(--sp2); flex-wrap:wrap }
.home-hero-bottom { }
.home-hero-image {
  position:relative; overflow:hidden;
}
.home-hero-image .img-wrap { height:100%; min-height:60vh }

/* ── TICKER ──────────────────────────────────────────────────── */
.ticker {
  background:var(--off);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:.85rem 0; overflow:hidden;
}
.ticker-track {
  display:flex; white-space:nowrap;
  animation:ticker 32s linear infinite;
}
.ticker-track:hover { animation-play-state:paused }
.ticker-item {
  display:inline-flex; align-items:center; gap:1.8rem;
  padding:0 1.8rem;
  font-family:var(--cond); font-size:.7rem;
  font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.ticker-dot {
  width:3px; height:3px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── PRODUCT CARDS ───────────────────────────────────────────── */
.prod-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border);
}
.prod-card {
  background:var(--bg);
  padding:var(--sp4);
  display:flex; flex-direction:column;
  transition:background .2s;
  cursor:pointer;
}
.prod-card:hover { background:var(--off) }
.prod-card:hover .img-wrap img { transform:scale(1.04) }
.prod-card .img-wrap { margin-bottom:var(--sp3) }
.prod-num {
  font-family:var(--cond); font-size:.65rem;
  font-weight:400; letter-spacing:.18em;
  color:var(--muted); margin-bottom:var(--sp1);
}
.prod-cat {
  font-family:var(--cond); font-size:.68rem;
  font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--sp1);
}
.prod-name {
  font-family:var(--serif); font-size:1.4rem;
  font-weight:400; color:var(--text);
  margin-bottom:var(--sp2); line-height:1.15;
}
.prod-desc {
  font-size:.95rem; font-weight:300;
  color:var(--muted); line-height:1.8;
  flex:1; margin-bottom:var(--sp3);
}
.prod-chips { display:flex; flex-wrap:wrap; gap:.3rem }
.chip {
  font-family:var(--cond); font-size:.6rem;
  font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; padding:.2rem .65rem;
  border:1px solid var(--border); color:var(--muted);
}

/* ── ABOUT SPLIT ─────────────────────────────────────────────── */
.about-split {
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border);
}
.about-split-text {
  padding:var(--sp16) var(--sp8) var(--sp16) var(--sp6);
  display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--border);
}
.about-split-image { overflow:hidden; position:relative }
.about-split-image .img-wrap { height:100%; min-height:60vh }
.pull-quote {
  font-family:var(--serif); font-size:1.15rem;
  font-weight:400; color:var(--text);
  line-height:1.6; border-left:2px solid var(--accent);
  padding-left:var(--sp3); margin-bottom:var(--sp4);
}
.stats-inline {
  display:flex; gap:var(--sp6);
  padding-top:var(--sp6); margin-top:var(--sp4);
  border-top:1px solid var(--border);
}
.stat-item { display:flex; flex-direction:column; gap:.3rem }
.stat-n {
  font-family:var(--serif); font-size:2.2rem;
  font-weight:400; color:var(--text); line-height:1;
}
.stat-l {
  font-family:var(--cond); font-size:.6rem;
  font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* ── GALLERY GRID ────────────────────────────────────────────── */
.gallery-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:var(--sp2);
}
.g-cell { overflow:hidden; position:relative; cursor:pointer }
.g-cell.tall { grid-row:span 2 }
.g-cell .img-wrap { height:100%; min-height:220px }
.g-cell:hover .img-wrap img { transform:scale(1.04) }
.g-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(30,24,16,.7) 0%,rgba(30,24,16,.15) 50%,transparent 100%);
  opacity:0; transition:opacity .35s;
  display:flex; flex-direction:column;
  justify-content:flex-end; padding:1.4rem;
}
.g-cell:hover .g-overlay { opacity:1 }
.g-label-cat {
  font-family:var(--cond); font-size:.55rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:.25rem;
}
.g-label-name {
  font-family:var(--serif); font-size:1rem;
  font-weight:400; color:rgba(255,255,255,.9);
}

/* ── CLIENTS ─────────────────────────────────────────────────── */
.clients-inner {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:var(--sp8); align-items:start;
}
.clients-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border:1px solid var(--border);
}
.client-cell {
  padding:1.2rem 1.4rem;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  min-height:68px;
  transition:background .2s;
}
.client-logo {
  max-width:88px; max-height:34px;
  width:auto; height:auto;
  /* Sepia monochrome — matches palette */
  filter:sepia(1) saturate(0.35) brightness(0.65) contrast(1.1);
  opacity:.6;
  transition:opacity .22s, filter .22s;
  display:block;
}
.client-cell:hover .client-logo {
  opacity:.88;
  filter:sepia(0.7) saturate(0.5) brightness(0.72) contrast(1.1);
}
.client-logo-fallback,
.client-cell span {
  font-family:var(--cond); font-size:.68rem;
  font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.client-cell:hover { background:var(--white) }
.client-cell:nth-child(4n)        { border-right:none }
.client-cell:nth-last-child(-n+4) { border-bottom:none }

/* ── DARK CTA ────────────────────────────────────────────────── */
.dark-cta {
  background:var(--dark);
  padding:var(--sp16) var(--sp6);
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp8); align-items:center;
}
.dark-cta-eyebrow {
  font-family:var(--cond); font-size:.7rem;
  font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--sp4);
}
.dark-cta-h {
  font-family:var(--serif); font-size:clamp(2.4rem,4vw,4.5rem);
  font-weight:400; color:var(--dark-text);
  line-height:1.0; letter-spacing:-.01em;
}
.dark-cta-right {
  display:flex; flex-direction:column; gap:var(--sp4);
  padding-left:var(--sp8);
  border-left:1px solid rgba(255,255,255,.08);
}
.dark-cta-body {
  font-size:1rem; font-weight:300;
  color:rgba(255,255,255,.42); line-height:1.8;
}
.dark-cta-actions { display:flex; gap:var(--sp2); flex-wrap:wrap }
.dark-cta-contacts {
  display:flex; gap:var(--sp6); flex-wrap:wrap;
  padding-top:var(--sp4);
  border-top:1px solid rgba(255,255,255,.07);
}
.cta-contact-item { display:flex; flex-direction:column; gap:.2rem }
.cta-contact-label {
  font-family:var(--cond); font-size:.55rem;
  font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dark-dim);
}
.cta-contact-val {
  font-size:.9rem; font-weight:300; color:var(--dark-muted);
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer {
  background:var(--dark);
  border-top:1px solid rgba(255,255,255,.07);
  padding:1.8rem var(--sp6);
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-brand { font-family:var(--logo); font-style:italic; font-size:1rem; color:var(--dark-muted) }
.footer-brand span { color:var(--accent) }
.footer-links { display:flex; gap:2rem; list-style:none }
.footer-links a {
  font-family:var(--cond); font-size:.6rem;
  font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dark-dim);
  transition:color .2s;
}
.footer-links a:hover { color:var(--dark-muted) }
.footer-copy {
  font-family:var(--cond); font-size:.58rem;
  font-weight:300; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dark-dim);
}

/* ── PROCESS STEPS ───────────────────────────────────────────── */
.process-steps {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border:1px solid var(--border);
}
.process-step {
  padding:var(--sp6) var(--sp4);
  border-right:1px solid var(--border);
}
.process-step:last-child { border-right:none }
.step-num {
  font-family:var(--serif); font-size:2.8rem;
  font-weight:400; color:var(--border);
  line-height:1; margin-bottom:var(--sp3);
}
.step-title {
  font-family:var(--serif); font-size:1.2rem;
  font-weight:400; color:var(--text);
  margin-bottom:var(--sp2);
}
.step-desc { font-size:.9rem; font-weight:300; color:var(--muted); line-height:1.75 }

/* ── TEAM CARDS ──────────────────────────────────────────────── */
.team-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp8);
}
.team-card { display:flex; flex-direction:column }
.team-card .img-wrap { margin-bottom:var(--sp4) }
.team-role {
  font-family:var(--cond); font-size:.65rem;
  font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:.4rem;
}
.team-name {
  font-family:var(--serif); font-size:1.5rem;
  font-weight:400; color:var(--text);
  margin-bottom:var(--sp2);
}
.team-bio { font-size:.9rem; font-weight:300; color:var(--muted); line-height:1.8 }

/* ── CONTACT PAGE ────────────────────────────────────────────── */
.contact-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp8); align-items:start;
}
.contact-detail-group { margin-bottom:var(--sp6) }
.contact-detail-label {
  font-family:var(--cond); font-size:.62rem;
  font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:.5rem;
}
.contact-detail-value {
  font-size:1rem; font-weight:300; color:var(--text);
  line-height:1.7;
}
.contact-form { display:flex; flex-direction:column; gap:var(--sp3) }
.form-group { display:flex; flex-direction:column; gap:.4rem }
.form-label {
  font-family:var(--cond); font-size:.65rem;
  font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.form-input, .form-select, .form-textarea {
  font-family:var(--sans); font-size:.95rem;
  font-weight:300; color:var(--text);
  background:var(--white);
  border:1px solid var(--border);
  padding:.85rem 1.1rem;
  outline:none;
  transition:border-color .2s;
  width:100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--accent);
}
.form-textarea { resize:vertical; min-height:100px }
.form-select { appearance:none; cursor:pointer }
.map-wrap { margin-top:var(--sp6); border:1px solid var(--border); overflow:hidden }

/* ── FILTER BAR (Products page) ──────────────────────────────── */
.filter-bar {
  position:sticky; top:68px; z-index:800;
  background:rgba(253,250,246,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 var(--sp6);
  display:flex; gap:0; overflow-x:auto;
  scrollbar-width:none;
}
.filter-bar::-webkit-scrollbar { display:none }
.filter-btn {
  font-family:var(--cond); font-size:.7rem;
  font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  padding:1rem 1.4rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .2s, border-color .2s;
  cursor:pointer;
}
.filter-btn:hover { color:var(--text) }
.filter-btn.active { color:var(--accent); border-bottom-color:var(--accent) }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.up { opacity:1; transform:none }
.d1 { transition-delay:.08s } .d2 { transition-delay:.16s }
.d3 { transition-delay:.24s } .d4 { transition-delay:.32s }

/* ── SOURCING CTA ────────────────────────────────────────────── */
.sourcing-cta {
  background:var(--off);
  border:1px solid var(--border);
  padding:var(--sp8) var(--sp6);
  display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp4);
  flex-wrap:wrap;
}
.sourcing-cta-text {}
.sourcing-cta-h {
  font-family:var(--serif); font-size:1.6rem;
  font-weight:400; color:var(--text);
  margin-bottom:.4rem;
}
.sourcing-cta-sub { font-size:.95rem; font-weight:300; color:var(--muted) }

/* ── PAGE-SPECIFIC HERO IMAGES ───────────────────────────────── */
.about-hero-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; margin-top:var(--sp8);
}
.about-hero-grid .img-wrap { min-height:340px }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1100px){
  .section { padding:var(--sp12) var(--sp4) }
  .site-nav { padding:0 var(--sp4) }
  /* home-hero handled by mobile hero section above */
  .about-split { grid-template-columns:1fr }
  .about-split-text { border-right:none; padding:var(--sp8) var(--sp4); border-bottom:1px solid var(--border) }
  .about-split-image .img-wrap { min-height:50vw }
  .dark-cta { grid-template-columns:1fr; gap:var(--sp6) }
  .dark-cta-right { padding-left:0; border-left:none; border-top:1px solid rgba(255,255,255,.08); padding-top:var(--sp6) }
  .clients-inner { grid-template-columns:1fr }
  .clients-grid { grid-template-columns:repeat(3,1fr) }
  .process-steps { grid-template-columns:repeat(2,1fr) }
  .process-step:nth-child(2) { border-right:none }
  .process-step:nth-child(3) { border-top:1px solid var(--border) }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto }
  .g-cell.tall { grid-row:span 1 }
  .team-grid { grid-template-columns:1fr }
  .contact-grid { grid-template-columns:1fr }
  .about-hero-grid { grid-template-columns:1fr }
  .dark-cta,.site-footer { padding-left:var(--sp4); padding-right:var(--sp4) }
  .filter-bar { padding:0 var(--sp4) }
}
@media(max-width:768px){
  .site-nav { grid-template-columns:1fr auto; padding:0 var(--sp3) }
  .nav-links,.nav-right { display:none }
  .nav-menu-btn { display:flex }
  /* home-hero-content padding handled by mobile hero section above */
  .home-hero-h1 { font-size:clamp(3.2rem,12vw,5rem) }
  .section { padding:var(--sp8) var(--sp3) }
  .prod-grid { grid-template-columns:1fr }
  .gallery-grid { grid-template-columns:1fr }
  .clients-grid { grid-template-columns:1fr 1fr }
  .process-steps { grid-template-columns:1fr }
  .process-step { border-right:none; border-bottom:1px solid var(--border) }
  .process-step:last-child { border-bottom:none }
  .sec-head { flex-direction:column; align-items:flex-start }
  .sec-head-right { align-items:flex-start }
  .sec-head-note { text-align:left; max-width:100% }
  .stats-inline { gap:var(--sp4) }
  .dark-cta,.site-footer { padding:var(--sp8) var(--sp3) }
  .filter-bar { top:58px }
  .sourcing-cta { flex-direction:column }
}