/* =========================================================================
   SILVARA — 925 Sterling Silver · Dubai
   Visual system. Palette keyed to the logo: polished platinum/silver ribbon
   "S" + cool steel-blue highlight + near-black graphite wordmark.
   Bright gallery paper so the silver pieces carry the colour.
   ========================================================================= */

:root{
  /* --- Core palette --- */
  --bg:        #FAFAFB;   /* bright gallery paper */
  --surface:   #FFFFFF;   /* cards / panels */
  --surface-2: #F4F5F6;   /* image wells, soft fills */
  --ink:       #15171B;   /* near-black wordmark ink */
  --ink-soft:  #3A3E45;
  --muted:     #6B7280;   /* secondary text */
  --muted-2:   #9AA0A8;
  --graphite:  #23272E;   /* primary CTA / dark bands */
  --graphite-2:#2E333B;
  --silver:    #C6CBD1;   /* polished platinum tone (logo ribbon) */
  --silver-lt: #E9EBEE;
  --accent:    #6E8CA6;   /* cool steel-blue (logo "S" highlight) — sparing */
  --accent-dk: #5B7790;
  --border:    #E7E8EC;   /* hairline borders */
  --border-2:  #DCDEE3;
  --focus:     #23272E;

  /* metallic platinum gradient — echoes the ribbon "S" */
  --platinum: linear-gradient(135deg,#EDEFF2 0%,#C6CBD1 28%,#F4F6F8 52%,#A9B0B8 74%,#E4E7EA 100%);

  --shadow-sm: 0 1px 2px rgba(20,22,26,.04), 0 1px 1px rgba(20,22,26,.03);
  --shadow-md: 0 12px 30px -12px rgba(20,22,26,.16), 0 4px 10px -6px rgba(20,22,26,.08);
  --shadow-lg: 0 30px 60px -24px rgba(20,22,26,.28);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

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

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;
  font-family:var(--ff-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; 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{
  font-family:var(--ff-display);
  font-weight:500;
  line-height:1.02;
  letter-spacing:.005em;
  color:var(--ink);
}
h1.display{ font-size:clamp(2.7rem,7vw,5rem); }
h2.display{ font-size:clamp(2.1rem,4.6vw,3.4rem); }
h3.display{ font-size:clamp(1.5rem,2.6vw,2rem); }

.eyebrow{
  font-family:var(--ff-sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent-dk);
}
.eyebrow--muted{ color:var(--muted); }

.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ink-soft); line-height:1.65; }
.body{ color:var(--muted); }
.body p + p{ margin-top:1em; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(56px,9vw,120px); }
.section--tight{ padding-block:clamp(40px,6vw,72px); }
.center{ text-align:center; }
.stack > * + *{ margin-top:1.1rem; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

/* hairline rule */
.rule{ height:1px; background:var(--border); border:0; }

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--ff-sans); font-size:.86rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.95em 1.7em; border-radius:999px; cursor:pointer;
  border:1px solid transparent; min-height:48px;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn .ic{ width:18px; height:18px; flex:none; }

.btn--primary{ background:var(--graphite); color:#fff; }
.btn--primary:hover{ background:#000; box-shadow:var(--shadow-md); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--surface); }

.btn--light{ background:var(--surface); color:var(--ink); border-color:var(--border); }
.btn--light:hover{ box-shadow:var(--shadow-md); }

.btn--on-dark{ background:#fff; color:var(--ink); }
.btn--on-dark:hover{ background:var(--silver-lt); }
.btn--ghost-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.btn--sm{ padding:.7em 1.2em; font-size:.74rem; min-height:42px; }
.btn--block{ width:100%; }

.linkarrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--border-2); padding-bottom:3px;
  transition:gap .25s var(--ease), border-color .25s var(--ease);
}
.linkarrow:hover{ gap:.85em; border-color:var(--ink); }
.linkarrow .ic{ width:15px; height:15px; }

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

/* ============================ HEADER ============================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(250,250,251,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{ border-color:var(--border); box-shadow:0 1px 0 rgba(20,22,26,.02); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; height:84px;
  transition:height .3s var(--ease);
}
.site-header.is-scrolled .nav{ height:72px; }
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:52px; width:auto; transition:height .3s var(--ease); }
.site-header.is-scrolled .brand img{ height:44px; }

.nav-links{ display:none; align-items:center; gap:2rem; }
.nav-links a{
  font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding:.4em 0;
  transition:color .2s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--ink); transition:right .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color:var(--ink); }

.nav-cta{ display:none; align-items:center; gap:.7rem; flex:none; }

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; border:1px solid var(--border-2); border-radius:999px;
  background:var(--surface); cursor:pointer; flex:none;
}
.nav-toggle span{ width:18px; height:1.5px; background:var(--ink); margin-inline:auto; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.mobile-menu{
  position:fixed; inset:0; z-index:70; visibility:hidden; pointer-events:none;
}
.mobile-menu__scrim{
  position:absolute; inset:0; background:rgba(20,22,26,.4);
  opacity:0; transition:opacity .35s var(--ease);
}
.mobile-menu__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,380px);
  background:var(--surface); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; padding:1.4rem var(--gutter) 2rem;
  overflow-y:auto;
}
.mobile-menu.is-open{ visibility:visible; pointer-events:auto; }
.mobile-menu.is-open .mobile-menu__scrim{ opacity:1; }
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }
.mobile-menu__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; }
.mobile-menu__head img{ height:44px; }
.mobile-close{ width:46px; height:46px; border-radius:999px; border:1px solid var(--border-2); background:var(--surface); font-size:1.2rem; cursor:pointer; color:var(--ink); }
.mobile-links{ display:flex; flex-direction:column; }
.mobile-links a{
  font-family:var(--ff-display); font-size:1.9rem; font-weight:500; color:var(--ink);
  padding:.55rem 0; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;
}
.mobile-links a .ic{ width:18px; height:18px; color:var(--muted-2); }
.mobile-menu__cta{ margin-top:auto; padding-top:1.8rem; display:grid; gap:.7rem; }
.mobile-menu__contact{ margin-top:1.2rem; font-size:.85rem; color:var(--muted); display:grid; gap:.4rem; }
.mobile-menu__contact a{ color:var(--ink-soft); }

/* ============================ HERO ============================ */
.hero{ position:relative; overflow:hidden; background:var(--bg); }
.hero__grid{
  display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px);
  align-items:center; padding-block:clamp(40px,6vw,84px);
}
.hero__copy{ position:relative; z-index:2; }
.hero__copy h1{ margin-block:.4rem .9rem; }
.hero__copy .lead{ max-width:48ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.hero__media{ position:relative; }
.hero__media .frame{
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2);
  box-shadow:var(--shadow-lg); aspect-ratio:4/5;
}
.hero__media .frame img{ width:100%; height:100%; object-fit:cover; }
.hero__badge{
  position:absolute; left:-10px; bottom:18px; z-index:3;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:.9rem 1.1rem; display:flex; align-items:center; gap:.75rem;
  max-width:78%;
}
.hero__badge .seal{
  width:42px; height:42px; border-radius:999px; flex:none;
  background:var(--platinum); display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:600; font-size:.92rem; color:var(--graphite);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.hero__badge .t{ font-size:.78rem; line-height:1.35; }
.hero__badge .t strong{ display:block; font-size:.84rem; color:var(--ink); letter-spacing:.02em; }

/* ============================ TRUST STRIP ============================ */
.trust{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
.trust__row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
}
.trust__item{
  display:flex; align-items:center; gap:.85rem; padding:1.1rem clamp(12px,2vw,22px);
  border-bottom:1px solid var(--border);
}
.trust__item:nth-child(odd){ border-right:1px solid var(--border); }
.trust__item .ic{ width:22px; height:22px; color:var(--accent-dk); flex:none; }
.trust__item .t{ font-size:.82rem; font-weight:500; color:var(--ink-soft); letter-spacing:.01em; line-height:1.3; }

/* ============================ SECTION HEADER ============================ */
.sec-head{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:clamp(28px,4vw,52px); }
.sec-head.center{ align-items:center; }
.sec-head .eyebrow{ display:block; }
.sec-head__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.2rem; width:100%; }

/* ============================ COLLECTION CARDS ============================ */
.coll-grid{ display:grid; grid-template-columns:1fr; gap:clamp(14px,2vw,22px); }
.coll-card{
  position:relative; display:block; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-2); aspect-ratio:3/4; box-shadow:var(--shadow-sm);
  isolation:isolate;
}
.coll-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease); filter:saturate(1.02);
}
.coll-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,17,21,.72) 0%, rgba(15,17,21,.18) 40%, rgba(15,17,21,0) 70%);
  z-index:1;
}
.coll-card:hover img{ transform:scale(1.06); }
.coll-card__label{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.2rem 1.3rem;
  color:#fff; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
.coll-card__label h3{ font-family:var(--ff-display); font-size:1.6rem; font-weight:500; line-height:1; }
.coll-card__label p{ font-size:.78rem; color:rgba(255,255,255,.78); margin-top:.3rem; }
.coll-card__arrow{
  width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.45);
  display:grid; place-items:center; flex:none; transition:background .3s var(--ease), transform .3s var(--ease);
}
.coll-card:hover .coll-card__arrow{ background:#fff; color:var(--ink); transform:translateX(2px); }
.coll-card__arrow .ic{ width:16px; height:16px; }

/* ============================ PRODUCT CARDS ============================ */
.prod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,2vw,26px); }
.prod-card{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.prod-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--border-2); }
.prod-card__media{ position:relative; aspect-ratio:1/1; background:var(--surface-2); overflow:hidden; }
.prod-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.prod-card:hover .prod-card__media img{ transform:scale(1.05); }
.prod-card__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.92); color:var(--ink-soft);
  padding:.4em .7em; border-radius:999px; border:1px solid var(--border);
}
.prod-card__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.prod-card__name{ font-family:var(--ff-display); font-size:1.45rem; font-weight:500; line-height:1.1; }
.prod-card__cat{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:.15rem; }
.prod-card__desc{ font-size:.86rem; color:var(--muted); margin-top:.6rem; line-height:1.5; flex:1; }
.prod-card__actions{ display:flex; gap:.5rem; margin-top:1rem; }
.prod-card__actions .btn{ flex:1; }

