/* ============================================================
   KANKARIA GEMS — B2C Website
   style.css  (header + footer + index — badha sections)
   ============================================================ */

:root{
  --green-900:#122318;
  --green-800:#1B3325;
  --green-700:#24422F;
  --cream:#F7F3EB;
  --cream-2:#EFE9DD;
  --ivory:#FDFBF6;
  --gold:#B9924C;
  --gold-soft:#D6BC8A;
  --ink:#26251F;
  --ink-soft:#5C594F;
  --line:#DDD5C4;
  --line-dark:rgba(214,188,138,.25);

  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Jost', 'Segoe UI', sans-serif;
  --hd-font: 'Inter', 'Segoe UI', Arial, sans-serif;

  --container:1200px;
  --radius:2px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height: 300px;}
img.logo {
  height: 40px;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

.container{margin:0 auto;padding:0 40px}

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
/* .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)} */
.section-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.15;
  color:var(--ink);
}
.on-dark .eyebrow{color:var(--gold-soft)}
.on-dark .section-title{color:var(--ivory)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 30px;font-size:15px;
  /* letter-spacing:.22em; */
  text-transform:uppercase;font-weight:500;border:1px solid transparent;
  transition:all .3s ease;border-radius:var(--radius);
}
.btn-solid{background:var(--green-800);color:var(--ivory);border-color:var(--green-800);text-transform: none;font-weight: bold;}
.btn-solid:hover{background:var(--gold);border-color:var(--gold)}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;text-transform: none;font-weight: bold;}
.btn-outline:hover{background:var(--ink);color:var(--ivory)}
.btn-gold{background:var(--gold);color:var(--green-900);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost-light{border-color:var(--gold-soft);color:var(--ivory)}
.btn-ghost-light:hover{background:var(--gold);border-color:var(--gold);color:var(--green-900)}

.text-link{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:inline-flex;align-items:center;gap:8px;
}
.text-link::after{content:"→";transition:transform .3s}
.text-link:hover::after{transform:translateX(5px)}

/* ============================================================
   HEADER  (announce-bar + header + nav — badhu sticky)
   ============================================================ */

/* sticky parent block karta atkave che — aa guard */
html, body{ overflow-x:clip; }   /* overflow:hidden na vaparo, sticky tuti jay */

/* announce-bar ni height (badalvi hoy to fakt aa value badlo) */
:root{ --announce-h:34px; }

.announce-bar{
  background:var(--green-900);color:var(--gold-soft);
  text-align:center;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;padding:9px 16px;
  height:var(--announce-h);
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  position:sticky;
  top:0;
  z-index:1001;              /* header thi upar */
}

.site-header{
  background:#F5F0EB;
  border-bottom:1px solid #DDCC91;
  position:-webkit-sticky;
  position:sticky;
  top:var(--announce-h);     /* <-- announce-bar ni niche chonte */
  z-index:1000;
  transition:box-shadow .28s ease;
}
.site-header.is-stuck{ box-shadow:0 6px 22px rgba(20,40,26,.10); }

.header-inner{
  max-width:var(--container);margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;height:84px;gap:24px;
}
.header-left{display:flex;align-items:center;gap:18px}
.brand{text-align:center}
.brand-name{
  font-family:var(--font-display);
  font-size:26px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--green-900);font-weight:600;line-height:1;
}
.brand-sub{
  font-size:9px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--gold);margin-top:5px;
}
.header-right{display:flex;justify-content:flex-end;align-items:center;gap:20px}
.icon-btn{
  background:none;border:0;color:var(--green-900);
  display:inline-flex;padding:4px;transition:color .3s;cursor:pointer;
}
.icon-btn:hover{color:var(--gold)}
.icon-btn svg{width:20px;height:20px;stroke-width:1.4}

