/* ============================================================
   RANSOR — design system (cosmic mission console)
   Committed dark visual world.
   ============================================================ */
@font-face{font-family:'Dameron';src:url('../fonts/dameron-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Xolonium';src:url('../fonts/xolonium-700.woff2') format('woff2'),url('../fonts/Xolonium-Bold.ttf') format('truetype');font-weight:700;unicode-range:U+0-AD,U+AF-10FFFF;font-display:swap}
@font-face{font-family:'Cuyabra';src:url('../fonts/cuyabra-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cuyabra';src:url('../fonts/cuyabra-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --void:#0A0C12; --void-2:#0C0F17; --surface:#10141F; --surface-2:#161C2A;
  --hairline:rgba(255,255,255,.08); --hairline-gold:rgba(var(--gold-rgb),.22);
  --gold:#D0B36F; --gold-bright:#E7D49B; --gold-deep:#9B8955;
  /* Channel triplet for --gold, so alpha tints stay tied to the token instead
     of drifting into a second literal gold (the retired #D4AF37). Always write
     rgba(var(--gold-rgb),<a>) — never a raw rgba(212,175,55,<a>). */
  --gold-rgb:208,179,111;
  --nebula:#33658C; --nebula-2:#2E7C8E; --violet:#5b5170;
  /* --muted-2 was #6b7382. Measured against the three surfaces it actually
     appears on it came out at 3.85:1 (--surface #10141F), 4.01:1 (--void-2)
     and 4.10:1 (--void) — all under the 4.5:1 AA floor, and it is used at
     9–14px where the floor applies. #7d8697 is the SAME hue (219°) and
     saturation (~11%) lifted in lightness only, which takes the worst case to
     4.64:1 on --surface-2 and 5.02:1 on --surface while staying visibly dimmer
     than --muted, so the type hierarchy is unchanged. */
  --ink:#F3F1EA; --muted:#98A0AE; --muted-2:#7d8697;
  --in-stock:#65BC7B; --danger:#db4b68;
  --maxw:1200px;
  --disp:'Dameron','Arial Narrow',Impact,sans-serif;
  --hud:'Xolonium','Cuyabra',ui-monospace,'Segoe UI',sans-serif;
  --body:'Cuyabra','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.05}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* Large / 4K screens: widen the container and scale the whole design up. */
/* Large screens: grow the column + type GENTLY. Over-inflating (2000px / 21px)
   left wide sections sparse and oversized on 4K/5K — keep it premium-tight. */
@media(min-width:1700px){:root{--maxw:1480px}html{font-size:16.5px}}
@media(min-width:2400px){:root{--maxw:1640px}html{font-size:17px}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* atmosphere */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;max-width:100vw}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;max-width:100vw;background:
  radial-gradient(60vw 46vw at 78% 8%, rgba(51,101,140,.20), transparent 60%),
  radial-gradient(48vw 40vw at 8% 88%, rgba(91,81,112,.16), transparent 62%),
  radial-gradient(40vw 30vw at 50% 50%, rgba(var(--gold-rgb),.05), transparent 60%);}
.site{position:relative;z-index:1}

/* HUD label */
.kicker{font-family:var(--hud);font-weight:700;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.7em}
.kicker::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.kicker.no-line::before{display:none}

/* buttons */
.btn{--cut:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-family:var(--hud);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;padding:15px 30px;border:1px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .25s ease, background .25s;clip-path:var(--cut)}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));color:#221a08;box-shadow:0 10px 30px -12px rgba(var(--gold-rgb),.6)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(var(--gold-rgb),.8)}
/* Outlined button: the cut corners need a border that follows the diagonal.
   clip-path slices any real/painted border off the cut edges, so instead we
   stack a gold shape (::before) under a dark fill inset by 1px (::after) —
   the 1px gold rim then hugs every edge including the two diagonals. */
.btn-ghost{border:0;background:transparent;color:var(--ink);position:relative;isolation:isolate}
.btn-ghost::before,.btn-ghost::after{content:"";position:absolute;clip-path:var(--cut);pointer-events:none;transition:background .25s}
.btn-ghost::before{inset:0;z-index:-2;background:var(--hairline-gold)}
.btn-ghost::after{inset:1px;z-index:-1;background:var(--void)}
.btn-ghost:hover{color:var(--gold-bright);transform:translateY(-2px)}
.btn-ghost:hover::before{background:var(--gold)}
.btn-ghost:hover::after{background:linear-gradient(rgba(var(--gold-rgb),.06),rgba(var(--gold-rgb),.06)),var(--void)}
.btn.sm{padding:11px 20px;font-size:.72rem}

/* utility bar */
.util{border-bottom:1px solid var(--hairline);background:rgba(10,12,18,.6);backdrop-filter:blur(6px)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;font-family:var(--hud);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.util .ticker{color:var(--gold)}
/* Ticker: full line by default, short variant under 520px (the full promo truncated to "DISPATCHED WI…" on phones) */
.ticker .tk-s{display:none}
@media(max-width:520px){.ticker .tk-l{display:none}.ticker .tk-s{display:inline}}
.util .u-right{display:flex;gap:22px}
.util .u-right a:hover{color:var(--ink)}

/* header / nav */
.site-header{position:sticky;top:0;z-index:60;background:rgba(10,12,18,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:22px;width:auto}
.brand img:not(.brand-logo--ar){height:16px}
.brand .tm{font-family:var(--hud);font-size:.69rem;letter-spacing:.22em;color:var(--muted);border:1px solid var(--hairline-gold);padding:3px 7px;border-radius:2px}
.nav-list{display:flex;gap:30px;list-style:none;margin:0;padding:0;align-items:center}
.nav-list>li{position:relative}
.nav-list>li>a{font-family:var(--hud);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);position:relative;padding:24px 0;transition:color .2s;display:inline-flex;align-items:center;gap:6px}
/* Scale, not width: animating width runs layout on every frame, and the bar was
   also anchored to the physical left, so in RTL it grew away from the label
   instead of under it. inset-inline-start + a flipped origin (rtl.css) fixes both. */
.nav-list>li>a::after{content:"";position:absolute;inset-inline-start:0;bottom:16px;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .25s}
/* Where you are: the item for the current page (or the section it sits in —
   a chair's page lights "Chairs") holds the hover state. header.php sets the
   classes; they were styled here all along but never printed. */
.nav-list>li>a:hover,.nav-list>li.current-menu-item>a,.nav-list>li.current-menu-ancestor>a{color:var(--ink)}
.nav-list>li>a:hover::after,.nav-list>li.current-menu-item>a::after,.nav-list>li.current-menu-ancestor>a::after{transform:scaleX(1)}
.nav-list .caret{font-size:.7em;color:var(--gold)}
/* mega-menu */
.nav-list>li.has-mega{position:static}
.mega{position:absolute;top:100%;left:0;right:0;background:linear-gradient(180deg,var(--void-2),var(--void));border-top:1px solid var(--hairline-gold);border-bottom:1px solid var(--hairline);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease .14s,transform .2s ease .14s,visibility 0s linear .34s;z-index:59;box-shadow:0 40px 70px -24px rgba(0,0,0,.85)}
/* Opens for a hovering mouse, or when the caret button is pressed (.open, theme.js).
   Not on focus: that forced a keyboard through every category on every page.
   The delays are hover intent — a pointer crossing the bar does not flash the
   panel open, and one that slips off the edge for a moment does not lose it.
   Without JavaScript the button cannot work, so focus opens it as before. */
.has-mega:hover .mega,.has-mega.open .mega,html:not(.js) .has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none;transition-delay:.06s,.06s,0s}
@media(min-width:921px){.has-mega:hover>a,.has-mega.open>a{color:var(--ink)}
  .has-mega:hover>a::after,.has-mega.open>a::after{transform:scaleX(1)}}
.has-mega.mega-dismissed .mega,.has-mega.mega-dismissed:hover .mega,.has-mega.mega-dismissed:focus-within .mega{opacity:0;visibility:hidden;transition:none} /* Escape / caret pressed again (theme.js) */
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:32px 28px;display:grid;grid-template-columns:1fr 280px;gap:34px}
.mega-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} /* nine categories: three even rows, no orphan */
.mega-cat[aria-current]{border-color:var(--gold)}
.mega-cat{position:relative;height:104px;border-radius:3px;overflow:hidden;border:1px solid var(--hairline);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;background-size:cover;background-position:center right;transition:border-color .2s,transform .2s}
.mega-cat::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,18,.15),rgba(10,12,18,.9))}
.mega-cat:hover{border-color:var(--gold);transform:translateY(-2px)}
.mega-cat span{position:relative;z-index:2}
.mega-cat .mc-name{font-family:var(--disp);text-transform:uppercase;font-size:1.05rem;line-height:1}
.mega-cat .mc-count{font-family:var(--hud);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.mega-feature{border-left:1px solid var(--hairline);padding-left:34px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.mega-feature h4,.mega-feature .mfh{display:block;font-family:var(--disp);text-transform:uppercase;font-size:1.5rem}
.mega-feature p{color:var(--muted);font-size:.9rem;margin:2px 0 10px}
.header-icons{display:flex;gap:20px;color:var(--muted);align-items:center}
.header-icons a{display:inline-flex}
.header-icons svg{width:20px;height:20px;transition:color .2s}
.header-icons a:hover svg{color:var(--gold)}
.cart-link{position:relative}
.cart-link .count{position:absolute;top:-8px;right:-9px;background:var(--gold);color:#221a08;font-family:var(--hud);font-size:.6rem;min-width:15px;height:15px;padding:0 3px;border-radius:8px;display:grid;place-items:center}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer}
/* The caret beside "Shop" is the disclosure button for the panel. */
.mega-toggle{display:grid;place-items:center;width:24px;height:24px;padding:0;background:none;border:0;border-radius:2px;color:var(--gold);font-size:.72rem;line-height:1;cursor:pointer}
.mega-toggle span{display:inline-block;transition:transform .2s}
.has-mega.open .mega-toggle span{transform:rotate(180deg)}
@media(min-width:921px){
  .nav-list>li.has-mega{display:flex;align-items:center;gap:3px}
}
@media(min-width:921px) and (hover:hover){
  .has-mega:hover:not(.mega-dismissed) .mega-toggle span{transform:rotate(180deg)}
}
@media(max-width:920px){
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--void-2);border-bottom:1px solid var(--hairline);padding:14px 0;box-shadow:0 30px 50px -20px rgba(0,0,0,.8)}
  .main-nav.open{display:block}
  .nav-list{flex-direction:column;gap:0;align-items:stretch;padding:0 28px}
  .nav-list>li>a{padding:14px 0}
  .mega{display:none}
  .nav-toggle{display:inline-flex}
  /* Shop row: the word goes to the shop; the rest of the row is the button
     that opens the categories in place (a full-width target, caret at the end). */
  .nav-list>li.has-mega{display:flex;flex-wrap:wrap;align-items:center}
  .has-mega>a{flex:0 0 auto}
  .mega-toggle{flex:1;width:auto;height:44px;place-items:center end;margin-inline-end:-12px;padding-inline-end:17px;font-size:.8rem}
  .has-mega.open .mega,.has-mega.open:hover .mega,.has-mega.open:focus-within .mega{display:block;position:static;flex-basis:100%;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none}
  .has-mega .mega-inner{display:block;padding:2px 0 14px}
  .has-mega .mega{transition:none}
  .has-mega .mega-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .has-mega .mega-cat:last-child:nth-child(odd){grid-column:1/-1}
  .has-mega .mega-cat{height:62px;padding:10px}
  .has-mega .mega-cat .mc-name{font-size:.88rem}
  .has-mega .mega-feature{display:none}
}

/* footer */
.site-footer{border-top:1px solid var(--hairline);background:var(--void-2);padding:70px 0 34px;position:relative;z-index:1}
.fgrid{display:grid;grid-template-columns:1.5fr .9fr 1fr .9fr 1.25fr;gap:36px}
.site-footer h6,.site-footer .foot-h{font-family:var(--hud);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin:0 0 18px}
.site-footer a{color:var(--muted);font-size:.92rem;display:block;padding:5px 0;transition:color .2s}
.site-footer a:hover{color:var(--gold)}
.site-footer .co img{height:24px;width:auto;margin-bottom:16px}
.site-footer .co img.mark-word{height:20px}
.site-footer .co p{color:var(--muted);font-size:.9rem;max-width:34ch}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:40px;height:40px;border:1px solid var(--hairline-gold);border-radius:3px;display:grid;place-items:center;color:var(--muted);padding:0}
.socials a:hover{color:var(--gold);border-color:var(--gold)}
.socials svg{width:16px;height:16px}
.fbar{display:flex;justify-content:space-between;align-items:center;margin-top:50px;padding-top:24px;border-top:1px solid var(--hairline);font-family:var(--hud);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);flex-wrap:wrap;gap:12px}
@media(max-width:1100px){.fgrid{grid-template-columns:repeat(4,1fr);gap:32px}.fgrid>.co{grid-column:1/-1}}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* sections */
.section{position:relative;padding:96px 0}
.disp{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.005em}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}#stars{display:none}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ===== homepage ===== */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.sec-head h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem);margin-top:14px}
.sec-head p{color:var(--muted);max-width:46ch;margin:8px 0 0}
.link-more{font-family:var(--hud);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .2s}
.link-more:hover{border-color:var(--gold)}

