/* Fortune Trading: public site. Layout on a 16-column grid sized off the viewport; three themes (ink, cream, brand). */
:root{
  --pad:max(16px,1.667vw);--gutter:max(10px,1.667vw);--header-h:max(60px,6.667vw);
  --sec:calc(max(64px,9.5vw)*var(--k,1));--row-gap:calc(max(56px,7.5vw)*var(--k,1));
  --fs-nav:max(17px,1.62vw);--mark:max(30px,2.5vw);--fs-body:max(14px,1.05vw);--fs-label:max(10.5px,.9vw);--fs-card:max(14px,1.25vw);--fs-tag:max(9.5px,.75vw);
  --fs-h2:max(34px,4.4vw);--fs-h3:max(18px,1.6vw);
  --rule:max(2px,.34vw);--rule-thin:max(1px,.1vw);
  --ease-expo:cubic-bezier(.19,1,.22,1);--ease-io:cubic-bezier(.87,0,.13,1);
  --bg:var(--cream);--fg:var(--ink);--muted:var(--cream-m);--ph:var(--cream-ph);--cursor:var(--brand);--cursor-fg:var(--cream);
  --panel:var(--ink);--panel-fg:var(--cream);--btn-hover:var(--brand);--btn-hover-fg:var(--cream);--accent:var(--brand);
  color-scheme:light;
}
:root[data-theme="ink"]{--bg:var(--ink);--fg:var(--cream);--muted:var(--ink-m);--ph:var(--ink-ph);--panel:var(--cream);--panel-fg:var(--ink);--accent:var(--spark);color-scheme:dark}
:root[data-theme="brand"]{--bg:var(--brand);--fg:var(--cream);--muted:var(--brand-m);--ph:var(--brand-ph);--cursor:var(--ink);--panel:var(--ink);--panel-fg:var(--cream);--btn-hover:var(--ink);--accent:var(--spark);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{min-height:100vh;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--fs-body);line-height:1.25;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;transition:background-color .7s var(--ease-expo),color .7s var(--ease-expo)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
ul,ol{list-style:none}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--brand);color:var(--cream)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.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}
.skip{position:fixed;left:var(--pad);top:-100px;z-index:300;background:var(--fg);color:var(--bg);padding:.6em 1em}
.skip:focus{top:var(--pad)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}

/* ---------- layout ---------- */
.main{position:relative;z-index:1;padding-top:var(--header-h)}
.grid16{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));column-gap:var(--gutter)}
.sec{padding:var(--sec) var(--pad) 0}
.sec--alt{background:color-mix(in srgb,var(--fg) 4%,var(--bg))}
.sec--alt{padding-bottom:var(--sec);margin-top:var(--sec)}
.sec--alt+.sec{padding-top:var(--sec)}
.sec--brand+.sec--alt,.sec--alt+.sec--alt,.sec--alt+.sec--brand{margin-top:0}
.label{font-size:var(--fs-label);font-weight:500;line-height:1.15;text-transform:uppercase;letter-spacing:.01em}
.is-muted{color:var(--muted)}
.rule{width:100%;height:var(--rule);background:currentColor;transform-origin:0 50%}
.rule--thin{height:var(--rule-thin)}
.dot{display:inline-block;flex:none;width:.66em;height:.66em;border-radius:50%;background:var(--accent)}
.u-link{position:relative;display:inline-block}
.u-link::after{content:'';position:absolute;left:0;right:0;bottom:-.1em;height:max(1px,.08em);background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--ease-expo)}
.u-link:hover::after{transform:scaleX(1);transform-origin:0 50%}
.empty{padding:2em 0;color:var(--muted)}

/* ---------- headline ---------- */
.split-mask{--track:-.035em;display:inline-block;overflow:hidden;vertical-align:top;line-height:.8;padding:0 .08em;margin-left:-.08em;margin-right:calc(-.08em + var(--track))}
.split-char{display:inline-block;will-change:transform}
.split-space{display:inline-block;width:.24em}
.title{display:block;width:100%;font-family:var(--head);font-size:18vw;font-weight:700;line-height:.8;white-space:nowrap;text-transform:var(--upper);overflow:hidden;padding-bottom:.02em}
.title__inner{position:relative;display:inline-block}
.title__reg-mask,.pl__reg-mask{position:absolute;right:-.02em;top:.03em;width:.098em;height:.098em;overflow:hidden}
.title__reg,.pl__reg{display:block;width:100%;height:100%}
.title .title__inner{padding-right:.12em}
.js .title[data-split] .split-char{transform:translateY(110%)}
.js .title[data-split].is-in .split-char{transform:none}
.js .title[data-split] .title__reg{transform:translateY(110%)}
.js .title[data-split].is-in .title__reg{transform:none}
.line-mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line-inner{display:block}