.main-nav{border-top:1px solid #DDCC91;background:#F5F0EB}
.main-nav ul{
  display:flex;justify-content:center;gap:44px;
  max-width:var(--container);margin:0 auto;padding:0 40px;
  list-style:none;
}
.main-nav a{
  display:block;padding:14px 0;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid transparent;transition:all .3s;
}
.main-nav a:hover,.main-nav a.active{color:var(--gold);border-bottom-color:var(--gold)}

/* Hamburger — mobile */
.nav-toggle{display:none;background:none;border:0;color:var(--green-900);padding:4px;cursor:pointer}
.nav-toggle svg{width:24px;height:24px}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:991px){
  :root{ --announce-h:32px; }

  .announce-bar{ font-size:9.5px; letter-spacing:.14em; padding:8px 12px; }

  .header-inner{ height:68px; padding:0 18px; gap:12px; }
  .nav-toggle{ display:inline-flex; }

  .main-nav{
    max-height:0; overflow:hidden;
    transition:max-height .35s ease;
  }
  .main-nav.open{ max-height:70vh; overflow-y:auto; }
  .main-nav ul{
    flex-direction:column; gap:0; padding:6px 18px 14px;
  }
  .main-nav li{ border-bottom:1px solid #EDE4D6; }
  .main-nav li:last-child{ border-bottom:none; }
  .main-nav a{ padding:13px 0; letter-spacing:.16em; }
  .header-right{ gap:14px; }
  .icon-btn svg{ width:19px; height:19px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:#fff;padding:72px 0 80px}
.hero-top{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:60px;align-items:end;margin-bottom:56px;
}
.hero h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(38px,4.6vw,60px);line-height:1.1;color:var(--green-900);
}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
.hero-copy p{color:var(--ink-soft);font-size:15.5px;max-width:44ch}
.hero-note{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}

.hero-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  align-items:start;      /* cards upar thi align — niche stagger dekhay */
}
.hero-card{background:transparent}
.hero-card figure{
  overflow:hidden;
  background:var(--cream-2);
}
/* Odd cards (1, 3) — NANI image */
.hero-card:nth-child(odd) figure{
  aspect-ratio:1/1;
}
/* Even cards (2, 4) — MOTI image */
.hero-card:nth-child(even) figure{
  aspect-ratio:3/4.4;
}
.hero-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hero-card:hover img{transform:scale(1.05)}
.hero-card h3{
  font-family:var(--font-display);font-size:30px;font-weight:700;
  color:var(--green-900);margin:18px 0 8px;
}
.hero-card p{font-size:16px;color:var(--ink-soft);margin-bottom:12px;font-family: var(--hd-font);}
.hero-copy{height: 100%;}

/* ============================================================
   QUALITY (full-bleed image + overlay text)
   ============================================================ */
.quality{
  position:relative;
  overflow:hidden;
  min-height:640px;
  display:flex;
}
.quality-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.quality-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 80%;
}
/* text vanchay te mate left side dark gradient */
.quality-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(24,16,12,.72) 0%, rgba(24,16,12,.38) 42%, rgba(24,16,12,.05) 70%),
    linear-gradient(0deg, rgba(24,16,12,.55) 0%, rgba(24,16,12,0) 28%);
}

.quality-inner{
  position:relative;
  z-index:1;
  width:100%;
  /* max-width:var(--container); */
  margin:0 auto;
  padding:72px 100px 46px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:60px;
}

.quality-text .eyebrow{color:var(--gold-soft)}
.quality-quote{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(36px,4.6vw,70px);
  line-height:1.15;
  margin-top:22px;
  color:var(--ivory);
  max-width:24ch;
}
.quality-quote em{font-style:italic;color:var(--gold-soft)}

.quality-link{
  display:inline-block;
  margin-top:26px;
  font-size:14px;
  color:var(--ivory);
  text-decoration:underline;
  text-underline-offset:5px;
  transition:color .3s;
}
.quality-link:hover{color:var(--gold-soft)}

/* ---------- Bottom trust badges (image ni upar) ---------- */
.quality-badges{
  display:flex;
  flex-wrap:wrap;
  gap:14px 56px;
  align-items:center;
}
.q-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.q-badge svg{
  width:19px;
  height:19px;
  stroke:var(--gold-soft);
  fill:none;
  stroke-width:1.5;
  flex:none;
}
.q-badge span{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ivory);
  font-weight:500;
  white-space:nowrap;
}