.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--hairline)}
.hero-media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.hero-media img{position:absolute;right:-4%;bottom:0;height:96%;width:auto;max-width:none;object-fit:contain}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--void) 20%,rgba(10,12,18,.78) 44%,rgba(10,12,18,.45) 64%,rgba(10,12,18,.28) 100%),linear-gradient(0deg,var(--void) 2%,transparent 30%)}
@media(max-width:820px){.hero-media img{opacity:.32;right:-30%}.hero-vid{display:none}.hero-media{background-position:center right}.hero-slide--race .hero-media{background-image:url(../img/race-poster-mobile.jpg?v=23)!important}}
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}}
.hero .wrap{position:relative;z-index:2;width:100%}
/* 40rem, NOT 640px. The headline font is clamp(2.4rem,5.6vw,4.4rem) - it scales
   with the root font, which is 17px on large displays, so 4.4rem renders at
   74.8px while a pixel-fixed box stays 640px. EMPOWERING then overflows by
   ~30px, and because the title is painted with background-clip:text the
   overflowing glyphs get NO paint at all and simply vanish - the G lost its
   right side. Sizing the box in the same unit as the font keeps them in step. */
.hero-copy{max-width:40rem}
.hero h1,.hero .hero-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:.94;letter-spacing:.01em;margin:16px 0 0;background:linear-gradient(180deg,#fff,#d9d4c4);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Narrow phones: these headlines are painted with background-clip:text, so a
   word wider than the column is not wrapped or scrolled - its last letters get
   no paint. 2.4rem/2.6rem floors are wider than the 304-334px column at
   360-390px ("EMPOWERING" lost its G). Size by viewport below 430px. Latin
   only: the Arabic slogan words are short and fit at the normal floor. */
@media(max-width:430px){
  html:not([dir="rtl"]) .hero h1,html:not([dir="rtl"]) .hero .hero-title{font-size:clamp(1.7rem,8.6vw,2.4rem)}
  html:not([dir="rtl"]) .closer h2{font-size:clamp(1.7rem,8.6vw,2.6rem)}
}
.hero h1 .g,.hero .hero-title .g{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-badge{display:flex;flex-direction:column;gap:3px;max-width:440px;margin:22px 0 4px;padding:12px 16px;border:1px solid var(--hairline-gold);border-left:3px solid var(--gold);border-radius:4px;background:rgba(12,15,23,.55);text-decoration:none;transition:border-color .2s,background .2s}
.hero-badge:hover{background:rgba(20,24,34,.7);border-color:var(--gold)}
.hero-badge .hb-k{font-family:var(--hud);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)}
.hero-badge .hb-t{font-size:.92rem;color:var(--ink);line-height:1.35}
.hero-badge .hb-t strong{color:var(--gold)}
.hero p.lede{font-size:1.12rem;color:var(--muted);max-width:44ch;margin:22px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:480px){.hero-cta .btn{flex:1 1 100%;justify-content:center}} /* no ragged wide-over-narrow stack, in either direction */
.hero-hud{display:flex;gap:34px;margin-top:52px;padding-top:24px;border-top:1px solid var(--hairline)}
.hero-hud .n{font-family:var(--hud);font-size:1.5rem;color:var(--gold);font-variant-numeric:tabular-nums}
.hero-hud .l{font-family:var(--hud);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-top:4px}
.hero-tag{position:absolute;right:4%;bottom:8%;z-index:3;display:flex;align-items:center;gap:14px;background:rgba(12,15,23,.74);backdrop-filter:blur(8px);border:1px solid var(--hairline-gold);border-radius:4px;padding:12px 16px}
.hero-tag .ht-l{font-family:var(--hud);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.hero-tag .ht-n{font-size:.9rem}
.hero-tag .ht-p{font-family:var(--hud);color:var(--gold);font-size:.85rem}
.hero-tag a{color:var(--gold-bright);font-family:var(--hud);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;border-left:1px solid var(--hairline-gold);padding-left:14px}
@media(max-width:900px){.hero-tag{display:none}}

.flag{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;border:1px solid var(--hairline);background:linear-gradient(160deg,var(--surface),var(--void-2));overflow:hidden;border-radius:3px}
.flag.rev{grid-template-columns:.95fr 1.05fr}
.flag-media{position:relative;min-height:440px;background:radial-gradient(70% 70% at 60% 40%,rgba(51,101,140,.22),transparent 70%)}
.flag-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flag-body{padding:52px}
.flag-body .price{font-family:var(--hud);font-size:1.9rem;margin:6px 0 0;font-variant-numeric:tabular-nums}
.flag-body .price small{font-size:.8rem;color:var(--muted);letter-spacing:.1em}
.flag h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:16px 0 10px}
.flag .sku{font-family:var(--hud);font-size:.69rem;letter-spacing:.2em;color:var(--muted-2);text-transform:uppercase}
.rail{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 30px}
.chip{font-family:var(--hud);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--hairline-gold);padding:8px 12px;border-radius:2px;background:rgba(var(--gold-rgb),.05)}
.stock{display:inline-flex;align-items:center;gap:8px;font-family:var(--hud);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--in-stock)}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--in-stock);box-shadow:0 0 10px var(--in-stock)}
.flag-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
@media(max-width:820px){.flag,.flag.rev{grid-template-columns:1fr}.flag-media{min-height:320px;order:-1}.flag-body{padding:34px}}

.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat{position:relative;border:1px solid var(--hairline);background:var(--surface);padding:26px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:border-color .25s,transform .25s;border-radius:3px}
.cat::before{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border:1px solid var(--hairline-gold);border-radius:50%;opacity:.5;transition:transform .5s}
.cat:hover{border-color:var(--hairline-gold);transform:translateY(-3px)}
.cat:hover::before{transform:scale(1.25) rotate(30deg)}
.cat .idx{font-family:var(--hud);font-size:.69rem;letter-spacing:.2em;color:var(--muted-2)}
.cat h4,.cat .pcard-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.5rem}
.cat .meta{font-family:var(--hud);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
@media(max-width:820px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cats{grid-template-columns:1fr}}

.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{border:1px solid var(--hairline);background:var(--surface);border-radius:3px;overflow:hidden;transition:transform .25s,border-color .25s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-4px);border-color:var(--hairline-gold)}
.pcard .ph{aspect-ratio:1/1;overflow:hidden;background:#0d1016;border-bottom:1px solid var(--hairline-gold)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .pb{padding:18px;display:flex;flex-direction:column;flex:1}
.pcard .cat-t{font-family:var(--hud);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.pcard h5,.pcard .pcard-title{font-family:var(--body);font-weight:700;text-transform:none;letter-spacing:0;font-size:1.04rem;margin:8px 0 12px;line-height:1.3}
.pcard .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto} /* price rows line up when titles wrap */
.pcard .p{font-family:var(--hud);color:var(--gold);font-variant-numeric:tabular-nums}
.pcard .p del{color:var(--muted-2);font-size:.8em;margin-right:6px}
@media(max-width:820px){.prods{grid-template-columns:repeat(2,1fr)}}

.story{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:linear-gradient(180deg,var(--void),var(--void-2))}
.story .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.story h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;margin:18px 0 22px}
.story h2 .g{color:var(--gold)}
.story p{color:var(--muted);font-size:1.05rem;max-width:52ch}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:3px;overflow:hidden}
.stats div{background:var(--void);padding:28px}
.stats .n{font-family:var(--disp);font-size:clamp(1.7rem,7vw,2.4rem);color:var(--gold);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.stats .l{font-family:var(--hud);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:10px}
@media(max-width:520px){.stats div{padding:22px 18px}.stats .l{font-size:.6rem;letter-spacing:.12em}}

/* About — track-record telemetry strip (logical props auto-mirror in RTL) */
.about-metrics-sec .sec-head{margin-bottom:30px}
.about-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--hairline)}
.about-metrics .am{position:relative;padding:40px 36px 40px;display:flex;flex-direction:column;min-height:186px;transition:background .3s ease}
.about-metrics .am + .am{border-inline-start:1px solid var(--hairline)}
/* Same reason as the nav underline: scale the tick instead of animating width.
   Rendered at its full 66px and held at 34/66 until hover. */