/* WhatsApp glyph button variant */
.btn .wa{ width:17px; height:17px; }

/* ============================ FEATURED STRIP ============================ */
.feature-split{
  display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,60px); align-items:center;
}
.feature-split__media{ border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-md); aspect-ratio:4/5; }
.feature-split__media img{ width:100%; height:100%; object-fit:cover; }

/* ============================ DARK EDITORIAL BAND ============================ */
.band-dark{ background:var(--graphite); color:#fff; position:relative; overflow:hidden; }
.band-dark .eyebrow{ color:var(--silver); }
.band-dark .display{ color:#fff; }
.band-dark .lead{ color:rgba(255,255,255,.78); }
.band-dark .body{ color:rgba(255,255,255,.66); }
.band-dark .rule{ background:rgba(255,255,255,.14); }

/* ============================ CRAFT / STORY ============================ */
.story-grid{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,40px); }
.story-media{ border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-sm); }
.story-media img{ width:100%; height:100%; object-fit:cover; }

.values{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.value{ background:var(--surface); padding:1.5rem; }
.value .n{ font-family:var(--ff-display); font-size:1.1rem; color:var(--accent-dk); letter-spacing:.08em; }
.value h4{ font-family:var(--ff-display); font-size:1.5rem; font-weight:500; margin:.4rem 0 .5rem; }
.value p{ font-size:.88rem; color:var(--muted); line-height:1.55; }

/* ============================ VISIT BAND ============================ */
.visit-grid{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,44px); align-items:stretch; }
.visit-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:clamp(22px,3vw,40px); box-shadow:var(--shadow-sm); }
.visit-meta{ display:grid; gap:1.2rem; margin-top:1.6rem; }
.visit-meta .row{ display:flex; gap:.85rem; align-items:flex-start; }
.visit-meta .ic{ width:20px; height:20px; color:var(--accent-dk); flex:none; margin-top:2px; }
.visit-meta .k{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
.visit-meta .v{ font-size:.98rem; color:var(--ink); line-height:1.5; }
.visit-meta .v a{ border-bottom:1px solid var(--border-2); }
.visit-meta .v a:hover{ border-color:var(--ink); }
.visit-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }

