/* ==========================================================================
   SHANDAR ENTERPRISE — Design Crafted, Brands Created
   Premium shirting fabric manufacturer, Mumbai (est. 2011)
   ========================================================================== */

/* ------------------------------ 1. TOKENS ------------------------------- */
:root{
  /* Core palette — charcoal / ivory / brass */
  --charcoal:#1C1B19;
  --charcoal-deep:#121110;
  --charcoal-soft:#2A2825;
  --ivory:#F6F2EA;
  --ivory-warm:#FAF7F1;
  --sand:#EBE3D6;
  --sand-deep:#DED3C1;
  --stone:#A2988A;
  --muted:#6A6357;
  --line:rgba(28,27,25,.12);
  --line-light:rgba(246,242,234,.18);

  --brass:#B08D4F;
  --brass-bright:#C9A667;
  --brass-pale:#E4D3B0;
  --brass-deep:#8A6A2E;   /* brass that clears 4.5:1 as text on ivory/sand */

  /* Logo thread colours — used as small accents */
  --t-red:#C0272D;
  --t-orange:#E2801F;
  --t-yellow:#E9C31C;
  --t-green:#7CAF33;
  --t-blue:#0E80CE;
  --t-indigo:#2E2A78;

  --wa:#128C7E;          /* WhatsApp green, dark enough for a white glyph */
  --wa-deep:#075E54;     /* WhatsApp teal, for white button text */

  /* Type */
  --display:"Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap:1240px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --section-y:clamp(4.5rem, 9vw, 8.5rem);
  --radius:2px;
  --radius-lg:4px;

  --shadow-sm:0 2px 10px rgba(28,27,25,.06);
  --shadow-md:0 14px 40px -18px rgba(28,27,25,.28);
  --shadow-lg:0 40px 80px -40px rgba(28,27,25,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:84px;
}

/* ------------------------------ 2. RESET -------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-weight:400;
  font-size:1rem;
  line-height:1.72;
  letter-spacing:.005em;
  /* Cormorant Garamond ships old-style figures by default (3,4,5,7,9 drop below
     the baseline, most digits sit at x-height). Force lining figures so numbers
     read as plain modern numerals everywhere. */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%;}
img{height:auto;}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-.01em;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
ul{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
address{font-style:normal;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--brass);color:var(--ivory-warm);}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--charcoal);color:var(--ivory);padding:.85rem 1.5rem;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px;}

/* ------------------------------ 3. LAYOUT ------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);}
.section-tint{background:var(--sand);}
.section-dark{background:var(--charcoal);color:var(--sand);}
.section-dark p{color:rgba(235,227,214,.72);}

.section-head{max-width:660px;margin-bottom:clamp(2.5rem,5vw,4rem);}
.section-lead{color:var(--muted);font-size:1.06rem;font-weight:300;}
.section-dark .section-lead{color:rgba(235,227,214,.66);}

/* ------------------------------ 4. TYPE --------------------------------- */
.eyebrow{
  margin:0 0 1.1rem;
  font-size:.7rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass-deep);
  display:flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);flex:none;}
.eyebrow-light{color:var(--brass-bright);}
.eyebrow-light::before{background:var(--brass-bright);}

.h2{font-size:clamp(2.1rem,4.6vw,3.5rem);margin-bottom:1.1rem;}
.h2-light{color:var(--ivory-warm);}
.h2 em{font-style:italic;color:var(--brass-deep);font-weight:400;}
.hero-title em{font-style:italic;color:var(--brass);font-weight:400;}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--charcoal);border-bottom:1px solid var(--brass);padding-bottom:.35rem;
  transition:gap .3s var(--ease),color .3s var(--ease);
}
.link-arrow span{transition:transform .3s var(--ease);}
.link-arrow:hover{color:var(--brass-deep);}
.link-arrow:hover span{transform:translateX(5px);}