/* ============================================================
   MOST LOVED PRODUCTS
   ============================================================ */
.loved{padding:88px 0;background-color: #fff;}
.section-head{
  display:flex;justify-content:space-between;align-items:end;
  gap:24px;margin-bottom:44px;flex-wrap:wrap;
}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product-card figure{
  aspect-ratio:1/1;overflow:hidden;background:var(--ivory);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.product-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.product-card:hover img{transform:scale(1.06)}
.product-card h3{
  font-family:var(--font-display);font-size:20px;font-weight:600;
  color:var(--green-900);margin:16px 0 4px;
}
.product-meta{display:flex;justify-content:space-between;align-items:center}
.product-meta span {
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #334026;
  font-weight: 300;
}
.product-meta b{font-size:16px;color:#334026;font-weight:300;letter-spacing:.04em}

/* ============================================================
   CATEGORIES (dark + dashed grid background)
   ============================================================ */
.categories{background:var(--green-800);padding:80px 0 70px;text-align:center}
.categories .section-title{color:var(--ivory)}
.categories .eyebrow{color:var(--gold);justify-content:center}
.categories .eyebrow::before,
.categories .eyebrow::after{display:none}   /* screenshot ma khali text che, lines nathi */

/* --- illustrations band : dashed grid pattern --- */
.cat-band{
  position:relative;
  margin-top:52px;
  padding:34px 0 26px;
  overflow:hidden;
}
.cat-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    repeating-linear-gradient(to right,
      rgba(214,188,138,.16) 0 1px, transparent 1px 6px, transparent 6px 60px),
    repeating-linear-gradient(to bottom,
      rgba(214,188,138,.16) 0 1px, transparent 1px 6px, transparent 6px 60px);
  background-size:60px 60px;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cat-band > .container{position:relative;z-index:1}

/* --- grid : dareke item ni potani height (screenshot mujab) --- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  align-items:end;
}
.cat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--gold-soft);
  transition:transform .35s ease;
}
.cat-item:hover{transform:translateY(-6px)}
.cat-item:hover .cat-art svg{stroke:var(--gold-soft)}

.cat-art{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
}
.cat-art svg{
  width:auto;
  stroke:var(--gold);
  fill:none;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .35s ease;
  max-width:100%;
}
/* alag alag size — screenshot jem nani/moti */
.cat-sm .cat-art svg{height:120px}
.cat-md .cat-art svg{height:250px}
.cat-lg .cat-art svg{height:290px}

.cat-item span{
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ivory);
  font-weight:500;
  transition:color .3s;
}
.cat-item:hover span{color:var(--gold-soft)}

/* ============================================================
   HERITAGE — timeline (dashed line + dots)
   ============================================================ */
.heritage{background:#fff;padding:80px 0 90px}

.heritage-head{
  text-align:left;      /* screenshot ma left aligned che */
  max-width:none;
  margin:0 0 54px;
}
.heritage-head .eyebrow{
  justify-content:flex-start;
  font-size:13px;
  letter-spacing:.28em;
  font-weight: 600;
}
.heritage-head .eyebrow::before,
.heritage-head .eyebrow::after{display:none}   /* aju-baju ni lines kadhi */
.heritage-head .section-title{
  margin-top:14px;
  font-size:clamp(30px,3.6vw,50px);
  font-weight:500;
  letter-spacing:-.01em;
}

/* --- grid : borders kadhi, dashed timeline line --- */
.heritage-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:0;
  padding-top:26px;
}
/* dashed line — pehla dot thi chhella dot sudhi */
.heritage-grid::before{
  content:"";
  position:absolute;
  top:5px;
  left:5px;
  right: calc(12.5% - -215px);
  height:1px;
  background-image:linear-gradient(to right, var(--gold-soft) 0 4px, transparent 4px 9px);
  background-size:9px 1px;
  background-repeat:repeat-x;
}

.h-item{
  position:relative;
  padding:0 30px 0 0;
  border:0;
}
.h-dot{
  position:absolute;
  top:-26px;
  left:0;
  width:11px;
  height:11px;
  border:1px solid var(--gold);
  border-radius:50%;
  background:#fff;
  z-index:1;
}

.h-item h4{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 6px;
  letter-spacing:.01em;
}
.h-sub{
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:400;
  margin-bottom:12px;
}
.h-item p{
  font-size:12.5px;
  line-height:1.75;
  color:#9a978f;
  margin:0;
  max-width:30ch;
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .heritage-grid{grid-template-columns:repeat(2,1fr);gap:44px 0}
  .heritage-grid::before{right:calc(25% - 5px)}
  .h-item{padding-right:24px}
  .h-item:nth-child(n+3) .h-dot{top:-18px}
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .heritage{padding:56px 0 60px}
  .heritage-head{margin-bottom:38px}
  .heritage-grid{
    grid-template-columns:1fr;
    gap:0;
    padding-top:0;
    padding-left:26px;
  }
  /* mobile ma line vertical thai jay */
  .heritage-grid::before{
    top:6px;
    bottom:20px;
    left:5px;
    right:auto;
    width:1px;
    height:auto;
    background-image:linear-gradient(to bottom, var(--gold-soft) 0 4px, transparent 4px 9px);
    background-size:1px 9px;
    background-repeat:repeat-y;
  }
  .h-item{padding:0 0 34px 0}
  .h-item:last-child{padding-bottom:0}
  .h-dot{top:6px;left:-26px}
  .h-item p{max-width:none}
}

/* ============================================================
   BESPOKE — cream left panel + full-bleed image right
   ============================================================ */
.bespoke{background:var(--cream-2);overflow:hidden}

.bespoke-grid{
  display:grid;
  grid-template-columns:38% 62%;   /* screenshot mujab image moti */
  align-items:center;
  min-height:560px;
}

/* ---------- Left text panel ---------- */
.bespoke-text{
  padding:70px 56px 70px 72px;
}
.bespoke-text .eyebrow{
  font-size:13px;
  letter-spacing:.28em;
  color:var(--gold);
  font-weight: 600;
}
.bespoke-text .eyebrow::before,
.bespoke-text .eyebrow::after{display:none}   /* aju-baju ni lines kadhi */

.bespoke-text .section-title{
  margin-top:14px;
  font-size:clamp(28px,2.6vw,50px);
  font-weight:500;
  line-height:1.28;
  color:var(--ink);
  letter-spacing:-.005em;
}

/* ---------- Numbered steps ---------- */
.bespoke-steps{
  list-style:none;
  margin:34px 0 38px;
  padding:0;
  display:grid;
  gap:26px;
}
.bespoke-steps li{
  display:grid;
  grid-template-columns:44px 1fr;
  align-items:start;
  gap:0;
}
.step-no{
  font-family:var(--font-display);
  font-size:25px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:.06em;
  line-height:1.5;
  padding-top:1px;
}
.step-body h4{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 5px;
  letter-spacing:.01em;
}
.step-body p{
  font-size:15px;
  line-height:1.6;
  color:#71727A;
  margin:0;
  padding-left:2px;
}

/* ---------- Buttons ---------- */
.bespoke-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.bespoke-actions .btn{
  padding:11px 20px;
  font-size:11.5px;
  letter-spacing:.02em;
  text-transform:none;
  font-weight:600;
  border-radius:0;
}
.bespoke-actions .btn-solid{
  background:var(--green-800);
  border-color:var(--green-800);
  color:var(--ivory);
}
.bespoke-actions .btn-solid:hover{
  background:var(--gold);
  border-color:var(--gold);
}
.bespoke-actions .btn-outline{
  border-color:var(--ink);
  color:var(--ink);
  background:transparent;
}
.bespoke-actions .btn-outline:hover{
  background:var(--ink);
  color:var(--ivory);
}

/* ---------- Right image ---------- */
.bespoke-media{
  height:100%;
  min-height:560px;
}
.bespoke-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .bespoke-grid{grid-template-columns:44% 56%;min-height:480px}
  .bespoke-text{padding:56px 32px 56px 40px}
  .bespoke-media{min-height:480px}
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .bespoke-grid{
    grid-template-columns:1fr;
    min-height:0;
  }
  .bespoke-media{
    order:-1;             /* image upar */
    min-height:360px;
  }
  .bespoke-text{padding:44px 20px 48px}
  .bespoke-text .section-title{font-size:26px}
  .bespoke-steps{margin:28px 0 30px;gap:22px}
  .bespoke-steps li{grid-template-columns:38px 1fr}
  .bespoke-actions .btn{
    flex:1;justify-content:center;min-width:140px;
    padding: 10px 18px;
  }
}

/* ============================================================
   ASSURANCE — gold ring icons + serif labels
   ============================================================ */
.assurance{
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:84px 0;
}

.assurance-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}

