/* ============================================================
   ABRAF GOLD — shared design system  (forest green + beige)
   Used by every page. World-class, animated, video-ready.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700&display=swap");

:root{
  --green-950:#0B1310; --green-900:#111C17; --green-800:#18271F; --green-700:#22392E;
  --green-line:rgba(227,201,136,.18);
  --beige:#F4F0E6; --beige-2:#EAE3D2; --beige-3:#DFD5BD;
  --ink:#1E2520; --ink-2:#5F685F;
  --gold:#C9A14A; --gold-2:#E3C988; --gold-dim:#8F7434;
  --serif:"Cormorant Garamond","Didot",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tr:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--beige);line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
/* one uniform content width across nav, every section, grids and footer
   so all left/right edges line up down the whole page */
.wrap{max-width:1280px;margin:0 auto;padding:0 26px}
.wrap-wide{max-width:1280px;margin:0 auto;padding:0 26px}
@media(max-width:640px){.wrap,.wrap-wide{padding:0 18px}}
h1,h2,h3,.serif{font-family:var(--serif)}

/* ---------- PRELOADER ---------- */
#preloader{position:fixed;inset:0;z-index:3000;background:var(--green-950);display:flex;align-items:center;justify-content:center;transition:opacity .9s var(--tr),visibility .9s}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
body.loading{overflow:hidden}
.pl-inner{width:min(560px,86vw);text-align:center}
.pl-logo{height:52px;width:auto;margin:0 auto 30px;filter:drop-shadow(0 8px 28px rgba(201,161,74,.35))}
.pl-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(227,201,136,.22);box-shadow:0 40px 110px rgba(0,0,0,.55)}
.pl-frame img{width:100%;height:auto;display:block;clip-path:inset(0 100% 0 0)}
.pl-frame .ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;filter:grayscale(1);clip-path:none;z-index:-1}
.pl-edge{position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent,var(--gold-2),transparent);box-shadow:0 0 22px 4px rgba(227,201,136,.55)}
.pl-count{font-family:var(--serif);font-size:clamp(2.4rem,7vw,3.6rem);color:var(--gold-2);margin-top:30px;line-height:1;font-variant-numeric:tabular-nums}
.pl-tag{font-size:.62rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:#9DB0A2;margin-top:14px;margin-left:.42em}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--green-950);color:#9DB0A2;font-size:.7rem;letter-spacing:.05em;text-align:center;padding:8px 16px}
.topbar b{color:var(--gold-2);font-weight:600}

/* ---------- NAV ---------- */
nav.site{position:sticky;top:0;z-index:1000;background:rgba(8,27,18,.86);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--green-line)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:0 26px;height:60px}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;gap:26px;flex:1;justify-content:center}
.nav-links a{font-size:.78rem;font-weight:500;letter-spacing:.04em;color:#D6DED6;position:relative;transition:color .25s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--gold-2);transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--gold-2)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-acts{display:flex;gap:10px;align-items:center}
.nav-btn{font-size:.72rem;font-weight:600;padding:8px 16px;border-radius:980px;white-space:nowrap;transition:all .25s}
.nav-btn.ghost{color:var(--gold-2);border:1px solid rgba(227,201,136,.4)}
.nav-btn.ghost:hover{background:rgba(227,201,136,.1)}
.nav-btn.solid{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505}
.nav-btn.solid:hover{transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px}
.burger span{width:22px;height:1.7px;background:var(--gold-2);display:block;transition:.3s}
@media(max-width:1080px){
  .nav-inner{justify-content:space-between}
  .nav-acts{margin-left:auto}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(8,27,18,.98);backdrop-filter:blur(20px);flex-direction:column;padding:22px 26px 30px;gap:20px;border-bottom:1px solid var(--green-line)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.05rem}
  .burger{display:flex;margin-left:2px}
  .nav-acts .nav-btn.ghost{display:none}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;font-weight:600;padding:14px 30px;border-radius:980px;transition:all .3s var(--tr);border:0;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .65s var(--tr)}
