/* ==========================================================================
   HILVER - premium jewellery brand UI
   Brand palette preserved: deep navy, brass/light gold, warm neutral surfaces.
   Two families only: Playfair Display (headlines) + Inter (everything else).
   All site copy is unchanged - this file only governs presentation.
   ========================================================================== */

:root{
  /* --- navy (anchored to the logo blue #0F3364 and deck navy #1B2440) --- */
  --navy-abyss: #06122A;
  --navy-deep:  #0A2247;
  --navy:       #0F3364;
  --navy-lift:  #17427C;
  --navy-ink:   #1B2440;

  /* --- brass / light gold (deck brass #B08A4E) --- */
  --brass:        #B08A4E;
  --brass-light:  #D4AF6A;
  --brass-bright: #EBD3A0;
  --brass-deep:   #8A6A34;
  --brass-line:   rgba(176,138,78,.32);
  --brass-line-2: rgba(176,138,78,.55);
  --brass-glow:   rgba(212,175,106,.28);
  /* the metallic sweep used on rules, buttons and emphasis */
  --metal: linear-gradient(115deg,#8A6A34 0%,#D4AF6A 22%,#F2E0B6 38%,#B08A4E 55%,#EBD3A0 74%,#9A7742 100%);

  /* --- warm neutral surfaces --- */
  --cream:   #FFFDF8;
  --cream-2: #F8F5EE;
  --cream-3: #F1ECE1;
  --sand:    #DAD5C6;
  --sand-2:  #C9C2AE;

  /* --- text --- */
  --ink:      #1B2440;
  --muted:    #5B5F6E;
  --on-dark:  #F2EEE4;
  --on-dark-2:#BFC6D6;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1280px;
  --pad: 56px;
  --gap: 28px;
  --section: 112px;

  --r: 3px;
  --r-lg: 6px;

  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .38s;

  --lift: 0 1px 2px rgba(11,23,48,.05), 0 12px 30px -14px rgba(11,23,48,.22);
  --lift-2: 0 2px 6px rgba(11,23,48,.08), 0 28px 60px -22px rgba(11,23,48,.34);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;   /* Playfair ships old-style figures */
}
::selection{ background:var(--brass); color:#fff; }
img,svg{ max-width:100%; display:block; }
a{ color:var(--navy); }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.14; color:var(--navy-ink); letter-spacing:-.015em; }
p{ margin:0 0 1.05rem; }
ul{ margin:0; padding:0; list-style:none; }
button,input,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding:var(--section) 0; position:relative; }
/* the type filter hides whole collection sections */
.section[hidden]{ display:none; }
.section--tint{ background:var(--cream-2); }
.section--navy{
  background:var(--navy-abyss); color:var(--on-dark);
  background-image:radial-gradient(120% 90% at 12% 0%, rgba(23,66,124,.55) 0%, transparent 62%);
}
.section--navy h2,.section--navy h3,.section--navy h4{ color:#fff; }
.section--navy .lede{ color:var(--on-dark-2); }

.skip{ position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; z-index:200; }
.skip:focus{ left:8px; top:8px; }

/* ---------- editorial devices ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin-bottom:18px;
}
.eyebrow::after{ content:""; flex:1; max-width:64px; height:1px; background:var(--metal); opacity:.8; }
.section--navy .eyebrow{ color:var(--brass-light); }

h2{ font-size:clamp(2rem,4vw,3.15rem); }
h3{ font-size:1.4rem; }
.lede{ font-size:18.5px; line-height:1.68; color:var(--muted); max-width:60ch; }

/* hairline rule with the metallic sweep */
.gold-rule{ height:1px; background:var(--metal); opacity:.55; border:0; margin:0; }

.takeaway{
  margin-top:52px; padding:26px 30px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--cream-2),var(--cream-3));
  border:1px solid var(--sand); position:relative; overflow:hidden;
}
.takeaway::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--metal); }
.takeaway b{
  display:block; font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); margin-bottom:.5rem;
}
.takeaway p{ margin:0; font-size:17px; color:var(--ink); }
.section--navy .takeaway{ background:rgba(255,255,255,.045); border-color:var(--brass-line); }
.section--navy .takeaway p{ color:var(--on-dark); }

.slide-foot{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:64px; padding-top:20px; border-top:1px solid var(--sand);
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-2);
}
.slide-foot span:first-child{ color:var(--brass); }
.section--navy .slide-foot{ border-top-color:var(--brass-line); color:rgba(191,198,214,.6); }

/* ---------- navigation ---------- */
/* The header sits above the hero in flow, so a translucent ground would blend
   with the cream page behind it. It stays solid navy and gains the hairline +
   blur + shadow once the page scrolls. */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--navy-abyss);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-head.is-stuck{
  background:rgba(6,18,42,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--brass-line); box-shadow:0 10px 40px -22px rgba(0,0,0,.9);
}
.site-head .wrap{ display:flex; align-items:center; gap:22px; min-height:74px; position:relative; }