.about-metrics .am::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:66px;height:2px;background:var(--gold);transform:scaleX(.515);transform-origin:left center;transition:transform .35s ease}
.about-metrics .am:hover{background:var(--surface)}
.about-metrics .am:hover::before{transform:scaleX(1)}
.about-metrics .am-n{font-family:var(--disp);font-size:clamp(2.3rem,4.4vw,3.5rem);color:var(--gold);line-height:.92;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.about-metrics .am-l{font-family:var(--hud);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:20px}
@media(max-width:820px){
	.about-metrics{grid-template-columns:1fr 1fr}
	.about-metrics .am{min-height:148px;padding:30px 26px}
	.about-metrics .am:nth-child(3){border-inline-start:0}
	.about-metrics .am:nth-child(n+3){border-top:1px solid var(--hairline)}
}
@media(max-width:420px){.about-metrics .am{padding:26px 22px;min-height:128px}}
@media(max-width:820px){.story .grid{grid-template-columns:1fr;gap:36px}}

.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.q{border:1px solid var(--hairline);background:var(--surface);padding:30px;border-radius:3px}
.q .sig{font-family:var(--hud);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.q .sig .dia{color:var(--gold)}
.q p{font-size:1.02rem;margin:0 0 20px}
.q .who{font-family:var(--hud);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.q .who span{color:var(--muted-2);display:block;margin-top:3px}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}

.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;border:1px solid var(--hairline);border-radius:3px;overflow:hidden;background:var(--hairline)}
.trust .t{background:var(--surface);padding:26px;display:flex;gap:16px;align-items:center}
.trust .ic{color:var(--gold);flex:0 0 auto}
.trust .ic svg{width:26px;height:26px}
.trust h6,.trust .trust-title{margin:0;font-family:var(--hud);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.35}
.trust p{margin:4px 0 0;color:var(--muted);font-size:.82rem}
@media(max-width:820px){.trust{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.trust{grid-template-columns:1fr}}

.closer{text-align:center;padding:120px 0}
.closer h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(2.6rem,7vw,5.5rem);background:linear-gradient(180deg,#fff,#cfc8b4);-webkit-background-clip:text;background-clip:text;color:transparent}
.closer p{color:var(--muted);max-width:40ch;margin:18px auto 34px}

/* ===== content pages ===== */
.page-article{padding-top:56px}
.page-hero{margin-bottom:40px;padding-bottom:30px;border-bottom:1px solid var(--hairline)}
.page-hero h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.6rem);margin-top:12px}
.page-content{max-width:760px;font-size:1.05rem;color:var(--ink)}
.page-content>p{margin:0 0 20px;color:var(--muted)}
.page-content h2{font-family:var(--disp);text-transform:uppercase;font-size:1.8rem;margin:44px 0 16px}
.page-content h3{font-family:var(--hud);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:32px 0 12px}
.page-content ul,.page-content ol{margin:0 0 20px;padding-left:20px;color:var(--muted)}
.page-content li{margin:8px 0}
.page-content a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(var(--gold-rgb),.55);text-underline-offset:3px} /* not colour alone: gold on grey body text is 1.3:1 */
.page-content a:hover{color:var(--gold-bright)}
.page-content img{border-radius:4px;margin:20px 0}
.page-content strong{color:var(--ink)}
.page-content blockquote{border-left:3px solid var(--gold);padding-left:20px;margin:24px 0;color:var(--ink);font-size:1.15rem}

/* ===== responsive polish ===== */
@media(max-width:820px){
  .section{padding:64px 0}
  .closer{padding:84px 0}
  .hero{min-height:78vh}
}
@media(max-width:640px){
  /* utility bar: keep the delivery message, drop secondary links */
  .util .wrap{justify-content:center;height:34px}
  .util .u-right{display:none}
  .util .ticker{font-size:.69rem;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .brand .tm{display:none}
  .site-header .wrap{height:64px}
  .section{padding:52px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:30px}
  .hero p.lede{font-size:1rem}
  .hero-hud{gap:22px;flex-wrap:wrap}
  .flag-body{padding:26px}
  .flag-body .price small{display:block;margin-top:4px}
  .story .grid{gap:28px}
}
@media(max-width:400px){
  .hero-hud{gap:16px}
  .hero-hud .n{font-size:1.3rem}
}

/* ============ ABOUT PAGE ============ */
.about-hero{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--hairline)}
.about-hero-media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.about-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.about-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 14%,rgba(10,12,18,.72) 40%,rgba(10,12,18,.25) 62%,transparent 100%),linear-gradient(0deg,var(--void) 2%,transparent 26%)}
.about-hero .wrap{position:relative;z-index:2;width:100%}
.about-hero-copy{max-width:620px}
.about-hero-copy h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(2.8rem,6.5vw,5.4rem);line-height:.92;letter-spacing:.01em;margin:16px 0 0;background:linear-gradient(180deg,#fff,#d9d4c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-hero-copy h1 .g{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.about-hero-copy .lede{margin-top:20px;font-size:1.15rem;color:var(--muted);max-width:500px}
.about-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;color:var(--gold);font-size:1.1rem;animation:abfloat 2.4s ease-in-out infinite}
@keyframes abfloat{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,8px);opacity:1}}
@media(prefers-reduced-motion:reduce){.about-hero-vid{display:none}.about-scroll{animation:none}}
@media(max-width:820px){.about-hero-vid{display:none}.about-hero{min-height:70vh}}

.about-manifesto{text-align:center}
.about-lead{max-width:880px;margin:0 auto;font-family:var(--disp);font-weight:400;text-transform:none;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.32;color:var(--ink);letter-spacing:.01em}
.about-lead strong{color:var(--gold)}

.about-split{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}
.about-split-media{overflow:hidden;border-radius:6px;border:1px solid var(--hairline-gold);aspect-ratio:4/3;position:relative}
.about-split-media img{width:100%;height:124%;object-fit:cover;display:block;border:0;border-radius:0;will-change:transform}
.about-split-body h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem);line-height:1;margin:14px 0 18px}
.about-split-body h2 .g{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.about-split-body p{color:var(--muted);margin:0 0 16px;font-size:1.03rem;line-height:1.65}
@media(max-width:820px){.about-split{grid-template-columns:1fr;gap:30px}.about-split-media{order:-1}}

.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:4px;overflow:hidden;margin-top:36px}
.about-values .av{background:var(--void);padding:32px 28px}
.about-values .ic{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--hairline-gold);border-radius:8px;color:var(--gold);margin-bottom:16px}
.about-values .ic svg{width:22px;height:22px}
.about-values h6,.about-values .av-title{font-family:var(--disp);text-transform:uppercase;font-size:1.05rem;margin:0 0 8px;color:var(--ink)}
.about-values p{color:var(--muted);margin:0;font-size:.95rem;line-height:1.6}
@media(max-width:820px){.about-values{grid-template-columns:1fr}}

.sec-link{font-family:var(--hud);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);align-self:end;white-space:nowrap}
.about-lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.al-card{position:relative;min-height:200px;border-radius:5px;overflow:hidden;border:1px solid var(--hairline);background:#0d1016 85% center/cover no-repeat;display:flex;align-items:flex-end;text-decoration:none;transition:transform .25s,border-color .25s}
.al-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,11,18,.92) 8%,rgba(8,11,18,.45) 46%,rgba(8,11,18,.15) 100%)}
.al-card:hover{transform:translateY(-4px);border-color:var(--hairline-gold)}
.al-body{position:relative;z-index:2;padding:22px}
.al-body h5,.al-body .al-title{font-family:var(--disp);text-transform:uppercase;font-size:1.25rem;margin:0 0 4px;color:#fff}
.al-body p{font-family:var(--hud);font-size:.69rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright);margin:0}
/* eight ranges: 4 + 4, then 2-up, then one column — never a half-empty row */
@media(max-width:1100px){.about-lineup{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.about-lineup{grid-template-columns:1fr}}

.closer-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ============ CONTACT PAGE ============ */
.contact-hero{min-height:74vh}
.contact-comms{position:relative}
.contact-alert{border-radius:4px;padding:14px 18px;margin:0 0 30px;font-size:.98rem;border:1px solid var(--hairline)}
.contact-alert.ok{background:rgba(101,188,123,.10);border-color:rgba(101,188,123,.4);color:#a7e0b5}
.contact-alert.err{background:rgba(219,75,104,.10);border-color:rgba(219,75,104,.4);color:#f0a6b4}
.comms-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.comms-left{display:flex;flex-direction:column;gap:22px}
.comms-media{border-radius:6px;overflow:hidden;border:1px solid var(--hairline-gold);position:relative}
.comms-media img{width:100%;display:block}
.comms-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,11,18,.5),transparent 40%);pointer-events:none}
.comms-info{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.comms-info .ci{display:flex;gap:13px;align-items:center;background:rgba(16,20,31,.5);border:1px solid var(--hairline);border-radius:5px;padding:14px;text-decoration:none;transition:border-color .2s,background .2s}
.comms-info a.ci:hover{border-color:var(--hairline-gold);background:rgba(20,24,34,.7)}
.comms-info .ic{flex:0 0 auto;display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--hairline-gold);border-radius:8px;color:var(--gold)}
.comms-info .ic svg{width:18px;height:18px}
.comms-info .ci-t{display:flex;flex-direction:column;font-size:.9rem;color:var(--ink);line-height:1.35;min-width:0}
.comms-info .ci-t em{font-style:normal;font-family:var(--hud);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.contact-form{position:relative;background:linear-gradient(180deg,rgba(18,22,33,.86),rgba(12,15,23,.86));border:1px solid var(--hairline-gold);border-radius:8px;padding:34px 30px;backdrop-filter:blur(4px)}
.cf-badge{position:absolute;top:-11px;left:24px;font-family:var(--hud);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:var(--void-2);border:1px solid var(--hairline-gold);padding:5px 12px;border-radius:3px}
.contact-form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
.contact-form label{display:block;margin-bottom:18px}
.contact-form label span{display:block;font-family:var(--hud);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact-form input,.contact-form textarea{width:100%;background:var(--surface);border:1px solid var(--hairline-gold);border-radius:4px;padding:13px 14px;color:var(--ink);font-family:var(--body);font-size:1rem;transition:border-color .2s,box-shadow .2s}
.contact-form input:hover,.contact-form textarea:hover{border-color:rgba(var(--gold-rgb),.4)}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 0 0 3px rgba(var(--gold-rgb),.12)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold)}
.contact-form textarea{resize:vertical;min-height:130px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form .btn{margin-top:6px;border:0;width:100%;justify-content:center}
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.channels .chan{display:flex;gap:16px;align-items:center;background:rgba(16,20,31,.5);border:1px solid var(--hairline);border-radius:6px;padding:22px;text-decoration:none;transition:transform .2s,border-color .2s}
.channels .chan:hover{transform:translateY(-3px);border-color:var(--hairline-gold)}
.channels .ic{flex:0 0 auto;display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--hairline-gold);border-radius:8px;color:var(--gold)}
.channels .ic svg{width:21px;height:21px}
.channels h6,.channels .chan-title{font-family:var(--disp);text-transform:uppercase;font-size:1.05rem;margin:0 0 3px;color:var(--ink)}
.channels p{color:var(--muted);margin:0;font-size:.88rem}
@media(max-width:820px){.comms-grid{grid-template-columns:minmax(0,1fr);gap:30px}.comms-grid>*{min-width:0}.cf-row{grid-template-columns:minmax(0,1fr)}.channels{grid-template-columns:minmax(0,1fr)}.comms-info{grid-template-columns:repeat(2,minmax(0,1fr))}.comms-info>*{min-width:0}}
/* Two tiles side by side leave ~80px for the text at 390px, which split the e-mail
   address and the phone number mid-word. One column until the tiles have room. */
@media(max-width:560px){.comms-info{grid-template-columns:minmax(0,1fr)}}

/* ============ SUPPORT PAGE ============ */
.support-hero{min-height:64vh}
.support-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.st-card{position:relative;display:block;background:rgba(16,20,31,.5);border:1px solid var(--hairline);border-radius:6px;padding:28px 24px 46px;transition:border-color .2s,transform .2s,background .2s}
.st-card:hover{border-color:var(--hairline-gold);transform:translateY(-3px);background:rgba(22,28,42,.6)}
.st-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.st-card .ic{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--hairline-gold);color:var(--gold);margin-bottom:16px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:background .2s,color .2s}
.st-card:hover .ic{background:var(--gold);color:var(--void)}
.st-card .ic svg{width:22px;height:22px}
.st-card h6,.st-card .st-title{font-family:var(--disp);text-transform:uppercase;font-size:1.1rem;margin:0 0 8px;color:var(--ink)}
.st-card p{color:var(--muted);margin:0;font-size:.92rem;line-height:1.55}
.st-go{position:absolute;left:24px;bottom:20px;font-family:var(--hud);color:var(--gold);opacity:.5;transform:translateX(0);transition:transform .2s,opacity .2s}
.st-card:hover .st-go{opacity:1;transform:translateX(4px)}
@media(max-width:820px){.support-topics{grid-template-columns:1fr}}
.support-faq{max-width:820px;margin-top:30px;border-top:1px solid var(--hairline)}
.faq{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-family:var(--body);font-weight:700;text-transform:none;font-size:1.05rem;line-height:1.4;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-bright)}
.faq .fq-plus{font-family:var(--hud);color:var(--gold);font-size:1.4rem;transition:transform .25s;flex:0 0 auto}
.faq[open] .fq-plus{transform:rotate(45deg)}
.faq-a{padding:0 2px 22px;color:var(--muted);font-size:1rem;line-height:1.7;max-width:70ch}
.faq-a p{margin:0}