.btn:hover::after{left:130%}
.btn-gold{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505;box-shadow:0 8px 26px rgba(201,161,74,.32)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(201,161,74,.46)}
.btn-ghost{background:transparent;color:var(--gold-2);border:1px solid rgba(227,201,136,.4)}
.btn-ghost:hover{background:rgba(227,201,136,.1)}
.btn-green{background:#0F5132;color:var(--beige)}
.btn-green:hover{background:#0B4029;transform:translateY(-2px)}

/* ---------- HERO (video-ready) ---------- */
.hero{background:var(--green-950);color:#fff;position:relative;overflow:hidden;min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:72px 0 48px}
.hero.tall{min-height:80vh}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.75)}
.hero-media img{animation:kenburns 34s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(8,27,18,.96) 0%,rgba(8,27,18,.84) 44%,rgba(10,32,22,.55) 100%)}
.hero .wrap,.hero .wrap-wide{position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:auto -25% -60% -25%;height:120%;z-index:1;background:radial-gradient(ellipse at 50% 100%,rgba(201,161,74,.2),transparent 66%);pointer-events:none}
.kicker{font-size:.7rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-2);margin-bottom:24px;display:flex;align-items:center;gap:16px}
.kicker::before{content:"";width:40px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(2.8rem,6.4vw,5rem);font-weight:600;letter-spacing:.005em;line-height:1.03;background:linear-gradient(180deg,#FBF8F0 32%,var(--gold-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;max-width:900px}
.hero p.sub{font-size:1.08rem;color:#B9C4B9;max-width:520px;margin-top:22px}
.hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* ---------- SECTIONS ---------- */
section{padding:76px 0}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim);text-align:center;margin-bottom:16px}
.eyebrow::before{content:"";display:block;width:34px;height:1px;background:var(--gold);margin:0 auto 16px}
h2.title{font-family:var(--serif);font-size:clamp(2.2rem,4.8vw,3.6rem);font-weight:600;letter-spacing:.005em;text-align:center;line-height:1.05;color:var(--ink)}
p.lede{font-size:clamp(1rem,1.9vw,1.18rem);color:var(--ink-2);text-align:center;max-width:660px;margin:18px auto 0}
.on-dark{background:var(--green-900);color:#fff}
.on-dark h2.title{color:var(--beige)}
.on-dark p.lede{color:#A9B7AB}
.on-dark .eyebrow{color:var(--gold-2)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--tr),transform .9s var(--tr)}
.reveal.in{opacity:1;transform:none}
.section-cta{text-align:center;margin-top:46px}
.link-arrow{font-size:.95rem;font-weight:600;color:var(--gold-dim);display:inline-flex;align-items:center;gap:7px}
.link-arrow:hover{text-decoration:underline}

/* rounded card bands */
.band{width:calc(100% - 28px);max-width:1720px;margin:14px auto;border-radius:32px;overflow:hidden}
@media(max-width:640px){.band{width:calc(100% - 16px);border-radius:22px}}

/* ---------- LIVE RATE BOARD ---------- */
.board{background:linear-gradient(172deg,#0E2A1E,#0A2016);border:1px solid rgba(227,201,136,.28);border-radius:22px;overflow:hidden;box-shadow:0 34px 90px rgba(4,14,9,.5)}
.board-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--green-line)}
.board-head .t{display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.24em;color:var(--beige)}
.dot{width:7px;height:7px;border-radius:50%;background:#6FCF97;box-shadow:0 0 8px #6FCF97;animation:pulse 2s infinite}
.dot.amber{background:var(--gold);box-shadow:0 0 8px var(--gold)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.citysw{display:flex;background:rgba(0,0,0,.25);border:1px solid var(--green-line);border-radius:980px;padding:3px}
.citysw button{font-size:.62rem;font-weight:700;letter-spacing:.1em;color:#8FA093;background:transparent;border:0;padding:5px 13px;border-radius:980px;transition:.25s;text-transform:uppercase}
.citysw button.on{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505}
.board-sub{display:flex;justify-content:space-between;padding:10px 24px;font-size:.58rem;letter-spacing:.18em;color:#6E7F71;border-bottom:1px solid var(--green-line)}
.rate-row{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;border-bottom:1px solid rgba(227,201,136,.07)}
.rate-row:last-child{border-bottom:0}
.rate-row .nm{font-size:.84rem;font-weight:700;letter-spacing:.1em;color:var(--beige)}
.rate-row .ds{font-size:.58rem;letter-spacing:.16em;color:#6E7F71;margin-top:2px}
.rate-row .pr{font-family:var(--serif);font-size:1.72rem;color:var(--gold-2);font-weight:500;text-align:right;line-height:1}
.rate-row .pg{font-size:.56rem;letter-spacing:.14em;color:#6E7F71;text-align:right;margin-top:3px}
.board-foot{padding:11px 24px;font-size:.58rem;letter-spacing:.1em;color:#9A8A55;border-top:1px solid var(--green-line);line-height:1.7}
.rates-note{font-size:.62rem;letter-spacing:.1em;color:#7E8C80;text-align:center;margin-top:16px;text-transform:uppercase}

/* ---------- PRODUCT / COLLECTION CARDS ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)} .g2{grid-template-columns:1fr}}
@media(max-width:520px){.g3,.g4{grid-template-columns:1fr}}
.prod{background:#FDFBF6;border-radius:22px;overflow:hidden;border:1px solid var(--beige-3);transition:transform .3s var(--tr),box-shadow .45s var(--tr);display:flex;flex-direction:column;transform-style:preserve-3d}
.prod:hover{box-shadow:0 26px 60px rgba(30,37,32,.14)}
.prod .ph{position:relative;background:linear-gradient(172deg,#F6F1E4,#EBE2CC);aspect-ratio:1;overflow:hidden}
.prod .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--tr)}
.prod:hover .ph img{transform:scale(1.06)}
.prod .flag{position:absolute;top:14px;left:14px;font-size:.54rem;font-weight:700;letter-spacing:.2em;color:var(--beige);background:var(--green-800);padding:5px 11px;border-radius:980px;text-transform:uppercase;z-index:2}
.prod .info{padding:22px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:.98rem;font-weight:600;font-family:var(--sans)}
.prod .meta{font-size:.62rem;letter-spacing:.18em;color:var(--ink-2);text-transform:uppercase;margin-top:4px}
.prod .price{font-size:1.12rem;font-weight:700;margin-top:12px;font-variant-numeric:tabular-nums}
.prod .price.live{color:var(--gold-dim);font-size:.9rem;letter-spacing:.05em}
.prod a.go{font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--gold-dim);margin-top:14px;display:inline-flex;gap:6px;transition:gap .3s}
.prod a.go:hover{gap:11px}
.col-card{position:relative;border-radius:24px;overflow:hidden;background:var(--green-900);min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:34px 30px;color:#fff;transition:transform .3s var(--tr);transform-style:preserve-3d}
.col-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 1.2s var(--tr)}
.col-card:hover img{transform:scale(1.05)}
.col-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(8,27,18,.9) 100%)}
.col-card .inner{position:relative;z-index:2}
.col-card .k{font-size:.6rem;letter-spacing:.32em;color:var(--gold-2);text-transform:uppercase}
.col-card h3{font-size:1.5rem;font-weight:700;margin-top:6px;color:#fff;font-family:var(--serif)}
.col-card .go{display:inline-flex;gap:7px;font-size:.74rem;font-weight:700;color:var(--gold-2);margin-top:14px;letter-spacing:.16em}

/* ---------- SPLIT (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:44px}}
.split-media{border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(8,27,18,.22);position:relative}
.split-media img,.split-media video{width:100%;height:100%;object-fit:cover;display:block}
.split.person .split-media{background:linear-gradient(160deg,#0F5132,#0B4029);box-shadow:0 40px 90px rgba(9,53,35,.28)}
.split.person .split-media img{mix-blend-mode:normal;object-fit:contain;padding:0}
.split h2{font-family:var(--serif);font-size:clamp(2rem,4.2vw,3rem);font-weight:600;line-height:1.08;color:var(--ink)}
.on-dark .split h2{color:var(--beige)}
.split .eyebrow{text-align:left}.split .eyebrow::before{margin:0 0 16px}
.split p{color:var(--ink-2);font-size:1.02rem;margin-top:18px}
.on-dark .split p{color:#A9B7AB}
.feat-list{list-style:none;margin-top:24px}
.feat-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--beige-3);font-size:.95rem;align-items:flex-start}
.on-dark .feat-list li{border-color:var(--green-line);color:#D6DCD2}
.feat-list .tick{width:21px;height:21px;border-radius:6px;flex-shrink:0;margin-top:1px;background:linear-gradient(135deg,#E0BD6D,#B08A37);display:flex;align-items:center;justify-content:center}
.feat-list .tick svg{width:11px;height:11px;stroke:#1B1505;stroke-width:3;fill:none}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:rgba(255,255,255,.045);border:1px solid var(--green-line);border-radius:20px;padding:32px 26px}
.on-light .step{background:var(--beige-2);border-color:var(--beige-3)}
.step .n{font-family:var(--serif);font-size:2.4rem;color:var(--gold-2);line-height:1}
.step h3{font-size:1.02rem;font-weight:600;margin:14px 0 8px;font-family:var(--sans);color:var(--beige)}
.on-light .step h3{color:var(--ink)}
.step p{font-size:.85rem;color:#A9B7AB}
.on-light .step p{color:var(--ink-2)}

/* ---------- STAT STRIP ---------- */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--green-line);border-bottom:1px solid var(--green-line)}
@media(max-width:760px){.statstrip{grid-template-columns:repeat(2,1fr)}}
.statstrip .cell{padding:30px 18px;text-align:center;border-left:1px solid var(--green-line)}
.statstrip .cell:first-child{border-left:0}
.statstrip .n{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--gold-2);line-height:1}
.statstrip .l{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:#9DB0A2;margin-top:8px}

/* ---------- CALCULATOR ---------- */
.calc-card{max-width:760px;margin:52px auto 0;background:rgba(255,255,255,.045);border:1px solid rgba(227,201,136,.28);border-radius:26px;padding:42px 40px;backdrop-filter:blur(8px)}
@media(max-width:560px){.calc-card{padding:30px 22px}}
.calc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:680px){.calc-row{grid-template-columns:1fr}}
.field label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.22em;color:#9A8A55;margin-bottom:8px;text-transform:uppercase}
.field input,.field select{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(227,201,136,.2);border-radius:13px;color:var(--beige);font-size:.98rem;padding:13px 16px;outline:none;font-family:inherit;transition:border .25s;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C9A14A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field select option{color:#1E2520}
.field input:focus,.field select:focus{border-color:var(--gold)}
.calc-out{text-align:center;margin-top:28px;padding-top:28px;border-top:1px solid rgba(227,201,136,.16)}
.calc-out .lbl{font-size:.6rem;letter-spacing:.26em;color:#9A8A55;text-transform:uppercase}
.calc-out .val{font-family:var(--serif);font-size:clamp(2.2rem,5.6vw,3.2rem);color:var(--gold-2);margin-top:8px;line-height:1;min-height:1.1em}
.calc-out .note{font-size:.64rem;color:#6E7F71;margin-top:14px;letter-spacing:.08em}

/* ---------- WHATSAPP WIDGET ---------- */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:1800;width:58px;height:58px;border-radius:50%;border:0;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 38px rgba(18,80,45,.45);transition:transform .3s var(--tr)}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:30px;height:30px;fill:#fff}
.wa-menu{position:fixed;right:22px;bottom:92px;z-index:1800;width:300px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(8,27,18,.35);transform:translateY(14px) scale(.97);opacity:0;pointer-events:none;transition:transform .35s var(--tr),opacity .35s var(--tr)}
.wa-menu.open{transform:none;opacity:1;pointer-events:auto}
.wa-head{background:var(--green-900);color:var(--beige);padding:18px 20px}
.wa-head b{font-size:.92rem;display:block}
.wa-head span{font-size:.7rem;color:#9DB0A2}
.wa-menu a{display:flex;align-items:center;gap:13px;padding:15px 20px;border-bottom:1px solid var(--beige-2);font-size:.86rem;font-weight:600;color:var(--ink);transition:background .25s}
.wa-menu a:last-child{border-bottom:0}
.wa-menu a:hover{background:var(--beige)}
.wa-menu a .ico{width:34px;height:34px;border-radius:10px;background:var(--beige-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.wa-menu a small{display:block;font-size:.68rem;color:var(--ink-2);font-weight:400;margin-top:1px}
@media(max-width:640px){.wa-menu{right:14px;left:14px;width:auto}.wa-fab{right:14px;bottom:14px}}

/* ---------- AI CHATBOT (Riya) ---------- */
.riya-fab{position:fixed;right:22px;bottom:90px;z-index:1750;display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505;border:0;border-radius:980px;padding:11px 18px 11px 12px;
  font-size:.82rem;font-weight:700;box-shadow:0 14px 38px rgba(201,161,74,.45);transition:transform .3s var(--tr)}
.riya-fab:hover{transform:translateY(-2px)}
.riya-fab .av{width:34px;height:34px;border-radius:50%;background:var(--green-900);color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem;font-weight:700}
.riya-fab .pulse{position:absolute;top:8px;left:10px;width:9px;height:9px;border-radius:50%;background:#6FCF97;box-shadow:0 0 0 0 rgba(111,207,151,.6);animation:riyaPulse 2s infinite}
@keyframes riyaPulse{0%{box-shadow:0 0 0 0 rgba(111,207,151,.6)}70%{box-shadow:0 0 0 8px rgba(111,207,151,0)}100%{box-shadow:0 0 0 0 rgba(111,207,151,0)}}
@media(max-width:640px){.riya-fab{right:14px;bottom:82px}.riya-fab span.lbl{display:none}}
.riya-win{position:fixed;right:22px;bottom:22px;z-index:1900;width:min(380px,94vw);height:min(600px,80vh);background:var(--beige);
  border-radius:22px;overflow:hidden;display:none;flex-direction:column;box-shadow:0 40px 100px rgba(8,27,18,.4);border:1px solid var(--beige-3)}
.riya-win.open{display:flex;animation:riyaIn .35s var(--tr)}
@keyframes riyaIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:640px){.riya-win{right:8px;left:8px;width:auto;bottom:8px;height:86vh}}
.riya-head{background:linear-gradient(135deg,var(--green-900),var(--green-800));color:var(--beige);padding:16px 18px;display:flex;align-items:center;gap:12px}
.riya-head .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.3rem;font-weight:700}
.riya-head b{font-size:.98rem;display:block}
.riya-head span{font-size:.68rem;color:#9DB0A2;display:flex;align-items:center;gap:6px}
.riya-head .on{width:7px;height:7px;border-radius:50%;background:#6FCF97;box-shadow:0 0 6px #6FCF97}
.riya-head button{margin-left:auto;background:none;border:0;color:var(--beige);font-size:1.2rem;opacity:.8}
.riya-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#FBF8F0,var(--beige))}
.riya-msg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:.86rem;line-height:1.5;white-space:pre-wrap}
.riya-msg.bot{background:#fff;border:1px solid var(--beige-3);color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px}
.riya-msg.me{background:var(--green-800);color:var(--beige);align-self:flex-end;border-bottom-right-radius:5px}
.riya-msg.bot a{color:var(--gold-dim);font-weight:600}
.riya-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--beige-3);border-radius:16px}
.riya-typing span{width:6px;height:6px;border-radius:50%;background:var(--gold-dim);animation:riyaDot 1.2s infinite}
.riya-typing span:nth-child(2){animation-delay:.2s}.riya-typing span:nth-child(3){animation-delay:.4s}
@keyframes riyaDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.riya-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px}
.riya-chips button{background:#fff;border:1px solid var(--gold);color:var(--gold-dim);font-size:.76rem;font-weight:600;
  padding:8px 14px;border-radius:980px;transition:all .2s;font-family:inherit}
.riya-chips button:hover{background:var(--gold);color:#1B1505}
.riya-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--beige-3);background:var(--beige)}
.riya-input input{flex:1;border:1px solid var(--beige-3);border-radius:980px;padding:11px 16px;font-size:.86rem;outline:none;font-family:inherit;background:#fff}
.riya-input input:focus{border-color:var(--gold)}
.riya-input button{background:var(--green-800);color:var(--beige);border:0;border-radius:50%;width:40px;height:40px;flex-shrink:0;font-size:1rem}
.riya-note{font-size:.6rem;color:var(--ink-2);text-align:center;padding:0 14px 10px}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:22px}
.lb.show{display:flex}
.lb-veil{position:absolute;inset:0;background:rgba(8,27,18,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s var(--tr)}
.lb.in .lb-veil{opacity:1}
.lb-box{position:relative;z-index:2;max-width:min(480px,92vw);transform:translateY(26px) scale(.97);opacity:0;transition:transform .55s var(--tr),opacity .55s var(--tr)}
.lb.in .lb-box{transform:none;opacity:1}
.lb-box img{width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:18px;box-shadow:0 50px 120px rgba(0,0,0,.55)}
.lb-x{position:absolute;top:-16px;right:-16px;width:38px;height:38px;border-radius:50%;border:0;background:var(--beige);color:var(--green-900);font-size:1.05rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s}
.lb-x:hover{transform:rotate(90deg)}
.lb-ctas{display:flex;gap:10px;margin-top:14px}
.lb-ctas a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:14px 10px;border-radius:10px;transition:transform .25s}
.lb-ctas a:hover{transform:translateY(-2px)}
.lb-ctas .wa{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505}
.lb-ctas .em{background:var(--beige);color:var(--green-900)}

/* ---------- FOOTER ---------- */
footer.site{background:var(--green-950);color:#7E8C80;padding:76px 0 40px;font-size:.82rem}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:40px}
@media(max-width:980px){.f-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.f-grid{grid-template-columns:1fr 1fr}}
.f-grid img{height:40px;width:auto;margin-bottom:18px}
.f-about{font-size:.8rem;color:#6E7F71;max-width:260px}
.f-grid h4{color:var(--beige);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;margin-bottom:18px}
.f-grid a{display:block;margin-bottom:11px;color:#7E8C80;transition:color .25s}
.f-grid a:hover{color:var(--gold-2)}
.f-certs{border-top:1px solid var(--green-line);margin-top:56px;padding-top:30px;display:flex;justify-content:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap}
.f-certs span{font-size:.6rem;font-weight:700;letter-spacing:.24em;color:#6E7F71;border:1px solid var(--green-line);padding:8px 16px;border-radius:980px;text-transform:uppercase}
.f-bottom{margin-top:34px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.7rem;color:#52645A}
.f-bottom a{color:#7E8C80;margin-left:18px}
.f-bottom a:hover{color:var(--gold-2)}

/* logo chip so the white-bg wordmark sits cleanly on dark bars */
nav.site .nav-logo{background:none;display:inline-flex;line-height:0;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
nav.site .nav-logo img{height:38px}
footer.site .f-grid img{background:none;height:52px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
/* preloader logo sits transparent on the film — no white chip */
#preloader .pl-logo{background:none;border-radius:0;padding:0}
.riya-fab .av,.riya-head .av{font-family:var(--serif)}

/* ---------- RIYA PHOTO AVATAR ---------- */
.riya-fab .av,.riya-head .av{overflow:hidden;flex:none;border:1.5px solid var(--gold-2)}
.riya-fab .av img,.riya-head .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ---------- PRELOADER v2 (gold logo) ---------- */
.pl-logo.xl{height:clamp(120px,22vw,190px);margin-bottom:6px;animation:plGlow 2.4s ease-in-out infinite}
@keyframes plGlow{0%,100%{filter:drop-shadow(0 6px 24px rgba(201,161,74,.25))}50%{filter:drop-shadow(0 10px 44px rgba(227,201,136,.6))}}
.pl-bar{width:min(320px,70vw);height:3px;border-radius:99px;background:rgba(227,201,136,.14);margin:30px auto 18px;overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#B08A37,#E3C988);box-shadow:0 0 14px rgba(227,201,136,.7)}

/* ---------- CARD ALIGNMENT (all pages) ---------- */
.grid{align-items:stretch}
.prod{display:flex;flex-direction:column;height:100%}
.prod .info{display:flex;flex-direction:column;flex:1}
.prod .info .go,.prod .info .acts{margin-top:auto}
.prod .info .price{margin-top:8px}
.steps .step{height:100%}
.col-card{height:100%}

/* ---------- RIYA VIDEO BUBBLE ---------- */
.riya-msg.vid{padding:5px;background:#fff;border:1px solid var(--beige-3);max-width:64%}
.riya-msg.vid video{width:100%;max-width:200px;border-radius:12px;display:block}

/* ---------- RIYA PRESENTER CARD (pages) ---------- */
.riya-present{position:relative;width:min(300px,78vw);border-radius:26px;overflow:hidden;border:1.5px solid rgba(227,201,136,.5);box-shadow:0 40px 90px rgba(11,19,16,.45);background:#0B1310}
.riya-present video{width:100%;display:block}
.riya-present .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(11,19,16,.88));color:var(--beige);font-size:.78rem}
.riya-present .cap b{color:var(--gold-2);display:block;font-size:.9rem}

/* ---------- PRELOADER v3 — tiger muse film ---------- */
#preloader .pl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
#preloader .pl-shade{position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 50%,rgba(11,19,16,.25),rgba(11,19,16,.88))}
#preloader .pl-inner{position:relative;z-index:2}

/* ---------- RIYA FAB — waving video, bigger face ---------- */
.riya-fab{padding:8px 20px 8px 8px;gap:12px}
.riya-fab .av{width:62px;height:62px;border-width:2px}
.riya-fab .av.fabvid video{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:50%;display:block;transform:scale(1.45);transform-origin:50% 22%}
.riya-fab .av.fabvid{overflow:hidden;border-radius:50%}
.riya-fab .lbl{font-size:.9rem}
.riya-fab .pulse{top:6px;left:8px}
.riya-head .av{width:52px;height:52px}
@media(max-width:640px){.riya-fab .av{width:54px;height:54px}}

/* ---------- AMBIENT MUSIC TOGGLE ---------- */
#musicToggle{position:fixed;left:22px;bottom:22px;z-index:1750;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(227,201,136,.55);background:rgba(17,28,23,.85);backdrop-filter:blur(6px);color:#E3C988;font-size:1.15rem;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:all .3s}
#musicToggle:hover{transform:translateY(-2px)}
#musicToggle.on{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505;animation:riyaPulse 2s infinite}
#musicToggle .off-slash{position:absolute;width:26px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
#musicToggle.on .off-slash{display:none}
@media(max-width:640px){#musicToggle{left:12px;bottom:12px;width:42px;height:42px}}

/* ---------- LIVE RATE TICKER (stock-market feel) ---------- */
[data-rate]{position:relative}
.rate-val{transition:color .45s var(--tr)}
.rate-arrow{display:inline-block;font-size:.52em;line-height:1;margin-left:.3em;vertical-align:middle;font-family:var(--sans);font-weight:700;transition:opacity .25s,transform .25s}
.rate-arrow.up{color:#3FBE72}
.rate-arrow.down{color:#E5533C}
.rate-arrow.up{transform:translateY(-1px)}
.rate-arrow.down{transform:translateY(1px)}
@keyframes tkFlashUp{0%{background:rgba(63,190,114,.22)}100%{background:transparent}}
@keyframes tkFlashDown{0%{background:rgba(229,83,60,.20)}100%{background:transparent}}
[data-rate].tick-up{animation:tkFlashUp .85s var(--tr)}
[data-rate].tick-down{animation:tkFlashDown .85s var(--tr)}
.rate-row .pr .rate-arrow{font-size:.44em}

/* ---------- RIYA FAB — clean round video, no gold pill ---------- */
.riya-fab{background:none!important;box-shadow:none!important;padding:0;border-radius:50%;gap:10px}
.riya-fab:hover{transform:translateY(-2px)}
.riya-fab .av.fabvid{box-shadow:0 14px 34px rgba(8,27,18,.5);border:2px solid var(--gold-2)}
.riya-fab .av.fabvid video{background:#0B1310}
.riya-fab .lbl{background:rgba(17,28,23,.9);backdrop-filter:blur(6px);color:var(--gold-2);border:1px solid rgba(227,201,136,.4);padding:8px 15px;border-radius:980px;box-shadow:0 8px 22px rgba(8,27,18,.4);font-weight:700}
.riya-fab .pulse{top:2px;left:2px;z-index:3}
@media(max-width:640px){.riya-fab .lbl{display:none}}

/* ===== PWA install button on the loading screen ===== */
.pl-install{display:none;align-items:center;gap:12px;margin:22px auto 0;background:linear-gradient(135deg,#E0BD6D,#B08A37);
  border:0;border-radius:16px;padding:11px 18px 11px 12px;cursor:pointer;font-family:inherit;text-align:left;
  box-shadow:0 14px 34px rgba(201,161,74,.4);max-width:320px}
.pl-install:not([hidden]){display:flex}
.pl-install img{width:42px;height:42px;border-radius:10px;flex:none}
.pl-install span{display:flex;flex-direction:column;line-height:1.25}
.pl-install b{color:#1B1505;font-size:.92rem;font-weight:800}
.pl-install small{color:#4a3a10;font-size:.72rem}

/* ---------- PRELOADER — mobile choice gate ---------- */
.pl-gate{margin-top:26px}
.pl-gate.in{animation:plGateIn .5s cubic-bezier(.2,.95,.25,1) both}
@keyframes plGateIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pl-benefits{list-style:none;margin:0 auto 20px;padding:0;max-width:340px;text-align:left}
.pl-benefits li{display:flex;align-items:center;gap:13px;padding:9px 0;
  border-bottom:1px solid rgba(227,201,136,.14)}
.pl-benefits li:last-child{border-bottom:0}
.pl-benefits i{flex:none;width:38px;height:38px;border-radius:12px;font-style:normal;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(227,201,136,.12);border:1px solid rgba(227,201,136,.28)}
.pl-benefits span{display:flex;flex-direction:column;line-height:1.3}
.pl-benefits b{color:#F4F0E6;font-size:.88rem;font-weight:700}
.pl-benefits small{color:#9DB0A2;font-size:.72rem}
.pl-benefits li{opacity:0;animation:plBen .45s cubic-bezier(.2,.95,.25,1) forwards}
.pl-benefits li:nth-child(1){animation-delay:.08s}.pl-benefits li:nth-child(2){animation-delay:.18s}
.pl-benefits li:nth-child(3){animation-delay:.28s}.pl-benefits li:nth-child(4){animation-delay:.38s}
@keyframes plBen{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.pl-dial{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;max-width:340px;
  margin:0 auto;border:0;border-radius:980px;padding:15px 20px;cursor:pointer;font-family:inherit;
  font-size:1rem;font-weight:800;color:#1B1505;
  background:linear-gradient(135deg,#E0BD6D,#B08A37);
  box-shadow:0 14px 36px rgba(201,161,74,.45), inset 0 1px 0 rgba(255,250,232,.55);
  animation:plDial 2.2s ease-in-out .8s infinite}
.pl-dial img{width:26px;height:26px;border-radius:7px}
@keyframes plDial{0%,100%{transform:none}50%{transform:scale(1.035)}}
.pl-skip{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;font-family:inherit;
  color:#9DB0A2;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-decoration:underline;
  text-underline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .pl-gate.in,.pl-benefits li,.pl-dial{animation:none !important;opacity:1}
}

/* ============================================================
   APP SHELL — bottom tab bar + native-feeling mobile UI
   Shows on phones/tablets (<=900px) and in installed PWA.
   ============================================================ */
:root{
  --tabh: 64px;                 /* card height */
  --tabgap: 11px;               /* gap between card and screen edges */
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* everything that floats above the tab card measures from here, so the
     FAB rail can never collide with the bar or with itself */
  --fabbase: calc(var(--tabh) + var(--tabgap)*2 + var(--safe-b) + 10px);
}

#abrafTabs{display:none}

@media (max-width:900px){
  /* ---- app chrome feel ---- */
  html{ -webkit-text-size-adjust:100%; }
  body{
    -webkit-tap-highlight-color:transparent;
    overscroll-behavior-y:contain;                 /* no rubber-band flash */
    padding-bottom:calc(var(--tabh) + var(--tabgap)*2 + var(--safe-b)) !important;
  }
  nav.site,.topbar,footer.site,#abrafTabs{ -webkit-user-select:none; user-select:none; }

  /* ============================================================
     DIAL NAV — one floating gold button, bottom-centre; tapping it
     fans the six destinations out in two arcs (Naver-style).
     ============================================================ */

  /* ---- the dial ---- */
  #abrafDial{
    display:flex;
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(var(--safe-b) + 16px);
    width:62px; height:62px; border-radius:50%; border:0; cursor:pointer;
    z-index:2960; padding:0; font-family:inherit;
    background:radial-gradient(circle at 34% 27%,#FCF1CC 0%,#E7C980 31%,#C39C46 62%,#8C6822 100%);
    box-shadow:0 12px 30px rgba(140,104,34,.5), 0 3px 8px rgba(0,0,0,.35),
               inset 0 -4px 8px rgba(88,60,10,.4), inset 0 3px 6px rgba(255,250,232,.6);
    display:flex; align-items:center; justify-content:center;
    transition:transform .38s cubic-bezier(.34,1.5,.42,1);
  }
  #abrafDial:active{ transform:translateX(-50%) scale(.92) }
  .fan-open #abrafDial{ transform:translateX(-50%) rotate(90deg) }
  #abrafDial .d-ring{                          /* soft breathing halo */
    position:absolute; inset:-9px; border-radius:50%; pointer-events:none;
    border:1.5px solid rgba(201,161,74,.5);
    animation:abDialPulse 2.6s ease-in-out infinite;
  }
  @keyframes abDialPulse{
    0%,100%{ transform:scale(1); opacity:.8 } 50%{ transform:scale(1.14); opacity:0 }
  }
  #abrafDial svg{ width:24px; height:24px; position:absolute;
    transition:opacity .22s, transform .3s }
  #abrafDial .d-close{ opacity:0; transform:rotate(-90deg) }
  .fan-open #abrafDial .d-open{ opacity:0; transform:rotate(90deg) }
  .fan-open #abrafDial .d-close{ opacity:1; transform:none }

  /* ---- the fan overlay: dim veil + two ivory half-discs rising
         from the bottom (Naver-style), icons resting on the discs ---- */
  #abrafFan{ position:fixed; inset:0; z-index:2940; pointer-events:none }
  .fan-veil{
    position:absolute; inset:0; opacity:0;
    background:rgba(9,25,17,.45);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    transition:opacity .3s;
  }
  .fan-open #abrafFan{ pointer-events:auto }
  .fan-open .fan-veil{ opacity:1 }

  .fan-veil{ z-index:0 }

  /* ---- the wheel: flat green ring · gold active segment · cream hub ---- */
  .wheel{
    position:absolute; left:50%; z-index:2;
    bottom:calc(var(--safe-b) + 96px);
    width:min(86vw,350px); aspect-ratio:1/1;
    transform:translateX(-50%) scale(.12); transform-origin:50% 115%;
    opacity:0; pointer-events:none;
    transition:transform .45s cubic-bezier(.3,1.25,.35,1), opacity .28s;
    filter:drop-shadow(0 26px 44px rgba(4,16,10,.5));
  }
  .fan-open .wheel{ transform:translateX(-50%) scale(1); opacity:1; pointer-events:auto }
  .wheel svg{ display:block; width:100%; height:100% }
  .wg path{ fill:#12261B; stroke:rgba(227,201,136,.14); stroke-width:.7; cursor:pointer;
    transition:fill .25s }
  .wg{ transition:transform .3s cubic-bezier(.34,1.4,.4,1) }
  .wg.active path{ fill:var(--wf,url(#whGold)) }
  .wg.active{ transform:translate(var(--px),var(--py)) }
  .wg.go{ animation:abWgGo .16s ease both }
  @keyframes abWgGo{ 50%{ opacity:.55 } }
  .wg:active path{ fill:#1C3627 }
  .wg.active:active path{ fill:var(--wf,url(#whGold)) }

  /* icons around the ring — miniature illustrations */
  .witems{ position:absolute; inset:0; pointer-events:none }
  .wit{ position:absolute; width:40px; height:40px; margin:-20px 0 0 -20px;
    pointer-events:none; display:flex; align-items:center; justify-content:center;
    transition:transform .3s cubic-bezier(.34,1.4,.4,1) }
  .wit svg{ width:36px; height:36px; display:block;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)) }
  .wit.on{ transform:scale(1.12) }
  .wit.on svg{ filter:drop-shadow(0 1px 2px rgba(96,70,14,.5)) }
  /* photoreal sprite icons (swapped in over the SVGs at runtime) */
  .wit img{ width:44px; height:44px; display:block; object-fit:contain;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.4)) }
  .wit.on img{ filter:drop-shadow(0 2px 3px rgba(96,70,14,.55)) }

  /* dial wearing the rendered monogram coin */
  #abrafDial.has-coin{
    background-size:cover; background-position:center;
    box-shadow:0 12px 30px rgba(140,104,34,.5), 0 3px 8px rgba(0,0,0,.35);
  }
  #abrafDial.has-coin .d-open{ opacity:0 }             /* the coin IS the button */
  .fan-open #abrafDial.has-coin .d-close{
    opacity:1; transform:none;
    filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.6));
  }

  /* the hub — shows the selected page; becomes the OPEN button when the
     selection isn't the page you're already on */
  .whub{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:44%; aspect-ratio:1/1; border-radius:50%; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    transition:box-shadow .25s;
  }
  .whub b{ font-family:var(--serif); font-size:1.08rem; font-weight:600; color:#22392E;
    text-align:center; line-height:1.1; padding:0 8px; transition:color .2s }
  .whub span{ font-size:.56rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:#A79D83; transition:color .2s }
  .whub.go{ box-shadow:0 0 0 2.5px var(--jac,#C9A14A), 0 0 22px var(--jac,#C9A14A);
    animation:abHubGo 1.6s ease-in-out infinite }
  .whub.go span{ color:var(--jacd,#8F7434) }
  @keyframes abHubGo{ 0%,100%{ box-shadow:0 0 0 2.5px var(--jac,#C9A14A), 0 0 14px transparent }
    50%{ box-shadow:0 0 0 3px var(--jac,#C9A14A), 0 0 26px var(--jac,#C9A14A) } }
  .whub.pressed{ transform:translate(-50%,-50%) scale(.94) }
  .whub:active{ transform:translate(-50%,-50%) scale(.95) }

  @media (prefers-reduced-motion: reduce){
    #abrafDial,.fan-it,#abrafDial .d-ring{ animation:none !important; transition-duration:.001s }
  }

  /* ---- journey identity (mobile): accent hairline across the very top
     + a small "you are here" chip. Colours come from --jacl/--jac/--jacd
     set by app.js per page: Sell=copper, Bullion=gold, Jewellery=rose,
     Savings=emerald, Investor=platinum. ---- */
  body::after{
    content:''; position:fixed; top:0; left:0; right:0; height:3px; z-index:5200;
    background:linear-gradient(90deg,var(--jacl,#F6E3B4),var(--jac,#D3AE5C),var(--jacd,#96712A));
    pointer-events:none;
  }
  #jchip{
    display:block;
    position:fixed; top:9px; left:50%; transform:translateX(-50%); z-index:5100;
    font-size:.58rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
    color:var(--jacd,#96712A); background:rgba(255,253,246,.93);
    border:1px solid var(--jac,#D3AE5C); border-radius:999px;
    padding:4px 12px 3px; box-shadow:0 2px 10px rgba(0,0,0,.18);
    pointer-events:none; animation:abChipIn .5s ease both;
  }
  @keyframes abChipIn{ from{ opacity:0; transform:translate(-50%,-8px) } to{ opacity:1; transform:translate(-50%,0) } }
  body.fan-open #jchip{ opacity:0; transition:opacity .2s }

  /* ---- FAB rail: one vertical stack on the right, nothing overlapping ----
     bottom-up order is  [tab card] → WhatsApp → Ask Riya.
     The cart pill lives on the left so it never meets the rail.        */
  .wa-fab{   right:14px !important; bottom:var(--fabbase) !important }
  .riya-fab{ right:14px !important; bottom:calc(var(--fabbase) + 70px) !important }
  .riya-fab .lbl{ display:none }                     /* avatar only — keeps the rail narrow */
  .cart-fab{ bottom:var(--fabbase) !important }
  .wa-menu{  bottom:calc(var(--fabbase) + 66px) !important }
  #abrafInstallChip{ bottom:calc(var(--fabbase) - 2px) !important }
  #abrafPush{ bottom:calc(var(--fabbase) - 2px) !important }
  .pay-overlay{ padding-bottom:calc(var(--fabbase) + 4px) }

  /* Riya's chat sheet fills the screen above the tab card (and outranks it,
     so the bar can never draw over the conversation) */
  .riya-win{
    left:8px !important; right:8px !important; top:8px !important;
    bottom:calc(var(--tabh) + var(--tabgap)*2 + var(--safe-b) + 6px) !important;
    width:auto !important; height:auto !important; z-index:2950 !important;
  }

  /* ---- no header at all on a phone: the dial is the only chrome.
     The logo lives in each page's hero, secondary links in the footer. ---- */
  .topbar{ display:none }
  nav.site{ display:none !important }
}

/* installed PWA: hide the marketing topbar entirely, feels more native */
@media (display-mode: standalone){
  .topbar{ display:none }
  body{ padding-bottom:calc(var(--tabh) + var(--tabgap)*2 + var(--safe-b)) }
}

/* journey chip is a mobile-app element only */
#jchip{ display:none }

/* ============================================================
   DESKTOP GUARD — the dial nav, wheel and journey chip are the
   MOBILE app shell. They are injected on every page by app.js,
   so hide them completely above 900px (they were rendering as an
   unstyled circle below the footer on desktop).
   ============================================================ */
@media(min-width:901px){
  #abrafDial,#abrafFan,#jchip{ display:none !important }
}

/* ============================================================
   SITE VISITOR GATE — name · mobile · city, before any page.
   Sits above everything (incl. preloader z3000, push toast z4800).
   ============================================================ */
html.sg-lock,html.sg-lock body{overflow:hidden !important}
#abrafSiteGate{
  position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  padding:24px 18px; overflow-y:auto;
  background:radial-gradient(120% 100% at 50% 0%,#18271F 0%,#0B1310 70%);
  transition:opacity .55s var(--tr), visibility .55s;
}
#abrafSiteGate::before{                       /* soft gold pool at the base */
  content:''; position:absolute; inset:auto -20% -50% -20%; height:110%;
  background:radial-gradient(ellipse at 50% 100%,rgba(201,161,74,.20),transparent 66%);
  pointer-events:none;
}
#abrafSiteGate.sg-done{opacity:0;visibility:hidden;pointer-events:none}
#abrafSiteGate .sg-card{
  position:relative; width:100%; max-width:430px; margin:auto; text-align:center; color:var(--beige);
  background:linear-gradient(160deg,var(--green-900),var(--green-800));
  border:1px solid rgba(227,201,136,.30); border-radius:26px;
  padding:clamp(26px,4.5vw,40px); box-shadow:0 40px 100px rgba(0,0,0,.55);
  animation:sgIn .6s var(--tr) both;
}
@keyframes sgIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
#abrafSiteGate .sg-logo{height:50px;width:auto;margin:0 auto 16px;display:block;
  filter:drop-shadow(0 8px 24px rgba(201,161,74,.4))}
#abrafSiteGate .sg-eyebrow{font-size:.58rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:12px}
#abrafSiteGate h2{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.1rem);margin:0 0 8px;color:#fff}
#abrafSiteGate .sg-sub{color:#B7C4B9;font-size:.9rem;line-height:1.6;margin-bottom:22px}
#abrafSiteGate form{text-align:left}
#abrafSiteGate label{display:block;font-size:.58rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#9DB0A2;margin:14px 0 7px}
#abrafSiteGate input,#abrafSiteGate select{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(227,201,136,.26);
  border-radius:13px; padding:13px 15px; color:var(--beige); font-family:inherit; font-size:1rem;
  outline:none; transition:.2s;
}
#abrafSiteGate input:focus,#abrafSiteGate select:focus{
  border-color:var(--gold-2); background:rgba(255,255,255,.09); box-shadow:0 0 0 3px rgba(227,201,136,.15)}
#abrafSiteGate select option{color:#1B1505}
#abrafSiteGate .sg-tel{display:flex;align-items:center;gap:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(227,201,136,.26);border-radius:13px;overflow:hidden}
#abrafSiteGate .sg-tel:focus-within{border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(227,201,136,.15)}
#abrafSiteGate .sg-tel span{padding:13px 12px 13px 15px;color:var(--gold-2);font-weight:600;
  border-right:1px solid rgba(227,201,136,.22);flex:0 0 auto}
#abrafSiteGate .sg-tel input{border:0;border-radius:0;background:transparent;box-shadow:none;
  letter-spacing:.08em}
#abrafSiteGate .sg-err{min-height:19px;color:#ff9c8a;font-size:.8rem;font-weight:600;margin:11px 2px 2px}
#abrafSiteGate .sg-go{
  width:100%; margin-top:6px; border:0; border-radius:980px; padding:15px 24px; cursor:pointer;
  font-family:inherit; font-size:.98rem; font-weight:600; color:#1B1505;
  background:linear-gradient(135deg,#E0BD6D,#B08A37); box-shadow:0 10px 28px rgba(201,161,74,.34);
  transition:transform .25s var(--tr), box-shadow .25s var(--tr);
}
#abrafSiteGate .sg-go:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(201,161,74,.46)}
#abrafSiteGate .sg-go:disabled{opacity:.7;transform:none;cursor:default}
#abrafSiteGate .sg-fine{font-size:.72rem;color:#8FA394;line-height:1.6;margin-top:18px;text-align:center}
#abrafSiteGate .sg-fine a{color:var(--gold-2);font-weight:600}
@media(max-width:420px){
  #abrafSiteGate .sg-card{padding:24px 20px;border-radius:22px}
  #abrafSiteGate .sg-logo{height:42px}
}

/* ---- "My ABRAF" pill in the top nav (greets the visitor by name) ---- */
.nav-btn.me{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;
  color:var(--gold-2);border:1px solid rgba(227,201,136,.4);background:rgba(227,201,136,.06)}
.nav-btn.me:hover{background:rgba(227,201,136,.14);transform:translateY(-1px)}
.nav-btn.me .me-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:800;color:#1B1505;flex:0 0 auto;
  background:linear-gradient(135deg,#E0BD6D,#B08A37)}
.nav-btn.me.known .me-av{box-shadow:0 0 0 2px rgba(227,201,136,.28)}
.nav-btn.me .me-tx{white-space:nowrap}
@media(max-width:1080px){ .nav-btn.me .me-tx{display:none} .nav-btn.me{padding:6px} }