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

  :root {
    --gold: #B8924A;
    --gold-light: #D4AF72;
    --gold-pale: #F5EDD8;
    --gold-dark: #8C6B2F;
    --deep: #1A1208;
    --ink: #2C2010;
    --warm-gray: #7A6B55;
    --surface: #FDFAF4;
    --surface-alt: #F7F1E4;
    --border: rgba(184,146,74,0.2);
    --border-strong: rgba(184,146,74,0.45);
    --white: #FFFFFF;
  }

  body {
    font-family: 'Poppins', sans-serif;
    background: var(--surface);
    color: var(--ink);
    line-height: 1.7;
    font-size: clamp(13px, 1.1vw, 16px);
  }

  
  /* ── PAGE HERO with rich textile texture ── */
  .page-hero {
    background: var(--deep);
    padding: clamp(60px,8vw,140px) clamp(20px,4vw,60px) clamp(56px,7vw,120px);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  /* Warp & weft grid — mimics loom threads */
  .page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(184,146,74,0.055) 19px, rgba(184,146,74,0.055) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(184,146,74,0.055) 19px, rgba(184,146,74,0.055) 20px);
    pointer-events: none;
  }
  /* Diagonal twill overlay */
  .page-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(45deg, transparent, transparent 22px, rgba(184,146,74,0.028) 22px, rgba(184,146,74,0.028) 23px),
      repeating-linear-gradient(-45deg, transparent, transparent 22px, rgba(184,146,74,0.028) 22px, rgba(184,146,74,0.028) 23px);
    pointer-events: none;
  }
  /* Radial glow at centre + edge vignette */
  .hero-vignette {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 65% 55% at 50% 50%, rgba(184,146,74,0.07) 0%, transparent 65%),
      radial-gradient(ellipse 100% 100% at 50% 50%, transparent 38%, rgba(8,5,1,0.6) 100%);
    pointer-events: none;
  }
  /* Top & bottom fades */
  .hero-fade {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(26,18,8,0.45) 0%, transparent 22%, transparent 78%, rgba(26,18,8,0.45) 100%);
    pointer-events: none;
  }
  /* Corner medallion rings */
  .hero-medallion {
    position: absolute;
    width: clamp(120px,14vw,240px); height: clamp(120px,14vw,240px);
    border-radius: 50%;
    border: 1px solid rgba(184,146,74,0.13);
    pointer-events: none;
  }
  .hero-medallion::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(184,146,74,0.08); }
  .hero-medallion::after  { content: ''; position: absolute; inset: 28px; border-radius: 50%; border: 1px solid rgba(184,146,74,0.05); }
  .hero-medallion.tl { top: clamp(-65px,-7vw,-120px); left: clamp(-65px,-7vw,-120px); }
  .hero-medallion.tr { top: clamp(-65px,-7vw,-120px); right: clamp(-65px,-7vw,-120px); }
  .hero-medallion.bl { bottom: clamp(-65px,-7vw,-120px); left: clamp(-65px,-7vw,-120px); }
  .hero-medallion.br { bottom: clamp(-65px,-7vw,-120px); right: clamp(-65px,-7vw,-120px); }

  .page-hero-inner { max-width: min(720px,88vw); margin: 0 auto; position: relative; z-index: 1; }
  .hero-eyebrow { font-size: clamp(9px,0.8vw,12px); letter-spacing: 0.28em; color: var(--gold); text-transform: uppercase; margin-bottom: clamp(12px,1.5vw,20px); }
  .page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(28px,5vw,64px); font-weight: 700; color: #fff; line-height: 1.12; margin-bottom: clamp(16px,2vw,28px); }
  .page-hero h1 em { color: var(--gold); font-style: italic; }
  .page-hero p { font-size: clamp(13px,1.1vw,17px); color: rgba(255,255,255,0.62); max-width: 560px; margin: 0 auto clamp(24px,3vw,40px); line-height: 1.85; }
  .hero-divider { width: 60px; height: 2px; background: var(--gold); margin: 0 auto; }

  /* SECTION COMMONS */
  section { padding: clamp(56px,7vw,120px) clamp(20px,4vw,60px); }
  .section-inner { max-width: min(1120px,92vw); margin: 0 auto; }
  .section-label { font-size: clamp(9px,0.75vw,12px); letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
  .section-title { font-family: 'Playfair Display', serif; font-size: clamp(24px,3.2vw,44px); font-weight: 700; color: var(--deep); line-height: 1.2; margin-bottom: 16px; }
  .section-title em { color: var(--gold); font-style: italic; }
  .section-lead { font-size: clamp(13px,1.05vw,16px); color: var(--warm-gray); max-width: 620px; line-height: 1.85; margin-bottom: clamp(32px,4vw,56px); }
  .gold-rule { width: 48px; height: 2px; background: var(--gold); margin-bottom: clamp(20px,2.5vw,36px); }

  /* ABOUT */
  #about { background: var(--white); }
  .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items: start; }
  .about-body { font-size: clamp(13px,1.05vw,16px); color: var(--warm-gray); line-height: 1.9; }
  .about-body p { margin-bottom: 16px; }
  .client-tag { display: inline-block; background: var(--gold-pale); color: var(--gold-dark); font-size: clamp(9px,0.75vw,12px); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; margin-bottom: 20px; }
  .clients-scroll { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(6px,0.8vw,14px); }
  .client-card { position: relative; border-radius: 6px; overflow: hidden; background: var(--surface-alt); border: 1px solid var(--border); aspect-ratio: 1/1.05; cursor: pointer; }
  .client-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
  .client-card:hover img { transform: scale(1.06); }
  .client-card:hover .client-overlay-hint { opacity: 1; }
  .client-overlay-hint { position: absolute; inset: 0; background: rgba(26,18,8,0.32); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
  .client-overlay-hint svg { width: 32px; height: 32px; fill: rgba(255,255,255,0.9); }
  .client-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(26,18,8,0.92) 60%, transparent); padding: clamp(18px,2vw,28px) 8px 8px; font-size: clamp(9px,0.72vw,11px); color: rgba(255,255,255,0.85); line-height: 1.4; text-align: center; }
  .client-caption strong { color: var(--gold-light); font-size: clamp(10px,0.78vw,12px); display: block; margin-bottom: 2px; }
  .clients-note { margin-top: 14px; padding: 14px 16px; background: var(--gold-pale); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; font-size: clamp(11px,0.85vw,13px); color: var(--gold-dark); font-style: italic; line-height: 1.6; }

  /* WORKSHOP */
  #workshop { background: var(--surface-alt); }
  .workshop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); align-items: start; }
  .workshop-features { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px,1vw,16px); margin-top: 28px; }
  .feat { display: flex; align-items: flex-start; gap: 10px; padding: clamp(10px,1.2vw,18px); background: var(--white); border: 1px solid var(--border); border-radius: 6px; font-size: clamp(11px,0.9vw,14px); color: var(--ink); line-height: 1.5; }
  .feat-icon { width: clamp(26px,2.5vw,38px); height: clamp(26px,2.5vw,38px); flex-shrink: 0; background: var(--gold-pale); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: clamp(13px,1.3vw,18px); }
  .workshop-img-stack { display: grid; grid-template-rows: auto auto; gap: clamp(8px,1vw,14px); }
  .workshop-img-main { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
  .workshop-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px,1vw,14px); }
  .workshop-img-small { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

  /* RESTORATION — text left, gallery right, no quote */
  #restoration { background: var(--white); }
  .restoration-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px,4.5vw,72px); align-items: start; margin-bottom: clamp(24px,3vw,40px); }
  .restoration-body { font-size: clamp(13px,1.05vw,16px); color: var(--warm-gray); line-height: 1.9; }
  .restoration-body p { margin-bottom: 14px; }
  /* Right-side 2-col gallery; first item spans full width */
  .restoration-gallery-side { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px,0.8vw,12px); }
  .restoration-gallery-side .gallery-item:first-child { grid-column: span 2; aspect-ratio: 16/9; }
  /* Full-width bottom row */
  .restoration-gallery-bottom { display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(6px,0.8vw,12px); }

  /* Shared gallery item */
  .gallery-item { aspect-ratio: 1; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; position: relative; }
  .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
  .gallery-item:hover img { transform: scale(1.06); }
  .gallery-item:hover .gallery-zoom { opacity: 1; }
  .gallery-zoom { position: absolute; inset: 0; background: rgba(26,18,8,0.28); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .28s; }
  .gallery-zoom svg { width: 26px; height: 26px; fill: rgba(255,255,255,0.92); }

  /* HERBAL WASH */
  #herbal-wash { background: var(--deep); }
  .herbal-header .section-label { color: var(--gold-light); }
  .herbal-header .section-title { color: #fff; }
  .herbal-header .section-lead { color: rgba(255,255,255,0.55); max-width: 560px; }
  .herbal-header .gold-rule { background: var(--gold); }
  .herbal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3.5vw,56px); align-items: start; margin-bottom: clamp(28px,3.5vw,48px); }
  .herbal-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(184,146,74,0.25); border-radius: 8px; padding: clamp(18px,2.2vw,32px) clamp(16px,2vw,28px); height: 100%; }
  .herbal-card h3 { font-family: 'Playfair Display', serif; font-size: clamp(15px,1.4vw,20px); font-weight: 600; color: var(--gold-light); margin-bottom: 14px; }
  .herbal-card p { font-size: clamp(12px,0.95vw,15px); color: rgba(255,255,255,0.6); line-height: 1.8; margin-bottom: 12px; }
  .herbs-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px,0.8vw,12px); margin-top: 16px; }
  .herb-pill { background: rgba(184,146,74,0.15); border: 1px solid rgba(184,146,74,0.3); border-radius: 4px; padding: clamp(6px,0.7vw,10px) clamp(8px,1vw,14px); font-size: clamp(11px,0.85vw,13px); color: var(--gold-light); line-height: 1.4; }
  .herb-pill strong { display: block; font-size: clamp(12px,0.9vw,14px); margin-bottom: 2px; }
  .herb-pill span { color: rgba(255,255,255,0.45); font-size: clamp(10px,0.75vw,12px); }
  /* Herbal gallery — clickable */
  .herbal-gallery { display: grid; grid-template-columns: repeat(6,1fr); gap: clamp(5px,0.7vw,10px); }
  .hw-img { aspect-ratio: 1; border-radius: 5px; overflow: hidden; border: 1px solid rgba(184,146,74,0.2); cursor: pointer; position: relative; }
  .hw-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity .3s, transform .35s; }
  .hw-img:hover img { opacity: 1; transform: scale(1.06); }
  .hw-img:hover .gallery-zoom { opacity: 1; }

  /* SHAWL */
  #shawl { background: var(--surface-alt); }
  .shawl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items: start; }
  .shawl-body { font-size: clamp(12px,1vw,15px); color: var(--warm-gray); line-height: 1.9; }
  .shawl-body p { margin-bottom: 16px; }
  .shawl-visual { position: relative; }
  .shawl-img-feature { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
  .shawl-badge { position: absolute; bottom: -18px; left: -18px; background: var(--deep); color: var(--gold); border-radius: 8px; padding: clamp(10px,1.3vw,18px) clamp(12px,1.5vw,22px); font-size: clamp(10px,0.8vw,13px); line-height: 1.5; max-width: clamp(160px,16vw,220px); border: 1px solid rgba(184,146,74,0.3); }
  .shawl-badge strong { font-size: clamp(11px,0.9vw,15px); display: block; margin-bottom: 4px; color: var(--gold-light); }
  .shawl-timeline { margin-top: 32px; border-left: 2px solid var(--border-strong); padding-left: clamp(16px,2vw,28px); }
  .shawl-step { position: relative; margin-bottom: clamp(16px,2vw,26px); }
  .shawl-step::before { content: ''; position: absolute; left: clamp(-22px,-2.5vw,-30px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface-alt); }
  .shawl-step h4 { font-size: clamp(11px,0.9vw,14px); font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: 0.03em; }
  .shawl-step p { font-size: clamp(11px,0.85vw,13px); color: var(--warm-gray); line-height: 1.7; }
  .shawl-client-photo { margin-top: 52px; display: flex; align-items: center; gap: 16px; padding: clamp(12px,1.3vw,18px) clamp(14px,1.6vw,22px); background: var(--white); border: 1px solid var(--border); border-radius: 8px; }
  .shawl-client-photo img { width: clamp(60px,6vw,90px); height: clamp(60px,6vw,90px); object-fit: cover; border-radius: 5px; flex-shrink: 0; border: 1px solid var(--border); }
  .shawl-client-photo .caption { font-size: clamp(11px,0.85vw,13px); color: var(--warm-gray); line-height: 1.6; }
  .shawl-client-photo .caption strong { display: block; color: var(--gold-dark); font-size: clamp(12px,0.9vw,14px); margin-bottom: 2px; }

  /* TESTIMONIALS */
  #testimonials { background: var(--white); }
  .testimonials-meta { display: flex; align-items: baseline; gap: 24px; margin-bottom: clamp(24px,3vw,44px); flex-wrap: wrap; }
  .testi-count { font-family: 'Playfair Display', serif; font-size: clamp(36px,4vw,56px); font-weight: 700; color: var(--gold); line-height: 1; }
  .testi-count-label { font-size: clamp(12px,1vw,15px); color: var(--warm-gray); line-height: 1.4; }
  .testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.5vw,24px); }
  .testi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: clamp(16px,1.8vw,28px) clamp(14px,1.6vw,24px); display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, box-shadow .2s; }
  .testi-card:hover { border-color: var(--gold); box-shadow: 0 4px 20px rgba(184,146,74,0.1); }
  .testi-card.featured { background: var(--gold-pale); border-color: var(--gold); }
  .testi-quote { font-family: 'Cormorant Garamond', serif; font-size: clamp(14px,1.1vw,17px); color: var(--ink); font-style: italic; line-height: 1.7; flex: 1; }
  .testi-stars { color: var(--gold); font-size: clamp(11px,0.9vw,14px); letter-spacing: 2px; }
  .testi-author { border-top: 1px solid var(--border); padding-top: 14px; }
  .testi-name { font-size: clamp(11px,0.9vw,14px); font-weight: 600; color: var(--deep); margin-bottom: 2px; }
  .testi-role { font-size: clamp(10px,0.8vw,12px); color: var(--warm-gray); line-height: 1.4; }

  /* CTA BANNER */
  .cta-banner { background: var(--deep); padding: clamp(48px,6vw,96px) clamp(20px,4vw,60px); text-align: center; position: relative; overflow: hidden; }
  .cta-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect x='38' y='38' width='4' height='4' fill='%23B8924A' opacity='0.08'/%3E%3C/svg%3E") repeat; }
  .cta-inner { max-width: min(640px,90vw); margin: 0 auto; position: relative; }
  .cta-banner h2 { font-family: 'Playfair Display', serif; font-size: clamp(22px,3vw,40px); font-weight: 700; color: #fff; margin-bottom: 14px; }
  .cta-banner h2 em { color: var(--gold); font-style: italic; }
  .cta-banner p { font-size: clamp(13px,1vw,16px); color: rgba(255,255,255,0.55); margin-bottom: clamp(20px,2.5vw,36px); }
  .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .btn-primary { background: var(--gold); color: var(--deep); padding: clamp(10px,1.2vw,15px) clamp(24px,3vw,40px); border-radius: 4px; font-size: clamp(11px,0.9vw,14px); font-weight: 600; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; transition: background .2s, transform .15s; }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
  .btn-outline { border: 1px solid rgba(184,146,74,0.5); color: var(--gold-light); padding: clamp(10px,1.2vw,15px) clamp(24px,3vw,40px); border-radius: 4px; font-size: clamp(11px,0.9vw,14px); font-weight: 500; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; transition: border-color .2s, color .2s; }
  .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

  /* ── LIGHTBOX ── */
  .lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(10,7,2,0.95);
    align-items: center; justify-content: center;
  }
  .lightbox.active { display: flex; }
  .lightbox-stage {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(48px,6vw,80px) clamp(56px,8vw,120px) clamp(72px,8vw,100px);
  }
  .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,0.7); display: block; }
  .lightbox-close {
    position: absolute; top: clamp(12px,2vw,24px); right: clamp(12px,2vw,24px);
    background: rgba(184,146,74,0.14); border: 1px solid rgba(184,146,74,0.4);
    color: var(--gold-light); font-size: clamp(16px,2vw,24px); cursor: pointer;
    border-radius: 4px; width: clamp(34px,3.5vw,46px); height: clamp(34px,3.5vw,46px);
    display: flex; align-items: center; justify-content: center; transition: background .2s; line-height: 1;
  }
  .lightbox-close:hover { background: rgba(184,146,74,0.3); }
  .lightbox-prev, .lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(184,146,74,0.12); border: 1px solid rgba(184,146,74,0.35);
    color: var(--gold-light); font-size: clamp(18px,2.2vw,30px); cursor: pointer;
    border-radius: 4px; width: clamp(38px,4vw,54px); height: clamp(38px,4vw,54px);
    display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 2;
  }
  .lightbox-prev:hover, .lightbox-next:hover { background: rgba(184,146,74,0.28); }
  .lightbox-prev { left: clamp(8px,2vw,20px); }
  .lightbox-next { right: clamp(8px,2vw,20px); }
  .lightbox-footer { position: absolute; bottom: clamp(16px,2.5vw,32px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .lightbox-dots { display: flex; gap: 6px; }
  .lightbox-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(184,146,74,0.3); border: none; cursor: pointer; transition: background .2s; padding: 0; }
  .lightbox-dot.active { background: var(--gold); }
  .lightbox-caption { text-align: center; color: rgba(255,255,255,0.55); font-size: clamp(11px,0.9vw,14px); white-space: nowrap; }
  .lightbox-counter { color: var(--gold); font-weight: 600; margin-right: 6px; }

  /* ── RESPONSIVE ── */
  @media (min-width: 2000px) {
    .section-inner { max-width: min(1600px,90vw); }
    .navbar-inner, .topbar-inner, .footer-inner { max-width: min(1600px,88vw); }
    .page-hero-inner { max-width: min(1000px,78vw); }
  }
  @media (max-width: 1100px) {
    .restoration-gallery-bottom { grid-template-columns: repeat(4,1fr); }
  }
  @media (max-width: 900px) {
    .testimonials-grid { grid-template-columns: repeat(2,1fr); }
    .restoration-gallery-bottom { grid-template-columns: repeat(3,1fr); }
    .herbal-gallery { grid-template-columns: repeat(3,1fr); }
  }
  @media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; gap: 36px; }
    .workshop-grid { grid-template-columns: 1fr; }
    .restoration-intro { grid-template-columns: 1fr; }
    .restoration-gallery-side { display: none; }
    .herbal-grid { grid-template-columns: 1fr; }
    .shawl-grid { grid-template-columns: 1fr; }
    nav ul { display: none; }
    .clients-scroll { grid-template-columns: repeat(2,1fr); }
    .restoration-gallery-bottom { grid-template-columns: repeat(3,1fr); }
  }
  @media (max-width: 560px) {
    .testimonials-grid { grid-template-columns: 1fr; }
    .workshop-features { grid-template-columns: 1fr; }
    .herbal-gallery { grid-template-columns: repeat(3,1fr); }
    .restoration-gallery-bottom { grid-template-columns: repeat(2,1fr); }
    .herbs-list { grid-template-columns: 1fr; }
    .shawl-badge { position: static; margin-top: 16px; max-width: 100%; }
  }
  @media (max-width: 400px) {
    .clients-scroll { grid-template-columns: 1fr 1fr; gap: 6px; }
    .herbal-gallery { grid-template-columns: repeat(2,1fr); }
    .restoration-gallery-bottom { grid-template-columns: repeat(2,1fr); }
  }