/* ==========================================================================
   RABZI shell.css — skip link, header/nav/mega, burger + overlay, CTA dock, breadcrumbs, footer
   ========================================================================== */
.skip-link{ position:fixed; top:var(--s-3); left:var(--s-3); z-index:calc(var(--z-cursor) + 1); padding:var(--s-3) var(--s-4); background:var(--ink); color:var(--paper); font:600 14px/1 var(--font-display); transform:translateY(-200%); transition:transform var(--d-s) var(--ease-out) }
.skip-link:focus{ transform:none; outline:2px solid var(--signal); outline-offset:2px }

/* ---- header ---- */
.header{ position:fixed; top:0; left:0; right:0; z-index:var(--z-header); height:var(--header-h); color:var(--fg); background:transparent; transition:transform .32s var(--ease-inout), background var(--d-s) var(--ease-out), color var(--d-s) var(--ease-out); will-change:transform }
.header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); opacity:0; transition:opacity var(--d-s) var(--ease-out) }
.header--scrolled{ background:var(--bg) }
.header--scrolled::after{ opacity:1 }
.header--hidden{ transform:translateY(-100%) }
.header--hidden:focus-within{ transform:none }
.header__inner{ height:100%; display:flex; align-items:center; gap:var(--s-6); margin-inline:auto }
.header__logo{ display:inline-flex; align-items:center; color:var(--fg); height:44px; flex:none }
.header__logo-svg{ height:22px; width:auto; display:block }
.header__logo-mark{ display:none; height:28px; width:28px }
.header__logo:hover{ color:var(--fg) }

.nav{ flex:1; display:none; justify-content:center }
.nav__list{ display:flex; align-items:center; gap:var(--s-6); margin:0; padding:0; list-style:none }
.nav__item{ position:relative; display:flex; align-items:center; gap:2px }
.nav__link{ position:relative; display:inline-flex; align-items:center; gap:var(--s-2); height:44px; font:500 var(--fs-eyebrow)/1 var(--font-mono); letter-spacing:var(--ls-mono); text-transform:uppercase; color:var(--fg); white-space:nowrap }
.nav__num{ color:var(--fg-muted) }
.nav__link::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--d-s) var(--ease-out) }
.nav__link:hover::after,.nav__link:focus-visible::after,.nav__link.is-active::after{ transform:scaleX(1) }
.nav__link.is-active::before{ content:""; width:6px; height:6px; background:var(--signal); flex:none }
.nav__toggle{ width:28px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-muted) }
.nav__toggle .icon{ transition:transform var(--d-s) var(--ease-out) }
.mega.is-open .nav__toggle .icon{ transform:rotate(45deg) }
.mega.is-open .nav__toggle{ color:var(--fg) }