/* ------------------------------ 5. BUTTONS ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.05rem 2.1rem;
  font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border-radius:var(--radius);border:1px solid transparent;
  position:relative;overflow:hidden;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn-solid{background:var(--brass-deep);color:#fff;border-color:var(--brass-deep);}
.btn-solid:hover{background:var(--charcoal);border-color:var(--charcoal);transform:translateY(-2px);}
.btn-ghost{border-color:rgba(246,242,234,.55);color:var(--ivory-warm);}
.btn-ghost:hover{background:var(--ivory-warm);color:var(--charcoal);border-color:var(--ivory-warm);transform:translateY(-2px);}
.section .btn-ghost{border-color:var(--charcoal);color:var(--charcoal);}
.section .btn-ghost:hover{background:var(--charcoal);color:var(--ivory);}

/* ------------------------------ 6. HEADER ------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(246,242,234,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px rgba(28,27,25,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--header-h);}

.brand{display:flex;align-items:center;gap:.8rem;flex:none;}
.brand-mark{width:42px;height:42px;flex:none;transition:transform .5s var(--ease);}
.brand:hover .brand-mark{transform:rotate(90deg);}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-name{
  font-family:var(--display);font-size:1.32rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-warm);
  transition:color .4s var(--ease);
}
.brand-name-2{font-weight:400;}
.brand-tag{
  margin-top:.4rem;font-size:.53rem;font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass-bright);transition:color .4s var(--ease);
}
.site-header.is-stuck .brand-name{color:var(--charcoal);}
.site-header.is-stuck .brand-tag{color:var(--brass-deep);}

.nav{display:flex;align-items:center;gap:2.4rem;}
.nav-list{display:flex;align-items:center;gap:2rem;}
.nav-list a{
  position:relative;font-size:.76rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(246,242,234,.86);transition:color .3s var(--ease);
  padding-block:.4rem;
}
.nav-list a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--brass-bright);transition:width .35s var(--ease);
}
.nav-list a:hover,.nav-list a.is-active{color:#fff;}
.nav-list a:hover::after,.nav-list a.is-active::after{width:100%;}
.site-header.is-stuck .nav-list a{color:var(--muted);}
.site-header.is-stuck .nav-list a:hover,
.site-header.is-stuck .nav-list a.is-active{color:var(--charcoal);}
.site-header.is-stuck .nav-list a::after{background:var(--brass-deep);}
.nav-cta{padding:.85rem 1.5rem;font-size:.7rem;}

.nav-toggle{display:none;width:44px;height:44px;position:relative;flex:none;}
.nav-toggle span{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--ivory-warm);
  transition:transform .35s var(--ease),opacity .25s var(--ease),background-color .4s var(--ease);
}
.nav-toggle span:nth-child(1){top:16px;}
.nav-toggle span:nth-child(2){top:22px;}
.nav-toggle span:nth-child(3){top:28px;}
.site-header.is-stuck .nav-toggle span{background:var(--charcoal);}
.nav-toggle[aria-expanded="true"] span{background:var(--charcoal);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ------------------------------ 7. HERO --------------------------------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding-top:var(--header-h);
  overflow:hidden;background:var(--charcoal-deep);
}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% center;}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(12,11,10,.92) 0%, rgba(12,11,10,.78) 34%, rgba(12,11,10,.28) 60%, rgba(12,11,10,.10) 100%),
    linear-gradient(to top, rgba(12,11,10,.55) 0%, transparent 40%);
}
.hero-inner{position:relative;z-index:2;max-width:760px;padding-block:4rem;}
.hero-title{
  font-size:clamp(3rem,8.2vw,6.4rem);
  color:var(--ivory-warm);
  margin-bottom:1.6rem;
  letter-spacing:-.02em;
}
.hero-sub{
  max-width:47ch;font-size:clamp(1rem,1.6vw,1.16rem);font-weight:300;
  color:rgba(246,242,234,.8);margin-bottom:2.6rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;}

.hero-scroll{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  z-index:3;width:26px;height:44px;border:1px solid rgba(246,242,234,.4);border-radius:14px;
}
.hero-scroll span{
  position:absolute;left:50%;top:9px;width:3px;height:7px;border-radius:2px;
  background:var(--brass-bright);transform:translateX(-50%);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0);}30%{opacity:1;}100%{opacity:0;transform:translate(-50%,18px);}}

/* ------------------------------ 8. TRUST BAR ---------------------------- */
.trust{background:var(--charcoal);color:var(--sand);border-bottom:1px solid rgba(246,242,234,.08);}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.trust-item{
  padding:2.4rem 1rem;text-align:center;
  border-left:1px solid rgba(246,242,234,.1);
  display:flex;flex-direction:column;gap:.5rem;
}
.trust-item:first-child{border-left:0;}
.trust-num{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--brass-bright);line-height:1;}
.trust-label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(235,227,214,.6);}