.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; margin-right:auto; }
.brand__logo{ height:32px; width:auto; transition:transform var(--dur) var(--ease); }
.brand:hover .brand__logo{ transform:scale(1.03); }
.brand__tag{
  font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--brass-light);
  padding-left:14px; border-left:1px solid var(--brass-line-2); line-height:1.2; white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative; padding:9px 15px; text-decoration:none; border-radius:var(--r);
  font-size:14px; font-weight:500; letter-spacing:.06em; color:rgba(242,238,228,.86);
  transition:color var(--dur) var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:1px;
  background:var(--metal); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--brass-light); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0; background:transparent;
  border:1px solid var(--brass-line-2); border-radius:var(--r); cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:1px; margin:4.5px auto; background:var(--brass-light); transition:transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.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(-5.5px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:var(--r); border:1px solid transparent; overflow:hidden;
  font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* metallic gold fill */
.btn--primary{ background:var(--metal); background-size:200% 100%; background-position:0% 50%; color:#2A1E06; border-color:var(--brass-deep); }
.btn--primary:hover{ background-position:100% 50%; box-shadow:0 8px 26px -10px var(--brass-glow); transform:translateY(-1px); }

.btn--ghost{ background:transparent; color:var(--navy-ink); border-color:var(--sand-2); }
.btn--ghost:hover{ border-color:var(--brass); color:var(--brass-deep); background:rgba(176,138,78,.07); transform:translateY(-1px); }
.section--navy .btn--ghost,.hero .btn--ghost{ color:var(--on-dark); border-color:var(--brass-line-2); }
.section--navy .btn--ghost:hover,.hero .btn--ghost:hover{ color:#fff; border-color:var(--brass-light); background:rgba(176,138,78,.14); }

.btn--light{ background:var(--cream); color:var(--navy-ink); border-color:var(--cream); }
.btn--light:hover{ background:#fff; box-shadow:0 8px 26px -12px rgba(0,0,0,.55); transform:translateY(-1px); }

.btn--sm{ padding:11px 20px; font-size:10.5px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--navy-abyss); color:var(--on-dark); overflow:hidden;
  border-bottom:1px solid var(--brass-line);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 78% 42%, rgba(23,66,124,.55) 0%, transparent 60%),
             radial-gradient(70% 60% at 8% 88%, rgba(176,138,78,.16) 0%, transparent 62%);
  pointer-events:none;
}
/* slow warm light sweep - the "reflection" on the metal */
.hero::after{
  content:""; position:absolute; top:-40%; left:-30%; width:60%; height:180%;
  background:linear-gradient(100deg, transparent 0%, rgba(235,211,160,.10) 45%, rgba(235,211,160,.02) 62%, transparent 100%);
  transform:rotate(8deg); animation:sheen 14s var(--ease) infinite; pointer-events:none;
}
@keyframes sheen{ 0%{ transform:translateX(-20%) rotate(8deg); opacity:0; } 18%{ opacity:1; } 55%,100%{ transform:translateX(220%) rotate(8deg); opacity:0; } }

.hero .wrap{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,80px);
  align-items:center; padding-block:clamp(72px,9vw,124px);
}
.hero__kicker{
  display:flex; align-items:center; gap:14px;
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass-light); margin-bottom:26px;
}
.hero__kicker::before{ content:""; width:38px; height:1px; background:var(--metal); }
.hero__logo{ margin:0 0 14px; }
.hero__logo img{ width:min(430px,88%); height:auto; filter:drop-shadow(0 6px 26px rgba(0,0,0,.5)); }
.hero__sub{
  font-family:var(--serif); font-style:italic; color:var(--brass-light);
  font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.32; margin:0 0 1.35rem;
}
.hero__lead{ font-size:18px; line-height:1.72; color:var(--on-dark-2); max-width:44ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

/* Photograph and the founder price plate placed neatly below it */
.hero__art{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center;
}
.hero__frame{
  width:100%;
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--brass-line-2);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.85);
}
.hero__frame img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}

.hero__plate{
  position:relative;
  z-index:2;
  width:100%;
  max-width:420px;
  margin:0 auto;
  background:rgba(6,18,42,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--brass-line-2);
  border-radius:var(--r-lg);
  padding:22px 28px;
  text-align:center;
  box-shadow:var(--lift-2);
}
.price-plate__num{
  font-family:var(--sans); font-weight:600; font-size:clamp(1.7rem,2.6vw,2.15rem);
  line-height:1; letter-spacing:-.02em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.price-plate__lbl{ font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-2); margin-top:9px; }
.price-plate__rule{ height:1px; background:var(--brass-line); margin:16px 0; }
.price-plate__meta{ display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; margin:0; }
.price-plate__meta dt{ font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-light); }
.price-plate__meta dd{ margin:5px 0 0; font-size:12.5px; line-height:1.45; color:var(--on-dark-2); }

.scroll-hint{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding-bottom:34px; font-size:9.5px; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(191,198,214,.55);
}
.scroll-hint i{ display:block; width:1px; height:38px; background:linear-gradient(180deg,var(--brass),transparent); animation:drop 2.4s var(--ease) infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 46%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- grids ---------- */
.grid{ display:grid; gap:var(--gap); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:#fff; border:1px solid var(--sand); border-radius:var(--r-lg);
  padding:32px; box-shadow:var(--lift);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--lift-2); border-color:var(--brass-line-2); }
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--muted); }
.card p:last-child{ margin-bottom:0; }
.section--navy .card{ background:rgba(255,255,255,.05); border-color:var(--brass-line); box-shadow:none; }
.section--navy .card p{ color:var(--on-dark-2); }