/* ---------- reveal (JS adds .is-in) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(24px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease-expo),transform 1.2s var(--ease-expo)}
.js [data-rule]{transform:scaleX(0)}
.js [data-rule].is-in{transform:scaleX(1);transition:transform 1.4s var(--ease-expo)}
.js .brand__lines .line-inner{transform:translateY(110%)}
.js .brand__lines.is-in .line-inner{transform:none;transition:transform 1.1s var(--ease-expo)}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1em;width:100%;min-height:max(52px,3.9vw);padding:0 1.1em;background:var(--fg);color:var(--bg);font-size:var(--fs-card);text-align:left;transition:color .5s var(--ease-expo);border-radius:var(--radius)}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--btn-hover);clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease-expo)}
.btn:hover,.btn.is-done{color:var(--btn-hover-fg)}
.btn:hover::before,.btn.is-done::before{clip-path:inset(0 0 0 0)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]::before{display:none}
.btn--line{background:none;color:var(--fg);box-shadow:inset 0 0 0 var(--rule-thin) var(--fg)}
.more{margin-top:var(--row-gap);display:flex;justify-content:flex-end}
.more .btn{width:auto;min-width:min(100%,28rem)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:0 calc(var(--pad) + max(12px,1.17vw)*3 + max(4px,.33vw)*2 + max(22px,2.6vw)) 0 calc(var(--pad) + var(--mark) + .55em);color:var(--cream);mix-blend-mode:difference;pointer-events:none}
.hdr>*{pointer-events:auto}
:root[data-theme="brand"] .hdr{mix-blend-mode:normal;color:var(--fg)}
/* The mark sits outside the inverting header so the logo keeps its own colours. */
.brand{position:fixed;z-index:52;top:0;left:var(--pad);height:var(--header-h);display:flex;align-items:center}
.brand__mark{display:block;width:var(--mark);height:var(--mark);object-fit:contain;transition:transform .9s var(--ease-expo)}
.brand__mark--flat{background:var(--fg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.brand:hover .brand__mark{transform:rotate(-90deg)}
/* On the colour theme the logo's own purple would sink into the background, so it gets a light plate. */
:root[data-theme="brand"] .brand--colour .brand__mark{background:var(--cream);border-radius:50%;padding:.1em}
.hdr__name{font-size:var(--fs-nav);font-weight:600;letter-spacing:-.02em}
.hdr__nav{display:flex;gap:max(22px,3.2vw);font-size:var(--fs-nav);line-height:1.1;white-space:nowrap}
.navlink{position:relative;display:inline-block}
.navlink::after{content:'';position:absolute;left:0;right:0;bottom:-.1em;height:max(1px,.075em);background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--ease-expo)}
.navlink:hover::after,.navlink.is-active::after{transform:scaleX(1);transform-origin:0 50%}
.bagn{font-variant-numeric:tabular-nums}
.bagn.is-bump{display:inline-block;animation:bump .6s var(--ease-expo)}
@keyframes bump{0%{transform:translateY(-60%)}100%{transform:none}}
.hdr__menu{display:none}
.themes{position:fixed;z-index:51;top:calc(var(--header-h)/2);right:var(--pad);display:flex;gap:max(4px,.33vw);transform:translateY(-50%)}
.themes__btn{position:relative;width:max(12px,1.17vw);height:max(12px,1.17vw);border-radius:50%;background:var(--sw);transition:transform .6s var(--ease-expo)}
.themes__btn::before{content:'';position:absolute;inset:-6px}
.themes__btn:hover{transform:scale(1.2)}
.themes__btn--ink{--sw:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--cream) 35%,transparent)}
.themes__btn--cream{--sw:var(--cream);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent)}
.themes__btn--brand{--sw:var(--brand)}
.themes__btn.is-active::after{content:'';position:absolute;inset:0;margin:auto;width:34%;height:34%;border-radius:50%;background:var(--fg)}
:root[data-theme="cream"] .themes__btn--cream.is-active::after{background:var(--ink)}
.mnav{position:fixed;inset:0;z-index:49;background:var(--panel);color:var(--panel-fg);display:flex;align-items:flex-end;padding:var(--header-h) var(--pad) calc(var(--pad)*2)}
.mnav[hidden]{display:none}
.mnav nav{display:flex;flex-direction:column;gap:.1em;font-size:max(40px,11vw);font-weight:700;letter-spacing:-.04em;line-height:.95;text-transform:var(--upper)}

