@import url("fonts.css");
:root{
  /* Brandbook: navy RGB 14,18,38 · royal RGB 29,42,115 · gold foil RGB 254,222,116 · sand RGB 230,206,177. Multi-page site: each page opens with its own image header; the 3D tin lives on Home and Caviar. */
  --ink:#0E1226;
  --deep:#131A3A;
  --royal:#1D2A73;
  --gold:#FEDE74;
  --gold-2:#C9A24E;
  --sand:#E6CEB1;
  --text:#EEE8DC;
  --muted:#A7A9BE;
  --line:rgba(230,206,177,.2);
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"Montserrat", "Segoe UI", Arial, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;margin:0;text-wrap:balance;overflow-wrap:break-word;font-variant-numeric:lining-nums}
h2{font-size:clamp(34px,5vw,54px);color:var(--sand)}
h3{font-size:26px;color:var(--sand)}
p{margin:0}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:500}
.lead{font-size:17px;max-width:58ch}
.muted{color:var(--muted)}
section{padding:88px 0}
.head{display:grid;gap:14px;margin-bottom:40px;max-width:680px}
@media (max-width:600px){section{padding:60px 0}.head{margin-bottom:28px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;text-decoration:none;font:500 12px var(--body);letter-spacing:.16em;text-transform:uppercase;padding:0 24px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--ink)}
.btn-gold:hover{background:var(--sand)}
.btn-line{border-color:var(--line);background:transparent;color:var(--sand)}
.btn-line:hover{border-color:var(--sand)}
.btn-sm{min-height:40px;padding:0 16px;font-size:11px}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(14,18,38,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:38px;height:38px;border-radius:50%}
.brand span{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:.16em;color:var(--sand);white-space:nowrap}
nav.links{display:flex;gap:22px;margin-left:auto}
nav.links a{text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent}
nav.links a:hover{color:var(--gold)}
nav.links a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px;flex:none}
.langs button{background:none;border:0;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.08em;padding:7px 10px;border-radius:999px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--sand);color:var(--ink)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;flex:none;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:16px;height:1px;background:var(--sand);position:relative;content:""}
.burger span::before{position:absolute;top:-5px}.burger span::after{position:absolute;top:5px}
.mnav{display:none;border-top:1px solid var(--line);background:var(--ink)}
.mnav a{display:block;padding:16px 20px;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--display);font-size:24px;color:var(--sand)}
.mnav a[aria-current="page"]{color:var(--gold)}
.site-header.open .mnav{display:block}
@media (max-width:1180px){nav.links{display:none}.langs{margin-left:auto}.burger{display:inline-flex}}
@media (max-width:560px){.brand span{display:none}.bar{gap:8px}.bar .btn-order{display:none}}

/* Page header (inner pages) */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:72px 0 64px}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,18,38,.97) 0%,rgba(14,18,38,.8) 45%,rgba(14,18,38,.25) 100%)}
.page-hero .wrap{position:relative;z-index:1;display:grid;gap:16px}
.page-hero h1{font-size:clamp(44px,6.5vw,84px);color:var(--sand)}
.crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--gold)}
@media (max-width:700px){.page-hero{padding:48px 0 44px}.page-hero::after{background:linear-gradient(180deg,rgba(14,18,38,.7),rgba(14,18,38,.95))}}

/* Home hero + tin stage */
.hero{position:relative;padding:40px 0 64px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url(../img/rings.jpg) center/cover;opacity:.16;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center}
.hero-copy{display:grid;gap:22px}
.hero h1{font-size:clamp(46px,7vw,92px);color:var(--sand);letter-spacing:.02em}
.hero h1 em{display:block;font-style:italic;font-weight:500;color:var(--gold);font-size:.42em;letter-spacing:.06em;margin-top:6px}
.stage{position:relative;display:grid;gap:18px}
.canvas-box{position:relative;aspect-ratio:1/0.92;width:100%;cursor:grab;touch-action:pan-y}
.canvas-box:active{cursor:grabbing}
.canvas-box canvas{width:100%!important;height:100%!important;display:block}
.canvas-box .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.canvas-box.no3d .fallback{display:block}
.hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.stage-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:8px}.hero{padding-top:28px}.canvas-box{aspect-ratio:1/0.8}}

/* Configurator panel */
.panel{border:1px solid var(--line);background:rgba(19,26,58,.72);padding:20px;display:grid;gap:16px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chip{border:1px solid var(--line);background:transparent;padding:10px 4px;cursor:pointer;display:grid;gap:2px;justify-items:center;border-radius:2px;transition:border-color .2s,background .2s}
.chip b{font-size:20px;font-weight:500;color:var(--sand);line-height:1.1}
.chip span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--gold);background:rgba(254,222,116,.08)}
.chip[aria-pressed="true"] b{color:var(--gold)}
.price-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.price-row .sp{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.price-row .pr{font-size:30px;font-weight:500;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums}
.price-row .pg{font-size:12px;color:var(--muted)}
.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){.panel{padding:16px}.panel-actions{grid-template-columns:1fr}}

/* Ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--deep)}
.ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker-track span{padding:16px 28px;font-family:var(--display);font-size:20px;font-style:italic;color:var(--sand);white-space:nowrap}
.ticker-track span::after{content:"✦";font-style:normal;color:var(--gold);font-size:12px;margin-left:56px;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}

/* Home teaser cards */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tile{position:relative;display:block;text-decoration:none;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/10;background:var(--deep)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,38,.05) 15%,rgba(14,18,38,.75) 55%,rgba(14,18,38,.97))}
.tile .t{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;display:grid;gap:6px}
.tile h3{font-size:34px}
.tile p{font-size:14px;color:var(--text);opacity:.85}
.tile .go{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
@media (max-width:760px){.tiles{grid-template-columns:minmax(0,1fr)}.tile{aspect-ratio:4/3}.tile h3{font-size:30px}}

/* Split blocks */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split img.frame{border:1px solid var(--line);width:100%;aspect-ratio:3/2;object-fit:cover}
.stack{display:grid;gap:16px}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:32px}}

/* Species cards */
.species{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.species article{border:1px solid var(--line);padding:28px;display:grid;gap:10px;background:var(--deep)}
.species .latin{font-style:italic;font-family:var(--display);font-size:20px;color:var(--muted)}
.species .sizes{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.species .sizes span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--sand)}
@media (max-width:700px){.species{grid-template-columns:minmax(0,1fr)}}

/* Timeline */
.tl-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.tl-nav{display:flex;gap:8px}
.tl-nav button{width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:50%;cursor:pointer;color:var(--sand);font-size:18px}
.tl-nav button:hover{border-color:var(--gold);color:var(--gold)}
.tl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,32%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--royal) transparent}
.tl article{scroll-snap-align:start;border:1px solid var(--line);background:var(--deep);padding:26px;display:grid;gap:10px;align-content:start;min-height:220px}
.tl .when{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}
.tl h3{font-size:28px}
.tl p{font-size:14px;color:var(--muted)}
@media (max-width:600px){.tl{grid-auto-columns:82%}}

/* Gift configurator */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tab{border:1px solid var(--line);background:transparent;padding:12px 18px;cursor:pointer;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-radius:999px}
.tab[aria-selected="true"]{background:var(--sand);color:var(--ink);border-color:var(--sand)}
.config{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border:1px solid var(--line);background:var(--ink)}
.config-img{position:relative;aspect-ratio:16/11;overflow:hidden;background:#0b1f44}
.config-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform 1.2s ease;transform:scale(1.04)}
.config-img img.on{opacity:1;transform:scale(1)}
.config-body{padding:32px;display:grid;gap:18px;align-content:start}
.config-body .meta{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.config-body h3{font-size:40px}
.specs{list-style:none;margin:0;padding:0;display:grid}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.specs li span:first-child{color:var(--muted)}
.specs li span:last-child{color:var(--text);text-align:right}
.tins-dots{display:flex;gap:10px;align-items:center}
.tins-dots i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b8,var(--gold) 35%,#8a6a22 100%);box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--gold-2)}
@media (max-width:900px){.config{grid-template-columns:minmax(0,1fr)}.config-body{padding:22px}.config-body h3{font-size:34px}}

/* Feature grid */
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.features article{border-top:1px solid var(--gold);padding-top:20px;display:grid;gap:8px;align-content:start}
.features b{font-family:var(--display);font-size:24px;font-weight:600;color:var(--sand);line-height:1.15}
.features p{font-size:14px;color:var(--muted)}
@media (max-width:900px){.features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
@media (max-width:480px){.features{grid-template-columns:minmax(0,1fr)}}

/* Ritual stepper */
.steps-nav{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);margin-bottom:26px}
.steps-nav button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 4px;cursor:pointer;font-family:var(--display);font-size:24px;color:var(--muted)}
.steps-nav button[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.step-panel{display:grid;gap:12px;min-height:150px}
.step-panel h3{font-size:34px}
.step-panel p{color:var(--muted);font-size:16px;max-width:46ch}
.step-ctrl{display:flex;gap:10px;margin-top:8px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{border:1px solid var(--line);padding:8px 16px;border-radius:999px;font-size:13px;color:var(--sand)}

/* Band CTA */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--deep),var(--royal));padding:56px 0}
.band .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(28px,4vw,42px)}