/* brass diamond list */
.ticks li{ position:relative; padding-left:26px; margin-bottom:.8rem; color:var(--muted); }
.ticks li::before{
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  background:var(--metal); transform:rotate(45deg);
}
.section--navy .ticks li{ color:var(--on-dark-2); }

/* ---------- numbered feature cards (why real silver) ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.feature{
  position:relative; padding:32px 30px 30px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,var(--cream-2));
  border:1px solid var(--sand); box-shadow:var(--lift); overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--metal); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--lift-2); border-color:var(--brass-line-2); }
.feature:hover::before{ transform:scaleX(1); }
.feature__n{
  font-family:var(--serif); font-size:2.5rem; font-weight:600; line-height:1; margin-bottom:16px;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.feature p{ margin:0; font-size:16.5px; color:var(--ink); }
.section--navy .feature{ background:rgba(255,255,255,.05); border-color:var(--brass-line); box-shadow:none; }
.section--navy .feature p{ color:var(--on-dark); }

/* ---------- collection / tier cards ---------- */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:start; }
.tier{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--sand); border-radius:var(--r-lg); box-shadow:var(--lift);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tier:hover{ transform:translateY(-6px); box-shadow:var(--lift-2); border-color:var(--brass-line-2); }
.tier__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--navy-deep); }
.tier__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.tier:hover .tier__media img{ transform:scale(1.06); }
.tier__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,18,42,0) 38%, rgba(6,18,42,.85) 100%);
}
.tier__price{
  position:absolute; left:24px; bottom:20px; z-index:2;
  font-family:var(--sans); font-weight:600; font-size:2.4rem; line-height:1; letter-spacing:-.02em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:transform var(--dur) var(--ease);
}
.tier:hover .tier__price{ transform:translateY(-2px); }
.tier__price small{
  display:block; font-size:.85rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-light); -webkit-text-fill-color:var(--brass-light); margin-bottom:6px;
}
.tier__band{
  position:absolute; left:24px; top:20px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--navy-ink);
  background:var(--brass-bright); padding:6px 12px; border-radius:999px;
}
.tier__body{ padding:28px 26px 30px; display:flex; flex-direction:column; flex:1; }
.tier__name{ font-size:1.6rem; margin-bottom:18px; }
.tier ul{ flex:1; }
.tier__note{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--sand);
  font-size:10px; font-weight:600; letter-spacing:.18em; color:var(--sand-2); text-transform:uppercase;
}
.tier .btn{ margin-top:18px; align-self:flex-start; }

/* the middle tier carries slightly more weight */
.tier--featured{ border-color:var(--brass-line-2); box-shadow:0 3px 10px rgba(11,23,48,.10), 0 34px 70px -26px rgba(11,23,48,.4); }
.tier--featured .tier__media{ aspect-ratio:4/5.35; }

/* ---------- process timeline 01 -> 02 -> 03 ---------- */
.timeline{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:52px; }
/* the connector runs between the first and last dot centres (dots are 68px
   wide and left-aligned in each column, so that is 34px in from each end) */
.timeline::before{
  content:""; position:absolute; top:34px; height:1px;
  left:34px; right:calc((100% - 2 * var(--gap)) / 3 - 34px);
  background:var(--metal); opacity:.5; transform:scaleX(var(--progress,0)); transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.step{ position:relative; padding-top:0; }
.step__dot{
  position:relative; z-index:2; width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:24px;
  background:var(--cream); border:1px solid var(--brass-line-2);
  font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--brass-deep);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.section--tint .step__dot{ background:var(--cream-2); }
.step:hover .step__dot{ transform:translateY(-3px); box-shadow:0 10px 28px -12px var(--brass-glow); }
.step__num{ font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:12px; }
.step p{ color:var(--muted); margin:0; }
/* on the navy ground the light-theme muted grey fails contrast */
.section--navy .step p{ color:var(--on-dark-2); }
.section--navy .step__num{ color:var(--brass-light); }

/* ---------- audience cards ---------- */
.aud{
  position:relative; overflow:hidden; border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--sand); box-shadow:var(--lift); display:flex; flex-direction:column;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.aud:hover{ transform:translateY(-4px); box-shadow:var(--lift-2); border-color:var(--brass-line-2); }
.aud__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--navy-deep); }
.aud__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.aud:hover .aud__media img{ transform:scale(1.05); }
.aud__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,18,42,.05),rgba(6,18,42,.5)); }
.aud__body{ padding:26px 26px 28px; flex:1; display:flex; flex-direction:column; }
.aud h3{ font-size:1.3rem; margin-bottom:.55rem; }
.aud__body > p{ color:var(--muted); font-size:16px; }

/* ---------- pull quote / pitch ---------- */
.quote{
  position:relative; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.35rem,2.7vw,2.15rem); line-height:1.36; color:#fff; margin:0; max-width:24ch;
}
.quote--center{ margin-inline:auto; text-align:center; max-width:30ch; }
.quote-mark{
  font-family:var(--serif); font-size:clamp(4rem,9vw,7rem); line-height:.7; display:block;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:6px;
}
.pitch-label{ font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-light); margin-bottom:14px; }
.pitch-block + .pitch-block{ margin-top:44px; padding-top:44px; border-top:1px solid var(--brass-line); }
.pitch-block .quote{ max-width:40ch; }
.pitch-block--sm .quote{ font-size:clamp(1.1rem,1.9vw,1.4rem); }