/* ============ 404 + SEARCH ============ */
.notfound{position:relative;min-height:82vh;display:flex;align-items:center;background-size:cover;background-position:center;border-bottom:1px solid var(--hairline)}
.notfound::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 16%,rgba(10,12,18,.7) 44%,rgba(10,12,18,.2) 70%,transparent 100%)}
.notfound .wrap{position:relative;z-index:2;width:100%}
.notfound-copy{max-width:600px}
.nf-code{font-family:var(--disp);font-size:clamp(4rem,12vw,9rem);line-height:.9;color:var(--gold);letter-spacing:.02em;margin:6px 0 4px;text-shadow:0 0 40px rgba(var(--gold-rgb),.3)}
.notfound-copy h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);line-height:1;margin:0 0 14px;background:linear-gradient(180deg,#fff,#d9d4c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.notfound-copy h1 .g{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.notfound-copy>p{color:var(--muted);font-size:1.05rem;margin:0 0 24px;max-width:480px}
.nf-search{display:flex;gap:10px;margin-bottom:18px;max-width:480px}
.nf-search input{flex:1;background:rgba(10,12,18,.7);border:1px solid var(--hairline-gold);border-radius:4px;padding:14px 16px;color:var(--ink);font-family:var(--body);font-size:1rem}
.nf-search input:focus{outline:none;border-color:var(--gold)}
.nf-search .btn{border:0}
.nf-links{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:820px){.notfound{min-height:70vh}.nf-search{flex-direction:column}
  /* phones: the art is cropped to fragments behind the copy, so the scrim runs top-to-bottom and the picture reads as atmosphere */
  .notfound::after{background:linear-gradient(180deg,rgba(8,11,18,.62),rgba(8,11,18,.8) 30%,rgba(8,11,18,.84) 78%,rgba(8,11,18,.94))}
  .notfound-copy>p{color:var(--ink)}}
.search-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.sr-item{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);border-radius:4px;overflow:hidden;text-decoration:none;transition:border-color .25s,transform .25s}
.sr-item:hover{border-color:var(--hairline-gold);transform:translateY(-4px)}
.sr-thumb{width:100%;aspect-ratio:1/1;overflow:hidden;background:#0d1016;display:grid;place-items:center;border-bottom:1px solid var(--hairline-gold)}
.sr-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.sr-item:hover .sr-thumb img{transform:scale(1.04)}
.sr-noimg{color:var(--gold);font-size:2rem;opacity:.45}
.sr-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.sr-type{font-family:var(--hud);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sr-body h5,.sr-body .sr-title{font-family:var(--body);font-weight:700;text-transform:none;font-size:1.04rem;margin:8px 0 0;color:var(--ink);line-height:1.3;letter-spacing:0}
.sr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.sr-price{font-family:var(--hud);color:var(--gold);font-size:.95rem;font-variant-numeric:tabular-nums}
.sr-stock{font-family:var(--hud);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--in-stock);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sr-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--in-stock);box-shadow:0 0 8px var(--in-stock)}
@media(max-width:1024px){.search-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.search-grid{grid-template-columns:repeat(2,1fr)}}
/* Phones: same compact two-up card as the shop grid - stacked price row so the
   stock label never clips at the card edge. */
@media(max-width:600px){
  .search-grid{gap:12px}
  .sr-body{padding:14px}
  .sr-body h5,.sr-body .sr-title{font-size:.9rem}
  .sr-row{flex-direction:column;align-items:flex-start;gap:6px}
  .sr-stock{font-size:.6rem;letter-spacing:.08em}
}
@media(max-width:380px){.search-grid{grid-template-columns:1fr}}
.search-empty{text-align:center;padding:40px 0 20px;max-width:520px;margin:0 auto}
.search-empty .nf-code{color:var(--gold);opacity:.55}
.search-empty h2{font-family:var(--disp);text-transform:uppercase;font-size:2rem;margin:0 0 10px}
.search-empty p{color:var(--muted);margin:0 0 22px}
.search-empty .nf-search{margin:0 auto 0}

/* ============ HOMEPAGE CINEMATIC BANNER ============ */
.home-banner{position:relative;min-height:clamp(380px,54vh,580px);display:flex;align-items:center;background-size:cover;background-position:center;background-attachment:fixed;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.hb-copy{max-width:600px}
.home-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 10%,rgba(10,12,18,.72) 42%,rgba(10,12,18,.2) 72%,transparent 100%)}
.home-banner .wrap{position:relative;z-index:2;width:100%}
.hb-copy{max-width:540px}
.hb-copy h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:1;margin:14px 0 16px;background:linear-gradient(180deg,#fff,#d9d4c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-copy h2 .g{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-copy p{color:var(--muted);font-size:1.08rem;margin:0 0 24px;max-width:440px}
@media(max-width:820px){.home-banner{min-height:52vh;background-attachment:scroll}}

/* ============ HEADER SEARCH OVERLAY ============ */
.search-toggle{background:none;border:0;color:var(--muted);cursor:pointer;display:inline-flex;padding:0;align-items:center}
.search-toggle svg{width:20px;height:20px;transition:color .2s}
.search-toggle:hover svg,.search-toggle[aria-expanded="true"] svg{color:var(--gold)}
.search-overlay{position:absolute;top:100%;left:0;right:0;background:linear-gradient(180deg,var(--void-2),var(--void));border-bottom:1px solid var(--hairline-gold);box-shadow:0 30px 50px -24px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .25s,transform .25s;z-index:38}
.search-overlay.open{opacity:1;visibility:visible;transform:none}
.search-overlay .wrap{padding-top:22px;padding-bottom:22px}
.search-overlay form{display:flex;align-items:center;gap:16px}
.search-overlay form>svg{width:22px;height:22px;color:var(--gold);flex:0 0 auto}
.search-overlay input[name="s"]{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--hairline);color:var(--ink);font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.2rem,3vw,1.8rem);padding:10px 4px;letter-spacing:.02em}
.search-overlay input[name="s"]:focus{outline:none;border-color:var(--gold)}
.search-overlay input[name="s"]::placeholder{color:var(--muted-2)}
.search-overlay .so-close{max-width:100%;background:none;border:0;color:var(--muted);font-size:1.7rem;cursor:pointer;line-height:1;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.search-overlay .so-close:hover{color:var(--gold)}
@media(max-width:520px){.search-overlay input[name="s"]{font-size:1.1rem}.search-overlay .btn{display:none}}

/* ============ TOP-BAR CURRENCY SWITCHER + MISC ============ */
.u-currency{display:inline-flex;align-items:center}
.u-currency .woocommerce-multi-currency,.u-currency .wmc-currency{display:inline-flex;margin:0;padding:0}
.u-currency select{background:transparent;border:0;color:var(--muted);font-family:var(--hud);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:0 2px;-webkit-appearance:none;appearance:none;line-height:1}
.u-currency select:hover{color:var(--ink)}
/* Market / shipping-country selector (Phase 2 — country is independent of currency) */
.u-market{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;color:var(--muted);font-family:var(--hud);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:0;line-height:1}
.u-market:hover{color:var(--ink)}
.u-market .mkt-globe svg{width:13px;height:13px;display:block}
.u-market .mkt-country{min-width:1.6em;text-align:start}
.market-pop{position:absolute;z-index:1200;background:var(--surface);border:1px solid var(--hairline-gold);border-radius:4px;padding:14px;width:min(290px,88vw);box-shadow:0 24px 60px -20px rgba(0,0,0,.85)}
.market-close{position:absolute;top:6px;inset-inline-end:6px;width:30px;height:30px;border:0;background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:3px}
.market-close:hover,.market-close:focus-visible{color:var(--gold-bright);outline:2px solid rgba(var(--gold-rgb),.5);outline-offset:1px}
.market-pop .market-label{padding-inline-end:30px}
.market-label{display:block;font-family:var(--hud);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 2px 8px}
.market-select-wrap{position:relative}
/* gold chevron at the trailing edge so it clearly reads as a dropdown */
.market-select-wrap::after{content:"";position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D0B36F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat}
.market-select{width:100%;background:var(--void);color:var(--ink);border:1px solid var(--hairline-gold);border-radius:3px;font-family:var(--hud);font-size:.82rem;letter-spacing:.04em;padding:12px 36px 12px 13px;cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .2s}
[dir="rtl"] .market-select{padding:12px 13px 12px 36px}
.market-select:hover,.market-select:focus{border-color:var(--gold);outline:none}
.market-note{margin:10px 2px 0;font-size:.72rem;line-height:1.4;color:var(--muted);letter-spacing:.02em;min-height:1em}
.market-note.ok{color:var(--stock,#65bc7b)}
.market-note.no,.market-note.soon{color:var(--gold)}
.ns-val.u-market{border:1px solid var(--hairline-gold);border-radius:3px;padding:6px 12px;color:var(--ink)}
/* USD uses the "US" flag sprite in WMC; USD is a global currency, so show a
   neutral globe instead — unless the visitor is genuinely in the US (Task 1). */
html:not(.is-us) .vi-flag-64.flag-us{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0b36f' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.4 2.5 3.7 5.6 3.7 9s-1.3 6.5-3.7 9c-2.4-2.5-3.7-5.6-3.7-9S9.6 5.5 12 3z'/%3E%3C/svg%3E")!important;
	background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;box-shadow:none!important;border-radius:0!important
}
.u-currency select option{background:var(--void-2);color:var(--ink);letter-spacing:normal;text-transform:none}
.foot-hours{color:var(--muted)}

/* ============ MOBILE FIXES (audit round 2) ============ */
/* Product card: stack price + stock on narrow cards so "In stock" never clips */
@media(max-width:600px){
  .prods{grid-template-columns:repeat(2,1fr);gap:12px}
  .pcard .pb,.woocommerce ul.products li.product .pb{padding:14px}
  .pcard .row,.woocommerce ul.products li.product .row{flex-direction:column;align-items:flex-start;gap:6px}
  .pcard .p,.woocommerce ul.products li.product .p{font-size:1.02rem}
  .pcard .stock,.pcard .sig-warn,.woocommerce ul.products li.product .stock{font-size:.6rem;letter-spacing:.08em;white-space:nowrap}
  .pcard h5,.pcard .pcard-title,.woocommerce ul.products li.product h5,.woocommerce ul.products li.product .pcard-title{font-size:.9rem}
}
@media(max-width:380px){.prods{grid-template-columns:1fr}}
/* About / Support / Contact hero: stronger scrim on mobile so text stays legible over the panda */
@media(max-width:820px){
  .about-hero-media::after{background:linear-gradient(180deg,rgba(8,11,18,.5),rgba(8,11,18,.72) 34%,rgba(8,11,18,.78) 72%,rgba(8,11,18,.9))!important}
  .about-hero-copy .lede{color:var(--ink)}
}

/* ============ ACCESSIBILITY ============ */
.skip-link{position:absolute;top:-60px;left:12px;z-index:1000;background:var(--gold);color:#221a08;font-family:var(--hud);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:12px 22px;border-radius:0 0 4px 4px;transition:top .2s}
.skip-link:focus{top:0;outline:2px solid #fff}
[dir="rtl"] .skip-link{left:auto;right:12px;border-radius:0 0 0 4px}
/* visible keyboard focus (mouse clicks unaffected via :focus-visible) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.nav-list>li>a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;border-radius:2px}
#content:focus{outline:none}

/* ============================================================
   Polish pass (full-review) — 2026-07-16
   ============================================================ */

/* Homepage category tiles — cosmic banner backgrounds */
.cat.has-img{min-height:210px;background-size:cover;background-position:center;border-color:var(--hairline-gold)}
.cat.has-img::before{content:"";position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;opacity:1;background:linear-gradient(to right,rgba(8,10,16,.86),rgba(8,10,16,.5) 48%,rgba(8,10,16,.06) 78%);z-index:0;transition:background .3s}
.cat.has-img:hover::before{transform:none;background:linear-gradient(to right,rgba(8,10,16,.78),rgba(8,10,16,.4) 48%,rgba(8,10,16,0) 78%)}
.cat.has-img .meta{color:var(--ink)}
.cat.has-img>*{position:relative;z-index:1}
.cat.has-img .idx,.cat.has-img h4,.cat.has-img .meta{text-shadow:0 1px 14px rgba(0,0,0,.7)}
.cat.has-img:hover{transform:translateY(-3px)}

/* Themed pagination (search + shop archive) */
.woo-pagination,.woocommerce-pagination{margin-top:44px;display:flex;justify-content:center}
.woo-pagination .nav-links,.woocommerce-pagination ul{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0;border:0}
.woocommerce-pagination ul li{margin:0;border:0}
.woo-pagination a.page-numbers,.woo-pagination span.page-numbers,
.woocommerce-pagination a.page-numbers,.woocommerce-pagination span.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 13px;border:1px solid var(--hairline);border-radius:3px;background:var(--surface);color:var(--muted);font-family:var(--hud);font-size:.82rem;letter-spacing:.03em;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.woo-pagination a.page-numbers:hover,.woocommerce-pagination a.page-numbers:hover{border-color:var(--gold);color:var(--ink)}
.woo-pagination span.current,.woocommerce-pagination span.current{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));color:#1a1206;border-color:transparent;font-weight:700}
.woo-pagination .page-numbers.dots,.woocommerce-pagination .page-numbers.dots{border:0;background:transparent;min-width:auto;padding:0 4px}

/* Footer legal links (bottom bar) + contact map */
.fbar{flex-wrap:wrap;gap:12px}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{color:var(--muted-2);font-family:var(--hud);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase}
.foot-legal a:hover{color:var(--gold)}
.contact-map{border:1px solid var(--hairline-gold);border-radius:4px;overflow:hidden;line-height:0}
.contact-map iframe{display:block;width:100%;filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.75)}

/* Footer newsletter capture */
.foot-news{margin:4px 0 18px}
/* Honeypot: hide WITHOUT off-screen left:-9999px, which in RTL creates huge horizontal
   overflow and pushes the whole page out of the viewport (blank page bug). Clip instead. */
.foot-news .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.foot-news-l{display:block;font-family:var(--hud);font-size:.69rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;line-height:1.4}
.foot-news-row{display:flex;gap:8px;max-width:340px}
.foot-news-row input[type=email]{flex:1;min-width:0;background:var(--surface);border:1px solid var(--hairline-gold);border-radius:3px;color:var(--ink);padding:0 12px;height:40px;font-family:var(--body);font-size:.85rem}
.foot-news-row input[type=email]:focus{outline:none;border-color:var(--gold)}
.foot-news-row .btn{flex:0 0 auto;padding:0 16px;height:40px}
.foot-news-msg.ok{color:var(--in-stock);font-family:var(--hud);font-size:.72rem;letter-spacing:.04em}

/* Hero slider (multi-banner carousel) */
.hero-slider{position:relative;overflow:hidden}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s ease}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:1}
.hero-slide .wrap{position:relative;z-index:2;width:100%}
.hero-dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;display:flex;gap:10px}
/* The visible dot is a 34x4 bar, but a 4px-tall control fails WCAG target
   size (24x24 min). The button keeps a 24px hit area and draws the bar as a
   pseudo-element, so it looks identical and is actually hittable. */
