/* ==========================================================================
   AOSS: theme.css
   Dual-mode tokens (light / dark, ABZŪ-informed dark) and shared components.
   Radii 0, no shadows. Icons: Phosphor (MIT).
   ========================================================================== */

:root{
  /* light */
  --base:#F6F8F8;
  --paper:#FFFFFF;
  --tint:#EDF2F2;
  --ink:#0D1F2D;
  --muted:#2B4152;
  --faint:#5E7380;
  --line:rgba(13,31,45,.14);
  --line-strong:rgba(13,31,45,.35);
  --accent:#1F4A38;
  --scrim:rgba(6,19,27,.6);
  --nav-bg:rgba(246,248,248,.86);
  /* type */
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --display:var(--serif);
  /* scale */
  --body-size:1.125rem;
  --h1:clamp(2.8rem,6vw,6rem);
  --h2:clamp(2.2rem,4.2vw,4rem);
  --h3:clamp(1.6rem,2.6vw,2.3rem);
  --quote-size:clamp(1.9rem,3.6vw,3.2rem);
  /* rhythm */
  --wrap:1280px;
  --space-y:clamp(5.5rem,11vw,10rem);
  --space-x:clamp(1.5rem,6vw,6rem);
  --dur:.25s;
}
:root[data-theme="dark"]{
  --base:#0B120E;
  --paper:#101A14;
  --tint:#14211A;
  --ink:#E8EFE9;
  --muted:#A6B8AC;
  --faint:#84998D;
  --line:rgba(232,239,233,.14);
  --line-strong:rgba(232,239,233,.34);
  --accent:#6FA98B;
  --scrim:rgba(4,10,7,.68);
  --nav-bg:rgba(11,18,14,.82);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:5.5rem;scroll-behavior:smooth;background:var(--base)}
