/* ============================================================
   EBENEZER STONE — modern monochrome
   Black & white · Archivo / Inter · motion-forward
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* monochrome palette */
  --black:#071922;
  --ink:#071922;          /* logo navy — the site's "black" */
  --ink-2:#0e2b3a;
  --paper:#ffffff;        /* page background */
  --paper-2:#f3f3f3;      /* alt light section */
  --cream:#ffffff;        /* accent/text on dark = white */
  --text:#071922;
  --muted:#787878;        /* secondary text on light */
  --muted-d:#9a9a9a;      /* secondary text on dark */
  --stone:#8c8c8c;
  --gold:#ffffff;         /* "accent" on dark backgrounds */
  --gold-dp:#071922;      /* "accent" on light backgrounds */
  --line:rgba(7,25,34,.14);
  --line-d:rgba(255,255,255,.16);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --base:clamp(1.0625rem, 1.0rem + 0.28vw, 1.2rem);
  --maxw:1840px;
  --maxw-text:1040px;     /* prose / centered copy */
  --radius:0px;           /* sharp, modern */
  --shadow:0 30px 70px -40px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:var(--base); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;   /* clip (not hidden) — hidden creates a scroll container that breaks position:sticky */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.02; margin:0 0 .4em; color:var(--ink); letter-spacing:-.025em; }