.hero-dots button{width:34px;height:24px;padding:10px 0;border:0;background:none;cursor:pointer;display:block}
.hero-dots button::before{content:"";display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.28);transition:background .3s,transform .3s}
.hero-dots button:hover::before{background:rgba(255,255,255,.55)}
.hero-dots button.is-active::before{background:var(--gold);transform:scaleY(1.5)}
@media(max-width:600px){.hero-dots{bottom:16px}}

.about-lead-sub{max-width:640px;margin:16px auto 0;color:var(--muted);font-size:1.08rem;line-height:1.6;text-align:center}

/* Language toggle + Track Order inside the mobile nav drawer (the util bar is hidden on phones) */
.nav-only-mobile{display:none}
@media(max-width:920px){
  .nav-only-mobile{display:block;border-top:1px solid var(--hairline);margin-top:6px}
  .nav-only-mobile>a{color:var(--gold)!important;font-weight:700}
  /* Mobile drawer settings rows: labelled Language + Currency switchers */
  .nav-only-mobile.nav-settings{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--hairline);margin-top:0}
  .nav-settings .ns-label{font-family:var(--hud);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .nav-settings .ns-val{color:var(--gold)!important;font-weight:700;font-family:var(--hud);font-size:.8rem;letter-spacing:.1em}
  .nav-settings .ns-currency select{background:var(--surface);color:var(--gold);border:1px solid var(--hairline-gold);border-radius:3px;padding:6px 10px;font-family:var(--hud);font-size:.8rem;cursor:pointer}
  .nav-settings .ns-currency{display:inline-flex}
}

/* Full-width parallax story band (cosmic panda + Bahrain flag; text over gold-nebula negative space) */
.about-story-band{position:relative;overflow:hidden;min-height:clamp(620px,40vw,940px);display:flex;align-items:center;border-block:1px solid var(--hairline)}
.asb-media{position:absolute;inset:-11% 0;z-index:0;background-size:cover;background-position:center 15%;background-color:var(--void);will-change:transform}
.asb-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 6%,rgba(10,12,18,.86) 34%,rgba(10,12,18,.42) 60%,transparent 100%),linear-gradient(0deg,var(--void) 2%,transparent 34%)}
.about-story-band .wrap{position:relative;z-index:2;width:100%}
.asb-copy{max-width:560px}
.asb-copy .kicker{margin-bottom:14px}
.asb-copy h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem);line-height:1;margin:10px 0 18px}
.asb-copy h2 .g{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.asb-copy p{color:#cbcfd8;margin:0 0 16px;font-size:1.03rem;line-height:1.65;max-width:520px}
@media(max-width:820px){
  .about-story-band{min-height:auto;padding:60px 0}
  .asb-media::after{background:linear-gradient(0deg,var(--void) 22%,rgba(10,12,18,.5) 58%,rgba(10,12,18,.72))}
  .asb-copy p{color:#d6d9e0}
}
.foot-tm{font-size:.72rem;color:var(--muted-2);max-width:900px;margin:26px 0 0;line-height:1.7}
.foot-tm a{color:var(--muted);text-decoration:underline}
.foot-tm a:hover{color:var(--gold)}

/* ===== Trademarks portfolio page ===== */
.tm-hero{position:relative;min-height:clamp(400px,52vh,560px);display:flex;align-items:center;border-bottom:1px solid var(--hairline);overflow:hidden}
.tm-hero-media{position:absolute;inset:0;background:url('../img/trademarks/tm-hero.jpg') center right/cover no-repeat var(--void)}
.tm-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 24%,rgba(10,12,18,.82) 46%,rgba(10,12,18,.3) 68%,rgba(10,12,18,.12) 100%),linear-gradient(0deg,var(--void) 2%,transparent 24%)}
.tm-hero .wrap{position:relative;z-index:2;width:100%}
.tm-hero-copy{max-width:640px;padding:72px 0}
.tm-hero-copy h1{font-size:clamp(2rem,4.6vw,3.4rem);text-transform:uppercase;margin-top:14px}
.tm-hero-copy .lede{color:var(--muted);max-width:56ch;margin-top:16px}
.tm-reviewed{font-family:var(--hud);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:18px}
.tm-sec .sec-head{margin-bottom:22px}
.tm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tm-card{border:1px solid var(--hairline);border-radius:5px;background:var(--surface);padding:22px 24px}
.tm-card-n{font-family:var(--disp);font-size:2.1rem;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.tm-card-l{font-family:var(--hud);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.7}
.tm-note{color:var(--muted-2);font-size:.85rem;max-width:78ch;margin:16px 0 0;line-height:1.75}
/* The marks are shown on a light plate because the supplied artwork is black:
   re-inking it to sit on the dark page would be the very alteration the usage
   rules on this page prohibit. The plate is the concession, not the logo. */
.tm-marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:6px}
/* The device is much taller than the wordmark, so content-sized plates ended up
   different heights and the two captions sat at different levels — the pair read
   as two unrelated blocks. The grid already stretches the figures to equal
   height; the plate has to claim that height for the effect to show. */
.tm-mark{margin:0;display:flex;flex-direction:column}
.tm-mark-plate{flex:1}
.tm-mark-plate{display:grid;place-items:center;background:var(--ink);border:1px solid rgba(var(--gold-rgb),.28);padding:clamp(20px,4vw,34px);min-height:140px}
.tm-mark-plate img{width:100%;max-width:340px;height:auto;display:block}
/* The device is squarer than the wordmark; cap it so the two plates read as a
   pair rather than one dwarfing the other. */
.tm-mark:first-child .tm-mark-plate img{max-width:190px}
.tm-mark figcaption{font-family:var(--hud);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:10px}
.tm-body{color:var(--muted);max-width:78ch;margin:0 0 16px;line-height:1.85}
.tm-badge{display:inline-block;font-family:var(--hud);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;padding:5px 9px;white-space:nowrap;border:1px solid}
.tm-badge.is-registered{color:var(--in-stock);border-color:rgba(101,188,123,.4);background:rgba(101,188,123,.08)}
.tm-badge.is-pending{color:var(--gold);border-color:var(--hairline-gold);background:rgba(var(--gold-rgb),.08)}
.tm-badge.is-madrid{color:#7fb3d3;border-color:rgba(127,179,211,.35);background:rgba(51,101,140,.12)}
.tm-badge.is-verify{color:var(--muted);border-color:var(--hairline);background:rgba(255,255,255,.03)}
.tm-us{border:1px solid var(--hairline-gold);border-radius:5px;background:linear-gradient(180deg,rgba(var(--gold-rgb),.05),transparent 55%),var(--surface);padding:28px 30px}
.tm-us-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px;margin:0 0 22px}
.tm-us-grid dt{font-family:var(--hud);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.tm-us-grid dd{margin:6px 0 0;font-size:1.02rem;overflow-wrap:anywhere}
.tm-dim{color:var(--muted-2);font-size:.9em}
/* The group-ownership note sits UNDER the registered proprietor, never inline with
   it — the name is the registry fact and has to read as one unbroken value. */
.tm-aff{display:block;margin-top:.35rem;max-width:52ch;line-height:1.45;text-wrap:pretty}
.tm-tablewrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:5px}
.tm-table{width:100%;min-width:860px;border-collapse:collapse;background:var(--surface)}
.tm-table thead th{font-family:var(--hud);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);text-align:start;padding:14px 16px;border-bottom:1px solid var(--hairline);background:var(--surface-2)}
.tm-table tbody th,.tm-table tbody td{padding:14px 16px;border-bottom:1px solid var(--hairline);text-align:start;font-size:.92rem;color:var(--muted);vertical-align:top;overflow-wrap:anywhere}
.tm-table tbody th{color:var(--ink);font-weight:600}
.tm-table tbody tr:last-child th,.tm-table tbody tr:last-child td{border-bottom:0}
.tm-table a{color:var(--gold);text-decoration:underline}
.tm-table a:hover{color:var(--gold-bright)}
.tm-eu{margin-top:18px;border:1px solid var(--hairline);border-radius:5px;background:var(--surface)}
.tm-eu summary{cursor:pointer;padding:16px 20px;font-family:var(--hud);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.tm-eu summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tm-eu p{padding:0 20px 16px;margin:0;color:var(--muted);line-height:1.85}
.tm-evidence{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px;max-width:760px}
.tm-evidence li{position:relative;padding-inline-start:22px;color:var(--muted)}
.tm-evidence li::before{content:"◇";position:absolute;inset-inline-start:0;color:var(--gold)}
.tm-rules{list-style:none;margin:0;padding:0;max-width:78ch}
.tm-rules li{position:relative;padding:12px 0 12px;padding-inline-start:24px;border-bottom:1px dashed var(--hairline);color:var(--muted);line-height:1.8}
.tm-rules li::before{content:"◇";position:absolute;inset-inline-start:0;top:14px;color:var(--gold)}
.tm-rules li:last-child{border-bottom:0}
.tm-rules a{color:var(--gold);text-decoration:underline}
.tm-contact{display:flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid var(--hairline-gold);border-radius:5px;background:var(--surface);padding:30px 34px}
.tm-contact h2{font-size:1.5rem;text-transform:uppercase}
.tm-contact p{color:var(--muted);margin:10px 0 0;max-width:60ch}
.tm-disclaimer{color:var(--muted-2);font-size:.78rem;line-height:1.8;max-width:86ch;margin:22px 0 0}
@media(max-width:920px){.tm-cards{grid-template-columns:1fr 1fr}.tm-us-grid{grid-template-columns:1fr 1fr}.tm-contact{flex-direction:column;align-items:flex-start}}
@media(max-width:760px){
	.tm-tablewrap{border:0;overflow:visible}
	.tm-table{min-width:0;background:transparent}
	.tm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.tm-table tbody tr{display:block;border:1px solid var(--hairline);border-radius:5px;background:var(--surface);margin-bottom:12px;padding:6px 0}
	.tm-table tbody th,.tm-table tbody td{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--hairline);padding:10px 16px;text-align:end}
	.tm-table tbody th::before,.tm-table tbody td::before{content:attr(data-label);font-family:var(--hud);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);text-align:start;flex:0 0 42%}
	.tm-table tbody tr th:last-child,.tm-table tbody tr td:last-child{border-bottom:0}
	.tm-evidence{grid-template-columns:1fr}
	.tm-hero-copy{padding:56px 0}
}
@media(max-width:520px){.tm-cards{grid-template-columns:1fr}.tm-us-grid{grid-template-columns:1fr}}

