/* =========================================================================
   Zehan Leather — design system
   Editorial luxury for a handbag OEM/ODM factory (coach.com inspired)
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* palette — warm luxury leather */
  --ink:      #1b1915;
  --ink-2:    #4a443b;
  --muted:    #8a8276;
  --cream:    #f5f1ea;
  --paper:    #ffffff;
  --sand:     #ece4d7;
  --sand-2:   #e3d8c6;
  --tan:      #9a6a3c;   /* cognac accent */
  --tan-deep: #744c25;
  --gold:     #b6975f;
  --line:      rgba(27,25,21,.14);
  --line-soft: rgba(27,25,21,.08);
  --ph-bg:    #efe9df;

  /* type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* rhythm */
  --wrap: 1240px;
  --wrap-narrow: 880px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-y: clamp(64px, 9vw, 130px);
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

/* ---------- Typography ---------- */
.display,
h1.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.01em;
}
.eyebrow{
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--tan);
}
.lead{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-2); line-height:1.7; }

h2.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  line-height:1.05;
  letter-spacing:-.01em;
}
h3{ font-weight:600; letter-spacing:-.01em; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:var(--sec-y); }
.section--cream{ background:var(--cream); }
.section--paper{ background:var(--paper); }
.section--sand{ background:var(--sand); }
.section--ink{ background:var(--ink); color:#efe9df; }
.section--ink .eyebrow{ color:var(--gold); }

.section-head{ max-width:720px; margin-bottom:clamp(32px,4vw,56px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ display:block; margin-bottom:18px; }
.section-head p{ margin-top:20px; color:var(--ink-2); font-size:1.05rem; }
.section--ink .section-head p{ color:#c9c0b2; }

.grid{ display:grid; gap:clamp(20px,2.4vw,34px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:16px 30px;
  font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  background:var(--ink); color:#f3ede2;
  cursor:pointer; transition:all .35s var(--ease);
}
.btn:hover{ background:var(--tan-deep); border-color:var(--tan-deep); color:#fff; transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#f3ede2; }
.btn--light{ background:#f3ede2; color:var(--ink); border-color:#f3ede2; }
.btn--light:hover{ background:var(--tan); border-color:var(--tan); color:#fff; }
.btn--sm{ padding:11px 20px; font-size:.72rem; }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.textlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tan-deep);
  border-bottom:1px solid currentColor; padding-bottom:3px;
  transition:gap .3s var(--ease);
}
.textlink:hover{ gap:.9em; }

/* ---------- Placeholder image (bordered whitespace) ---------- */
.ph{
  position:relative;
  width:100%;
  background:var(--ph-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
}
.ph::after{  /* subtle corner ticks for a "spec/placeholder" feel */
  content:""; position:absolute; inset:10px;
  border:1px dashed rgba(27,25,21,.16);
  border-radius:1px; pointer-events:none;
}
.ph__label{
  position:relative; z-index:1; text-align:center;
  padding:16px;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.ph__label small{ display:block; margin-top:6px; font-weight:500; letter-spacing:.1em; opacity:.7; font-size:.64rem; }
.ph__icon{ width:30px; height:30px; margin:0 auto 10px; opacity:.5; }
.ph--1x1{ aspect-ratio:1/1; }
.ph--4x3{ aspect-ratio:4/3; }
.ph--3x4{ aspect-ratio:3/4; }
.ph--16x9{ aspect-ratio:16/9; }
.ph--3x2{ aspect-ratio:3/2; }
.ph--21x9{ aspect-ratio:21/9; }
.ph--ink{ background:#26231d; border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.5); }
.ph--ink::after{ border-color:rgba(255,255,255,.14); }

/* =========================================================================
   Header
   ========================================================================= */
.topbar{
  background:var(--ink); color:#cdc4b4;
  font-size:.74rem; letter-spacing:.06em;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:20px; }
.topbar a{ color:#e4dccc; transition:color .25s; }
.topbar a:hover{ color:var(--gold); }
.topbar__left{ display:flex; gap:26px; align-items:center; }
.topbar__right{ display:flex; gap:22px; align-items:center; }
.topbar .sep{ opacity:.4; }

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,241,234,.86);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s, box-shadow .3s;
}
.site-header.is-stuck{ background:rgba(245,241,234,.97); box-shadow:0 1px 24px rgba(27,25,21,.07); }
.site-header .wrap{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; min-height:76px; gap:clamp(16px,2vw,32px); }

.brand{ display:flex; flex-direction:column; line-height:1; flex:none; white-space:nowrap; }
.brand__name{ font-family:var(--serif); font-size:1.7rem; font-weight:600; letter-spacing:.02em; }
.brand__tag{ font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; color:var(--tan); margin-top:5px; }

.nav{ display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(16px,1.9vw,30px); }
.nav a{
  font-size:.8rem; font-weight:500; letter-spacing:.04em; white-space:nowrap;
  color:var(--ink-2); position:relative; padding-block:6px;
  transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--tan); transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:14px; flex:none; }
.nav-toggle{ display:none; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{ position:relative; background:var(--ink); color:#f3ede2; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media .ph{ width:100%; height:100%; border:0; border-radius:0; background:#201d18; }
.hero__media .ph::after{ inset:28px; border-color:rgba(255,255,255,.1); }
.hero__media .ph__label{ color:rgba(255,255,255,.4); }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,16,13,.92) 0%,rgba(18,16,13,.72) 42%,rgba(18,16,13,.32) 100%); }
.hero__inner{ position:relative; z-index:2; padding-block:clamp(90px,15vw,180px); max-width:760px; }
.hero .eyebrow{ color:var(--gold); }
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.7rem,6.4vw,5.4rem); line-height:1.02; letter-spacing:-.015em;
  margin:22px 0 0;
}
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero__sub{ margin-top:26px; font-size:clamp(1.05rem,1.8vw,1.3rem); color:#d7cdbc; max-width:560px; line-height:1.6; }
.hero__actions{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }
.hero__meta{
  position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.12);
  display:flex; gap:clamp(24px,5vw,70px); padding-block:26px; flex-wrap:wrap;
}
.hero__meta div{ display:flex; flex-direction:column; }
.hero__meta b{ font-family:var(--serif); font-size:1.7rem; font-weight:600; color:#fff; }
.hero__meta span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#b4a994; margin-top:4px; }

/* =========================================================================
   Stats (factory strength)
   ========================================================================= */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(28px,3vw,48px) clamp(18px,2vw,34px); border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; }
.stat b{ display:block; font-family:var(--serif); font-size:clamp(2.6rem,4.2vw,3.6rem); font-weight:600; line-height:1; color:var(--tan-deep); }
.stat span{ display:block; margin-top:12px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.stat small{ display:block; margin-top:6px; color:var(--muted); font-size:.82rem; letter-spacing:0; text-transform:none; }

/* =========================================================================
   Split feature (custom capability)
   ========================================================================= */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.split--flip .split__media{ order:2; }
.feature-list{ margin-top:30px; display:grid; gap:2px; }
.feature-list li{ display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.feature-list li:last-child{ border-bottom:1px solid var(--line); }
.feature-list .n{ font-family:var(--serif); font-size:1.1rem; color:var(--tan); min-width:34px; }
.feature-list h4{ font-size:1rem; font-weight:600; }
.feature-list p{ margin-top:4px; color:var(--ink-2); font-size:.94rem; }

/* =========================================================================
   Process strip (production steps / cooperation flow)
   ========================================================================= */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--line); }
.step{ padding:30px 22px 34px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .3s; }
.step:hover{ background:var(--paper); }
.step .num{ font-size:.72rem; letter-spacing:.18em; color:var(--tan); font-weight:600; }
.step h4{ margin-top:14px; font-family:var(--serif); font-size:1.25rem; font-weight:600; }
.step p{ margin-top:8px; font-size:.86rem; color:var(--ink-2); }

/* =========================================================================
   Cards (quality checks, faq, cases, products)
   ========================================================================= */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(27,25,21,.09); }
.card__body{ padding:24px 24px 28px; display:flex; flex-direction:column; flex:1; }
.card__kicker{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tan); font-weight:600; }
.card__body h3{ margin-top:10px; font-size:1.12rem; font-weight:600; }
.card__body h3.serif{ font-family:var(--serif); font-size:1.4rem; }
.card__body p{ margin-top:10px; color:var(--ink-2); font-size:.92rem; }
.card__foot{ margin-top:auto; padding-top:18px; }

/* numbered check grid */
.checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0; border:1px solid var(--line); background:var(--paper); }
.check{ padding:28px 26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.check .cn{ font-family:var(--serif); font-size:2rem; color:var(--sand-2); font-weight:600; line-height:1; }
.check h4{ margin-top:14px; font-size:1rem; font-weight:600; }
.check p{ margin-top:8px; font-size:.88rem; color:var(--ink-2); }

/* =========================================================================
   Brands
   ========================================================================= */
.brands{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); }
.brand-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.brand-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(27,25,21,.1); }
.brand-card__body{ padding:28px 28px 32px; }
.brand-card .bname{ font-family:var(--serif); font-size:1.7rem; font-weight:600; letter-spacing:.02em; }
.brand-card .btype{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tan); margin-top:6px; }
.brand-card p{ margin-top:16px; color:var(--ink-2); font-size:.92rem; }