body{margin:0;background:var(--base);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:var(--body-size);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .3s ease,color .3s ease}
img{display:block;max-width:100%}
h1,h2,h3,p,ol,ul,dl,dd,figure,figcaption,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sec{padding:var(--space-y) var(--space-x)}
.wrap{max-width:var(--wrap);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.06;letter-spacing:-.01em}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);font-weight:400;line-height:1.14}
.body{max-width:34rem;color:var(--muted)}
.body + .body{margin-top:1.1rem}
.micro{font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.spec{font-size:.95rem;letter-spacing:.06em;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* buttons */
.btn{display:inline-block;padding:.9rem 2rem;border:1px solid var(--ink);text-decoration:none;font-size:.95rem;letter-spacing:.08em;transition:background var(--dur),color var(--dur);cursor:pointer;background:transparent;color:var(--ink);font-family:inherit;font-weight:400}
.btn:hover{background:var(--ink);color:var(--base)}
.btn-solid{display:inline-block;padding:.95rem 2.1rem;border:1px solid var(--ink);background:var(--ink);color:var(--base);text-decoration:none;font-size:.95rem;letter-spacing:.08em;transition:background var(--dur),color var(--dur);cursor:pointer;font-family:inherit;font-weight:400}
.btn-solid:hover{background:transparent;color:var(--ink)}

/* nav, centred wordmark, split links */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1rem var(--space-x);background:var(--nav-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);border-bottom:1px solid var(--line);transition:background .3s ease,border-color .3s ease}
.nav--clear{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border-bottom-color:transparent}
.nav--clear:hover{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom-color:var(--line)}
.nav-sep{flex:none;width:1px;height:24px;background:var(--line)}
@media (min-width:901px){.nav{padding-inline:clamp(1.5rem,2.5vw,2.5rem)}}
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover){color:#fff}
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover) .link,
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover) .drop-trigger,
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover) .theme-toggle,
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover) .nav-user,
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover) .nav-cart,
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover) .menu-toggle{color:#fff}
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover) .btn{color:#fff;border-color:#fff}
:root[data-theme="light"] .nav--hero.nav--clear:not(:hover) .nav-sep{background:rgba(255,255,255,.45)}
.wordmark{font-family:var(--display);font-size:1.5rem;font-weight:400;letter-spacing:.2em;text-decoration:none;line-height:1;text-transform:uppercase}
.wordmark .lam{display:inline-block;height:.62em;width:.62em;vertical-align:baseline;overflow:visible;margin-right:.08em}
.wordmark .lam path{fill:none;stroke:currentColor;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.nav ul{display:flex;gap:clamp(1.2rem,2.6vw,2.4rem);align-items:center}
.nav-left{justify-self:start}
.nav-right{justify-self:end;display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem)}
.nav .btn{padding:.6rem 1.4rem;font-size:.84rem;letter-spacing:.12em;white-space:nowrap}
.nav-user{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:0;color:var(--muted);cursor:pointer;transition:color var(--dur)}
.nav-user:hover{color:var(--ink)}
.nav-user svg{width:20px;height:20px;fill:currentColor}
.nav a.link,.nav button.link,.drop-trigger{text-decoration:none;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--muted);white-space:nowrap;transition:color var(--dur);background:transparent;border:0;font-family:inherit;cursor:pointer;padding:0}
.nav a.link:hover,.nav button.link:hover,.drop-trigger:hover{color:var(--ink)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:0;color:var(--muted);cursor:pointer;transition:color var(--dur)}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{width:18px;height:18px;fill:currentColor}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.nav-cart{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid transparent;background:transparent;color:var(--muted);text-decoration:none;transition:color var(--dur),border-color var(--dur),transform var(--dur)}
.nav-cart:hover{color:var(--ink)}
.nav-cart svg{width:20px;height:20px;fill:currentColor}
.cart-count{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;background:var(--accent);color:var(--base);font-size:.6rem;font-weight:500;line-height:1;letter-spacing:0;border-radius:999px}
.cart-count[hidden]{display:none}
.nav-cart.is-feedback{color:var(--accent);border-color:var(--accent);animation:cart-feedback .65s ease}
@keyframes cart-feedback{0%,100%{transform:scale(1)}35%{transform:scale(1.06)}}
.drop-wrap{position:relative}
.drop-trigger{display:inline-flex;align-items:center;gap:.45rem}
.drop-trigger svg{width:9px;height:9px;transition:transform var(--dur)}
.drop-trigger[aria-expanded="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:.45em}
.drop-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 1.1rem);left:0;transform:translate(0,-8px);min-width:15rem;max-width:calc(100vw - 2rem);background:var(--paper);border:1px solid var(--line);padding:.4rem 0;opacity:0;visibility:hidden;transition:opacity var(--dur),transform var(--dur),visibility var(--dur)}
/* account control in the nav: signed out is a link, signed in is a disclosure */
.nav-acct{position:relative;display:flex;align-items:center}
.nav-user--initials{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.drop--right{left:auto;right:0;max-height:calc(100vh - 6rem);overflow-y:auto}
.drop-head{padding:.9rem 1.4rem .8rem;border-bottom:1px solid var(--line);display:grid;gap:.2rem}
.drop-head strong{font-weight:400;font-size:.9rem;color:var(--ink);letter-spacing:.01em}
.drop-head span{font-size:.78rem;color:var(--faint);word-break:break-word;overflow-wrap:anywhere}
.drop-signout{display:block;width:100%;text-align:left;padding:.85rem 1.4rem;background:transparent;border:0;border-top:1px solid var(--line);font:inherit;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color var(--dur),background var(--dur)}
.drop-signout:hover{color:var(--ink);background:var(--tint)}
.m-nav [hidden]{display:none}
.drop-wrap.open .drop{opacity:1;visibility:visible;transform:translate(0,0)}
.drop a{display:block;padding:.85rem 1.4rem;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color var(--dur),background var(--dur)}
.drop a:hover,.drop a:focus-visible{color:var(--ink);background:var(--tint)}
.drop a[aria-current="true"]{color:var(--accent)}
.menu-toggle{display:none;background:transparent;border:0;color:var(--ink);font:inherit;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;cursor:pointer;min-height:44px;align-items:center;padding:0}
.m-nav{display:none}

/* progress rail */
.rail{position:fixed;right:clamp(.7rem,1.8vw,1.6rem);top:18vh;bottom:18vh;width:7px;z-index:40;pointer-events:none;mix-blend-mode:difference}
.rail::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:#fff;opacity:.35}
.rail i{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:#fff;will-change:transform}

/* pills, facts */
.pills{display:flex;flex-wrap:wrap;max-width:34rem}
.pills li{padding:.4rem 1.1rem .4rem 0;margin-right:1.1rem;border-right:1px solid var(--line);font-size:.92rem;color:var(--muted)}
.pills li:last-child{border-right:0}
.facts div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{color:var(--accent);font-size:.95rem;letter-spacing:.04em}
.facts dd{color:var(--ink)}

/* forms */
form{display:grid;gap:1.7rem}
.field-row{display:grid;gap:.4rem}
label{font-size:.95rem;color:var(--muted);letter-spacing:.03em}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);color:var(--ink);font:inherit;font-weight:300;padding:.7rem 0;border-radius:0;transition:border-color .3s}
textarea{min-height:6rem;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--accent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.note{font-size:.95rem;color:var(--muted);min-height:1.5em}
/* select: the same field metrics as the inputs, with a chevron that follows the
   theme. Native popups inherit the option colours, so dark theme stays legible. */
:root{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231F4A38' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--chevron-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 6 1.5 11 6.5' fill='none' stroke='%231F4A38' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="dark"]{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236FA98B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--chevron-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 6 1.5 11 6.5' fill='none' stroke='%236FA98B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
select{-webkit-appearance:none;appearance:none;background-image:var(--chevron);background-repeat:no-repeat;background-position:right .2rem center;background-size:.68rem auto;padding-right:1.7rem;cursor:pointer;text-overflow:ellipsis}
select option{background-color:var(--paper);color:var(--ink)}
/* dropdowns: picker.js turns every select into a listbox that matches its field,
   so the popup is never narrower than the control. The native select underneath
   keeps the value and the change event. */
.picker{position:relative}
.picker-native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.picker-btn{display:block;width:100%;text-align:left;background-color:transparent;background-image:var(--chevron);background-repeat:no-repeat;background-position:right .2rem center;background-size:.68rem auto;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;color:var(--ink);font:inherit;font-weight:300;padding:.7rem 1.7rem .7rem 0;cursor:pointer;transition:border-color .3s}
.picker-btn[aria-expanded="true"],.picker-btn:focus{border-bottom-color:var(--accent)}
.picker-btn[aria-expanded="true"]{background-image:var(--chevron-up)}
.picker-btn:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.picker-value{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.picker-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% - 1px);margin:0;padding:.3rem 0;list-style:none;background:var(--paper);border:1px solid var(--line-strong);max-height:15rem;overflow-y:auto}
.picker-list--up{top:auto;bottom:calc(100% - 1px)}
.picker-list li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 1rem;font-size:.95rem;color:var(--ink);cursor:pointer}
.picker-list li:hover,.picker-list li.is-active{background:var(--tint)}
.picker-list li[aria-selected="true"]{color:var(--accent)}
.picker-list li[aria-selected="true"]::after{content:"✓";font-size:.9em;line-height:1.2}
.picker-list li.is-placeholder{color:var(--faint)}
.picker-group{padding:.6rem 1rem .25rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);cursor:default}
.picker-group::after{content:none}
/* enquiry: two columns from 860px up, stacked below so the form keeps its width */
.enquire-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,7vw,7rem)}
@media (max-width:860px){.enquire-grid{grid-template-columns:1fr;gap:1.75rem}}