/* map placeholder — honest, NOT a fake map */
.map-ph{
  position:relative; border-radius:var(--r-md); overflow:hidden; min-height:300px; height:100%;
  border:1px solid var(--border); background:
    repeating-linear-gradient(45deg, #F1F2F4 0 14px, #ECEEF1 14px 28px);
  display:grid; place-items:center; text-align:center;
}
.map-ph__inner{ display:grid; gap:.6rem; justify-items:center; padding:1.4rem; }
.map-ph__pin{ width:48px; height:48px; border-radius:999px; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.map-ph__pin .ic{ width:22px; height:22px; color:var(--accent-dk); }
.map-ph__t{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.map-ph__s{ font-size:.82rem; color:var(--muted-2); max-width:30ch; }

/* hours table */
.hours{ display:grid; gap:.5rem; }
.hours .h-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; padding:.3rem 0; border-bottom:1px dashed var(--border); }
.hours .h-row:last-child{ border-bottom:0; }
.hours .h-row .d{ color:var(--ink-soft); }
.hours .h-row .t{ color:var(--muted); font-variant-numeric:tabular-nums; }
.hours .h-row.closed .t{ color:var(--accent-dk); }

/* ============================ ENQUIRY FORM ============================ */
.form{ display:grid; gap:1rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.field input, .field select, .field textarea{
  font-family:var(--ff-sans); font-size:.95rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-sm);
  padding:.85em .95em; width:100%; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(110,140,166,.15);
}
.field--row{ display:grid; grid-template-columns:1fr; gap:1rem; }
.form__note{ font-size:.78rem; color:var(--muted-2); line-height:1.5; }
.form__success{ display:none; padding:1rem 1.1rem; border-radius:var(--r-sm); background:#EEF3EF; border:1px solid #CFE0D4; color:#2C5238; font-size:.9rem; }
.form__success.show{ display:block; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--graphite); color:rgba(255,255,255,.72); padding-block:clamp(48px,7vw,84px) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,48px); }
.footer-brand img{ height:88px; width:auto; margin-bottom:1rem; filter:brightness(0) invert(1); opacity:.96; }
.footer-brand p{ font-size:.9rem; color:rgba(255,255,255,.6); max-width:34ch; line-height:1.6; }
.footer-col h5{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:1rem; font-weight:600; }
.footer-col ul{ display:grid; gap:.6rem; }
.footer-col a{ font-size:.92rem; color:rgba(255,255,255,.74); transition:color .2s var(--ease); }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:.6rem; margin-top:.2rem; }
.footer-social a{ width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; transition:background .25s var(--ease), border-color .25s var(--ease); }
.footer-social a:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); }
.footer-social .ic{ width:18px; height:18px; color:#fff; }
.footer-bottom{ display:flex; flex-direction:column; gap:.6rem; margin-top:clamp(36px,5vw,56px); padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; color:rgba(255,255,255,.5); }
.footer-bottom a{ color:rgba(255,255,255,.6); }
.footer-bottom a:hover{ color:#fff; }
.footer-disclaimer{ font-size:.72rem; color:rgba(255,255,255,.38); line-height:1.5; max-width:80ch; }

/* ============================ WHATSAPP FAB + MOBILE BAR ============================ */
.wa-fab{
  position:fixed; right:18px; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:55;
  width:56px; height:56px; border-radius:999px; background:var(--graphite); color:#fff;
  display:grid; place-items:center; box-shadow:var(--shadow-lg);
  transition:transform .3s var(--ease), background .3s var(--ease);
  border:1px solid rgba(255,255,255,.12);
}
.wa-fab:hover{ transform:scale(1.06); background:#000; }
.wa-fab .ic{ width:26px; height:26px; }
.wa-fab__pulse{ position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(35,39,46,.4); animation:wapulse 2.6s var(--ease) infinite; }
@keyframes wapulse{ 0%{box-shadow:0 0 0 0 rgba(35,39,46,.34);} 70%{box-shadow:0 0 0 16px rgba(35,39,46,0);} 100%{box-shadow:0 0 0 0 rgba(35,39,46,0);} }
@media (prefers-reduced-motion: reduce){ .wa-fab__pulse{ animation:none; } }

.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:54;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:.55rem .2rem; min-height:60px;
  font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  border-right:1px solid var(--border);
}
.mobile-bar a:last-child{ border-right:0; }
.mobile-bar a .ic{ width:21px; height:21px; color:var(--graphite); }
.mobile-bar a:active{ background:var(--surface-2); }
.has-mobile-bar{ padding-bottom:60px; }

/* ============================ PAGE HEAD (interior) ============================ */
.page-head{ padding-block:clamp(40px,6vw,80px) clamp(20px,3vw,36px); }
.crumbs{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); display:flex; gap:.5rem; align-items:center; }
.crumbs a:hover{ color:var(--ink); }
.crumbs .sep{ color:var(--border-2); }

/* ============================ FILTER TABS ============================ */
.filter-bar{ display:flex; gap:.5rem; flex-wrap:wrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.4rem; scrollbar-width:none; }
.filter-bar::-webkit-scrollbar{ display:none; }
.filter-chip{
  font-size:.78rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:.6em 1.1em; border-radius:999px; border:1px solid var(--border-2);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filter-chip:hover{ border-color:var(--ink); }
.filter-chip.active{ background:var(--graphite); color:#fff; border-color:var(--graphite); }

.empty-note{
  grid-column:1/-1; text-align:center; padding:2.4rem 1rem; border:1px dashed var(--border-2);
  border-radius:var(--r-md); background:var(--surface-2); color:var(--muted);
}
.empty-note h4{ font-family:var(--ff-display); font-size:1.5rem; color:var(--ink); margin-bottom:.4rem; }
.empty-note p{ font-size:.9rem; max-width:46ch; margin-inline:auto; }
.empty-note .btn{ margin-top:1rem; }

/* ============================ REVEAL ANIMATION ============================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================ RESPONSIVE ============================ */
@media (min-width:600px){
  .trust__row{ grid-template-columns:repeat(4,1fr); }
  .trust__item{ border-right:1px solid var(--border); border-bottom:0; }
  .trust__item:last-child{ border-right:0; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .field--row{ grid-template-columns:1fr 1fr; }
}
@media (min-width:768px){
  .coll-grid{ grid-template-columns:repeat(3,1fr); }
  .story-grid--2{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr; }
  .values{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-bar{ display:none; }
  .has-mobile-bar{ padding-bottom:0; }
  .wa-fab{ bottom:24px; right:24px; }
  .hero__grid{ grid-template-columns:1.05fr .95fr; }
  .prod-grid{ grid-template-columns:repeat(3,1fr); }
  .feature-split{ grid-template-columns:1fr 1fr; }
  .feature-split--reverse .feature-split__media{ order:2; }
  .visit-grid{ grid-template-columns:1.1fr .9fr; }
  .footer-grid{ grid-template-columns:1.8fr 1fr 1fr 1.2fr; }
  .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}
@media (min-width:1100px){
  .prod-grid{ grid-template-columns:repeat(4,1fr); }
  .prod-grid--3{ grid-template-columns:repeat(3,1fr); }
}