@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#14161A;
  --bone:#F6F4EF;
  --parchment:#EAE4D3;
  --pewter:#8B8375;
  --pewter-soft:#B9B2A2;
  --graphite:#3A3E44;
  --gold:#C9A34E;
  --gold-dark:#8F6F2E;
  --line:rgba(20,22,26,0.12);
  --line-lt:rgba(246,244,239,0.16);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bone);color:var(--graphite);font-family:'Inter',sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:500;margin:0 0 .5em;color:var(--ink);letter-spacing:-0.01em;}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.06em;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark);}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
img{max-width:100%;display:block;}

/* Ingot signature shape */
.ingot{clip-path:polygon(9% 100%, 91% 100%, 100% 0, 0 0);}
.ingot-btn{clip-path:polygon(14% 100%, 86% 100%, 100% 0, 0 0);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 34px 14px;background:var(--ink);color:var(--bone);font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;transition:background .25s ease;}
.btn:hover{background:var(--gold-dark);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);clip-path:none;}
.btn.ghost:hover{background:var(--ink);color:var(--bone);}
.btn.on-dark{background:var(--gold);color:var(--ink);}
.btn.on-dark:hover{background:var(--bone);}

/* Hallmark stamp */
.stamp{width:120px;height:120px;position:relative;}
.stamp svg{width:100%;height:100%;}
.stamp .ring-text{animation:spin 26s linear infinite;transform-origin:60px 60px;}
.medallion-spin{animation:spin 24s linear infinite;transform-box:fill-box;transform-origin:center;}
@media (prefers-reduced-motion:reduce){.stamp .ring-text{animation:none;}.medallion-spin{animation:none;}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.text-center {text-align:center;}

/* ---------- Hero scroll parallax background ---------- */
/* Contained in every page hero: <div class="hero-bg"><div class="parallax-layer ..." data-speed="0.15"></div>...</div> */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}

.parallax-layer{position:absolute;inset:-25% -10%;will-change:transform;}

.parallax-layer.grid{
  background-image:
    linear-gradient(rgba(201,163,78,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,163,78,0.10) 1px, transparent 1px);
  background-size:58px 58px;
}
.parallax-layer.ring{
  background:
    radial-gradient(circle at 18% 30%, transparent 0 118px, rgba(201,163,78,0.16) 119px, rgba(201,163,78,0.16) 121px, transparent 122px),
    radial-gradient(circle at 85% 65%, transparent 0 90px, rgba(139,131,117,0.20) 91px, rgba(139,131,117,0.20) 93px, transparent 94px);
}
.parallax-layer.bars{
  background-image:
    linear-gradient(100deg, transparent 46%, rgba(201,163,78,0.09) 47%, rgba(201,163,78,0.09) 49%, transparent 50%),
    linear-gradient(100deg, transparent 66%, rgba(246,244,239,0.07) 67%, rgba(246,244,239,0.07) 69%, transparent 70%);
  background-size:100% 100%;
}

.hero-fade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,22,26,0) 0%, rgba(20,22,26,0.55) 100%);pointer-events:none;}
.hero-fade.light{background:linear-gradient(180deg, rgba(246,244,239,0) 0%, rgba(246,244,239,0.65) 100%);}

@media (prefers-reduced-motion:reduce){
  .parallax-layer{transform:none !important;}
}

/* Nav */
header.site{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--bone);border-bottom:1px solid var(--line-lt);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 32px;max-width:1240px;margin:0 auto;}
/* .logo{font-family:'Fraunces',serif;font-size:1.5rem;letter-spacing:.04em;color:var(--bone);} */
/* .logo b{color:var(--gold);font-weight:500;} */
.logo-img{height:90px;width:auto;}
.nav-links{display:flex;gap:34px;list-style:none;margin:0;padding:0;}
.nav-links a{font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pewter-soft);padding-bottom:4px;border-bottom:1px solid transparent;transition:color .2s, border-color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--bone);border-color:var(--gold);}
.nav-actions{display:flex;align-items:center;gap:20px;}
.nav-actions button{background:none;border:none;color:var(--bone);cursor:pointer;font-size:1.05rem;}
.nav-toggle{display:none;background:none;border:none;color:var(--bone);font-size:1.4rem;cursor:pointer;}
@media (max-width:900px){
  .nav{padding:2px 32px 0px 10px;}
  .nav-links{position:fixed;inset:72px 0 0 0;background:var(--ink);flex-direction:column;padding:30px 32px;gap:24px;transform:translateX(100%);transition:transform .3s ease;}
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .nav-actions{gap:24px;}
  .nav-actions button{display:flex; font-size: 24px;line-height: 0.9;}
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background: white;
    color: var(--ink);
    width: 400px;
    max-width: 90%;
    margin: 100px auto;
    padding: 24px;
    border-radius: 8px;
    position: relative;
}
.modal-content-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
.modal-content-data {color: var(--graphite);}