/* ---- mega panel ---- */
.mega__panel{ position:fixed; left:0; right:0; top:var(--header-h); z-index:var(--z-mega); background:var(--bg); color:var(--fg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .36s var(--ease-inout), visibility 0s linear .36s }
.mega.is-open .mega__panel{ clip-path:inset(0); visibility:visible; transition:clip-path .36s var(--ease-inout), visibility 0s }
.mega__inner{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-7); padding:var(--s-7) 0 var(--s-8); margin-inline:auto }
.mega__label{ color:var(--fg-muted); margin-bottom:var(--s-4); padding-bottom:var(--s-3); border-bottom:1px solid var(--line) }
.mega__list{ display:flex; flex-direction:column }
.mega__link{ display:grid; grid-template-columns:28px 1fr auto; align-items:baseline; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--line-hair); color:var(--fg); font-size:var(--fs-small); font-weight:500 }
.mega__link:hover{ color:var(--fg) }
.mega__link:hover .mega__name{ transform:translateX(6px) }
.mega__name{ display:inline-block; transition:transform var(--d-s) var(--ease-out) }
.mega__num{ color:var(--fg-muted) } [data-theme="dark"] .mega__link:hover .mega__num{ color:var(--fg) }
.mega__link:hover .mega__num{ color:var(--accent-text) }
.mega__link[data-accent="violet"]:hover .mega__num{ color:var(--block-violet-deep) }
.mega__link[data-accent="ocean"]:hover .mega__num{ color:var(--block-ocean-deep) }
.mega__link[data-accent="ember"]:hover .mega__num{ color:var(--signal-text) }
.mega__link[data-accent="mint"]:hover .mega__num{ color:#007A4E }
.mega__link[data-accent="sun"]:hover .mega__num{ color:#8A6500 }
.mega__link[data-accent="rose"]:hover .mega__num{ color:#B8285E }
.mega__price{ color:var(--fg-muted); font-size:11px; letter-spacing:.04em; text-transform:none }
.mega__cases{ display:flex; flex-direction:column; gap:var(--s-3) }
.mega__case{ display:grid; grid-template-columns:64px 1fr; gap:var(--s-4); align-items:center; color:var(--fg) }
.mega__case-plate{ display:block; aspect-ratio:4/3; background:var(--block-violet-soft); position:relative }
.mega__case-plate::after{ content:""; position:absolute; inset:18% 22% 30% 18%; border:1px solid var(--ink); }
.mega__case-plate[data-theme="ocean"]{ background:var(--block-ocean-soft) } .mega__case-plate[data-theme="ember"]{ background:var(--block-ember-soft) } .mega__case-plate[data-theme="mint"]{ background:var(--block-mint-soft) } .mega__case-plate[data-theme="sun"]{ background:var(--block-sun-soft) } .mega__case-plate[data-theme="rose"]{ background:var(--block-rose-soft) }
.mega__case-text{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-small) }
.mega__case-title{ font-weight:600; line-height:1.25 }
.mega__case:hover .mega__case-title{ text-decoration:underline; text-underline-offset:.2em }
.mega__aside-links{ display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-6); align-items:flex-start }

/* ---- tools ---- */
.header__tools{ margin-left:auto; display:flex; align-items:center; gap:var(--s-3) }
.lang{ display:inline-flex; align-items:center; gap:4px; height:44px; padding:0 var(--s-2); color:var(--fg-muted); text-transform:none }
.lang .is-on{ color:var(--fg) } .lang__slash{ color:var(--signal) }
.lang:hover{ color:var(--fg) }
.theme-toggle{ border:0; color:var(--fg) }
.theme-toggle .icon{ width:20px; height:20px }
.theme-toggle__sun{ display:none } [data-theme="dark"] .theme-toggle__sun{ display:block } [data-theme="dark"] .theme-toggle__moon{ display:none }
.header__cta{ display:none; height:40px; padding:0 var(--s-4); font-size:14px }
.burger{ width:44px; height:44px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--fg) }
.burger span{ display:block; width:22px; height:1px; background:currentColor; transition:transform var(--d-s) var(--ease-inout), width var(--d-s) var(--ease-inout) }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

@media (min-width:1100px){ .nav{ display:flex } .burger{ display:none } .header__cta{ display:inline-flex } html.menu-open .burger{ display:inline-flex } }
@media (min-width:640px) and (max-width:1023px){ .header__logo-svg{ height:18px } }
@media (max-width:639px){ .header__logo-svg{ display:none } .header__logo-mark{ display:block } :root{ --header-h:var(--header-h-mobile) } .lang{ display:none } }

/* ---- menu overlay ---- */
html.menu-open .header{ z-index:calc(var(--z-menu) + 1) }
.menu-overlay{ position:fixed; inset:0; z-index:var(--z-menu); background:var(--bg); color:var(--fg); clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .4s var(--ease-inout), visibility 0s linear .4s; overflow:auto }
.menu-overlay.is-open{ clip-path:inset(0); visibility:visible; transition:clip-path .56s var(--ease-inout), visibility 0s }
.menu-overlay__inner{ min-height:100%; display:grid; grid-template-columns:1fr; gap:var(--s-8); padding:calc(var(--header-h) + var(--s-7)) 0 var(--s-9); margin-inline:auto }
.menu-overlay__list{ display:flex; flex-direction:column; gap:var(--s-2); margin:0; padding:0; list-style:none }
.menu-overlay__link{ display:flex; align-items:baseline; gap:var(--s-4); color:var(--fg); padding:var(--s-2) 0 }
.menu-overlay__num{ font-size:var(--fs-mono); color:var(--fg-muted); position:relative; min-width:2.2em }
.menu-overlay__num::before{ content:""; position:absolute; left:0; top:50%; width:0; height:0; background:var(--block-ocean); transition:width var(--d-s) var(--ease-flip), height var(--d-s) var(--ease-flip) }
.menu-overlay__item[data-hue="mint"] .menu-overlay__num::before{ background:var(--block-mint) } .menu-overlay__item[data-hue="violet"] .menu-overlay__num::before{ background:var(--block-violet) } .menu-overlay__item[data-hue="sun"] .menu-overlay__num::before{ background:var(--block-sun) } .menu-overlay__item[data-hue="rose"] .menu-overlay__num::before{ background:var(--block-rose) } .menu-overlay__item[data-hue="ember"] .menu-overlay__num::before{ background:var(--signal) }
.menu-overlay__link:hover .menu-overlay__num,.menu-overlay__link:focus-visible .menu-overlay__num{ color:transparent }
.menu-overlay__link:hover .menu-overlay__num::before,.menu-overlay__link:focus-visible .menu-overlay__num::before{ width:.75em; height:.75em; transform:translateY(-50%) }
.menu-overlay__ops{ display:flex; flex-direction:column; gap:var(--s-4); align-self:end; align-items:flex-start; text-transform:none; letter-spacing:.02em; font-size:var(--fs-mono); line-height:1.5 }
.menu-overlay__ops a{ color:var(--fg) }
@media (min-width:768px){ .menu-overlay__inner{ grid-template-columns:2fr 1fr; align-items:end } }
html.menu-open{ overflow:hidden }