.a-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* --- gold outline circle --- */
.a-ring{
  width:50px;
  height:50px;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  transition:all .35s ease;
}
.a-ring svg{
  width:30px;
  height:30px;
  stroke:var(--gold);
  fill:none;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .35s ease;
}
.a-item:hover .a-ring{
  border-color:var(--gold);
  background:var(--cream);
  transform:translateY(-3px);
}

/* --- label --- */
.a-item b{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.02em;
  line-height:1.3;
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .assurance{padding:64px 0}
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .assurance{padding:48px 0}
  .assurance-grid{
    grid-template-columns:repeat(2,1fr);
    gap:36px 16px;
  }
  .a-ring{width:40px;height:40px;margin-bottom:16px}
  .a-ring svg{width:15px;height:15px}
  .a-item b{font-size:14px}
}

/* ============================================================
   FOOTER — dark charcoal + diamond pattern strip
   ============================================================ */
.site-footer{
  background:#17150e;
  color:rgba(253,251,246,.72);
  font-family:var(--font-body);
}

/* --- pattern strip (Login.png) --- */
.footer-pattern{
  height:185px;
  background-image:url('https://kankariagems.com/assets/img/footer/1.png');
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 185px;
  border:0;
  padding:0;
}

/* --- main --- */
.footer-main{
  max-width:var(--container);
  margin:0 auto;
  padding:64px 40px 44px;
  display:grid;
  grid-template-columns:1.9fr 1fr 1fr 1.15fr;
  gap:40px;
  align-items:start;
}