/* product matrix */
.m-label{font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);line-height:1.2}
.matrix{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);max-width:34rem}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.cell{background:var(--paper);border:0;padding:.75rem 1.2rem;font:inherit;font-size:.95rem;color:var(--muted);display:flex;align-items:center;gap:.7rem;min-height:52px;text-align:left;cursor:pointer;transition:color var(--dur),background var(--dur)}
.cell:hover{color:var(--ink)}
.cell[aria-checked="true"]{color:var(--ink);outline:1px solid var(--accent);outline-offset:-1px}
.tick{visibility:hidden;width:1em;font-size:1rem;line-height:1;color:var(--accent)}
.cell[aria-checked="true"] .tick{visibility:visible}
.qty{background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 .5rem;min-height:52px}
.q-btn{width:44px;height:44px;background:transparent;border:0;color:var(--ink);font:inherit;font-size:1.35rem;font-weight:300;cursor:pointer;display:grid;place-items:center;transition:color var(--dur)}
.q-btn:disabled{color:var(--faint);cursor:default}
.qty output{font-size:1rem;color:var(--ink);min-width:3ch;text-align:center}
.enquire-cta{background:var(--ink);color:var(--base);border:1px solid var(--ink);font:inherit;font-size:.95rem;letter-spacing:.08em;min-height:56px;cursor:pointer;transition:background var(--dur),color var(--dur)}
.enquire-cta:hover{background:transparent;color:var(--ink)}