/* ------------------------------ 9. ABOUT -------------------------------- */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.about-media{position:relative;}
.about-media img{
  width:100%;aspect-ratio:5/4;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.about-media::before{
  content:"";position:absolute;inset:auto auto -18px -18px;
  width:52%;height:58%;border:1px solid var(--brass);border-radius:var(--radius-lg);
  z-index:-1;
}
.about-badge{
  position:absolute;right:-14px;top:-24px;
  background:var(--charcoal);color:var(--ivory);
  padding:1.35rem 1.5rem;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);text-align:center;
}
.about-badge-num{display:block;font-family:var(--display);font-size:2.1rem;color:var(--brass-bright);line-height:1;}
.about-badge-txt{display:block;margin-top:.45rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,242,234,.66);line-height:1.6;}

.about-copy p{color:var(--muted);font-weight:300;font-size:1.03rem;}
.about-points{margin:2.2rem 0;display:grid;gap:1.15rem;}
.about-points li{
  padding-left:1.6rem;position:relative;
  font-size:.95rem;color:var(--muted);font-weight:300;line-height:1.6;
}
.about-points li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:var(--brass);transform:rotate(45deg);
}
.about-points strong{
  display:block;font-family:var(--sans);font-weight:500;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);margin-bottom:.25rem;
}

/* ------------------------------ 10. FABRICS ----------------------------- */
.fabric-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.25rem,2.4vw,2rem);
}
.fabric-card{
  background:var(--ivory-warm);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.fabric-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--brass-pale);}
.fabric-swatch{position:relative;height:160px;overflow:hidden;background:var(--sand);}
.fabric-swatch svg{width:100%;height:100%;transition:transform .8s var(--ease);}
.fabric-card:hover .fabric-swatch svg{transform:scale(1.12);}
.fabric-swatch::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 42%,rgba(28,27,25,.16));
  pointer-events:none;
}
.fabric-body{padding:1.9rem 1.75rem 1.75rem;position:relative;flex:1;display:flex;flex-direction:column;}
.fabric-index{
  position:absolute;right:1.6rem;top:1.5rem;
  font-family:var(--display);font-size:1.5rem;color:var(--brass-deep);line-height:1;
}
.fabric-name{font-size:1.55rem;margin-bottom:.7rem;padding-right:1.9rem;}
.fabric-body p{color:var(--muted);font-size:.93rem;font-weight:300;line-height:1.7;}
.fabric-meta{
  margin-top:auto;padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.45rem;
  border-top:1px solid var(--line);
}
.fabric-meta li{
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:var(--sand);padding:.35rem .65rem;border-radius:2px;
}
.fabric-note{
  margin-top:clamp(2rem,4vw,3rem);text-align:center;
  color:var(--muted);font-weight:300;font-size:.98rem;
}
.fabric-note .link-arrow{margin-left:.4rem;}

/* ------------------------------ 11. BANDS ------------------------------- */
.band{position:relative;overflow:hidden;background:var(--charcoal-deep);}
.band-bg{position:absolute;inset:0;}
.band-bg img{width:100%;height:100%;object-fit:cover;}
.band-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,10,.9) 0%,rgba(12,11,10,.72) 45%,rgba(12,11,10,.5) 100%);}
.band-inner{position:relative;z-index:2;padding-block:clamp(5rem,11vw,9rem);max-width:820px;}

.band-statement .band-inner{text-align:center;margin-inline:auto;}
.band-quote{
  font-family:var(--display);font-size:clamp(1.7rem,4.2vw,3.1rem);
  line-height:1.28;color:var(--ivory-warm);font-style:italic;font-weight:400;margin-bottom:1.5rem;
}
.band-attrib{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-bright);}
.band-sub{max-width:52ch;color:rgba(246,242,234,.78);font-weight:300;font-size:1.06rem;margin-bottom:2.4rem;}