/* Contacts */
.buy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px}
.where{display:grid;gap:14px;align-content:start}
.card{border:1px solid var(--line);padding:22px;display:grid;gap:4px;background:var(--deep)}
.card .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.card a{color:var(--sand);text-decoration:none;font-size:19px;font-weight:500;overflow-wrap:anywhere}
.card a:hover{color:var(--gold)}
.card .muted{font-size:13px}
form{border:1px solid var(--line);padding:28px;display:grid;gap:16px;background:var(--deep)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
label{display:grid;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-width:0}
input,select,textarea{font:400 15px var(--body);color:var(--text);background:var(--ink);border:1px solid var(--line);border-radius:2px;padding:12px 14px;width:100%;min-width:0}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
.formnote{font-size:13px;color:var(--muted)}
@media (max-width:900px){.buy-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.row{grid-template-columns:minmax(0,1fr)}form{padding:20px}}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:48px 0 28px;font-size:13px;color:var(--muted);background:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot-grid h4{margin:0 0 12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
.foot-grid a{display:block;text-decoration:none;padding:4px 0}
.foot-grid a:hover{color:var(--gold)}
.foot-bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
@media (max-width:700px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker-track{animation:none}*{transition:none!important}}

/* Award hero */
.brandline{font-family:var(--display);font-size:clamp(26px,3vw,36px);color:var(--sand);letter-spacing:.06em;font-weight:500}
.hero h1.award{font-size:clamp(44px,6.4vw,86px);line-height:1;color:transparent;background:linear-gradient(180deg,#fff1b5 0%,var(--gold) 45%,var(--gold-2) 100%);-webkit-background-clip:text;background-clip:text}
.award-note{display:flex;gap:16px;align-items:center;border:1px solid rgba(254,222,116,.45);background:rgba(254,222,116,.06);padding:12px 16px 12px 12px;max-width:560px}
.award-note img{width:64px;height:64px;object-fit:cover;border-radius:2px;flex:none}
.award-note p{font-size:13px;color:var(--text);line-height:1.5}
.seal{position:absolute;right:4%;top:4%;width:132px;height:132px;z-index:2;pointer-events:none}
@media (max-width:900px){.seal{width:96px;height:96px;right:2%;top:0}}
/* Standards strip */
.stds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.std{border:1px solid var(--line);padding:20px 16px;display:grid;gap:8px;justify-items:center;text-align:center;background:var(--deep)}
.std .mark{width:72px;height:72px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--gold);font-size:18px;line-height:1.05}
.std .mark small{display:block;font-size:11px;font-family:var(--body);font-weight:500;letter-spacing:.04em}
.std p{font-size:12px;color:var(--muted)}
@media (max-width:900px){.stds{grid-template-columns:repeat(2,minmax(0,1fr))}.stds .std:last-child{grid-column:1/-1}}
/* Real photo + wholesale */
.real{border:1px solid var(--line);background:var(--deep);display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;padding:12px}
.real img{width:120px;height:120px;object-fit:cover}
.real h3{font-size:22px}.real p{font-size:13px;color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.table th{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;text-align:left;padding:12px 10px;border-bottom:1px solid var(--gold)}
.table td{padding:14px 10px;border-bottom:1px solid var(--line)}
.table td:last-child,.table th:last-child{text-align:right}
.table-box{overflow-x:auto;border:1px solid var(--line);background:var(--deep);padding:8px 14px}
/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{border-top:1px solid var(--gold);padding-top:18px;display:grid;gap:6px;align-content:start}
.stat b{font-family:var(--display);font-size:52px;font-weight:600;color:var(--gold);line-height:1}
.stat span{font-size:14px;color:var(--muted)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
/* Documents */
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.doc{display:grid;grid-template-rows:auto 1fr;text-decoration:none;border:1px solid var(--line);background:var(--deep);cursor:zoom-in;transition:border-color .2s}
.doc:hover{border-color:var(--gold)}
.doc .thumb{aspect-ratio:3/4;overflow:hidden;background:#f2f2f2}
.doc .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.doc .cap{padding:18px;display:grid;gap:6px;align-content:start}
.doc h3{font-size:22px}.doc p{font-size:12px;color:var(--muted)}
@media (max-width:900px){.docs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.docs{grid-template-columns:minmax(0,1fr)}}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,7,16,.92);display:grid;place-items:center;padding:56px 16px 16px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(900px,100%);max-height:calc(100vh - 80px);width:auto;height:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox button{position:absolute;top:12px;right:12px}
/* Shops */
.shops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.shop{border:1px solid var(--line);padding:20px;background:var(--deep);display:grid;gap:6px;align-content:start}
.shop b{font-family:var(--display);font-size:24px;font-weight:600;color:var(--sand)}
.shop span{font-size:13px;color:var(--muted)}
@media (max-width:900px){.shops{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.shops{grid-template-columns:minmax(0,1fr)}}
.real[hidden]{display:none}
@media (max-width:420px){.chips{gap:6px}.chip span{font-size:9px;letter-spacing:.04em}.chip b{font-size:18px}.hero h1.award{font-size:clamp(34px,10vw,48px)}}