/* purchase options */
.opt-txt{display:grid;gap:.15rem;text-align:left;min-width:0}
.opt-title{font-size:.95rem;line-height:1.35}
.opt-sub{font-size:.8rem;line-height:1.45;color:var(--faint);letter-spacing:.02em}
.opt-cell .ring{flex:0 0 auto;width:1em;height:1em;border:1px solid var(--faint);border-radius:50%}
.opt-cell .tick{display:none}
.opt-cell[aria-checked="true"] .tick{display:block}
.opt-cell[aria-checked="true"] .ring{display:none}
.opt-chev{flex:none;width:10px;height:7px;margin-left:auto;color:var(--faint);transition:transform var(--dur),opacity var(--dur)}
.opt-cell[data-purchase="subscribe"]:not([aria-checked="true"]) .opt-chev{opacity:0}
.opt-cell[aria-checked="true"] .opt-chev{color:var(--ink)}
.opt-cell[aria-expanded="true"] .opt-chev{transform:rotate(180deg)}

/* delivery frequency: in-place dropdown attached under the purchase matrix.
   The negative top margin cancels the .p-detail flex gap so the panel sits
   flush against the matrix; collapsed it contributes zero height */
.freq{display:grid;grid-template-rows:0fr;margin-top:-1rem;transition:grid-template-rows .35s ease}
.freq.open{grid-template-rows:1fr}
.freq-inner{overflow:hidden}
.freq-panel{background:var(--paper);border:1px solid var(--line);border-top:0;max-width:34rem;display:grid}
.freq-panel .cell + .cell{border-top:1px solid var(--line)}

/* quantity + cart action row */
.buy-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem}
.cart-btn{min-height:52px;padding:0 1rem;background:var(--accent);border:1px solid var(--accent);color:var(--base);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-size:.84rem;letter-spacing:.04em;white-space:nowrap;cursor:pointer;transition:transform var(--dur),filter var(--dur)}
.cart-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.cart-btn:active{transform:translateY(0)}
.cart-btn svg{width:22px;height:22px;flex:none;fill:currentColor}
.cart-label{white-space:nowrap}
.cart-btn.is-feedback{animation:cart-feedback .65s ease}

/* accordion */
.acc{margin-top:2.4rem;border-bottom:1px solid var(--line);max-width:34rem}
.acc-trigger{width:100%;background:transparent;border:0;border-top:1px solid var(--line);padding:1.1rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font:inherit;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.acc-trigger .plus{font-size:1.1rem;line-height:1;color:var(--faint);transition:transform var(--dur)}
.acc-trigger[aria-expanded="true"] .plus{transform:rotate(45deg);color:var(--accent)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc-panel.open{grid-template-rows:1fr}
.acc-inner{overflow:hidden}
.acc-inner .facts{padding:.4rem 0 1.6rem}

/* product panel: stays paper-white in both modes (lightbox) */
.panel{background:#fff;padding:clamp(1.5rem,4vw,3rem)}
.panel img{mix-blend-mode:multiply}

/* footer */
footer{padding:3.5rem var(--space-x);border-top:1px solid var(--line);background:var(--base)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 4rem;justify-content:space-between;align-items:flex-end}
footer .wordmark{font-size:2.2rem;display:block;margin-bottom:.5rem}
footer p{color:var(--muted);font-size:.9rem}
.foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.6rem}
.foot-links a{font-size:.82rem;letter-spacing:.04em;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.1rem;transition:color var(--dur),border-color var(--dur)}
.foot-links a:hover{color:var(--ink);border-color:var(--ink)}

@media (max-width:900px){
  .rail{display:none}
  .nav{grid-template-columns:1fr auto}
  .menu-toggle{display:inline-flex}
  .nav-left{display:none}
  .nav-right > .btn,.nav-right .nav-user,.nav-right .nav-sep,.nav-right .link{display:none}
  .m-nav{display:block;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur)}
  .m-nav.open{opacity:1;visibility:visible;transform:none}
  .m-nav a,.m-nav button{display:flex;align-items:center;width:100%;padding:1rem var(--space-x);min-height:44px;font-family:inherit;font-size:.84rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;background:transparent;border:0;border-top:1px solid var(--line);text-align:left;cursor:pointer;transition:color var(--dur)}
  .m-nav a:hover,.m-nav a:focus-visible,.m-nav button:hover,.m-nav button:focus-visible{color:var(--ink)}
  .m-nav .m-group{margin:0;padding:1.25rem var(--space-x) .35rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);opacity:.9;border-top:1px solid var(--line)}
  .m-nav .m-sub{padding-left:calc(var(--space-x) + 1rem)}
  .m-nav > :first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rail{display:none}
  *,*::before,*::after{transition:none !important;animation:none !important}
}