/* ------------------------------ 12. COLOURS ----------------------------- */
.filters{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.chip{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem 1.15rem;border:1px solid var(--line);border-radius:100px;
  font-size:.71rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:var(--ivory-warm);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.chip:hover{border-color:var(--brass);color:var(--charcoal);}
.chip.is-active{background:var(--charcoal);border-color:var(--charcoal);color:var(--ivory-warm);}
.chip-dot{
  width:13px;height:13px;border-radius:50%;flex:none;
  background:var(--dot,var(--brass));border:1px solid rgba(28,27,25,.18);
}
.chip.is-active .chip-dot{border-color:rgba(246,242,234,.35);}
.chip-all{
  background:conic-gradient(#F4F1EA 0 16.6%,#1B1B1D 0 33.3%,#6E2130 0 50%,#E3D9C2 0 66.6%,#AFC9E4 0 83.3%,#E5977C 0);
}

.colour-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(1.25rem,2.4vw,2rem);}
.colour-card{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--ivory-warm);
  border:1px solid var(--line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .35s var(--ease);
}
.colour-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.colour-card.is-hidden{display:none;}
.colour-media{position:relative;overflow:hidden;background:var(--sand);}
.colour-media img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .9s var(--ease);}
.colour-card:hover .colour-media img{transform:scale(1.05);}
.colour-swatch{
  position:absolute;left:1.1rem;top:1.1rem;width:34px;height:34px;border-radius:50%;
  background:var(--dot);border:2px solid rgba(255,255,255,.85);box-shadow:0 3px 12px rgba(28,27,25,.28);
}
.colour-info{padding:1.5rem 1.5rem 1.7rem;}
.colour-info h3{font-size:1.4rem;margin-bottom:.5rem;}
.colour-info p{color:var(--muted);font-size:.9rem;font-weight:300;line-height:1.65;}

/* ------------------------------ 13. PROCESS ----------------------------- */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(1.5rem,3vw,2.5rem);}
.process-card h3{font-size:1.5rem;color:var(--ivory-warm);margin:1.4rem 0 .7rem;}
.process-card p{font-size:.94rem;font-weight:300;line-height:1.72;}
.process-media{position:relative;overflow:hidden;border-radius:var(--radius-lg);}
.process-media img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.9);transition:transform .9s var(--ease),filter .6s var(--ease);}
.process-card:hover .process-media img{transform:scale(1.06);filter:saturate(1.05);}
.process-num{
  position:absolute;left:0;bottom:0;
  background:var(--charcoal);color:var(--brass-bright);
  font-family:var(--display);font-size:1.5rem;line-height:1;
  padding:.85rem 1.15rem;border-radius:0 var(--radius-lg) 0 0;
}

/* ------------------------------ 14. WHY --------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:clamp(1.5rem,3vw,2.75rem);}
.why-item{
  padding:2rem 1.85rem;background:var(--ivory-warm);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  border-top:2px solid var(--brass);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.why-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.why-icon{
  width:34px;height:34px;margin-bottom:1.15rem;
  fill:none;stroke:var(--brass);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.why-item h3{font-size:1.32rem;margin-bottom:.6rem;}
.why-item p{color:var(--muted);font-size:.92rem;font-weight:300;line-height:1.68;}

/* ------------------------------ 15. TESTIMONIALS ------------------------ */
.tst{position:relative;padding-inline:0;--per:1;}
@media (min-width:900px){.tst{--per:2;}}
.tst-viewport{overflow:hidden;margin-inline:-.5rem;}
.tst-track{
  display:flex;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.tst-slide{flex:0 0 calc(100% / var(--per));min-width:0;padding:.5rem;display:flex;}
.tst-card{
  margin:0;background:var(--ivory-warm);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3.5vw,2.75rem);box-shadow:var(--shadow-sm);
  position:relative;width:100%;display:flex;flex-direction:column;
}
.tst-card p{flex:1;}
.tst-quote{width:44px;height:35px;fill:var(--brass-pale);margin-bottom:1.5rem;}
.tst-card p{
  font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.6rem);
  line-height:1.58;color:var(--charcoal);font-weight:400;margin-bottom:2rem;
}
.tst-by{display:flex;align-items:center;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.tst-mono{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--charcoal);color:var(--brass-bright);
  font-size:.82rem;font-weight:500;letter-spacing:.1em;
}
.tst-who{display:flex;flex-direction:column;line-height:1.4;}
.tst-who strong{font-size:.98rem;font-weight:500;letter-spacing:.02em;}
.tst-who em{font-style:normal;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);margin-top:.25rem;}