/* ---------- intro ---------- */
.sec--intro{padding-top:max(16px,1.2vw)}
.sec--intro .rule{margin-top:max(14px,1.2vw)}
.intro__tagline{margin-top:max(10px,.7vw);font-size:max(19px,1.9vw);line-height:1.12;letter-spacing:-.025em;max-width:24em}
.intro__info{margin-top:max(14px,1.2vw);row-gap:24px;align-items:start}
.intro__col{grid-column:var(--c)/span 4;display:flex;flex-direction:column;gap:.6em}
.intro__text{font-size:var(--fs-card);line-height:1.2;max-width:24em}
.intro__links{grid-column:13/span 4;display:flex;flex-direction:column;gap:.35em;font-size:var(--fs-nav);align-items:flex-start}

/* ---------- section heads ---------- */
.sechead{align-items:end;row-gap:.8em;margin-bottom:max(24px,2.4vw)}
.sechead__label{grid-column:1/-1}
.sechead__title{grid-column:1/span 9;font-family:var(--head);font-size:var(--fs-h2);font-weight:700;letter-spacing:-.045em;line-height:.9;text-transform:var(--upper)}
.sechead__intro{grid-column:11/span 6;font-size:var(--fs-card);line-height:1.2;max-width:28em}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.25em 1.2em;margin:max(18px,1.6vw) 0 max(26px,2.6vw);font-size:var(--fs-nav);font-weight:500;letter-spacing:-.01em}
.filter{position:relative;color:var(--muted);transition:color .4s var(--ease-expo)}
.filter sup{font-size:.5em;margin-left:.2em;font-variant-numeric:tabular-nums}
.filter:hover,.filter.is-active{color:var(--fg)}
.filter.is-active::before{content:'';position:absolute;left:-.75em;top:.42em;width:.36em;height:.36em;border-radius:50%;background:var(--accent)}
.shop__note{margin-top:-1em}