/* ---- CTA dock (mobile) ---- */
.cta-dock{ position:fixed; bottom:0; left:0; right:0; z-index:var(--z-dock); display:none; gap:var(--s-3); padding:var(--s-3) var(--margin) calc(var(--s-3) + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); transform:translateY(100%); transition:transform .32s var(--ease-inout) }
.cta-dock.is-visible{ transform:none }
.cta-dock .btn--primary{ flex:1 }
@media (max-width:1023px){ .cta-dock{ display:flex } html.js body.has-dock main{ padding-bottom:72px } }

/* ---- breadcrumbs ---- */
.breadcrumbs{ color:var(--fg-muted) }
.breadcrumbs__list{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; list-style:none }
.breadcrumbs a{ color:var(--fg-muted) } .breadcrumbs a:hover{ color:var(--fg) }
.breadcrumbs [aria-current]{ color:var(--fg) }
.breadcrumbs__sep{ color:var(--line-strong) }

/* ---- footer ---- */
.footer{ position:relative; z-index:0; background:var(--bg); color:var(--fg); overflow:hidden }
.footer__inner{ margin-inline:auto; padding:var(--s-9) 0 var(--s-6); position:relative }
.footer__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-7) var(--s-6); padding-bottom:var(--s-8); border-bottom:1px solid var(--line) }
@media (min-width:900px){ .footer__grid{ grid-template-columns:1.2fr 1fr 1fr 1.1fr } }
.footer__label{ color:var(--fg-muted); padding-bottom:var(--s-3); margin-bottom:var(--s-4); border-bottom:1px solid var(--line) }
.footer__list{ display:flex; flex-direction:column; gap:var(--s-2); margin:0; padding:0; list-style:none; font-size:var(--fs-small) }
.footer__list a{ color:var(--fg); display:inline-block; transition:transform var(--d-s) var(--ease-out) }
.footer__list a:hover{ color:var(--fg); transform:translateX(4px); text-decoration:underline; text-underline-offset:.2em }
.footer__social{ display:flex; gap:var(--s-3); margin-top:var(--s-2) }
.footer__social a{ display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border:1px solid var(--line) }
.footer__ops{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-6); padding:var(--s-5) 0; border-bottom:1px solid var(--line); color:var(--fg); text-transform:none; letter-spacing:.04em }
.footer__ops .pill .dot{ background:var(--ok) }
.footer__ops .stamps{ display:none } @media (min-width:1100px){ .footer__ops .stamps{ display:flex } }
.footer__top{ margin-left:auto; color:var(--fg) }
.footer__wordmark{ position:relative; padding:var(--s-8) 0 var(--s-5); overflow:hidden; display:flex; align-items:flex-end; gap:var(--s-5) }
.footer__wordmark-svg{ width:100%; height:auto; display:block; color:var(--fg) }
.footer__mark{ display:none; width:12%; flex:none; color:var(--fg) }
.footer__mark-svg{ width:100%; height:auto }
@media (min-width:768px){ .footer__wordmark-svg{ width:86% } .footer__mark{ display:block } }
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-3) var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--line); color:var(--fg-muted); text-transform:none; letter-spacing:.04em; font-size:11px }
.footer__legal a{ color:var(--fg-muted) } .footer__legal a:hover{ color:var(--fg) }

/* On a full-bleed accent band the mark's signal half and the Z's bottom bar would vanish. */
[data-material="block"] .mark__b,[data-material="block"] .wm__z-bottom{ fill:var(--accent-fg) }
body.page-sector .header:not(.header--scrolled) .mark__b,body.page-sector .header:not(.header--scrolled) .wm__z-bottom{ fill:var(--signal-fg) }
.mark__b,.wm__z-bottom{ transition:fill var(--d-s) var(--ease-out) }