#closeModal {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 24px;
    cursor: pointer;
}
@media (max-width:900px){.modal-content{height: 90vh; overflow: scroll; position: fixed; bottom: 0; margin-bottom: auto; width: 100%; max-width: 100%;}}

/* Footer */
footer.site{background:var(--ink);color:var(--pewter-soft);padding:70px 0 26px;margin-top:120px;}
.foot-grid{display:grid;grid-template-columns:0.4fr 1fr;column-gap:40px;padding-bottom:50px;border-bottom:1px solid var(--line-lt);}
.foot-grid h5{font-family:'IBM Plex Mono',monospace;color:var(--bone);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot-grid a:hover{color:var(--gold);}
.foot-sub-grid{display: grid; grid-template-columns: repeat(3,1fr); column-gap: 40px;}
.foot-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:.8rem;flex-wrap:wrap;gap:10px;}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr;}.foot-sub-grid{grid-template-columns: 1fr 1fr 1fr;}}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr;}.foot-sub-grid{grid-template-columns: 1fr 1fr;}}
@media(max-width:600px){.foot-sub-grid{grid-template-columns: 1fr;row-gap: 10px;}}
/* Sections */
.hero{position:relative;overflow:hidden;}
.hero > .wrap{position:relative;z-index:2;}
section{padding:100px 0;}
.section-tight{padding:60px 0;}
.dark{background:var(--ink);color:var(--bone);}
.dark h1,.dark h2,.dark h3{color:var(--bone);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
@media(max-width:960px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}section{padding:60px 0;}}
@media(max-width:700px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}section{padding:40px 0;} .section-tight{padding:20px 0;}}

.card{background:var(--bone);border:1px solid var(--line);padding:34px;}
.tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--parchment);padding:5px 10px;}
hr.rule{border:none;border-top:1px solid var(--line);margin:0;}
.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.05em;color:var(--pewter);text-transform:uppercase;}
.breadcrumb a:hover{color:var(--gold-dark);}

/* Product card */
.product-card{background:var(--bone);border:1px solid var(--line);transition:box-shadow .2s, transform .2s;}
.product-card:hover{box-shadow:0 18px 40px rgba(20,22,26,0.10);}
.product-media{background:var(--parchment);padding:24px 24px 6px;text-align:center;}
.product-media svg{display:inline-block;max-width:150px;height:auto;}
.product-body{padding:22px 24px 26px;}
.product-body h4{font-size:1.05rem;margin-bottom:.25em;}
.spec-row{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--pewter);margin:2px 0;}
.price{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--ink);margin-top:10px;}

/* Filters */
.listing-layout{display:grid;grid-template-columns:260px 1fr;gap:48px;}
.close-filters{margin-top:22px;width:100%;justify-content:center;display:none;}
@media(max-width:900px){.listing-layout{grid-template-columns:1fr;}}
.filters{border:1px solid var(--line);padding:26px;height:max-content;}
.filters h5{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin:22px 0 12px;color:var(--pewter);}
.filters h5:first-child{margin-top:0;}
.filter-opt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.9rem;}
#filterToggle{display:none;}
@media(max-width:900px){
  #filterToggle{display:inline-flex;}
  .filters{display:none;position:fixed;inset:0;background:var(--bone);z-index:60;overflow:auto;padding:32px;}
  .filters.open{display:block;}
  .close-filters{display:block;margin-bottom:24px;}
}

/* Timeline (about page - genuine chronological sequence) */
.timeline{border-left:1px solid var(--line);padding-left:36px;position:relative;}
.timeline-item{position:relative;padding-bottom:56px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:'';position:absolute;left:-41px;top:4px;width:9px;height:9px;background:var(--gold);border-radius:50%;}
.timeline-year{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--gold-dark);letter-spacing:.08em;}