/* =========================================================================
   Products
   ========================================================================= */
.product-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.chip{ font-size:.76rem; letter-spacing:.08em; padding:9px 18px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); background:transparent; cursor:pointer; transition:all .25s; }
.chip:hover,.chip.is-active{ background:var(--ink); color:#f3ede2; border-color:var(--ink); }
.product-card .ph{ background:var(--sand); }
.product-card .card__body{ padding:20px 22px 24px; }
.product-card .pcat{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tan); font-weight:600; }
.product-card h3{ margin-top:8px; font-size:1.05rem; font-weight:600; }
.product-card .pmeta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.tag{ font-size:.68rem; letter-spacing:.04em; padding:5px 10px; background:var(--sand); border-radius:2px; color:var(--ink-2); }

/* =========================================================================
   Cases / testimonial
   ========================================================================= */
.quote{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.35; font-weight:500; }
.quote-cite{ margin-top:22px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:26px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.45rem); font-weight:600; color:var(--ink); }
.faq-q .pm{ flex:none; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; position:relative; transition:all .3s; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:var(--ink); left:50%; top:50%; transform:translate(-50%,-50%); transition:transform .3s; }
.faq-q .pm::before{ width:12px; height:1.5px; }
.faq-q .pm::after{ width:1.5px; height:12px; }
.faq-item.open .pm{ background:var(--ink); }
.faq-item.open .pm::before,.faq-item.open .pm::after{ background:#f3ede2; }
.faq-item.open .pm::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding-bottom:26px; color:var(--ink-2); max-width:760px; }