/* ---------- product grid (editorial rhythm, seven-card cycle) ---------- */
.products{row-gap:var(--row-gap);align-items:start}
.card{grid-column:auto/span 4;min-width:0}
.products>.card:nth-child(7n+1){grid-column:1/span 4}
.products>.card:nth-child(7n+2){grid-column:6/span 3}
.products>.card:nth-child(7n+3){grid-column:10/span 3}
.products>.card:nth-child(7n+4){grid-column:14/span 3}
.products>.card:nth-child(7n+5){grid-column:2/span 3}
.products>.card:nth-child(7n+6){grid-column:6/span 5}
.products>.card:nth-child(7n+7){grid-column:12/span 4}
.products--row>.card:nth-child(n){grid-column:auto/span 4}
.card__link{display:block}
.card__media{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--ph);border-radius:var(--radius)}
.card__front,.card__back,.card__cover{position:absolute;inset:0;width:100%;height:100%}
.card__front,.card__back{object-fit:cover}
.card__cover{background:var(--ph)}
.card__back{clip-path:inset(0 100% 0 0);transform:scale(1.2);transition:clip-path .5s var(--ease-io),transform .5s var(--ease-io)}
.card__link:hover .card__back{clip-path:inset(0 0 0 0);transform:scale(1)}
.card__back--detail{scale:1.6;transform-origin:50% 35%}
.card__meta{padding-top:max(8px,.9vw)}
.card__row{display:flex;justify-content:space-between;align-items:flex-start;gap:1em;font-size:var(--fs-card);line-height:1.1}
.card__name{font-size:inherit;font-weight:400}
.card__price{white-space:nowrap;font-variant-numeric:tabular-nums}
.card__tag{display:flex;align-items:center;gap:.45em;margin-top:max(4px,.4vw);font-size:var(--fs-tag);font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.no-js .card__cover,.reduce .card__cover{display:none}

/* ---------- schools list ---------- */
.school__row{align-items:center;padding:max(18px,1.6vw) 0;row-gap:.4em;transition:color .4s var(--ease-expo)}
.school__crest{grid-column:1/span 1;width:100%;max-width:64px;aspect-ratio:1;object-fit:contain}
.school__crest--blank{display:block;border-radius:50%;background:var(--ph)}
.school__name{grid-column:2/span 7;font-size:max(26px,3.2vw);font-weight:700;letter-spacing:-.04em;line-height:.95}
.school__note{grid-column:10/span 4;color:var(--muted)}
.school__n{grid-column:15/span 2;text-align:right}
.school__row:hover .school__name{color:var(--accent)}
.schoolhead{align-items:end;margin-bottom:max(26px,2.6vw);row-gap:.6em}
.schoolhead .school__crest{grid-column:1/span 1}
.schoolhead .sechead__title{grid-column:2/span 9}
.schoolhead__note{grid-column:11/span 4;color:var(--muted)}
.schoolhead__change{grid-column:15/span 2;justify-self:end}

/* ---------- ribbon ---------- */
.sec--ribbon{padding-left:0;padding-right:0}
.ribbon{overflow:hidden;border-block:var(--rule-thin) solid currentColor;padding:.25em 0}
.ribbon__track{display:flex;width:max-content;align-items:center;gap:.5em;font-size:max(34px,5vw);font-weight:700;letter-spacing:-.04em;text-transform:var(--upper);animation:marquee 26s linear infinite}
.ribbon__track>span,.ribbon__dup>span{padding:0 .1em}
.ribbon__dup{display:flex;align-items:center;gap:.5em}
.ribbon .dot{width:.25em;height:.25em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- numbers ---------- */
.nums{row-gap:2em;padding-top:max(14px,1.2vw)}
.num{grid-column:auto/span 4;display:flex;flex-direction:column;gap:.5em}
.num__v{font-family:var(--head);font-size:max(44px,5.4vw);font-weight:700;letter-spacing:-.06em;line-height:.85;font-variant-numeric:tabular-nums}

/* ---------- story ---------- */
.story{row-gap:1.2em;align-items:start}
.story__eyebrow{grid-column:1/-1}
.story__title{grid-column:1/span 10;font-family:var(--head);font-size:var(--fs-h2);font-weight:700;letter-spacing:-.045em;line-height:.9;text-transform:var(--upper)}
.story__text{grid-column:9/span 7;font-size:var(--fs-card);line-height:1.25;display:flex;flex-direction:column;gap:.8em;margin-top:1em}
.points{margin-top:max(40px,5vw)}
.point__row{padding:max(14px,1.2vw) 0;align-items:baseline;row-gap:.3em}
.point__n{grid-column:1/span 1;font-size:var(--fs-label);font-weight:500}
.point__t{grid-column:2/span 6;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.point__x{grid-column:9/span 7;font-size:var(--fs-card);line-height:1.2}

/* ---------- brand band ---------- */
.sec--brand{background:var(--brand);color:var(--cream);margin-top:var(--sec);padding-bottom:var(--sec);--accent:var(--spark);--btn-hover:var(--spark);--fg:var(--cream);--bg:var(--brand)}
:root[data-theme="brand"] .sec--brand{background:var(--ink);--bg:var(--ink)}
.sec--brand+.sec{padding-top:var(--sec)}
.brand__eyebrow{margin-bottom:1em}
.sec--brand .title{margin-top:.1em}
.brand__body{margin-top:max(22px,2.4vw);row-gap:1.4em;align-items:start}
.brand__logo{grid-column:1/span 3;max-height:120px;width:auto;object-fit:contain}
.brand__text{grid-column:1/span 5;font-size:var(--fs-card);line-height:1.25}
.brand__lines{grid-column:7/span 10;font-family:var(--head);font-size:max(30px,4.2vw);font-weight:700;letter-spacing:-.045em;line-height:.95;text-transform:var(--upper)}
.brand__lines li{border-top:var(--rule-thin) solid currentColor;padding:.12em 0 .06em}
.brand__btn{grid-column:7/span 10;margin-top:.6em}

/* ---------- zones ---------- */
.zones{row-gap:2em;align-items:start}
.zones__left{grid-column:1/span 7;display:flex;flex-direction:column;gap:1em}
.zones__title{font-family:var(--head);font-size:var(--fs-h2);font-weight:700;letter-spacing:-.045em;line-height:.9;text-transform:var(--upper)}
.zones__intro{font-size:var(--fs-card);line-height:1.2;max-width:26em}
.zones__figwrap{margin-top:1em;max-width:420px;color:var(--fg)}
.zones__fig{width:100%;height:auto;overflow:visible}
.zones__mk circle{transition:r .5s var(--ease-expo)}
.zones__mk.is-on circle{r:24}
.zones__list{grid-column:9/span 8;align-self:end}
.zone__row{display:grid;grid-template-columns:3em 1fr;gap:1em;padding:max(14px,1.2vw) 0}
.zone__n{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--spark);color:#fff;font-weight:700;font-size:var(--fs-card)}
.zone h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;margin-bottom:.3em}
.zone p{font-size:var(--fs-card);line-height:1.2;color:var(--muted)}
.zone.is-on h3{color:var(--accent)}
.zones__btn{grid-column:9/span 8}

/* ---------- clients ---------- */
.clients{font-family:var(--head);font-size:max(30px,4.6vw);font-weight:700;letter-spacing:-.045em;line-height:1;text-transform:var(--upper)}
.client{display:inline;transition:color .4s var(--ease-expo)}
.client:hover{color:var(--accent)}
.client sup{font-size:.22em;letter-spacing:0;vertical-align:super;margin:0 .5em 0 .1em;font-weight:500}
.clients__note{margin-top:max(22px,2.4vw);font-size:var(--fs-card);max-width:30em;margin-left:auto;text-align:right}

/* ---------- steps ---------- */
.steps{row-gap:2.4em}
.step{grid-column:auto/span 4;display:flex;flex-direction:column;gap:.7em}
.step .rule{margin-bottom:.4em}
.step__n{font-size:max(40px,5vw);font-weight:700;letter-spacing:-.06em;line-height:.85;color:var(--accent)}
.step h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em}
.step p{font-size:var(--fs-card);line-height:1.2;color:var(--muted)}

/* ---------- quotes, text ---------- */
.quotes{row-gap:2em}
.quote{grid-column:auto/span 8;display:flex;flex-direction:column;gap:1em}
.quote blockquote{font-size:max(22px,2.4vw);letter-spacing:-.03em;line-height:1.05}
.prose{max-width:46em;margin-left:auto;font-size:var(--fs-card);line-height:1.35;display:flex;flex-direction:column;gap:.9em}

/* ---------- contact and forms ---------- */
.sec--contact{padding-bottom:var(--sec)}
.contact{row-gap:2.4em;align-items:start}
.contact__info{grid-column:1/span 7;display:flex;flex-direction:column;gap:1em}
.contact__title{font-family:var(--head);font-size:max(44px,6vw);font-weight:700;letter-spacing:-.055em;line-height:.85;text-transform:var(--upper)}
.contact__dl{display:flex;flex-direction:column;gap:1.2em;margin-top:1em;font-size:var(--fs-card);line-height:1.25}
.contact__dl dt{margin-bottom:.4em}
.contact__form{grid-column:9/span 8}
.form{display:flex;flex-direction:column;gap:max(18px,1.5vw)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.fld{display:flex;flex-direction:column;gap:.45em}
.fld input,.fld select,.fld textarea{width:100%;background:transparent;border:0;border-bottom:var(--rule-thin) solid currentColor;border-radius:0;padding:.45em 0;font-size:var(--fs-card);outline:none;transition:border-color .4s}
.fld select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:1.4em}
.fld select option{color:#000;background:#fff}
.fld textarea{resize:vertical;min-height:5.5em}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-bottom-color:var(--accent)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted)}
.fld.is-bad input,.fld.is-bad textarea{border-bottom-color:#E5484D}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{font-size:var(--fs-card)}
.form__msg.is-err{color:#E5484D}
fieldset{border:0;display:flex;flex-direction:column;gap:max(14px,1.2vw);min-width:0}
legend{margin-bottom:.6em}

/* ---------- product page ---------- */
.pdp{padding:max(16px,1.2vw) var(--pad) 0;row-gap:2em;align-items:start}
.pdp__media{grid-column:1/span 9;display:flex;flex-direction:column;gap:var(--gutter)}
.pdp__img{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--ph);border-radius:var(--radius)}
.pdp__img img{width:100%;height:100%;object-fit:cover}
.pdp__img .card__cover{position:absolute;inset:0}
.pdp__img--detail img{scale:1.7;transform-origin:50% 32%}
.pdp__info{grid-column:11/span 6;align-self:stretch}
.pdp__sticky{position:sticky;top:calc(var(--header-h) + 8px);display:flex;flex-direction:column;gap:max(16px,1.3vw);padding-bottom:var(--pad)}
.pdp__crumb{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.pdp__name{font-family:var(--head);font-size:max(36px,4vw);font-weight:700;letter-spacing:-.05em;line-height:.9;text-transform:var(--upper)}
.pdp__price{font-size:max(20px,1.8vw);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pdp__meta{display:grid;grid-template-columns:1fr 1fr;gap:1em;font-size:var(--fs-card)}
.pdp__meta dt{margin-bottom:.3em}
.buy{display:flex;flex-direction:column;gap:max(14px,1.2vw)}
.sizes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.6em,1fr));gap:6px}
.size{position:relative}
.size input{position:absolute;opacity:0;inset:0;cursor:pointer}
.size__box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;min-height:3.2em;padding:.4em .2em;box-shadow:inset 0 0 0 var(--rule-thin) currentColor;font-size:var(--fs-card);border-radius:var(--radius);transition:background .3s,color .3s}
.size__box small{font-size:.7em;color:var(--muted)}
.size input:checked+.size__box{background:var(--fg);color:var(--bg)}
.size input:checked+.size__box small{color:inherit;opacity:.75}
.size input:focus-visible+.size__box{outline:2px solid var(--accent);outline-offset:2px}
.size input:disabled+.size__box{opacity:.35;text-decoration:line-through}
.sizes.is-bad .size__box{box-shadow:inset 0 0 0 var(--rule-thin) #E5484D}
.qty{display:flex;justify-content:space-between;align-items:center}
.qty__ctl{display:flex;align-items:center;box-shadow:inset 0 0 0 var(--rule-thin) currentColor;border-radius:var(--radius)}
.qty__ctl button{width:2.4em;height:2.4em;font-size:var(--fs-card)}
.qty__ctl input{width:3em;text-align:center;background:none;border:0;font-size:var(--fs-card);-moz-appearance:textfield;appearance:textfield}
.qty__ctl input::-webkit-inner-spin-button,.qty__ctl input::-webkit-outer-spin-button{-webkit-appearance:none}
.pdp__acc details{border-top:var(--rule-thin) solid currentColor;padding:.9em 0}
.pdp__acc details:last-child{border-bottom:var(--rule-thin) solid currentColor}
.pdp__acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.pdp__acc summary::-webkit-details-marker{display:none}
.pdp__acc summary::after{content:'+';font-size:1.4em;line-height:.6}
.pdp__acc details[open] summary::after{content:'−'}
.pdp__acc p,.pdp__acc ul{margin-top:.8em;font-size:var(--fs-card);line-height:1.3}
.pdp__acc li::before{content:'— '}
.pdp__quote{display:flex;flex-direction:column;gap:1em;padding-top:.6em}
.sec--related{padding-bottom:0}

/* ---------- bag, checkout, order ---------- */
.sec--baghead{padding-top:max(16px,1.2vw)}
.sec--baghead .rule{margin-top:max(14px,1.2vw)}
.bag{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));column-gap:var(--gutter);row-gap:2em;align-items:start}
.bag__lines{grid-column:1/span 10}
.bag__sum{grid-column:12/span 5;position:sticky;top:calc(var(--header-h) + 8px);display:flex;flex-direction:column;gap:1em}
.line{display:grid;grid-template-columns:minmax(70px,8vw) 1fr auto;gap:var(--gutter);padding:max(14px,1.2vw) 0;border-bottom:var(--rule-thin) solid currentColor;align-items:start}
.line:first-child{border-top:var(--rule-thin) solid currentColor}
.line__img{aspect-ratio:3/4;background:var(--ph);overflow:hidden;border-radius:var(--radius)}
.line__img img{width:100%;height:100%;object-fit:cover}
.line__name{font-size:var(--fs-card);line-height:1.1}
.line__sub{margin-top:.4em}
.line__ctl{display:flex;gap:1em;align-items:center;margin-top:1em;flex-wrap:wrap}
.line__rm{font-size:var(--fs-label);text-transform:uppercase;font-weight:500}
.line__amt{font-size:var(--fs-card);white-space:nowrap;font-variant-numeric:tabular-nums}
.sum{display:flex;flex-direction:column;gap:.5em;font-size:var(--fs-card)}
.sum div{display:flex;justify-content:space-between;gap:1em}
.sum .sum__total{border-top:var(--rule-thin) solid currentColor;padding-top:.6em;font-size:max(20px,1.6vw);letter-spacing:-.02em}
.bag__empty{grid-column:1/-1;display:flex;flex-direction:column;gap:1.4em;align-items:flex-start;padding:2em 0}
.bag__empty p{font-size:max(28px,3.6vw);letter-spacing:-.04em;font-weight:600;line-height:1}
.bag__empty .btn{width:auto;min-width:min(100%,24rem)}
.sec--checkout,.sec--order,.sec--bag{padding-bottom:var(--sec)}
.co{row-gap:2em;align-items:start}
.co__fields{grid-column:1/span 9;display:flex;flex-direction:column;gap:max(28px,2.6vw)}
.co__sum{grid-column:11/span 6;align-self:stretch}
.co__sticky{position:sticky;top:calc(var(--header-h) + 8px);display:flex;flex-direction:column;gap:1em}
.co__line{display:grid;grid-template-columns:3.4em 1fr auto;gap:.8em;align-items:center;padding:.6em 0;border-bottom:var(--rule-thin) solid currentColor;font-size:var(--fs-card)}
.co__line img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--ph)}
.co__line small{display:block;color:var(--muted);font-size:.8em;margin-top:.2em}
.choices{display:flex;flex-direction:column;gap:6px}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0}
.choice>span{display:flex;flex-direction:column;gap:.3em;padding:.9em 1em .9em 2.6em;box-shadow:inset 0 0 0 var(--rule-thin) currentColor;border-radius:var(--radius);font-size:var(--fs-card);position:relative;cursor:pointer}
.choice>span::before{content:'';position:absolute;left:1em;top:1.05em;width:.9em;height:.9em;border-radius:50%;box-shadow:inset 0 0 0 var(--rule-thin) currentColor}
.choice input:checked+span::before{background:var(--accent);box-shadow:none}
.choice input:checked+span{box-shadow:inset 0 0 0 calc(var(--rule-thin)*2) currentColor}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.choice b{font-weight:500}
.choice small{color:var(--muted);font-size:.85em;line-height:1.25}
.ord{row-gap:2em;align-items:start}
.ord__main{grid-column:1/span 9;display:flex;flex-direction:column;gap:1em}
.ord__id{font-size:max(36px,5vw);font-weight:700;letter-spacing:-.05em;line-height:.9}
.ord__msg{font-size:var(--fs-card);max-width:34em;line-height:1.3}
.ord__tbl{width:100%;border-collapse:collapse;font-size:var(--fs-card);margin-top:1em}
.ord__tbl th{text-align:left;font-size:var(--fs-label);text-transform:uppercase;font-weight:500;color:var(--muted);padding:.5em 0}
.ord__tbl td{padding:.7em 0;border-top:var(--rule-thin) solid currentColor;vertical-align:top}
.ord__tbl td:last-child,.ord__tbl th:last-child{text-align:right}
.ord__tbl small{color:var(--muted)}
.ord__total td{font-size:1.3em;font-weight:600}
.ord__side{grid-column:11/span 6;display:flex;flex-direction:column;gap:1.6em}
.nf{margin-top:2em;row-gap:1em}
.nf p{grid-column:1/span 8;font-size:var(--fs-card)}
.nf .btn{grid-column:11/span 6}