.tst-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;
  background:var(--ivory-warm);border:1px solid var(--line);
  display:grid;place-items:center;
  box-shadow:var(--shadow-sm);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.tst-nav svg{width:19px;height:19px;fill:none;stroke:var(--charcoal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s var(--ease);}
.tst-nav:hover{background:var(--charcoal);border-color:var(--charcoal);}
.tst-nav:hover svg{stroke:var(--brass-bright);}
.tst-prev{left:-24px;}
.tst-next{right:-24px;}

.tst-dots{display:flex;justify-content:center;gap:.6rem;margin-top:2rem;}
.tst-dots button{
  width:9px;height:9px;border-radius:50%;background:var(--sand-deep);
  transition:background-color .3s var(--ease),width .3s var(--ease);
}
.tst-dots button.is-active{background:var(--brass-deep);width:26px;border-radius:5px;}

/* ------------------------------ 16. CONTACT STRIP ----------------------- */
.contact-strip{background:var(--sand);}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);align-items:start;}
.contact-copy p{color:var(--muted);font-weight:300;margin-bottom:2rem;max-width:44ch;}
.contact-list{display:grid;gap:1.5rem;}
.contact-list li{
  display:flex;gap:1.15rem;align-items:flex-start;
  background:var(--ivory-warm);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.4rem 1.5rem;
}
.contact-list svg{
  width:22px;height:22px;flex:none;margin-top:.35rem;
  fill:none;stroke:var(--brass);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.contact-list span{
  display:block;font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.4rem;
}
.contact-list address,.contact-list a,.contact-plain{
  font-size:.95rem;font-weight:300;line-height:1.65;color:var(--charcoal);
}
.contact-list a{border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease);}
.contact-list a:hover{color:var(--brass-deep);border-bottom-color:var(--brass-deep);}
.contact-plain{font-weight:400;letter-spacing:.04em;}

/* ------------------------------ 17. FOOTER ------------------------------ */
.site-footer{background:var(--charcoal-deep);color:rgba(235,227,214,.62);padding-top:clamp(3.5rem,7vw,5.5rem);}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);
}
.brand-footer{margin-bottom:1.4rem;}
.brand-footer .brand-name{color:var(--ivory-warm);}
.brand-footer .brand-tag{color:var(--brass-bright);}
.footer-blurb{font-size:.92rem;font-weight:300;line-height:1.75;max-width:34ch;}
.footer-col h3{
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:1.35rem;
}
.footer-col ul{display:grid;gap:.7rem;}
.footer-col a{font-size:.9rem;font-weight:300;transition:color .3s var(--ease);}
.footer-col a:hover{color:var(--ivory-warm);}
.footer-contact address{font-size:.9rem;font-weight:300;line-height:1.75;margin-bottom:1.2rem;}
.footer-base{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center;
  padding-block:1.6rem;border-top:1px solid rgba(246,242,234,.1);
  font-size:.76rem;font-weight:300;letter-spacing:.06em;
}
.footer-base p{margin:0;}
.footer-gst{letter-spacing:.14em;color:var(--stone);}