/* =========================================================================
   Inquiry form (4-step)
   ========================================================================= */
.inquiry{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.inquiry__grid{ display:grid; grid-template-columns:.9fr 1.1fr; }
.inquiry__aside{ background:var(--ink); color:#e8dfcf; padding:clamp(36px,4vw,56px); }
.inquiry__aside .eyebrow{ color:var(--gold); }
.inquiry__aside h2{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:500; margin-top:16px; line-height:1.1; }
.inquiry__aside p{ margin-top:18px; color:#c3b8a6; }
.inquiry__steps-nav{ margin-top:40px; display:grid; gap:4px; }
.inquiry__steps-nav div{ display:flex; gap:14px; align-items:center; padding:14px 0; border-top:1px solid rgba(255,255,255,.12); font-size:.86rem; color:#b4a994; }
.inquiry__steps-nav div.active{ color:#fff; }
.inquiry__steps-nav .sc{ width:26px; height:26px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:grid; place-items:center; font-size:.72rem; flex:none; }
.inquiry__steps-nav div.active .sc{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.inquiry__form{ padding:clamp(32px,4vw,52px); }
.progress{ height:3px; background:var(--sand); border-radius:2px; overflow:hidden; margin-bottom:34px; }
.progress__bar{ height:100%; background:var(--tan); width:25%; transition:width .4s var(--ease); }
.fstep{ display:none; }
.fstep.active{ display:block; animation:fade .4s var(--ease); }
.fstep h3{ font-family:var(--serif); font-size:1.5rem; font-weight:600; }
.fstep .hint{ color:var(--muted); font-size:.9rem; margin-top:6px; margin-bottom:24px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-2); margin-bottom:9px; }
.field .req{ color:var(--tan); }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; font-family:inherit; font-size:.95rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s, background .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--tan); background:#fff; }
.field textarea{ min-height:110px; resize:vertical; }
.opt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; }
.opt span{ display:block; text-align:center; padding:16px 10px; border:1px solid var(--line); border-radius:var(--radius); font-size:.86rem; cursor:pointer; background:var(--cream); transition:all .25s; }
.opt input:checked + span{ border-color:var(--ink); background:var(--ink); color:#f3ede2; }
.dropzone{ border:1px dashed var(--line); border-radius:var(--radius); padding:34px; text-align:center; color:var(--muted); background:var(--cream); font-size:.9rem; }
.dropzone b{ color:var(--tan-deep); }
.fstep__actions{ display:flex; justify-content:space-between; gap:14px; margin-top:30px; }
.form-note{ margin-top:18px; font-size:.8rem; color:var(--muted); text-align:center; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{ background:var(--ink); color:#bcb2a1; padding-block:clamp(56px,7vw,90px) 0; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand .brand__name{ color:#f3ede2; }
.footer-brand p{ margin-top:18px; max-width:300px; font-size:.92rem; line-height:1.7; }
.footer-col h5{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; font-weight:600; }
.footer-col a{ display:block; padding:7px 0; font-size:.9rem; color:#cabfae; transition:color .25s; }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ padding:7px 0; font-size:.9rem; }
.footer-contact b{ color:#e4dccc; font-weight:600; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-block:26px; font-size:.78rem; color:#8c8273; }
.footer-bottom .socials{ display:flex; gap:10px; }
.footer-bottom .socials a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:grid; place-items:center; color:#cabfae; transition:all .25s; }
.footer-bottom .socials a:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

/* =========================================================================
   WhatsApp float + Get a Quote mobile bar
   ========================================================================= */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.22); transition:transform .3s; }
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:30px; height:30px; }

/* =========================================================================
   Page hero (inner pages)
   ========================================================================= */
.page-hero{ background:var(--ink); color:#f3ede2; padding-block:clamp(70px,10vw,130px) clamp(50px,6vw,80px); position:relative; overflow:hidden; }
.page-hero .eyebrow{ color:var(--gold); }
.page-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,5.4vw,4.4rem); line-height:1.03; margin-top:18px; max-width:14ch; }
.page-hero p{ margin-top:22px; max-width:620px; color:#d1c7b6; font-size:1.08rem; }
.breadcrumb{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#9c9283; }
.breadcrumb a:hover{ color:var(--gold); }

/* =========================================================================
   Reveal animation
   ========================================================================= */
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* -- single-element reveals (direction variants) -- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease), clip-path .9s var(--ease); will-change:opacity,transform; }
.reveal[data-anim="left"]{ transform:translateX(-46px); }
.reveal[data-anim="right"]{ transform:translateX(46px); }
.reveal[data-anim="scale"]{ transform:scale(.93); }
.reveal[data-anim="fade"]{ transform:none; }
.reveal.in{ opacity:1; transform:none; }

/* -- image clip-wipe reveal -- */
.reveal.clip{ opacity:1; transform:none; clip-path:inset(0 100% 0 0); }
.reveal.clip > *{ transform:scale(1.12); transition:transform 1.2s var(--ease); }
.reveal.clip.in{ clip-path:inset(0 0 0 0); }
.reveal.clip.in > *{ transform:scale(1); }

/* -- staggered groups: children animate one after another -- */
[data-reveal] > *{
  opacity:0; transform:translateY(38px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
  will-change:opacity,transform;
}
[data-reveal="left"]  > *{ transform:translateX(-40px); }
[data-reveal="right"] > *{ transform:translateX(40px); }
[data-reveal="scale"] > *{ transform:scale(.94); }
[data-reveal="up-sm"] > *{ transform:translateY(22px); }
[data-reveal].in > *{ opacity:1; transform:none; }

/* -- hero entrance (plays on load) -- */
.hero .eyebrow,
.hero h1,
.hero__sub,
.hero__actions,
.hero__meta > div{ opacity:0; animation:heroIn 1s var(--ease) forwards; }
.hero h1{ animation-delay:.12s; }
.hero__sub{ animation-delay:.26s; }
.hero__actions{ animation-delay:.4s; }
.hero__meta > div{ animation-delay:calc(.5s + var(--i,0) * .08s); }
@keyframes heroIn{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;} }
.hero__media .ph{ animation:kenburns 18s ease-out both; }
@keyframes kenburns{ from{transform:scale(1.08);} to{transform:scale(1);} }

/* number count-up uses tabular figures to avoid width jitter */
.stat b, .hero__meta b{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .reveal, [data-reveal] > *{ opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; }
  .hero .eyebrow,.hero h1,.hero__sub,.hero__actions,.hero__meta > div{ opacity:1; animation:none; }
  .hero__media .ph{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1024px){
  .inquiry__grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--flip .split__media{ order:0; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1040px){
  .nav, .header-cta .btn{ display:none; }
  .nav-toggle{ display:inline-grid; }
}
@media (max-width:860px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .cols-3,.cols-4,.brands{ grid-template-columns:1fr 1fr; }
  .hero__meta{ gap:24px 40px; }
}
@media (max-width:560px){
  .cols-2,.cols-3,.cols-4,.brands,.stats{ grid-template-columns:1fr; }
  .stat{ border-left:0; border-top:1px solid var(--line); }
  .stat:first-child{ border-top:0; }
  .footer-top{ grid-template-columns:1fr; }
  .topbar__left .hide-sm{ display:none; }
  .topbar__right .sep, .topbar__right a:last-child{ display:none; }
  .topbar .wrap{ justify-content:center; }
  .btn{ padding:14px 22px; }
}

/* mobile nav drawer */
.mnav{ position:fixed; inset:0; z-index:70; background:var(--ink); color:#f3ede2; transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; padding:28px var(--gutter); }
.mnav.open{ transform:none; }
.mnav__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.mnav a{ font-family:var(--serif); font-size:1.8rem; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mnav .btn{ margin-top:24px; }
.nav-toggle{ width:44px; height:44px; place-items:center; background:none; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; }
.nav-toggle span{ display:block; width:20px; height:1.5px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.mclose{ background:none; border:0; color:#f3ede2; font-size:2rem; cursor:pointer; line-height:1; }

/* ---------- Accessibility ---------- */
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link:focus{ position:fixed; left:16px; top:16px; z-index:100; width:auto; height:auto; clip:auto; background:var(--ink); color:#fff; padding:12px 18px; border-radius:2px; }