.f-logo img{
  width:96px;
  height:96px;
  object-fit:contain;
}
.f-brand p{
  font-size:15px;
  line-height:1.7;
  margin-top:15px;
  max-width:36ch;
  color:rgba(253,251,246,.72);
}

/* --- link columns --- */
.f-col h5{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin:0 0 22px;
}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col li{margin-bottom:14px}
.f-col a{
  font-size:15px;
  color:rgba(253,251,246,.72);
  transition:color .3s;
}
.f-col a:hover{color:var(--gold-soft)}

/* --- contact --- */
.f-contact li{
  font-size:12.5px;
  line-height:1.7;
  margin-bottom:16px;
  color:rgba(253,251,246,.72);
  display:block;
}
.f-contact svg{display:none}

/* --- bottom bar --- */
.footer-bottom{
  max-width:var(--container);
  margin:0 auto;
  border-top:1px solid rgba(253,251,246,.14);
  padding:22px 40px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:14px;
  color:rgba(253,251,246,.6);
}

.f-social{display:flex;gap:18px;align-items:center}
.f-social a{
  width:auto;height:auto;
  border:0;
  background:none;
  color:rgba(253,251,246,.7);
  display:inline-flex;
  transition:color .3s;
}
.f-social a:hover{color:var(--gold-soft);background:none}
.f-social svg{width:17px;height:17px}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:40px 32px;
    padding:56px 28px 40px;
  }
  .footer-bottom{padding:20px 28px 24px}
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .footer-pattern{
    height:110px;
    background-size:auto 110px;
  }
  .footer-main{
    grid-template-columns:1fr;
    gap:34px;
    padding:44px 20px 32px;
  }
  .f-brand p{margin-top:20px;max-width:none}
  .f-col h5{margin-bottom:16px}
  .f-col li{margin-bottom:11px}
  .footer-bottom{
    flex-direction:column;
    text-align:center;
    padding:20px;
    gap:18px;
  }
}

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width:1024px){
  .container{padding:0 28px}
  .header-inner{padding:0 28px}
  .hero-top{grid-template-columns:1fr;gap:28px}
  .hero-cards{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .heritage-grid{grid-template-columns:repeat(2,1fr)}
  .h-item:nth-child(2){border-right:0}
  .h-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .footer-main{grid-template-columns:1fr 1fr;gap:40px;padding:56px 28px 40px}
}

/* ============================================================
   RESPONSIVE — Mobile (Figma mobile frame mujab)
   ============================================================ */
@media (max-width:720px){
  .container{padding:0 20px}

  /* Header — hamburger */
  .header-inner{
    grid-template-columns:auto 1fr auto;height:66px;padding:0 20px;
  }
  .nav-toggle{display:inline-flex}
  .brand-name{font-size:19px;letter-spacing:.2em}
  .brand-sub{font-size:8px;letter-spacing:.36em}
  .header-right{gap:12px}
  .header-right .icon-btn:nth-child(1){display:none}
  .main-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--ivory);border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(18,35,24,.08);
  }
  .brand{
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .brand img{
    height:44px;
    width:auto;
    max-width:100%;
    object-fit:contain;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:0;padding:8px 20px 16px}
  .main-nav a{border-bottom:1px solid var(--line);padding:14px 0}

  /* Hero */
  .hero{padding:44px 0 56px}
  .hero-actions .btn{padding:13px 22px;font-size:11px}
  .hero-card:nth-child(even) figure{aspect-ratio:1/1}
  .hero-cards{grid-template-columns:1fr;gap:36px}

  /* Quality */
  .quality{min-height:540px}
  .quality-inner{padding:52px 20px 32px;gap:44px}
   .quality-quote{font-size:40px}
   .quality-text{
    margin-top: 38%;
  }
  .quality-bg::after{
    background:
      linear-gradient(90deg, rgba(24,16,12,.72) 0%, rgba(24,16,12,.45) 60%, rgba(24,16,12,.2) 100%),
      linear-gradient(0deg, rgba(24,16,12,.62) 0%, rgba(24,16,12,0) 34%);
  }
  .quality-badges{gap:16px 26px}
  .q-badge span{font-size:9.5px;letter-spacing:.16em}
  .q-badge svg{width:16px;height:16px}

  /* Products */
  .loved{padding:60px 0}
  .section-head{margin-bottom:32px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .product-card h3{font-size:16px}

  /* Categories */
  .categories{padding:56px 0 48px}
  .cat-band{margin-top:34px;padding:22px 0 18px}
  .cat-band::before{background-size:38px 38px}
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:26px 10px}
  .cat-item{gap:16px}
  .cat-sm .cat-art svg{height:62px}
  .cat-md .cat-art svg{height:120px}
  .cat-lg .cat-art svg{height:130px}
  .cat-item span{font-size:12px;letter-spacing:.14em}

  /* Heritage */
  .heritage{padding:60px 0}
  .heritage-grid{grid-template-columns:1fr}
  .h-item{border-right:0;border-bottom:1px solid var(--line);padding:28px 4px}
  .h-item:last-child{border-bottom:0}

  /* Bespoke */
  .bespoke-grid{grid-template-columns:1fr}
  .bespoke-text{padding:56px 20px 48px}
  .bespoke-media{min-height:360px;order:-1}

  /* Assurance */
  .assurance-grid{grid-template-columns:repeat(2,1fr);gap:32px 16px}

  /* Footer */
  .footer-main{grid-template-columns:1fr;gap:36px;padding:48px 20px 36px}
  .footer-pattern{letter-spacing:1em;font-size:14px}
  .footer-bottom{flex-direction:column;text-align:center;padding:18px 20px}
}