h1{ font-size:clamp(2.8rem,8vw,6.5rem); font-weight:900; }
h2{ font-size:clamp(2rem,4.6vw,3.6rem); }
h3{ font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
strong{ font-weight:700; }
::selection{ background:var(--ink); color:#fff; }
:focus-visible{ outline:2.5px solid var(--ink); outline-offset:3px; }
.section--ink :focus-visible{ outline-color:#fff; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.2rem,5vw,3.5rem); }
.wrap-narrow{ max-width:var(--maxw-text); }
.section{ padding-block:clamp(4rem,10vw,8rem); position:relative; }
.section--ink{ background:var(--ink); color:#e6e6e6; }
.section--ink h1,.section--ink h2,.section--ink h3{ color:#fff; }
.section--paper2{ background:var(--paper-2); }
.center{ text-align:center; }

.eyebrow{
  display:inline-block; font-family:var(--sans); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; font-weight:600; color:var(--muted); margin:0 0 1.2rem;
}
.section--ink .eyebrow{ color:var(--muted-d); }
.lede{ font-size:clamp(1.08rem,1.7vw,1.3rem); color:var(--muted); line-height:1.6; font-weight:400; }
.section--ink .lede{ color:#bdbdbd; }
.rule{ width:60px; height:2px; background:var(--ink); border:0; margin:1.5rem 0; }
.section--ink .rule{ background:#fff; }
.center .rule{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.7em; cursor:pointer; position:relative; overflow:hidden;
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 2.1em; color:var(--fg); border:1.5px solid var(--bd); border-radius:var(--radius);
  background:var(--bg); transition:color .4s var(--ease), border-color .4s var(--ease);
  z-index:0;
}
.btn::before{ content:""; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); z-index:-1; }
.btn:hover{ color:var(--ink); border-color:#fff; }
.btn:hover::before{ transform:scaleX(1); }
.btn::after{ content:"→"; font-size:1em; transform:translateX(0); transition:transform .4s var(--ease); }
.btn:hover::after{ transform:translateX(5px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:#fff; border-color:var(--ink); }
.btn--gold{ --bg:#fff; --fg:var(--ink); --bd:#fff; }
.btn--gold::before{ background:var(--ink); }
.btn--gold:hover{ color:#fff; border-color:#fff; }
/* on dark sections + hero (incl. video hero): white text, visible white border */
.section--ink .btn--ghost, .hero .btn--ghost{ --fg:#fff; --bd:rgba(255,255,255,.8); }
.section--ink .btn--ghost::before, .hero .btn--ghost::before{ background:#fff; }
.section--ink .btn--ghost:hover, .hero .btn--ghost:hover{ color:var(--ink); border-color:#fff; }
.btn-sm{ font-size:.68rem; padding:.7em 1.3em; }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--paper); padding:1.1rem 0; }
.marquee--ink{ background:var(--ink); border-color:var(--line-d); }
.marquee-track{ display:flex; gap:2.5rem; width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,3vw,2.2rem);
  letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); white-space:nowrap; display:flex; align-items:center; gap:2.5rem;
}
.marquee span::after{ content:"✦"; font-size:.7em; color:var(--muted); }
.marquee--ink span{ color:#fff; }
.marquee--ink span::after{ color:var(--muted-d); }
.marquee--outline span{ color:transparent; -webkit-text-stroke:1.4px var(--ink); }
.marquee--ink.marquee--outline span{ -webkit-text-stroke-color:#fff; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.announce{
  background:var(--ink); color:#fff; text-align:center;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; padding:.65rem 1rem;
}
.announce .scrip{ color:var(--muted-d); }

.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(0px); border-bottom:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.site-header.scrolled{ box-shadow:0 1px 0 var(--line), 0 14px 30px -24px rgba(0,0,0,.5); }
.site-header.header-hidden{ transform:translateY(-100%); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:78px; }
.brand{ display:flex; align-items:center; gap:.75rem; }
.brand img{ width:40px; height:40px; transition:transform .5s var(--ease); }
.brand:hover img{ transform:rotate(-8deg) scale(1.05); }
.brand .brand-name{ font-family:var(--display); font-weight:800; font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); line-height:1; }
.brand .brand-name small{ display:block; font-family:var(--sans); font-size:.55rem; letter-spacing:.3em; color:var(--muted); margin-top:4px; font-weight:600; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.6vw,2.6rem); }
.nav a{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink); position:relative; padding:.5rem 0; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--ink); transition:right .35s var(--ease); }
.nav a:hover::after, .nav a.is-active::after{ right:0; }
.nav a:not(.is-active){ color:var(--muted); transition:color .25s; }
.nav a:hover{ color:var(--ink); }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span{ display:block; width:28px; height:2px; background:var(--ink); margin:6px 0; transition:.3s var(--ease); }

@media (max-width:860px){
  .nav-toggle{ display:block; position:relative; z-index:70; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,360px); z-index:60;
    flex-direction:column; align-items:flex-start; justify-content:center; gap:.4rem;
    background:var(--paper); padding:2rem 2.4rem; transform:translateX(100%);
    transition:transform .45s var(--ease); border-left:1px solid var(--line);
  }
  .nav a{ font-family:var(--display); font-weight:800; font-size:1.7rem; letter-spacing:-.01em; text-transform:none; padding:.5rem 0; color:var(--ink); }
  .nav a::after{ display:none; }
  .nav a.is-active{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }
  body.menu-open .nav{ transform:translateX(0); }
  body.menu-open::before{ content:""; position:fixed; inset:0; background:rgba(7,25,34,.62); z-index:40; animation:fade .35s var(--ease); }
  body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  .announce{ font-size:.58rem; letter-spacing:.16em; padding:.55rem .8rem; }
  .site-header .wrap{ min-height:64px; }
  .brand img{ width:36px; height:36px; }
  .brand .brand-name{ font-size:.9rem; }
}
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; background:var(--ink); color:#fff; text-align:center; overflow:hidden; padding-block:clamp(5rem,13vw,10rem); }
.hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.08), transparent 55%); pointer-events:none; }
.hero::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:4px 4px; opacity:.5; pointer-events:none; }
.hero .wrap{ position:relative; z-index:1; }
.hero .wrap>*{ opacity:0; animation:riseIn .9s var(--ease-io) forwards; }
.hero .wrap>*:nth-child(1){ animation-delay:.05s; } .hero .wrap>*:nth-child(2){ animation-delay:.18s; }
.hero .wrap>*:nth-child(3){ animation-delay:.30s; } .hero .wrap>*:nth-child(4){ animation-delay:.42s; }
.hero .wrap>*:nth-child(5){ animation-delay:.54s; }
.hero img.crest{ width:clamp(96px,13vw,150px); margin:0 auto 1.8rem; filter:drop-shadow(0 12px 30px rgba(0,0,0,.6)); animation:riseIn .9s var(--ease-io) forwards, float 6s ease-in-out 1s infinite; }
.hero h1{ color:#fff; margin-bottom:.25em; }
.hero .ref{ font-family:var(--sans); font-size:.8rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted-d); margin-top:.6em; }
.hero .cta-row{ margin-top:2.6rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.scroll-cue{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); width:1px; height:44px; background:linear-gradient(var(--muted-d),transparent); overflow:hidden; z-index:1; }
.scroll-cue::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:#fff; animation:cue 2s var(--ease) infinite; }
@keyframes riseIn{ from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none} }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes cue{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(250%) } }
@media (prefers-reduced-motion:reduce){ .hero .wrap>*,.hero img.crest{ opacity:1; animation:none; } .scroll-cue{ display:none; } }