/* ===== Highlights showcase (tabbed cross-category products) ===== */
.hl{margin-top:8px}
.hl-tabs{display:flex;gap:8px;border-bottom:1px solid var(--hairline);margin-bottom:26px;flex-wrap:wrap}
.hl-tab{font-family:var(--hud);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;padding:14px 22px 16px;cursor:pointer;position:relative;transition:color .2s}
.hl-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.2,.8,.24,1)}
.hl-tab:hover{color:var(--ink)}
.hl-tab.is-active{color:var(--ink)}
.hl-tab.is-active::after{transform:scaleX(1)}
.hl-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.hl-panel{display:none}
.hl-panel.is-active{display:grid}
.prods.hl-panel{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.prods.hl-panel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prods.hl-panel{grid-template-columns:1fr}}
/* Card badge (NEW / rank) */
.pcard .ph{position:relative}
.pcard-badge{position:absolute;top:10px;inset-inline-start:10px;z-index:2;font-family:var(--hud);font-size:.69rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#221a08;background:linear-gradient(180deg,var(--gold-bright),var(--gold));padding:4px 8px;border-radius:2px;box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}

/* ===== Mobile/tablet tap-target polish (≥44px hit areas) ===== */
@media(max-width:920px){
  /* Header icons: expand tap area to ~44px without spreading the row */
  .header-icons{gap:2px}
  .header-icons > a,.header-icons > button,.search-toggle,.nav-toggle{padding:11px!important;display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  /* keep the cart badge hugging the icon inside the padded box */
  .cart-link{position:relative}
  .cart-link .count{top:4px;right:6px}
  /* "Shop everything →" / link-more style links get a comfortable tap height */
  .link-more,.sec-link{padding:8px 0;display:inline-flex;align-items:center}
}
/* Hero slider dots: keep the thin visual, expand the invisible hit area to 40px */
.hero-dots button{position:relative}
.hero-dots button::before{content:"";position:absolute;inset:-18px -6px}

/* ============================================================
   Slide-out CART DRAWER (mini-cart preview) — site-wide
   ============================================================ */
html.cart-open{overflow:hidden}
.cart-drawer{position:fixed;inset:0;z-index:1400;visibility:hidden;pointer-events:none}
.cart-drawer.open{visibility:visible;pointer-events:auto}
.cart-drawer-scrim{position:absolute;inset:0;background:rgba(5,7,12,.62);opacity:0;transition:opacity .3s ease}
.cart-drawer.open .cart-drawer-scrim{opacity:1}
.cart-drawer-panel{position:absolute;top:0;inset-inline-end:0;height:100%;width:min(420px,92vw);background:var(--surface);border-inline-start:1px solid var(--hairline-gold);box-shadow:-34px 0 70px -24px rgba(0,0,0,.75);transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
[dir="rtl"] .cart-drawer-panel{transform:translateX(-100%)}
.cart-drawer.open .cart-drawer-panel{transform:none}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--hairline);flex:0 0 auto}
.cart-drawer-head .cd-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.15rem;color:var(--ink);letter-spacing:.02em}
.cart-drawer-close{background:none;border:0;color:var(--muted);font-size:1.9rem;line-height:1;cursor:pointer;padding:0 4px}
.cart-drawer-close:hover{color:var(--gold)}
.cart-drawer-body{flex:1 1 auto;overflow-y:auto;padding:6px 24px 24px;display:flex;flex-direction:column}
/* WooCommerce mini-cart inside the drawer */
.cart-drawer-body ul.cart_list,.cart-drawer-body ul.product_list_widget{list-style:none;margin:0;padding:0;flex:1 1 auto}
/* WooCommerce nests the thumbnail INSIDE the product link, so the grid must live
   on that link (image | name) — not on the <li>, which would squeeze the whole
   link into the 60px image column and wrap the name one word per line. */
.cart-drawer-body ul.cart_list li,.cart-drawer-body ul.product_list_widget li{display:block;padding:16px 26px 16px 0;border-bottom:1px solid var(--hairline);position:relative}
[dir="rtl"] .cart-drawer-body ul.cart_list li{padding:16px 0 16px 26px}
.cart-drawer-body ul.cart_list li a:not(.remove),.cart-drawer-body ul.product_list_widget li a:not(.remove){display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center;color:var(--ink);font-family:var(--hud);font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;line-height:1.4;overflow-wrap:anywhere}
.cart-drawer-body ul.cart_list li img,.cart-drawer-body ul.product_list_widget li img{width:60px!important;height:auto;margin:0!important;border:1px solid var(--hairline);border-radius:3px;float:none!important}
/* quantity/price sits under the name, aligned to the text column */
.cart-drawer-body ul.cart_list li .quantity{display:block;margin-top:8px;padding-inline-start:74px}
.cart-drawer-body ul.cart_list li a:not(.remove):hover{color:var(--gold)}
.cart-drawer-body .quantity{color:var(--muted);font-size:.82rem;font-family:var(--hud)}
.cart-drawer-body .quantity .amount{color:var(--gold-bright)}
.cart-drawer-body a.remove{position:absolute;top:14px;inset-inline-end:0;width:24px;height:24px;line-height:22px;text-align:center;color:var(--muted-2)!important;font-size:1.1rem;border-radius:50%}
.cart-drawer-body a.remove:hover{color:var(--danger)!important;background:rgba(219,75,104,.12)}
.cart-drawer-body .woocommerce-mini-cart__total{display:flex;align-items:center;justify-content:space-between;padding:18px 0 16px;margin-top:6px;border-top:1px solid var(--hairline-gold);font-family:var(--hud);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cart-drawer-body .woocommerce-mini-cart__total .amount,.cart-drawer-body .woocommerce-mini-cart__total strong{color:var(--gold-bright);font-size:1.15rem;letter-spacing:0}
.cart-drawer-body .woocommerce-mini-cart__buttons{display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.cart-drawer-body .woocommerce-mini-cart__buttons .button{width:100%;justify-content:center;text-align:center;font-family:var(--hud);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:15px 20px;border-radius:2px;--cut:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);clip-path:var(--cut)}
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout){position:relative;border:0;background:transparent;color:var(--ink);isolation:isolate}
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout)::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hairline-gold);clip-path:var(--cut)}
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout)::after{content:"";position:absolute;inset:1px;z-index:-1;background:var(--surface);clip-path:var(--cut)}
.cart-drawer-body .woocommerce-mini-cart__buttons .button.checkout{background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));color:#221a08;border:0;box-shadow:0 10px 26px -12px rgba(var(--gold-rgb),.6)}
/* Hover / focus — the drawer buttons are WooCommerce .button elements, so they
   don't inherit .btn-gold/.btn-ghost states; give them the same brand feedback.
   Specificity here also beats woo.css's generic `.woocommerce .button:hover`
   (which forces dark text and would make the ghost label vanish on the dark panel). */