/* ---------- editorial figure (story / booth) ---------- */
.figure{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift-2); }
.figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.figure::after{ content:""; position:absolute; inset:0; border:1px solid var(--brass-line-2); border-radius:var(--r-lg); pointer-events:none; }
.figure--offset::before{ content:""; position:absolute; inset:auto; }
.media-stack{ position:relative; }
.media-stack::before{
  content:""; position:absolute; inset:26px -22px -26px 22px;
  border:1px solid var(--brass-line); border-radius:var(--r-lg); pointer-events:none;
}
.media-stack .figure{ position:relative; z-index:1; }

/* ---------- budget: editorial financial breakdown ---------- */
.ledger{ border-top:1px solid var(--sand); margin-top:44px; }
.ledger__row--head{ padding:14px 4px; }
.ledger__row--head:hover{ background:none; padding-left:4px; }
.ledger__row--head > *{
  font-family:var(--sans) !important; font-size:10px !important; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sand-2) !important;
}
.ledger__row{
  display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:baseline;
  padding:22px 4px; border-bottom:1px solid var(--sand);
  transition:background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.ledger__row:hover{ background:rgba(176,138,78,.05); padding-left:12px; }
.ledger__item{ font-family:var(--serif); font-size:1.22rem; color:var(--navy-ink); }
.ledger__qty{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sand-2); }
.ledger__cost{ font-size:1.05rem; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; min-width:9ch; text-align:right; }
.ledger__row--total{ border-bottom:0; padding-top:30px; }
.ledger__row--total .ledger__item{ font-size:1.05rem; font-weight:600; font-family:var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--brass-deep); }
.ledger__row--total .ledger__cost{
  font-family:var(--sans); font-size:1.8rem; font-weight:600; letter-spacing:-.02em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- booth checklist ---------- */
.booth-list li{
  position:relative; padding:16px 0 16px 30px; border-bottom:1px solid var(--brass-line);
  color:var(--on-dark-2); transition:padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}
.booth-list li:last-child{ border-bottom:0; }
.booth-list li::before{ content:""; position:absolute; left:4px; top:1.5em; width:7px; height:7px; background:var(--metal); transform:rotate(45deg); }
.booth-list li:hover{ padding-left:38px; color:#fff; }

/* ---------- learning finale ---------- */
.learn-list{ counter-reset:l; }
.learn-list li{
  counter-increment:l; position:relative; padding:26px 0 26px 76px;
  border-bottom:1px solid var(--sand);
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.6rem); color:var(--navy-ink); line-height:1.35;
  transition:padding-left var(--dur) var(--ease);
}
.learn-list li:last-child{ border-bottom:0; }
.learn-list li::before{
  content:"0" counter(l); position:absolute; left:0; top:32px;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--brass);
}
.learn-list li:hover{ padding-left:88px; }
.section--navy .learn-list li{ color:#fff; border-bottom-color:var(--brass-line); }

/* ---------- catalogue toolbar ---------- */
.toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  padding:24px 26px; background:#fff; border:1px solid var(--sand);
  border-radius:var(--r-lg); box-shadow:var(--lift); margin-bottom:38px;
}
.toolbar__group{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.toolbar__label{ font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-2); }
.search{
  flex:1; min-width:210px; padding:11px 2px; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--sand); border-radius:0; font-size:15px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search::placeholder{ color:var(--sand-2); }
.search:focus{ outline:none; border-bottom-color:var(--brass); box-shadow:0 1px 0 0 var(--brass); }

.chip{
  padding:9px 17px; background:var(--cream); color:var(--muted);
  border:1px solid var(--sand); border-radius:999px;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip:hover{ color:var(--brass-deep); border-color:var(--brass); background:rgba(176,138,78,.07); }
.chip[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }

.count-line{ font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-2); margin-bottom:26px; }
.count-line b{ color:var(--brass-deep); }

/* ---------- product cards ---------- */
.catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:34px var(--gap); }