/* --- Hero background video --- */
.hero--video{ min-height:92vh; min-height:92svh; display:flex; align-items:center; padding-block:clamp(4rem,8vw,6rem); }
.hero--video::before,.hero--video::after{ display:none; }       /* drop dot/vignette over video */
.hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.hero-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:0; pointer-events:none;
  width:100vw; height:56.25vw;            /* 16:9 cover (wide viewports) */
  min-height:100vh; min-width:177.78vh;   /* 16:9 cover (tall viewports) */
}
.hero-video::after{ content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 95% at 50% 42%, rgba(7,25,34,.30), rgba(7,25,34,.66) 75%),
    linear-gradient(180deg, rgba(7,25,34,.50) 0%, rgba(7,25,34,.45) 45%, rgba(7,25,34,.78) 100%); }
.hero--video .wrap{ position:relative; z-index:2; }
.hero--video .eyebrow{ color:#eaeaea; }
.hero--video .scroll-cue{ z-index:2; }
@media (prefers-reduced-motion:reduce){ .hero-video iframe{ display:none; } }  /* fallback: static black hero */

/* ============================================================
   SPLIT / PILLARS
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--rev .split-media{ order:2; }
@media (max-width:800px){ .split{ grid-template-columns:1fr; } .split--rev .split-media{ order:0; } }
.split-media img{ width:100%; filter:grayscale(1) contrast(1.04); transition:filter .7s var(--ease); }
.split-media:hover img{ filter:grayscale(0); }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.section--ink .pillars{ border-color:var(--line-d); }
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ padding:2.6rem 2rem; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.section--ink .pillar{ border-color:var(--line-d); }
.pillar:last-child{ border-right:0; }
@media (min-width:761px){ .pillar:nth-child(3n){ border-right:0; } }
.pillar .ic{ width:40px; height:40px; margin:0 0 1.2rem; color:var(--ink); }
.section--ink .pillar .ic{ color:#fff; }
.pillar h3{ font-size:1.25rem; text-transform:uppercase; letter-spacing:.01em; }
.pillar p{ color:var(--muted); font-size:.97rem; margin:0; }
.section--ink .pillar p{ color:#b0b0b0; }
.pillar .num{ font-family:var(--display); font-weight:800; font-size:.8rem; letter-spacing:.2em; color:var(--muted); display:block; margin-bottom:1rem; }

/* ============================================================
   PRODUCT GRID / CARDS
   ============================================================ */
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
@media (max-width:680px){ .product-grid{ grid-template-columns:1fr; } }
/* home collection: all four products in one row */
#collection .product-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ #collection .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #collection .product-grid{ grid-template-columns:1fr; } }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .35s var(--ease); }
.card:hover{ border-color:var(--ink); }
.card .ph{ background:#eee; overflow:hidden; position:relative; }
.card .ph img{ width:100%; filter:grayscale(1) contrast(1.05); transition:filter .6s var(--ease), transform .8s var(--ease); }
.card:hover .ph img{ filter:grayscale(0); transform:scale(1.05); }
.card-body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.45rem; }
.card .pname{ font-family:var(--display); font-size:1.16rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.card .pmeta{ font-size:.8rem; letter-spacing:.02em; color:var(--muted); }
.card .swatches{ display:flex; gap:.45rem; margin-top:.3rem; }
.card .swatch{ width:15px; height:15px; border-radius:50%; border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.card .pfoot{ display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line); }
.card .price{ font-size:1rem; font-weight:600; color:var(--ink); }
.card .price .tag-soft{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.card .pfoot a{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink); display:inline-flex; gap:.4em; align-items:center; }
.card .pfoot a::after{ content:"→"; transition:transform .3s var(--ease); }
.card .pfoot a:hover::after{ transform:translateX(4px); }

.note-strip{ border:1px solid var(--ink); background:var(--ink); color:#fff; border-radius:var(--radius); padding:1.1rem 1.4rem; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; }
.note-strip strong{ font-weight:700; }

/* ============================================================
   ABOUT — prose / beliefs
   ============================================================ */
.prose{ font-size:1.08rem; line-height:1.8; }
.prose h2{ margin-top:2.4rem; }
.prose .scripture-block{ border-left:2px solid var(--ink); padding:.4rem 0 .4rem 1.6rem; margin:2rem 0; font-family:var(--display); font-weight:700; font-style:normal; color:var(--ink); font-size:1.35rem; line-height:1.3; letter-spacing:-.01em; }
.subhead{ font-family:var(--display); color:var(--ink); font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; margin:2.4rem 0 .5rem; }

.beliefs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line-d); }
@media (max-width:720px){ .beliefs{ grid-template-columns:1fr; } }
.beliefs li{ position:relative; padding:1.1rem 1rem 1.1rem 2.4rem; border-bottom:1px solid var(--line-d); }
.beliefs li::before{ content:"+"; position:absolute; left:.4rem; top:1rem; color:#fff; font-family:var(--display); font-weight:800; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,1.8rem); }
@media (max-width:880px){ .quotes{ grid-template-columns:1fr; } }
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem 1.9rem; position:relative; transition:transform .4s var(--ease), border-color .35s; }
.quote:hover{ transform:translateY(-6px); border-color:var(--ink); }
.quote .stars{ color:var(--ink); letter-spacing:.12em; font-size:.9rem; }
.quote blockquote{ margin:1rem 0 1.4rem; }
.quote p{ font-family:var(--display); font-weight:600; font-style:normal; color:var(--ink); font-size:1.12rem; line-height:1.4; letter-spacing:-.01em; }
.quote .who{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); }
@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink); margin-bottom:.5rem; }
.field input,.field textarea{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--text); background:var(--paper); border:0; border-bottom:1.5px solid var(--line); border-radius:0; padding:.7rem .1rem; transition:border-color .25s var(--ease); }
.field input:focus,.field textarea:focus{ border-color:var(--ink); outline:none; }
.field textarea{ min-height:130px; resize:vertical; }
.contact-list{ list-style:none; padding:0; margin:0; }
.contact-list li{ display:flex; gap:1rem; align-items:flex-start; padding:1.15rem 0; border-bottom:1px solid var(--line); }
.contact-list .ic{ width:22px; height:22px; color:var(--ink); flex:none; margin-top:2px; }
.contact-list .lab{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.contact-list .val{ font-size:1.05rem; color:var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:#a8a8a8; padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:2.4rem; } }
.site-footer .brand img{ width:52px; height:52px; }
.site-footer .brand-name{ color:#fff; }
.site-footer .fscript{ font-family:var(--display); font-weight:700; color:#fff; font-size:1.05rem; margin:1.2rem 0 .3rem; letter-spacing:-.01em; }
.site-footer h4{ color:#fff; font-family:var(--sans); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:1.1rem; }
.flinks{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.flinks a{ color:#a8a8a8; font-size:.95rem; transition:color .2s, padding-left .25s var(--ease); }
.flinks a:hover{ color:#fff; padding-left:6px; }
.socials{ display:flex; gap:.7rem; margin-top:.3rem; }
.socials a{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line-d); border-radius:50%; color:#fff; transition:.3s var(--ease); }
.socials a:hover{ background:#fff; border-color:#fff; color:var(--ink); transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }
.foot-base{ border-top:1px solid var(--line-d); margin-top:2.8rem; padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.78rem; color:#7a7a7a; letter-spacing:.04em; text-transform:uppercase; }

/* ---------- Reveal on scroll (staggered) ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-io), transform .9s var(--ease-io); }
.reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; } .reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; } .reveal:nth-child(5){ transition-delay:.32s; }
.reveal:nth-child(6){ transition-delay:.4s; } .reveal:nth-child(7){ transition-delay:.48s; } .reveal:nth-child(8){ transition-delay:.56s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ============================================================
   SHOP / CART / CHECKOUT
   ============================================================ */
.site-header .wrap{ justify-content:flex-start; gap:clamp(.8rem,2vw,2rem); }
.brand{ margin-right:auto; }

.cart-link{ position:relative; display:inline-flex; align-items:center; color:var(--ink); padding:.3rem; }
.cart-link:hover{ color:var(--muted); }
.cart-link svg{ width:24px; height:24px; }
.cart-count{ position:absolute; top:-3px; right:-7px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--ink); color:#fff; font-family:var(--sans); font-size:.62rem; font-weight:700; display:grid; place-items:center;
  line-height:1; opacity:0; transform:scale(.5); transition:.25s var(--ease); }
.cart-count.has-items{ opacity:1; transform:scale(1); }

/* breadcrumb */
.crumbs{ font-size:.74rem; letter-spacing:.06em; color:var(--muted); margin-bottom:1.8rem; text-transform:uppercase; }
.crumbs a{ color:var(--muted); } .crumbs a:hover{ color:var(--ink); }
.crumbs span{ margin:0 .5em; opacity:.5; } .crumbs em{ color:var(--ink); font-style:normal; }

/* product detail */
.product{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:840px){ .product{ grid-template-columns:1fr; } }
.product-photo{ border:1px solid var(--line); background:#f3f3f3; overflow:hidden; }
.product-photo img{ width:100%; display:block; }
.product-title{ font-size:clamp(1.8rem,3.4vw,2.8rem); margin:.15em 0 .15em; }
.product-price{ font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--ink); margin:0; }
.opt-group{ margin:1.4rem 0; }
.opt-label{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink); margin-bottom:.7rem; }
.opt-hint{ color:var(--muted); letter-spacing:.02em; text-transform:none; font-weight:400; margin-left:.5rem; font-size:.78rem; }
.opt-hint.flash{ color:var(--ink); animation:flashHint .5s; }
@keyframes flashHint{ 0%,100%{opacity:1} 50%{opacity:.25} }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.03em; padding:.6em 1.05em; background:#fff; color:var(--ink); border:1.5px solid var(--line); cursor:pointer; transition:.2s var(--ease); }
.chip:hover{ border-color:var(--ink); }
.chip.is-selected{ background:var(--ink); color:#fff; border-color:var(--ink); }
.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line); }
.qty-btn{ width:42px; height:42px; background:#fff; border:0; font-size:1.2rem; line-height:1; cursor:pointer; color:var(--ink); }
.qty-btn:hover{ background:var(--paper-2); }
.qty-input{ width:46px; height:42px; text-align:center; border:0; border-inline:1.5px solid var(--line); font-family:var(--sans); font-size:1rem; }
.add-feedback{ margin:.9rem 0 0; color:var(--ink); font-weight:600; font-size:.9rem; letter-spacing:.03em; }
.product-desc{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); color:var(--muted); line-height:1.7; }
.product-meta{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.55rem; font-size:.9rem; color:var(--text); }
.product-meta strong{ color:var(--ink); font-weight:600; }

/* shop card link tweaks */
.card a.ph{ display:block; }
.card a.pname{ color:var(--ink); display:block; transition:color .2s; }
.card a.pname:hover{ color:var(--muted); }
.card-view{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink); }
.card-view:hover{ color:var(--muted); }

/* cart page */
.cart-wrap:has(.cart-summary){ display:grid; grid-template-columns:1fr minmax(280px,340px); gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (max-width:860px){ .cart-wrap:has(.cart-summary){ grid-template-columns:1fr; } }
.cart-empty{ padding:3rem 0 4rem; }
.cart-list{ display:flex; flex-direction:column; }
.cart-row{ display:grid; grid-template-columns:84px 1fr auto auto; gap:1.1rem; align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.cart-thumb img{ width:84px; height:84px; object-fit:cover; border:1px solid var(--line); background:#f3f3f3; }
.cart-name{ font-family:var(--display); font-weight:700; color:var(--ink); }
.cart-sub{ font-size:.82rem; color:var(--muted); margin:.2rem 0 .5rem; }
.cart-remove{ background:none; border:0; padding:0; color:var(--muted); font-size:.76rem; letter-spacing:.03em; text-decoration:underline; cursor:pointer; }
.cart-remove:hover{ color:var(--ink); }
.cart-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line); }
.cart-qn{ min-width:36px; text-align:center; font-weight:600; }
.cart-line{ font-family:var(--display); font-weight:700; color:var(--ink); min-width:72px; text-align:right; }
@media (max-width:560px){ .cart-row{ grid-template-columns:64px 1fr auto; } .cart-thumb img{ width:64px; height:64px; } .cart-line{ grid-column:2 / -1; text-align:left; margin-top:.2rem; } }
.cart-summary{ border:1px solid var(--ink); padding:1.6rem; background:var(--paper); }
.cart-summary h3{ margin-top:0; font-size:1.05rem; text-transform:uppercase; letter-spacing:.04em; }
.sum-row{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:.95rem; color:var(--text); }
.sum-total{ border-top:1px solid var(--line); margin-top:.4rem; padding-top:.9rem; font-family:var(--display); font-weight:700; color:var(--ink); font-size:1.15rem; }
.cart-cont{ display:block; text-align:center; margin-top:1rem; font-size:.8rem; letter-spacing:.05em; color:var(--muted); }
.cart-cont:hover{ color:var(--ink); }

/* checkout */
.checkout{ display:grid; grid-template-columns:1fr minmax(300px,380px); gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:840px){ .checkout{ grid-template-columns:1fr; } }
.checkout-form h3{ font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }
.checkout-summary{ border:1px solid var(--ink); padding:1.6rem; background:var(--paper); position:sticky; top:100px; }
.checkout-summary h3{ margin-top:0; text-transform:uppercase; letter-spacing:.04em; font-size:1.05rem; }
.co-row{ display:grid; grid-template-columns:54px 1fr auto; gap:.9rem; align-items:center; padding:.8rem 0; border-bottom:1px solid var(--line); }
.co-thumb{ position:relative; }
.co-thumb img{ width:54px; height:54px; object-fit:cover; border:1px solid var(--line); display:block; }
.co-q{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--ink); color:#fff; font-size:.66rem; font-weight:700; display:grid; place-items:center; }
.co-name{ font-size:.9rem; font-weight:600; color:var(--ink); }
.co-sub{ font-size:.76rem; color:var(--muted); }
.co-price{ font-weight:600; white-space:nowrap; }
.co-note{ font-size:.8rem; color:var(--muted); margin-top:1.1rem; line-height:1.55; }
.co-note code, .pay-secure code{ background:var(--paper-2); padding:.12em .4em; font-size:.92em; }
.pay-error{ color:#c0341d; font-size:.88rem; margin:.8rem 0 0; }
.pay-secure{ font-size:.78rem; color:var(--muted); margin:.9rem 0 0; line-height:1.5; }

/* confirmation */
.order-ref{ font-family:var(--display); font-weight:700; letter-spacing:.08em; color:#cfcfcf; }
#order-ref{ color:#fff; }

/* colour swatch selector (product page) */
.chips--swatch{ gap:.55rem; }
.swatch-chip{ width:38px; height:38px; padding:3px; border-radius:50%; border:1.5px solid var(--line); background:#fff; cursor:pointer; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.swatch-chip .sw{ display:block; width:100%; height:100%; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(7,25,34,.12); }
.swatch-chip:hover{ border-color:var(--ink); transform:translateY(-1px); }
.swatch-chip.is-selected{ border-color:var(--ink); box-shadow:0 0 0 1.5px var(--ink); transform:translateY(-1px); }
.opt-current{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); margin-left:.5rem; }

/* colour dots on shop cards */
.card-swatches{ display:flex; align-items:center; gap:.4rem; margin-top:.2rem; }
.card-swatches .dot{ width:14px; height:14px; border-radius:50%; border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.card-swatches .dot-n{ font-size:.72rem; color:var(--muted); letter-spacing:.04em; margin-left:.3rem; }

/* ============================================================
   PRODUCT CONFIGURATOR — layered viewer + weight / print / view
   ============================================================ */
.product-section .product-media{ position:sticky; top:100px; }
@media (max-width:840px){ .product-section .product-media{ position:static; } }
.viewer{ position:relative; width:100%; aspect-ratio:1/1; border:1px solid var(--line); background:#f4f2ec; overflow:hidden; }
.v-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
#v-crest{ pointer-events:none; }

.view-toggle{ display:inline-flex; margin-top:.9rem; border:1.5px solid var(--line); }
.vt-btn{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:.6em 1.5em; background:#fff; color:var(--muted); border:0; cursor:pointer; transition:.2s var(--ease); }
.vt-btn + .vt-btn{ border-left:1.5px solid var(--line); }
.vt-btn:hover{ color:var(--ink); }
.vt-btn.is-active{ background:var(--ink); color:#fff; }
.viewer-note{ font-size:.74rem; letter-spacing:.05em; color:var(--muted); margin:.75rem 0 0; }

/* print-colour swatch — ring so white/pale reads on the white chip */
.sw--ring{ box-shadow:inset 0 0 0 1px rgba(7,25,34,.28) !important; }

/* weight selector */
.chips--weight{ gap:.6rem; }
.weight-chip{ display:flex; flex-direction:column; align-items:flex-start; gap:.12rem; text-align:left; padding:.65em 1em; min-width:120px; line-height:1.2; }
.weight-chip .wc-name{ font-size:.92rem; font-weight:700; letter-spacing:.02em; }
.weight-chip .wc-sub{ font-size:.68rem; letter-spacing:.02em; color:var(--muted); text-transform:none; font-weight:500; }
.weight-chip .wc-price{ font-size:.82rem; font-weight:600; margin-top:.1rem; }
.weight-chip.is-selected .wc-sub{ color:rgba(255,255,255,.72); }

.price-from{ font-family:var(--sans); font-size:.6em; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); vertical-align:middle; }

/* feature list */
.product-feats{ list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.5rem; font-size:.88rem; color:var(--text); }
.product-feats li{ position:relative; padding-left:1.3em; line-height:1.5; }
.product-feats li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; background:var(--ink); border-radius:50%; }

/* ============================================================
   CENTERED-EMBLEM HEADER (v4) — split nav + hanging crest + fade-in
   ============================================================ */
.site-header{ overflow:visible; }
.site-header .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-content:initial; gap:1rem; min-height:74px; }

.nav-group{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.3rem); }
.nav-left{ justify-self:start; }
.header-right{ justify-self:end; display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); }
.nav-group a{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); position:relative; padding:.5rem 0; transition:color .2s; }
.nav-group a:hover{ color:var(--ink); }
.nav-group a.is-active{ color:var(--ink); }
.nav-group a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--ink); transition:right .35s var(--ease); }
.nav-group a:hover::after, .nav-group a.is-active::after{ right:0; }

/* centered crest emblem (white disc backing makes the cut-out cross read white on any bg) */
.header-emblem{ justify-self:center; position:relative; width:150px; height:54px; opacity:0; animation:emblemIn .9s var(--ease-io) .12s forwards; }
.header-emblem img{ position:absolute; left:50%; top:3px; transform:translateX(-50%); width:150px; max-width:none; height:auto;
  background:#fff; border-radius:50%; box-shadow:0 10px 26px -12px rgba(0,0,0,.4);
  transition:width .35s var(--ease), top .35s var(--ease), box-shadow .35s var(--ease); }
.site-header.scrolled .header-emblem img{ width:44px; top:50%; margin-top:-22px; box-shadow:none; }
@keyframes emblemIn{ from{ opacity:0; } to{ opacity:1; } }

/* header fade-in */
.nav-left{ animation:hdrFade .7s var(--ease-io) .2s both; }
.header-right{ animation:hdrFade .7s var(--ease-io) .32s both; }
@keyframes hdrFade{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

.nav-drawer{ display:none; }   /* desktop: use split nav, not the drawer */

@media (max-width:860px){
  .nav-left, .nav-right{ display:none; }
  .site-header .wrap{ grid-template-columns:auto 1fr auto; }
  .header-emblem{ justify-self:start; width:104px; height:50px; }
  .header-emblem img{ width:104px; }
  .header-right{ justify-self:end; }
  .nav-drawer{ display:flex; }  /* reuses the .nav mobile drawer rules */
}
@media (prefers-reduced-motion:reduce){
  .header-emblem, .nav-left, .header-right{ animation:none; opacity:1; transform:none; }
}