.cart-drawer-body .woocommerce-mini-cart__buttons .button{transition:transform .18s ease,box-shadow .25s ease,color .2s ease,filter .2s ease}
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout):hover,
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout):focus-visible{color:var(--gold-bright)!important;transform:translateY(-2px)}
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout):hover::before,
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout):focus-visible::before{background:var(--gold)}
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout):hover::after,
.cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout):focus-visible::after{background:linear-gradient(rgba(var(--gold-rgb),.08),rgba(var(--gold-rgb),.08)),var(--surface)}
.cart-drawer-body .woocommerce-mini-cart__buttons .button.checkout:hover,
.cart-drawer-body .woocommerce-mini-cart__buttons .button.checkout:focus-visible{color:#221a08!important;transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 36px -12px rgba(var(--gold-rgb),.85)}
/* Remove button (x) on each drawer line — make the hover target obvious too */
.cart-drawer-body ul.cart_list li a.remove{transition:color .2s ease,background .2s ease}
.cart-drawer-body p.woocommerce-mini-cart__empty-message{color:var(--muted);text-align:center;padding:40px 0;font-family:var(--hud);letter-spacing:.06em}
[dir="rtl"] .cart-drawer-panel{border-inline-start:0;border-inline-end:1px solid var(--hairline-gold)}

/* ============================================================
   Live search suggestions (typing shows matching products)
   ============================================================ */
form.has-live-search{position:relative;max-width:100%;min-width:0}
.live-search{position:absolute;top:calc(100% + 8px);inset-inline-start:0;width:100%;z-index:1300;background:var(--surface);border:1px solid var(--hairline-gold);border-radius:4px;box-shadow:0 26px 60px -24px rgba(0,0,0,.85);overflow:hidden;max-height:min(70vh,520px);overflow-y:auto}
.live-search .ls-list{list-style:none;margin:0;padding:0}
.live-search .ls-item + .ls-item{border-top:1px solid var(--hairline)}
.live-search .ls-item a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:11px 14px;text-decoration:none;transition:background .15s}
.live-search .ls-item a:hover,.live-search .ls-item.is-active a{background:rgba(var(--gold-rgb),.09)}
/* A 9%-alpha background tint is not a focus indicator. Keyboard focus keeps the
   tint AND gets the ring; the outline is inset so it reads inside the dropdown's
   own edge instead of spilling over it. */