/* ---------- footer ---------- */
.ftr{position:relative;z-index:1;margin-top:var(--sec);padding:0 var(--pad);overflow:hidden}
.ftr__cols{padding-top:max(18px,1.6vw);border-top:var(--rule) solid currentColor;row-gap:2em}
.ftr__about{grid-column:1/span 6;font-size:var(--fs-card);line-height:1.25;max-width:26em}
.ftr__col{grid-column:auto/span 4;display:flex;flex-direction:column;gap:.8em;font-size:var(--fs-card)}
.ftr__col:nth-child(2){grid-column:9/span 4}
.ftr__col ul{display:flex;flex-direction:column;gap:.3em}
.ftr__addr{color:var(--muted);margin-top:.4em}
.ftr__legal{margin-top:max(36px,4vw);font-size:var(--fs-label);text-transform:uppercase;font-weight:500;color:var(--muted);row-gap:.5em}
.ftr__legal span:first-child{grid-column:1/span 8}
.ftr__legal span:last-child{grid-column:9/span 8;text-align:right}
.ftr__big{margin-top:max(10px,1vw);padding-bottom:max(6px,.6vw)}

/* ---------- preloader ---------- */
.preloader{--pl-bg:var(--cream);--pl-fg:var(--brand);--pl-blend:multiply;position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;background:var(--pl-bg);color:var(--pl-fg);clip-path:inset(0 0 0 0)}
:root[data-theme="cream"] .preloader,:root[data-theme="brand"] .preloader{--pl-bg:var(--ink);--pl-fg:var(--cream);--pl-blend:difference}
.no-js .preloader,.pl-seen .preloader{display:none}
.pl{position:relative}
.pl__stack{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden}
.pl__img{position:absolute;width:12vw;aspect-ratio:9/12;object-fit:cover;background:#ddd}
.pl__word{position:relative;display:block;font-family:var(--head);font-size:100px;font-weight:700;line-height:.8;white-space:nowrap;mix-blend-mode:var(--pl-blend);visibility:hidden;text-transform:var(--upper)}
.preloader.is-started .pl__stack,.preloader.is-started .pl__word{visibility:visible}
.pl__word-inner{position:relative;display:inline-block;padding-right:.12em}
.pl__counter-mask{position:absolute;top:-.5em;left:100%;overflow:hidden;font-size:24px;line-height:32px;font-weight:500}
.pl__counter{display:block;font-variant-numeric:tabular-nums}

/* ---------- page transition ---------- */
.tr{position:fixed;inset:0;z-index:140;background:var(--panel);color:var(--panel-fg);display:flex;align-items:center;justify-content:center;clip-path:inset(100% 0 0 0);pointer-events:none}
.tr-in .tr{clip-path:inset(0 0 0 0)}
.tr__word{font-family:var(--head);font-size:max(48px,10vw);font-weight:700;line-height:.8;white-space:nowrap;text-transform:var(--upper)}
.tr .split-char{transform:translateY(110%)}
.tr-in .tr .split-char{transform:none}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.cursor__dot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--cursor);transition:width .5s var(--ease-expo),height .5s var(--ease-expo),margin .5s var(--ease-expo)}
.cursor__label{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.6);opacity:0;color:var(--cursor-fg);font-size:var(--fs-label);font-weight:600;text-transform:uppercase;white-space:nowrap;transition:opacity .3s,transform .5s var(--ease-expo)}
.cursor.is-view .cursor__dot{width:88px;height:88px;margin:-44px 0 0 -44px}
.cursor.is-view .cursor__label{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor.is-hidden .cursor__dot{width:0;height:0;margin:0}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:120;right:var(--pad);bottom:var(--pad);max-width:min(92vw,26rem);background:var(--fg);color:var(--bg);padding:1em 1.2em;display:flex;gap:1.2em;align-items:center;justify-content:space-between;font-size:var(--fs-card);border-radius:var(--radius);transform:translateY(calc(100% + var(--pad) + 20px));transition:transform .7s var(--ease-expo)}
.toast.is-on{transform:none}
.toast a{text-decoration:underline;white-space:nowrap}