/* ------------------------------ 18. WHATSAPP FLOAT ---------------------- */
.wa-float{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;
  box-shadow:0 10px 30px -8px rgba(18,140,126,.55);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.wa-float svg{width:30px;height:30px;fill:#fff;}
.wa-float:hover{transform:scale(1.09) translateY(-2px);box-shadow:0 16px 38px -10px rgba(18,140,126,.68);}
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);animation:waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse{0%{transform:scale(1);opacity:.75;}70%{transform:scale(1.55);opacity:0;}100%{opacity:0;}}

/* ------------------------------ 19. REVEAL ------------------------------ */
/* Hidden only once JS has confirmed it can bring them back. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js .reveal.is-visible{opacity:1;transform:none;}

/* ------------------------------ 20. RESPONSIVE -------------------------- */
@media (max-width:1080px){
  .tst-prev{left:-8px;}
  .tst-next{right:-8px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}

@media (max-width:900px){
  :root{--header-h:72px;}
  .about-grid{grid-template-columns:1fr;}
  .about-media{order:-1;max-width:620px;}
  .about-badge{right:0;top:-16px;padding:1.1rem 1.25rem;}
  .contact-grid{grid-template-columns:1fr;}

  .nav-toggle{display:block;}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw,380px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:2.5rem;
    background:var(--ivory-warm);padding:5rem var(--gutter) 3rem;
    box-shadow:-20px 0 60px -25px rgba(28,27,25,.5);
    overflow-y:auto;
    /* visibility keeps the closed drawer out of the tab order and the a11y tree */
    transform:translateX(100%);visibility:hidden;
    transition:transform .45s var(--ease),visibility 0s linear .45s;
  }
  .nav.is-open{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s;}
  .nav-list{flex-direction:column;align-items:flex-start;gap:1.3rem;width:100%;}
  .nav-list a{font-size:1rem;letter-spacing:.15em;color:var(--charcoal) !important;}
  .nav-cta{width:100%;}
  body.nav-open{overflow:hidden;}
  .nav-backdrop{
    position:fixed;inset:0;z-index:99;background:rgba(12,11,10,.5);
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  }
  .nav-backdrop.is-on{opacity:1;pointer-events:auto;}
}

@media (max-width:700px){
  .hero{min-height:88svh;}
  .hero-bg img{object-position:68% center;}
  .hero-veil{background:linear-gradient(to top,rgba(12,11,10,.94) 8%,rgba(12,11,10,.72) 52%,rgba(12,11,10,.5) 100%);}
  .hero-inner{padding-block:3rem;}
  .hero-actions .btn{flex:1 1 100%;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .trust-item{padding:1.7rem .75rem;}
  .trust-item:nth-child(odd){border-left:0;}
  .trust-item:nth-child(n+3){border-top:1px solid rgba(246,242,234,.1);}
  .brand-tag{display:none;}
  .tst-nav{position:static;transform:none;}
  .tst{display:flex;flex-wrap:wrap;}
  .tst-viewport{order:-1;flex:1 1 100%;}
  .tst-dots{flex:1 1 100%;order:3;margin-top:1.25rem;}
  .tst-nav{margin:1.5rem .35rem 0;}
  .tst-prev{margin-left:auto;}
  .tst-next{margin-right:auto;}
  .colour-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
  .footer-grid{grid-template-columns:1fr;}
  .footer-base{justify-content:flex-start;}
}

@media (max-width:420px){
  .colour-grid{grid-template-columns:1fr;}
  .about-badge{position:static;display:inline-flex;align-items:center;gap:1rem;text-align:left;margin-top:1rem;}
  .about-badge-txt{margin-top:0;}
  .about-media::before{display:none;}
}

/* ==========================================================================
   21. CONTACT PAGE
   ========================================================================== */
.page-inner{background:var(--ivory);}

.page-hero{
  background:var(--charcoal);color:var(--sand);
  padding-top:calc(var(--header-h) + clamp(3rem,6vw,5rem));
  padding-bottom:clamp(3rem,6vw,5rem);
  position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;right:-8%;top:-40%;width:46%;height:190%;
  background:radial-gradient(closest-side,rgba(176,141,79,.16),transparent 70%);
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2;}
.crumbs{
  display:flex;align-items:center;gap:.6rem;margin-bottom:1.9rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(235,227,214,.6);
}
.crumbs a{transition:color .3s var(--ease);}
.crumbs a:hover{color:var(--brass-bright);}
.crumbs span[aria-hidden]{color:rgba(235,227,214,.3);}
.crumbs span[aria-current]{color:var(--brass-bright);}
.page-title{
  font-size:clamp(2.3rem,5.6vw,4.2rem);color:var(--ivory-warm);
  margin-bottom:1.15rem;letter-spacing:-.015em;
}
.page-sub{max-width:56ch;font-weight:300;font-size:1.06rem;color:rgba(235,227,214,.72);}

.contact-page-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}

.contact-aside .h3-alt{font-size:1.9rem;margin-bottom:.8rem;}
.aside-blurb{color:var(--muted);font-weight:300;font-size:.98rem;margin-bottom:2rem;max-width:38ch;}
.contact-aside .contact-list{gap:1rem;margin-bottom:1.75rem;}
.contact-aside .contact-list li{background:var(--sand);border-color:transparent;}

.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;width:100%;
  background:var(--wa-deep);border-color:var(--wa-deep);color:#fff;
  padding:1.05rem 1.75rem;border-radius:var(--radius);
  font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--wa-deep);
  transition:filter .3s var(--ease),transform .3s var(--ease);
}
.btn-wa svg{width:20px;height:20px;fill:#fff;flex:none;}
.btn-wa:hover{filter:brightness(.93);transform:translateY(-2px);}

/* --- Form --- */
.form-panel{
  background:var(--ivory-warm);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3.6vw,3rem);box-shadow:var(--shadow-md);
}
.form-title{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:.9rem;}
.form-intro{color:var(--muted);font-weight:300;font-size:.94rem;margin-bottom:2.2rem;}