.live-search .ls-item a:focus-visible{background:rgba(var(--gold-rgb),.09);outline:2px solid var(--gold-bright);outline-offset:-2px}
.live-search .ls-item img{width:52px;height:52px;object-fit:contain;background:var(--void);border:1px solid var(--hairline);border-radius:3px}
.live-search .ls-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.live-search .ls-name{font-family:var(--hud);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.live-search .ls-price{font-family:var(--hud);font-size:.78rem;color:var(--gold-bright)}
.live-search .ls-price em{color:var(--muted-2);font-style:normal;font-size:.72rem}
.live-search .ls-price del{color:var(--muted-2);margin-inline-end:6px}
.live-search .ls-empty{padding:16px 14px;color:var(--muted);font-family:var(--hud);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.live-search .ls-more{display:block;padding:12px 14px;text-align:center;font-family:var(--hud);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border-top:1px solid var(--hairline-gold);text-decoration:none;background:rgba(var(--gold-rgb),.05)}
.live-search .ls-more:hover{background:rgba(var(--gold-rgb),.12);color:var(--gold-bright)}

/* Target size (WCAG 2.5.8 AA = 24x24 CSS px). Mobile ≤920px already gets 44px
   targets; tablet/desktop header + utility-bar controls were 20x20 / 20x17. */
@media(min-width:921px){
	.util .u-right > a,.util .u-right .u-lang,.util .u-right .u-market{min-height:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center}
	.util .u-right .u-currency{min-height:24px;display:inline-flex;align-items:center}
	.util .u-right .u-currency select{min-height:24px;padding-block:6px}
	/* The burger is mobile-only. It must be re-hidden with at least the
   specificity of the .header-icons > button rule below, which otherwise
   wins and shows it beside the full desktop navigation. */
  .header-icons > button.nav-toggle{display:none}
  .header-icons > a,.header-icons > button{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---- Hero slider arrows ---- */
.hero-nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:4;
	width:52px;height:52px;padding:0;cursor:pointer;
	background:rgba(10,12,18,.62);border:1px solid var(--hairline-gold);border-radius:3px;
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	opacity:.85;transition:opacity .2s,border-color .2s,background .2s;
}
.hero-slider:hover .hero-nav{opacity:1}
.hero-nav:hover{background:rgba(12,15,23,.92);border-color:var(--gold)}
.hero-nav:focus-visible{opacity:1;outline:2px solid var(--gold);outline-offset:3px}
/* chevron drawn from a rotated border so it inherits the gold token */
.hero-nav::before{
	content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;
	border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
}
.hero-prev{inset-inline-start:clamp(10px,2vw,28px)}
.hero-next{inset-inline-end:clamp(10px,2vw,28px)}
.hero-prev::before{transform:translate(-40%,-50%) rotate(45deg)}
.hero-next::before{transform:translate(-60%,-50%) rotate(-135deg)}
@media(max-width:820px){
	.hero-nav{width:42px;height:42px;opacity:.9}
	.hero-nav::before{width:9px;height:9px}
}
/* On phones the hero copy spans nearly the full width, so side arrows land ON
   the lede text (measured: both overlap at 412px). Swipe and the dots already
   cover navigation there, so drop the arrows rather than shrink the copy. */
@media(max-width:640px){
	.hero-nav{display:none}
}
@media(prefers-reduced-motion:reduce){.hero-nav{transition:none}}

/* Hero lede sits directly on the artwork. Aggregate contrast passes (4.92:1)
   but drops locally over bright regions, so give the text its own scrim. */
.hero-copy .lede{text-shadow:0 1px 3px rgba(4,6,12,.85),0 0 14px rgba(4,6,12,.55)}
@media(max-width:640px){
	.hero-copy .lede{text-shadow:0 1px 3px rgba(4,6,12,.92),0 0 18px rgba(4,6,12,.7)}
}

/* ---- Cloudflare Turnstile ----
   The widget renders in its own iframe, so its grey panel cannot be restyled —
   it read as a foreign box dropped into the form. Give it a frame that matches
   the surrounding fields and align it to the same column (measured: it sat 6px
   wider and 3px left of the inputs). */
.ransor-captcha-wrap{
	/* WooCommerce .form-row carries 3px horizontal padding, so INPUTS sit 3px
	   inside their row; the captcha is a form-level sibling and needs the same
	   inset to line up with the fields above it. */
	margin:14px 3px 4px;padding:6px;
	border:1px solid var(--hairline-gold);border-radius:3px;background:var(--void);
}
/* The widget element itself stays UNSTYLED — border/padding/flex on it broke
   Turnstile's own iframe sizing and clipped the Cloudflare mark. */
.ransor-captcha{min-height:58px}
/* Owner: the frame matches the field width (same as the password input). The
   compact widget is ~150px, so centre it inside rather than leaving the gap all
   on one side. */
.ransor-captcha-wrap.is-compact{display:flex;justify-content:center}

/* Turnstile's flexible size will not go below ~300px. On phones the account
   card's 30px form padding left only 255px, so trim it and the wrap padding:
   that yields ~340px, over the minimum. Wider inputs help typing too. */
@media(max-width:640px){
	.woocommerce-account .wrap{padding-left:14px;padding-right:14px}
	.woocommerce-account form.woocommerce-form,
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register{padding-left:14px;padding-right:14px}
	.ransor-captcha-wrap{padding:4px}
}
/* Two stray "}" used to sit here. A stray closing brace at the top level makes
   Chrome's parser swallow the NEXT rule while it recovers, and the next rule was
   the .hero-toggle base block below — so the carousel pause control shipped with
   no styling at all: position:static, 22x21px, sitting in the hero's flow
   instead of pinned in its corner (measured in the browser, not read off the
   source). Removing them also restores html.nav-locked{overflow:hidden}, the
   scroll lock for the mobile navigation panel, which was the rule after it. */
/* Hero auto-rotation pause control (WCAG 2.2.2 — moving content must be stoppable). */
.hero-toggle{position:absolute;inset-block-end:18px;inset-inline-end:18px;z-index:6;inline-size:34px;block-size:34px;
 border:1px solid rgba(var(--gold-rgb),.4);border-radius:50%;background:rgba(8,9,14,.62);cursor:pointer;
 display:grid;place-items:center;padding:0;backdrop-filter:blur(4px)}
.hero-toggle::before{content:"";inline-size:9px;block-size:11px;
 border-inline-start:3px solid var(--gold-bright);border-inline-end:3px solid var(--gold-bright)}
.hero-toggle.is-paused::before{inline-size:0;block-size:0;border:0;
 border-block-start:6px solid transparent;border-block-end:6px solid transparent;
 border-inline-start:10px solid var(--gold-bright);border-inline-end:0;margin-inline-start:3px}
.hero-toggle:hover{border-color:var(--gold-bright)}
.hero-toggle:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
/* Scroll lock while the mobile navigation panel is open. */
html.nav-locked,html.nav-locked body{overflow:hidden}
/* A ticker that says "contact sales" must look and behave like a link. */
.ticker-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ticker-link:hover,.ticker-link:focus-visible{color:var(--gold-bright)}

/* ============================================================
   P2.12 — accessibility pass. Nothing here changes the design:
   it restores what the retagged headings used to look like, makes
   the keyboard focus ring win where it was being suppressed, and
   gives the new controls the styling their predecessors had.
   ============================================================ */

/* Heading levels were corrected for the document outline (h6/h5 -> h3/h2).
   h1–h4 pick up the reset's line-height:1.05, where h5/h6 inherited the body's
   1.6 — restore it so these cards wrap exactly as before. */
.about-values .av-title,.al-body .al-title,.channels .chan-title,
.st-card .st-title,.site-footer .foot-h{line-height:1.6}

/* ---- Keyboard focus ----
   Several components set `outline:none` on :focus with a selector more specific
   than the global `input:focus-visible` rule, so a keyboard user landing in the
   contact form, the header search, the 404 search, the newsletter or a filter
   field got NO ring at all — measured with real Tab presses, not by reading the
   source. These restore it. :focus-visible keeps mouse clicks ring-free, so the
   look is unchanged for anyone using a pointer. */
.contact-form input:focus-visible,.contact-form textarea:focus-visible,.contact-form select:focus-visible,
.nf-search input:focus-visible,
.search-overlay input[name="s"]:focus-visible,
.foot-news-row input[type=email]:focus-visible,
.market-select:focus-visible,
.sf-q:focus-visible,
.woocommerce .woocommerce-ordering select:focus-visible,
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce table.cart td.actions .coupon input:focus-visible,
.woocommerce .quantity input.qty:focus-visible{
	outline:2px solid var(--gold-bright);outline-offset:2px;
}
/* Cards and rows that are themselves links need the ring too — several of them
   only styled :hover, so keyboard users had hover-only affordances. */
.pcard:focus-visible,.sr-item:focus-visible,.mega-cat:focus-visible,
.chan:focus-visible,.al-card:focus-visible,.comms-info a.ci:focus-visible,
.cat:focus-visible,.live-search .ls-more:focus-visible,
.woo-pagination a.page-numbers:focus-visible,
.woocommerce-pagination a.page-numbers:focus-visible{
	outline:2px solid var(--gold-bright);outline-offset:3px;
}
/* The skip link's own ring has to read against the gold plate it sits on. */
.skip-link:focus,.skip-link:focus-visible{top:0;outline:3px solid #fff;outline-offset:-3px}
/* The <main> is focused by the skip link. It must not draw a page-wide box. */
#content:focus,#content:focus-visible{outline:none}

/* ---- Contact form fields ----
   The label and the control are now siblings inside .cf-field (see
   page-contact-us.php). These three rules reproduce the previous spacing
   exactly: the field owns the 18px gap the <label> used to own, and the label
   keeps only the 8px its inner <span> provides. */
.contact-form .cf-field{display:block;margin-bottom:18px}
.contact-form .cf-field>label{display:block;margin-bottom:0}
.contact-form .cf-opt{font-style:normal;color:var(--muted-2);text-transform:none;letter-spacing:.04em}
/* forms.js drops its inline error into the field's parent. In the newsletter
   that parent is a flex row, so the message has to claim its own line rather
   than squeeze in beside the input and the button. */
.foot-news-row{flex-wrap:wrap}
.foot-news-row .rf-msg{flex:0 0 100%}

/* ---- Product gallery previous / next ----
   Real <button>s built by theme.js, replacing FlexSlider's <a href="#">. Same
   look as the arrows they replace; the extra rules are the ones a <button>
   needs and an <a> did not (reset appearance, disabled state). */
.single-product .woocommerce-product-gallery .rg-arrow{
	position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;padding:0;
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	background:rgba(12,15,23,.72);border:1px solid var(--hairline-gold);border-radius:50%;
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	font-size:0;overflow:hidden;opacity:0;transition:opacity .25s ease,background .2s,border-color .2s}
.single-product .woocommerce-product-gallery:hover .rg-arrow,
.single-product .woocommerce-product-gallery .rg-arrow:focus-visible{opacity:1}
.single-product .woocommerce-product-gallery .rg-arrow:hover{background:rgba(12,15,23,.92);border-color:var(--gold)}
.single-product .woocommerce-product-gallery .rg-arrow:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.single-product .woocommerce-product-gallery .rg-arrow::before{
	content:"";position:absolute;inset:0;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D0B36F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat}
.single-product .woocommerce-product-gallery .rg-prev{inset-inline-start:14px}
.single-product .woocommerce-product-gallery .rg-next{inset-inline-end:14px}
.single-product .woocommerce-product-gallery .rg-next::before{transform:rotate(180deg)}
[dir="rtl"] .single-product .woocommerce-product-gallery .rg-prev::before{transform:rotate(180deg)}
[dir="rtl"] .single-product .woocommerce-product-gallery .rg-next::before{transform:none}
/* At either end of the gallery the arrow is genuinely unavailable — WooCommerce
   runs it with animationLoop:false. Say so instead of doing nothing silently. */
.single-product .woocommerce-product-gallery .rg-arrow[disabled]{opacity:0!important;pointer-events:none}
@media(hover:none){
	.single-product .woocommerce-product-gallery .rg-arrow{opacity:.92;width:40px;height:40px}
}

/* The utility bar sat outside every landmark, so its links and the currency and
   country controls were unreachable by landmark navigation. It is a labelled
   region now (see header.php) — no visual change. */
.util[role="region"]{display:block}

/* The map is a cross-origin iframe: it is a focus stop, and nothing inside it
   can be styled from here, so the ring goes on the frame itself. (The Turnstile
   widget next to it needs no such rule — a Tab walk found four stops inside it
   with no outline in the computed style, but a screenshot of that focus state
   shows Cloudflare drawing its own blue ring inside its frame, which the
   computed style of the host element cannot see. Not a gap; a blind spot in the
   measurement.) */
.contact-map iframe:focus-visible{outline:3px solid var(--gold-bright);outline-offset:-3px}

/* WooCommerce's description heading was emptied to avoid a duplicate title, which
   left the product copy's own h3 following the h1 with no h2 between - a real
   heading-order failure. Restore the h2 for structure, hide it visually. */
#tab-description > h2:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ---- Quote form: the controls the shared .contact-form rules never covered ----
   `.contact-form input{width:100%}` also hit the consent checkbox, which is why it
   rendered as a full-width bar floating above its own sentence, and <select> was
   never styled at all so the shipping-method dropdown came out native white on a
   dark form. Both are the same components used everywhere else, so they get the
   same treatment rather than a second visual language. */
.contact-form select{width:100%;min-height:46px;background:var(--surface);border:1px solid var(--hairline-gold);border-radius:4px;padding:12px 14px;color:var(--ink);font-family:var(--body);font-size:1rem;
	appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
	background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
[dir="rtl"] .contact-form select{background-position:20px calc(50% + 2px),15px calc(50% + 2px)}
.contact-form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.12)}
.contact-form input[type="checkbox"]{-webkit-appearance:none;appearance:none;display:inline-block;width:18px;height:18px;min-width:18px;flex:0 0 18px;
	border:1px solid var(--hairline-gold);border-radius:3px;background:var(--surface);cursor:pointer;position:relative;padding:0;margin:0}
.contact-form input[type="checkbox"]:checked{background:var(--gold);border-color:var(--gold)}
.contact-form input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #221a08;border-width:0 2px 2px 0;transform:rotate(45deg)}
.contact-form input[type="checkbox"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* The whole sentence is the target, not just the 18px box. */
.qf-consent label{display:flex;align-items:flex-start;gap:10px;min-height:44px;margin-bottom:18px;cursor:pointer;line-height:1.5}
.qf-consent label span{display:inline}
.quote-product{border:1px solid var(--hairline-gold);border-radius:4px;padding:14px 16px;margin-bottom:20px;background:var(--surface)}
.quote-product .qp-label{display:block;font-family:var(--hud);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.quote-product .qp-sku{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}

/* ---- Discontinued: price label + Product Archive page (inc/lifecycle.php) ---- */
.price-eol{font-family:var(--hud);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.eol-archive{padding-top:56px}
.eol-archive-head h1 .g{color:var(--gold)}
.eol-archive-head .lede{margin:14px 0 0;color:var(--muted);font-size:1.05rem;max-width:62ch}
.eol-empty{color:var(--muted)}
.eol-group{margin-top:56px}
.eol-group:first-of-type{margin-top:12px}
.eol-group .sec-head{margin-bottom:22px}
.eol-group .sec-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
ul.eol-grid{list-style:none;margin:0;padding:0}
.eol-card{display:flex;flex-direction:column}
.eol-card-link{display:block;color:inherit;flex:1}
.eol-card .ph,.eol-card .pb{display:block}
.eol-card .ph img{filter:grayscale(.45) brightness(.88);transition:filter .4s ease,transform .5s ease}
.eol-card:hover .ph img{filter:none}
.eol-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--hud);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eol-chip::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--muted-2)}
/* Full names, never clamped: an ellipsis inside a mixed Arabic/Latin name
   ("كرسي ألعاب رانسور Legend Chair – Blue…") truncates the wrong end of the
   Latin run in RTL, and an archive card is a record — the name is the point. */
.eol-card .pcard-title{display:block;font-size:.98rem;margin-bottom:0;text-wrap:balance}
/* Label on its own line, name below it (two lines max): every successor's name
   starts with "RANSOR", so a one-line ellipsis left only "RANSOR Legend…". */
.eol-card-next{display:grid;grid-template-columns:1fr auto;grid-template-areas:"k go" "name go";align-items:center;column-gap:10px;row-gap:3px;padding:12px 18px 14px;border-top:1px solid var(--hairline);font-size:.84rem;color:var(--muted);transition:color .2s,background .2s}
.eol-card-next .eol-next-k{grid-area:k;font-family:var(--hud);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.eol-card-next .eol-next-name{grid-area:name;min-width:0;color:var(--ink);line-height:1.35;text-wrap:balance}
.eol-card-next .eol-next-go{grid-area:go;color:var(--gold)}
.eol-card-range .eol-next-k{color:var(--muted-2)}
.eol-card-next:hover{background:rgba(var(--gold-rgb),.06)}
.eol-card-next:hover .eol-next-name{color:var(--gold-bright)}
[dir="rtl"] .eol-card-next .eol-next-go{transform:scaleX(-1)}
.eol-archive-cta{margin-top:72px;padding-top:44px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.eol-archive-cta p{margin:0;font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.2rem,2.6vw,1.7rem)}
/* Phones: one record per row, thumbnail beside the name — two-up cards left
   ~170px for names that run to 130 characters. */
@media(max-width:520px){
  .eol-archive-head .kicker{font-size:.69rem;letter-spacing:.2em} /* one line at 390px — no lone "MODELS" */
  ul.eol-grid{grid-template-columns:1fr;gap:10px}
  .eol-card-link{display:grid;grid-template-columns:96px 1fr}
  .eol-card .ph{border-bottom:0;border-inline-end:1px solid var(--hairline-gold)}
  .eol-card .pb{padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:6px}
  .eol-card .pcard-title{font-size:.9rem;margin:0}
  .eol-card-next{padding:10px 14px 12px}
}
.support-archive-note{margin:26px 0 0;color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.support-archive-note a{font-family:var(--hud);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.support-archive-note a:hover{color:var(--gold-bright)}
[dir="rtl"] .support-archive-note .sa-go{display:inline-block;transform:scaleX(-1)}

/* Contact map behind consent (page-contact-us.php) */
.map-consent{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;border:1px solid var(--hairline);border-radius:4px;background:var(--surface);padding:28px 18px;color:var(--muted);line-height:1.6} /* .contact-map sets line-height:0 for its iframe */
.map-consent .map-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px}
.map-consent p{margin:0;max-width:44ch;text-wrap:balance}
.map-consent .map-open{font-size:.85rem;color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Playbook alignment — 2026-11-09 (Void Guardian v1.1 + Brand Guidelines v1.1)
   ============================================================ */
.closer{padding:72px 0 96px}
.closer-copy{text-align:start}
.closer-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.closer-art{margin:0;position:relative}
.closer-art img{display:block;width:100%;height:auto}
.closer-name{position:absolute;inset-block-end:4%;inset-inline:0;text-align:center;font-family:var(--hud);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.closer-copy h2{font-size:clamp(2.4rem,4.6vw,4.2rem)}
.closer-copy p{margin:18px 0 30px;max-width:42ch}
.closer-copy .closer-game{margin:26px 0 0;font-size:.95rem;color:var(--muted)}
.closer-game a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;display:inline-block;padding-block:12px}
.closer-game a:hover{color:var(--gold-bright)}
@media(max-width:820px){
  .closer{padding:48px 0 72px}
  .closer-copy{text-align:center}
  .closer-grid{grid-template-columns:1fr}
  .closer-art{max-width:460px;margin-inline:auto}
  .closer-copy .kicker{justify-content:center}
  .closer-copy p{margin-inline:auto}
}
/* Phones: Highlights becomes a rail so categories are not buried under eight cards */
@media(max-width:520px){
  .prods.hl-panel.is-active{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x proximity;padding-block-end:10px;scrollbar-width:thin}
  .prods.hl-panel.is-active>.pcard{scroll-snap-align:start}
}
/* Tap targets at 44px */
@media(max-width:920px){
  .hero-dots button{height:44px;padding:20px 0}
  .hero-toggle{inline-size:44px;block-size:44px}
  .link-more{display:inline-flex;align-items:center;min-height:44px}
  .site-footer a{display:flex;align-items:center;min-height:44px}
  .site-footer .socials a{display:grid;width:44px;height:44px;min-height:0}
}
/* Void Guardian slide on phones: the whole figure stands above the headline (playbook §6: show all four limb ends) */
@media(max-width:820px){
  .hero-slide--guardian{display:flex;align-items:flex-end}
  .hero-slide--guardian .hero-media::after,[dir="rtl"] .hero-slide--guardian .hero-media::after{background:linear-gradient(180deg,transparent 36%,rgba(10,12,18,.8) 48%,var(--void) 60%)!important}
  .hero-slide--guardian .wrap{padding-bottom:104px}
  .hero-slide--guardian .lede{display:none}
  .hero-slide--guardian .hero-title{margin-bottom:22px}
}
/* empty category: the way out */
.cat-empty-note{margin:14px 0 0;color:var(--muted,#9aa3b2)}
.cat-empty-out{margin:18px 0 0;display:flex;gap:12px;flex-wrap:wrap}