.piece{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--sand); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.piece:hover{ transform:translateY(-5px); box-shadow:var(--lift-2); border-color:var(--brass-line-2); }
/* the whole card opens the piece; the buttons inside opt out */
.piece[data-href]{ cursor:pointer; }
.piece[data-href] button{ cursor:pointer; }
.piece__link{ color:inherit; text-decoration:none; }
.piece__link:hover{ color:var(--brass-deep); }
.piece:focus-within{ border-color:var(--brass-line-2); box-shadow:var(--lift-2); }
.piece__art{
  position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden;
  background:var(--navy-deep) url('../img/velvet.jpg') center/cover no-repeat;
  color:var(--brass-bright);
}
.piece__art::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 38%, rgba(235,211,160,.16), transparent 70%),
             linear-gradient(180deg, rgba(6,18,42,.18), rgba(6,18,42,.62));
}
.piece__art svg{
  position:relative; z-index:1; width:54%; height:54%;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
  transition:transform .6s var(--ease);
}
.piece:hover .piece__art svg{ transform:scale(1.07); }
.piece__sku{
  position:absolute; left:14px; top:14px; z-index:2;
  font-size:9.5px; font-weight:600; letter-spacing:.16em; color:var(--brass-bright);
  background:rgba(6,18,42,.6); border:1px solid var(--brass-line); padding:4px 9px; border-radius:999px;
}
.piece__go{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  background:var(--brass-bright); color:var(--navy-ink); font-size:15px; line-height:1;
  opacity:0; transform:translate(6px,6px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.piece:hover .piece__go{ opacity:1; transform:translate(0,0); }
.piece__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.piece__band{ font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.piece__name{ font-size:1.22rem; margin:9px 0 8px; }
.piece__desc{ font-size:14.5px; line-height:1.55; color:var(--muted); margin-bottom:16px; }
.piece__optlabel{ font-size:9.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--sand-2); margin-bottom:8px; }
.piece__opts{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.opt{
  padding:5px 12px; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:var(--cream); color:var(--muted); border:1px solid var(--sand); border-radius:999px; cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.opt:hover{ color:var(--brass-deep); border-color:var(--brass); }
.opt[aria-pressed="true"]{ background:var(--metal); border-color:var(--brass-deep); color:#2A1E06; }
/* Price on its own line, then a full-width button. Wider prices (Rs. 1,500)
   used to wrap while Rs. 500 did not, so rows looked mismatched; stacking is
   consistent at every width and gives a larger tap target on touch. */
.piece__foot{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--sand);
  display:flex; flex-direction:column; align-items:stretch; gap:13px;
}
.piece__foot .btn{ width:100%; white-space:nowrap; padding:12px 14px; }
.piece__foot .piece__price{ align-self:flex-start; }
.piece__price{
  font-size:1.25rem; font-weight:600; letter-spacing:-.01em; color:var(--navy-ink);
  white-space:nowrap; font-variant-numeric:tabular-nums;
  transition:color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.piece:hover .piece__price{ color:var(--brass-deep); transform:scale(1.04); transform-origin:left; }

.empty{ grid-column:1/-1; padding:72px 20px; text-align:center; color:var(--muted); border:1px dashed var(--sand-2); border-radius:var(--r-lg); }

/* ---------- shop collections (catalog.html#studs, #rings) ----------
   Real shop photography, so the tile is the photograph: no velvet plate
   behind it and no line art, just the piece as the shop shot it. Shared by
   every collection grid - see assets/js/collection.js. */
.coll-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:30px var(--gap); }

.coll{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--sand); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--lift);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.coll:hover{ transform:translateY(-5px); box-shadow:var(--lift-2); border-color:var(--brass-line-2); }

.coll__shot{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:zoom-in;
  aspect-ratio:1/1; overflow:hidden; background:var(--navy-abyss); line-height:0;
}
.coll__shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.coll:hover .coll__shot img{ transform:scale(1.06); }
.coll__shot:focus-visible{ outline:2px solid var(--brass); outline-offset:-4px; }

.coll__sku{
  position:absolute; left:12px; top:12px;
  font-size:9.5px; font-weight:600; letter-spacing:.16em; color:var(--brass-bright);
  background:rgba(6,18,42,.66); border:1px solid var(--brass-line); padding:4px 9px; border-radius:999px;
}
.coll__zoom{
  position:absolute; right:12px; bottom:12px;
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--brass-bright); color:var(--navy-ink); font-size:17px; line-height:1;
  opacity:0; transform:translate(5px,5px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.coll:hover .coll__zoom,
.coll__shot:focus-visible .coll__zoom{ opacity:1; transform:translate(0,0); }

.coll__body{ display:flex; flex-direction:column; gap:9px; padding:18px 20px 20px; flex:1; }
.coll__name{ margin:0; font-family:var(--serif); font-size:1.06rem; font-weight:600; line-height:1.25; }
.coll__desc{
  margin:0; font-size:13px; line-height:1.55; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.coll__foot{ display:flex; flex-direction:column; align-items:stretch; gap:11px; margin-top:auto; padding-top:10px; }
.coll__foot .piece__price{ font-size:1.18rem; }
.coll__foot .btn{ width:100%; text-align:center; }
.coll:hover .coll__foot .piece__price{ color:var(--brass-deep); }

.chip__n{ opacity:.6; font-variant-numeric:tabular-nums; }

.coll-src{ margin:22px 0 0; font-size:12.5px; color:var(--muted); }
.coll-src a{ color:var(--brass-deep); }

/* ---------- collection lightbox ---------- */
/* above the sticky header (100), below the toast (150) */
.lb{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; }
.lb[hidden]{ display:none; }
.lb__scrim{ position:absolute; inset:0; background:rgba(6,18,42,.82); backdrop-filter:blur(3px); }
body.is-boxed{ overflow:hidden; }

.lb__panel{
  position:relative; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr);
  width:min(880px,100%); max-height:calc(100vh - 48px); overflow:auto;
  background:var(--cream); border:1px solid var(--brass-line); border-radius:var(--r-lg); box-shadow:var(--lift-2);
}
.lb__fig{ background:var(--navy-abyss); line-height:0; }
.lb__fig img{ width:100%; height:100%; max-height:calc(100vh - 48px); object-fit:cover; }

.lb__body{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:34px 34px 30px; }
.lb__name{ margin:0; font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1.2; }
.lb__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:0; }
.lb__price small{ font-size:12px; color:var(--muted); }
.lb__desc{ margin:0; font-size:14.5px; line-height:1.65; color:var(--muted); }

.lb__close{
  position:absolute; right:10px; top:10px; z-index:2;
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--brass-line); background:rgba(255,253,248,.9);
  color:var(--navy-ink); font-size:22px; line-height:1; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lb__close:hover{ background:var(--navy); color:var(--brass-bright); }

.lb__nav{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:8px; }
.lb__step{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--sand); background:#fff; color:var(--navy-ink); font-size:15px; cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lb__step:hover:not(:disabled){ border-color:var(--brass); color:var(--brass-deep); }
.lb__step:disabled{ opacity:.35; cursor:default; }
.lb__pos{ font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-2); font-variant-numeric:tabular-nums; }

@media (max-width:720px){
  .lb{ padding:0; }
  .lb__panel{ grid-template-columns:1fr; width:100%; max-height:100vh; border-radius:0; border:0; }
  .lb__fig img{ max-height:52vh; }
  .lb__body{ padding:24px 22px 28px; }
}

/* ---------- product detail (product.html?id=HV-xxx) ---------- */
.pd-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:40px;
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.pd-crumb a{ color:var(--muted); text-decoration:none; transition:color var(--dur) var(--ease); }
.pd-crumb a:hover{ color:var(--brass-deep); }
.pd-crumb span[aria-hidden]{ color:var(--sand-2); }
.pd-crumb > span:last-child{ color:var(--brass-deep); }

.pd{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.pd__art{ border-radius:var(--r-lg); border:1px solid var(--sand); }
.pd__art svg{ width:50%; height:50%; }
.pd__name{ font-size:clamp(1.9rem,3.4vw,2.75rem); margin:.6rem 0 1rem; }
.pd__price{
  font-size:2rem; font-weight:600; letter-spacing:-.02em; margin:0 0 1.25rem;
  font-variant-numeric:tabular-nums;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pd__desc{ font-size:18px; line-height:1.65; color:var(--muted); max-width:46ch; }
.pd-opts{ margin:28px 0 0; }
.pd__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 40px; }

.pd__spec{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px; margin:0;
  padding-top:28px; border-top:1px solid var(--sand);
}
.pd__spec dt{
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sand-2); margin-bottom:6px;
}
.pd__spec dd{ margin:0; font-size:16px; color:var(--navy-ink); font-weight:500; }
.pd__tiernote{ margin:28px 0 0; font-size:16px; color:var(--muted); font-style:italic; font-family:var(--serif); }

.pd-missing{ max-width:56ch; }
.pd-missing h1{ font-size:clamp(2rem,4vw,3rem); margin:.4rem 0 1rem; }
.pd-missing .lede{ margin-bottom:32px; }
.pd-missing b{ font-family:var(--sans); color:var(--brass-deep); }

@media (max-width:900px){
  .pd{ grid-template-columns:1fr; }
  .pd__art{ max-width:460px; }
}
@media (max-width:620px){
  .pd__spec{ grid-template-columns:1fr; gap:16px; }
  .pd__actions .btn{ width:100%; }
}

/* ---------- sales tracker: a jewellery ledger ---------- */
.catalog-layout{ display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start; }

.tracker{
  position:sticky; top:96px; overflow:hidden;
  scroll-margin-top:110px;   /* adding a piece scrolls here; clear the header */
  background:var(--navy-abyss); color:var(--on-dark);
  border:1px solid var(--brass-line-2); border-radius:var(--r-lg);
  box-shadow:var(--lift-2);
}
.tracker::before{ content:""; display:block; height:2px; background:var(--metal); }
.tracker__head{ padding:24px 26px 18px; border-bottom:1px solid var(--brass-line); }
.tracker__head .eyebrow{ color:var(--brass-light); margin-bottom:10px; }
.tracker__head h2{ font-size:1.45rem; color:#fff; }
.tracker__head p{ margin:.5rem 0 0; font-size:13px; line-height:1.5; color:var(--on-dark-2); }
.tracker__list{ max-height:340px; overflow-y:auto; }
.tracker__row{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:14px 26px; border-bottom:1px solid rgba(176,138,78,.14); font-size:14px;
}
/* the line that just changed, flashed once so it is easy to spot */
.tracker__row.is-new{ animation:trackerFlash 1.5s var(--ease); }
@keyframes trackerFlash{
  0%   { background:rgba(212,175,106,.30); }
  100% { background:transparent; }
}
.tracker__row b{ display:block; font-weight:500; color:#fff; font-size:14px; }
.tracker__row small{ color:rgba(191,198,214,.7); font-size:10.5px; letter-spacing:.1em; }
.tracker__row .amt{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--brass-light); }
.tracker__empty{ padding:34px 26px; text-align:center; color:rgba(191,198,214,.65); font-size:14px; }
.qty{ display:flex; align-items:center; gap:8px; }
.qty button{
  width:26px; height:26px; background:transparent; color:var(--on-dark-2);
  border:1px solid var(--brass-line-2); border-radius:var(--r); cursor:pointer; line-height:1;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.qty button:hover{ color:var(--navy-ink); background:var(--brass-bright); border-color:var(--brass-bright); }
.qty span{ font-variant-numeric:tabular-nums; min-width:18px; text-align:center; font-size:14px; }

.tracker__totals{ padding:22px 26px; background:rgba(255,255,255,.04); border-top:1px solid var(--brass-line); }
.trow{ display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:.6rem; }
.trow span:first-child{ color:var(--on-dark-2); }
.trow span:last-child{ font-variant-numeric:tabular-nums; font-weight:600; color:#fff; }
.trow--total{ margin:16px 0 0; padding-top:16px; border-top:1px solid var(--brass-line); align-items:baseline; }
.trow--total span:first-child{ font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); }
.trow--total span:last-child{
  font-size:1.75rem; font-weight:600; letter-spacing:-.02em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tracker__actions{ display:flex; gap:12px; padding:18px 26px; }
/* the tracker is a dark panel inside a light section, so its buttons need the
   dark-ground treatment explicitly */
.tracker .btn--ghost{ color:var(--on-dark); border-color:var(--brass-line-2); }
.tracker .btn--ghost:hover:not([disabled]){ color:#fff; border-color:var(--brass-light); background:rgba(176,138,78,.16); }
.tracker .btn--ghost[disabled]{ color:rgba(191,198,214,.5); border-color:rgba(176,138,78,.25); }
.tracker__actions .btn{ flex:1; }

/* ---------- calculator ---------- */
.calc-layout{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.field{ margin-bottom:24px; }
.field label{ display:block; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-2); margin-bottom:9px; }
.field .hint{ display:block; margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--sand-2); text-transform:none; letter-spacing:0; font-weight:400; }
.input-wrap{ position:relative; display:flex; align-items:center; }
.input-wrap .pre,.input-wrap .post{ position:absolute; font-size:14px; color:var(--sand-2); pointer-events:none; }
.input-wrap .pre{ left:0; }
.input-wrap .post{ right:0; }
input[type="number"],input[type="text"],input[type="date"],select{
  width:100%; padding:12px 2px; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--sand); border-radius:0;
  font-size:17px; font-variant-numeric:tabular-nums;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
select{ font-variant-numeric:normal; }
.input-wrap input{ padding-left:34px; }
.input-wrap input.has-post{ padding-right:34px; }
input:focus,select:focus{ outline:none; border-bottom-color:var(--brass); box-shadow:0 1px 0 0 var(--brass); }

.readout{
  position:relative; overflow:hidden; padding:36px;
  background:var(--navy-abyss); color:var(--on-dark);
  border:1px solid var(--brass-line-2); border-radius:var(--r-lg); box-shadow:var(--lift-2);
}
.readout::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--metal); }
.readout h3{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-light); margin-bottom:24px; }
.readout .trow span:first-child{ color:var(--on-dark-2); }
.readout .trow span:last-child{ color:#fff; }
.readout .trow--total{ border-top-color:var(--brass-line); }
.readout .trow--total span:first-child{ color:var(--on-dark-2); }
/* must restate the metal fill: ".readout .trow span:last-child" above sets a
   flat colour at the same specificity and would otherwise win */
.readout .trow--total span:last-child{
  font-size:2.1rem; background:var(--metal);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.readout__note{ margin:24px 0 0; font-size:12.5px; color:rgba(191,198,214,.7); line-height:1.6; }

.rate-stamp{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline; position:relative;
  padding:22px 26px; background:linear-gradient(180deg,#fff,var(--cream-2));
  border:1px solid var(--sand); border-radius:var(--r-lg); margin-bottom:38px; box-shadow:var(--lift);
}
.rate-stamp::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--metal); }
.rate-stamp b{ font-size:1.35rem; font-weight:600; color:var(--brass-deep); font-variant-numeric:tabular-nums; }
.rate-stamp span{ font-size:14px; color:var(--muted); }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--sand); border-radius:var(--r-lg); background:#fff; box-shadow:var(--lift); }
table{ width:100%; border-collapse:collapse; min-width:540px; }
th,td{ padding:17px 22px; text-align:left; border-bottom:1px solid var(--cream-3); font-size:15px; }
th{ font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); background:var(--cream-2); border-bottom:1px solid var(--sand); }
td{ color:var(--muted); }
td b{ color:var(--navy-ink); font-weight:600; font-family:var(--serif); font-size:1.05rem; }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
tbody tr{ transition:background var(--dur) var(--ease); }
tbody tr:hover{ background:var(--cream-2); }
tbody tr:last-child td{ border-bottom:0; }
tfoot td{ font-weight:600; color:var(--brass-deep); background:var(--cream-2); border-top:1px solid var(--sand); }
td.pos{ color:#1E7A5F; font-weight:600; }
td.neg{ color:#A6402F; font-weight:600; }

/* ---------- footer ---------- */
.site-foot{
  background:var(--navy-abyss); color:var(--on-dark-2); padding:88px 0 30px;
  background-image:radial-gradient(90% 80% at 10% 0%, rgba(23,66,124,.4) 0%, transparent 60%);
  border-top:1px solid var(--brass-line);
}
.site-foot h4{ color:#fff; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px; }
.site-foot a{ color:var(--on-dark-2); text-decoration:none; font-size:14.5px; transition:color var(--dur) var(--ease); }
.site-foot a:hover{ color:var(--brass-light); }
.site-foot li{ margin-bottom:.65rem; font-size:14.5px; }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:44px; }
.foot-brand__logo{ height:62px; width:auto; }
.foot-brand p{ font-size:14.5px; line-height:1.65; max-width:34ch; margin-top:20px; color:rgba(191,198,214,.72); }
.thanks-logo{ height:104px; width:auto; margin:0 auto; }
.foot-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  margin-top:60px; padding-top:26px; border-top:1px solid var(--brass-line);
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(191,198,214,.45);
}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,180%);
  background:var(--navy-abyss); color:#fff; border:1px solid var(--brass-line-2);
  border-radius:var(--r-lg); padding:14px 26px; font-size:14px; z-index:150;
  box-shadow:var(--lift-2); transition:transform var(--dur) var(--ease); pointer-events:none;
}
.toast.is-on{ transform:translate(-50%,0); }