/* ---------- small screens ---------- */
@media (max-width:900px){
  :root{--fs-h2:max(34px,8.4vw)}
  .grid16{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid16>*{grid-column:1/-1!important}
  .hdr{padding-right:calc(var(--pad) + 60px)}
  .hdr__name{font-size:max(16px,4.2vw)}
  .hdr__nav{display:none}
  .hdr__menu{display:inline-block}
  .intro__tagline{font-size:max(18px,5vw);max-width:none}
  .intro__info{row-gap:18px}
  .intro__col,.intro__links{grid-column:auto/span 1!important}
  .intro__links{grid-column:1/-1!important}
  .products{row-gap:40px}
  .products>.card:nth-child(n){grid-column:auto/span 1!important}
  .products>.card:nth-child(5n+1){grid-column:1/-1!important}
  .nums .num{grid-column:auto/span 1!important}
  .steps .step{grid-column:auto/span 1!important}
  .num__v{font-size:9.5vw}
  .num{min-width:0}
  .zones__figwrap{max-width:260px}
  .school__row{grid-template-columns:48px 1fr;column-gap:14px}
  .school__row>*{grid-column:auto!important}
  .school__crest{grid-row:span 3}
  .school__n{text-align:left}
  .zones__list,.zones__btn{grid-column:1/-1!important}
  .pdp{padding-top:8px}
  .pdp__media{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);gap:8px}
  .pdp__img{flex:0 0 82%;scroll-snap-align:start}
  .pdp__sticky{position:static}
  .bag__sum,.co__sticky{position:static}
  .form__row{grid-template-columns:1fr}
  .ftr__legal span:last-child{text-align:left}
  .clients__note{text-align:left;margin-left:0}
  .themes{right:calc(var(--pad) + 0px)}
  .hdr__menu{margin-right:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js [data-reveal],.js [data-rule],.js .title[data-split] .split-char,.js .brand__lines .line-inner{opacity:1;transform:none}
  .preloader,.tr{display:none}
}
@media print{.hdr,.themes,.cursor,.toast,.tr,.preloader,.ftr__big{display:none}.main{padding-top:0}}