.pagination{display:flex;gap:10px;justify-content:center;margin-top:50px;font-family:'IBM Plex Mono',monospace;font-size:.82rem;}
.pagination a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);}
.pagination a.active{background:var(--ink);color:var(--bone);border-color:var(--ink);}

/* Stockist map + directory */
#stockistMap{height:480px;width:100%;border:1px solid var(--line);z-index:1;}
.leaflet-div-icon.stockist-pin{background:none;border:none;}
.leaflet-popup-content-wrapper{border-radius:2px;box-shadow:0 18px 40px rgba(20,22,26,0.18);}
.leaflet-popup-content{margin:14px 16px;font-family:'Inter',sans-serif;}
.stockist-popup svg{width:36px;height:36px;margin-bottom:6px;}
.stockist-popup h4{font-family:'Fraunces',serif;font-size:1rem;margin:0 0 6px;color:var(--ink);}
.stockist-popup p{margin:0 0 4px;font-size:.85rem;color:var(--graphite);}
.stockist-popup a{color:var(--gold-dark);}
.stockist-popup div a{display:flex;align-items:center;gap:4px;}
.stockist-popup div svg{margin:0;width: 20px;}
.stockist-popup .stockist-links{display:flex;gap:8px;}
.stockist-links a{position:relative;}
.stockist-links a::after{content:attr(data-title);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:6px 10px;border-radius:6px;background:rgba(20,22,26,.95);color:#fff;font-size:.8rem;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .1s ease,visibility .1s ease;z-index:10;}
.stockist-links a:hover::after{opacity:1;visibility:visible;}
.stockist-links a::before{content:'';position:absolute;left:50%;bottom:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(20,22,26,.95);opacity:0;visibility:hidden;transition:opacity .1s ease,visibility .1s ease;z-index:10;}
.stockist-links a:hover::before{opacity:1;visibility:visible;}

.stockist-table{width:100%;border-collapse:collapse;margin-top:6px;min-width:640px;}
.stockist-table th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pewter);padding:10px 14px;border-bottom:1px solid var(--line);}
.stockist-table td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.9rem;}
.stockist-row{cursor:pointer;transition:background .15s;}
.stockist-row:hover{background:var(--parchment);}
.stockist-row.active{background:var(--parchment);box-shadow:inset 3px 0 0 var(--gold);}
.stockist-icon-sm svg{width:38px;height:38px;display:block;}

.stockist-detail{display:flex;gap:26px;align-items:flex-start;background:var(--parchment);border:1px solid var(--line);padding:28px;margin-top:30px;flex-wrap:wrap;}
.stockist-detail-icon svg{width:76px;height:76px;flex-shrink:0;}


.product-media {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  height: 290px;
  width: auto;
}
.product-media .product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  object-fit: contain;
}
.product-media .front { transform: rotateY(0deg); z-index: 2; }
.product-media .back { transform: rotateY(180deg); z-index: 1; }
.product-media.has-flip:hover .front { transform: rotateY(-180deg); }
.product-media.has-flip:hover .back { transform: rotateY(0deg); }

.category-img-wrapper,
.metta-img-wrapper { 
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  height: 250px;
  width: auto;
  margin-bottom: 18px;
}
.category-img,
.metta-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  object-fit: contain;
 }

.homecard-img-wrapper {
  overflow: hidden;
  perspective: 1200px;
  height: 360px;
  width: fit-content;
  margin: 0 auto 18px;
}
.homecard-img {
  inset: 0;
  height: 100%;
  backface-visibility: hidden;
  object-fit: contain;
}

.secure-delivery-card-group {margin-bottom: 40px;margin-top: 30px;display: flex;flex-wrap: wrap; gap: 18px;}
.secure-delivery-card {background: rgba(255,255,255,0.85);padding: 24px;border-radius: 8px;border: 1px solid rgba(0,0,0,0.05);display: flex;align-items: center;justify-content: space-between;gap: 20px;flex: 1 0 calc((100% - 40px) / 2);min-width: 300px;min-height: 150px;text-align: left;}
.compliance-card-group {margin-bottom: 40px;margin-top: 30px;display: flex;flex-wrap: wrap;gap: 18px;}
.compliance-card {background: var(--parchment);padding: 18px 24px;border-radius: 8px;border: 1px solid rgba(0,0,0,0.03);display: flex;align-items: center;justify-content: space-between;gap: 16px;flex: 1 0 calc((100% - 40px) / 3);min-width: 300px;text-align: left;}