/* ---------- scroll reveal ---------- */
.fade-in-up{ opacity:0; transform:translateY(26px); }
.fade-in-up.visible{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }
.fade-in-up.visible.d1{ transition-delay:.09s; }
.fade-in-up.visible.d2{ transition-delay:.18s; }
.fade-in-up.visible.d3{ transition-delay:.27s; }

/* ==========================================================================
   RESPONSIVE - each breakpoint recomposes rather than shrinking
   ========================================================================== */

/* large desktop */
@media (min-width:1600px){
  :root{ --wrap:1400px; --section:132px; }
}

/* laptop */
@media (max-width:1180px){
  :root{ --pad:40px; --section:96px; }
  .catalog-layout{ grid-template-columns:1fr 300px; gap:32px; }
  .hero .wrap{ gap:40px; }
}

/* tablet landscape */
@media (max-width:1024px){
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .tier--featured .tier__media{ aspect-ratio:4/5; }
  .tier:last-child{ grid-column:1/-1; }
  .tier:last-child .tier__media{ aspect-ratio:16/7; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--3 > *:last-child:nth-child(3){ grid-column:1/-1; }
}

/* tablet portrait */
@media (max-width:900px){
  :root{ --section:80px; --pad:32px; }
  .hero .wrap{ grid-template-columns:1fr; padding-block:64px 84px; }
  .hero__art{ max-width:560px; margin-inline:auto; }
  .catalog-layout,.calc-layout{ grid-template-columns:1fr; gap:40px; }
  .tracker{ position:static; }
  .timeline{ grid-template-columns:1fr; gap:0; }
  .timeline::before{ left:34px; right:auto; top:10%; bottom:10%; width:1px; height:auto;
    transform:scaleY(var(--progress,0)); transform-origin:top; }
  .step{ display:grid; grid-template-columns:68px 1fr; gap:24px; padding-bottom:36px; }
  .step__dot{ margin-bottom:0; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}

/* mobile portrait */
@media (max-width:760px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:0; padding:10px 32px 20px; background:rgba(6,18,42,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--brass-line); display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:15px 2px; border-bottom:1px solid rgba(176,138,78,.16); }
  .nav a::after{ left:2px; right:2px; bottom:8px; }
  .brand__tag{ display:none; }
  .brand__logo{ height:28px; }
}

@media (max-width:620px){
  :root{ --section:64px; --pad:20px; --gap:20px; }
  .grid--2,.grid--3,.feature-grid,.tiers{ grid-template-columns:1fr; }
  .grid--3 > *:last-child:nth-child(3){ grid-column:auto; }
  .tier:last-child .tier__media,.tier--featured .tier__media{ aspect-ratio:4/5; }
  .catalog-grid{ grid-template-columns:1fr; gap:26px; }
  .coll-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  .coll__body{ padding:14px 15px 16px; }
  .coll__desc{ -webkit-line-clamp:2; }
  .card,.feature{ padding:26px 22px; }
  .readout{ padding:26px 22px; }
  .toolbar{ padding:20px; gap:14px; }
  .slide-foot{ flex-direction:column; align-items:flex-start; gap:8px; }
  .foot-grid{ grid-template-columns:1fr; gap:30px; }
  .hero__plate{ width:100%; margin:0 auto; padding:20px; }
  .media-stack::before{ display:none; }
  .ledger__row{ grid-template-columns:1fr auto; row-gap:6px; }
  .ledger__qty{ grid-column:1; }
  .learn-list li{ padding-left:0; padding-top:44px; }
  .learn-list li::before{ top:18px; }
  .learn-list li:hover{ padding-left:0; }
  .btn{ padding:14px 24px; }
}

/* ---------- print ---------- */
@media print{
  .site-head,.site-foot,.toolbar,.tracker__actions,.nav-toggle,.hero__cta,
  .toast,.count-line,.scroll-hint,.piece__go{ display:none !important; }
  body{ background:#fff; color:#111; }
  .hero,.section--navy,.tracker,.readout{ background:#fff !important; color:#111 !important; }
  .hero::before,.hero::after,.section--navy{ background-image:none !important; }
  .section--navy h2,.section--navy h3,.tracker__head h2,.tracker__row b,.trow span:last-child{ color:#111 !important; }
  .trow--total span:last-child,.tier__price,.ledger__row--total .ledger__cost{
    background:none !important; -webkit-text-fill-color:#111 !important; color:#111 !important;
  }
  .section{ padding:0; }
  .fade-in-up{ opacity:1 !important; transform:none !important; }
  .card,.tracker,.piece,.readout,.table-wrap,.tier{ box-shadow:none; break-inside:avoid; }
  .piece__sku{ background:transparent; color:#444; border-color:#bbb; }
  a{ color:#111; }
}

@media (prefers-reduced-motion:reduce){
  .tracker__row.is-new{ animation:none; }
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .fade-in-up{ opacity:1; transform:none; }
  .timeline::before{ transform:none; }
}