.field{margin-bottom:1.35rem;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem;}
.field label,.fieldset legend{
  display:block;margin-bottom:.55rem;padding:0;
  font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--charcoal);
}
.req{color:var(--t-red);}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea{
  width:100%;padding:.95rem 1.05rem;
  font-family:var(--sans);font-size:.95rem;font-weight:300;color:var(--charcoal);
  background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:130px;line-height:1.65;}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E675C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;background-size:12px;padding-right:2.6rem;}
.field input::placeholder,.field textarea::placeholder{color:var(--stone);opacity:1;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brass-deep);background:#fff;
  box-shadow:0 0 0 3px rgba(138,106,46,.18);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--t-red);}

.fieldset{border:0;margin-inline:0;padding:0;}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:.6rem;}
.check,.radio{
  display:flex;align-items:center;gap:.65rem;cursor:pointer;
  padding:.75rem .95rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ivory);font-size:.88rem;font-weight:300;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.check:hover,.radio:hover{border-color:var(--brass-deep);}
.check input,.radio input{
  width:17px;height:17px;flex:none;accent-color:var(--brass-deep);cursor:pointer;margin:0;
}
.check:has(input:checked),.radio:has(input:checked){
  border-color:var(--brass-deep);background:rgba(138,106,46,.10);
}
.radio-row{display:flex;flex-wrap:wrap;gap:.6rem;}
.radio{min-width:150px;}

.form-submit{width:100%;margin-top:.75rem;}
.form-status{
  margin:1.1rem 0 0;font-size:.86rem;font-weight:300;
  opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.form-status.is-shown{opacity:1;transform:none;}
.form-status.is-ok{color:#2F6B3A;}
.form-status.is-err{color:var(--t-red);}

/* --- Map --- */
.map-section{padding-bottom:0;background:var(--sand);padding-top:var(--section-y);}
.map-head{max-width:660px;margin-bottom:clamp(2rem,4vw,3rem);}
.map-frame{position:relative;height:clamp(320px,42vw,480px);background:var(--sand-deep);}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.03);}

@media (max-width:900px){
  .contact-page-grid{grid-template-columns:1fr;}
  .contact-aside{order:2;}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr;gap:0;}
  .radio{flex:1 1 100%;}
}

/* ------------------------------ 22. MOTION / PRINT ---------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
}

@media print{
  .site-header,.wa-float,.hero-scroll,.tst-nav,.tst-dots,.filters{display:none !important;}
  body{background:#fff;color:#000;}
  .band-veil,.hero-veil{display:none;}
  .reveal{opacity:1;transform:none;}
}