/* The owner's producer landing page, its three package sheets merged in their order; colours and the type stack are named once here. */
:root{
  --lp-font: Arial, Helvetica, sans-serif;
  --lp-mono: monospace;
  --lp-ink: #142130;
  --lp-paper: #f1f0e9;
  --lp-lime: #d7f35b;
  --lp-lime-hover: #e4ff83;
  --lp-lime-glow: #d7f32b30;
  --lp-blue: #3256b7;
  --lp-focus: #789dff;
  --lp-white: #fff;
  --lp-ink-hover: #2b3f55;
  --lp-ink-line: #14213066;
  --lp-white-line: #ffffff65;
  --lp-header-line: #ffffff32;
  --lp-header-ground: #112130f5;
  --lp-hero-ground: #111c2a;
  --lp-hero-shade: linear-gradient(90deg, rgba(9, 19, 30, .86), rgba(9, 19, 30, .57) 56%, rgba(9, 19, 30, .18)), linear-gradient(0deg, rgba(9, 19, 30, .55), transparent 30%, rgba(9, 19, 30, .25));
  --lp-hero-shade-narrow: linear-gradient(90deg, #09131edb, #09131eb8);
  --lp-hero-eyebrow: #e4e8e5;
  --lp-hero-query: #d0d6d8;
  --lp-hero-intro: #eef0f0;
  --lp-hero-note: #cbd1d6;
  --lp-hero-cue: #d6dce2;
  --lp-toggle-ground: #111d29bd;
  --lp-toggle-line: #ffffff75;
  --lp-film-ground: #152233;
  --lp-rule: #14213038;
  --lp-rule-soft: #14213023;
  --lp-caption: #48535d;
  --lp-mist: #e0e7ec;
  --lp-route: #172a3d;
  --lp-node-line: #9fb1c2;
  --lp-route-rule: #ffffff20;
  --lp-route-text: #b1bec9;
  --lp-route-dash: #8093a5;
  --lp-sand: #eee9df;
  --lp-tag-string: #968666;
  --lp-hole-shade: #0004;
  --lp-tag-rule: #14213050;
  --lp-tag-shadow: #14213022;
  --lp-track: #14213025;
  --lp-film-backdrop: #dcdcd5;
  --lp-size-rule: #14213040;
  --lp-night: #132231;
  --lp-stitch: #c8df68;
  --lp-step-line: #8fa0ae;
  --lp-night-text: #c5ced6;
  --lp-night-rule: #ffffff38;
  --lp-dock-rule: #ffffff40;
  --lp-dock-shadow: #0002;
  --lp-gutter: clamp(20px, 5vw, 100px);
  --lp-header: 76px;
  --lp-measure: 1800px;
}

/* ---------- styles.css ---------- */
.lp{font-family:var(--lp-font);font-size:16px;line-height:normal;color:var(--lp-ink);font-synthesis:none}
/* The page's bands run edge to edge, so the shared content column gives up its measure and gutter here. */
main.page{max-width:none;margin:0;padding:0}
html{scroll-behavior:auto;scroll-padding-top:82px}
:where(.lp) button{font:inherit}
:where(.lp) :is(button,a,summary){-webkit-tap-highlight-color:transparent}
:where(.lp) :is(button,summary){cursor:pointer}
:where(.lp) :is(a,button,summary):focus-visible{outline:3px solid var(--lp-focus);outline-offset:6px}
::selection{background:var(--lp-lime);color:var(--lp-ink)}
.container{width:100%;max-width:var(--lp-measure);margin-inline:auto;padding-inline:var(--lp-gutter)}
.skip-link{position:fixed;top:var(--s2);left:var(--s2);z-index:var(--z-layer);background:var(--lp-lime);padding:var(--s4);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.lime{color:var(--lp-lime)}
.blue{color:var(--lp-blue)}

.header{position:absolute;z-index:var(--z-top);top:0;left:0;width:100%;height:var(--lp-header);padding:var(--s4) max(var(--lp-gutter), calc((100% - 1600px) / 2));display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--lp-header-line);color:var(--lp-white)}
.brand{display:flex;align-items:center;min-width:74px;min-height:44px}
.brand img{width:103px;height:36px;object-fit:contain;filter:invert(1)}
.nav{display:flex;align-items:center;gap:28px;font-size:13px}
.nav a{display:flex;align-items:center;min-height:44px}
.nav a:hover{color:var(--lp-lime)}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:56px;padding:18px 23px;background:var(--lp-lime);color:var(--lp-ink);font-size:14px;font-weight:600;line-height:1.25;border:1px solid transparent;transition:background .18s,box-shadow .18s}
.button>span{font-size:24px;line-height:16px;font-weight:400}
.button:hover{background:var(--lp-lime-hover);box-shadow:0 0 0 3px var(--lp-lime-glow)}
.button-small{min-height:44px;padding:var(--s3) var(--s4);font-size:12px;gap:22px}
.button-ink{background:var(--lp-ink);color:var(--lp-white)}
.button-ink:hover{background:var(--lp-ink-hover)}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:48px;font-size:14px;border-bottom:1px solid var(--lp-ink-line);padding:10px 0}
.text-link>span{font-size:22px}
.text-link:hover{border-bottom-color:currentColor}
.light-link{border-bottom-color:var(--lp-white-line)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:26px}
.eyebrow{font-size:11px;font-weight:600;line-height:1.5;letter-spacing:.14em;text-transform:uppercase}
.section-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:34px}
.section-aside{font-size:10px;letter-spacing:.12em}
.pin{position:relative;min-height:100svh;isolation:isolate}
.scene{position:relative}
.body-copy{font-size:16px;line-height:1.6;max-width:440px}
.section-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:50px}
.section-heading h2{font-size:clamp(44px,6.2vw,100px);font-weight:500;line-height:.98;letter-spacing:-.065em}
.section-heading .body-copy{margin-left:auto;padding-bottom:var(--s1)}

.hero{background:var(--lp-hero-ground);color:var(--lp-white)}
.hero-pin{height:100svh;min-height:690px;overflow:hidden;display:flex;align-items:center}
.hero-media,.hero-shade,.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-media{z-index:-3;transform:scale(1.05)}
.hero-poster,.hero-video{object-fit:cover;object-position:center}
.hero-video{opacity:0;transition:opacity .2s}
.hero-video.is-ready{opacity:1}
.hero-shade{z-index:-1;background:var(--lp-hero-shade)}
.hero-content{padding-top:50px;padding-bottom:65px}
.hero-eyebrow{display:flex;align-items:center;gap:10px;color:var(--lp-hero-eyebrow);margin-bottom:36px}
.tiny-stitch{height:1px;width:28px;background:var(--lp-lime)}
.search-term{display:block;font-size:clamp(18px,2vw,29px);font-weight:400;letter-spacing:-.035em;line-height:1.3;color:var(--lp-hero-query);margin-bottom:17px}
.hero-line{display:block}
/* Two classes outrank the layout's main.page h1 rule, so the hero's display line keeps the package's size and the hero's white. */
.lp .hero-title{font-size:clamp(58px,7.3vw,124px);font-weight:500;line-height:1.01;letter-spacing:-.065em;color:inherit}
.hero-intro{max-width:470px;font-size:16px;line-height:1.6;margin-top:28px;color:var(--lp-hero-intro)}
.hero .actions{margin-top:29px}
.hero-note{font-size:11px;line-height:1.6;color:var(--lp-hero-note);margin-top:19px}
.hero-bottom{position:absolute;bottom:var(--s5);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);left:0;right:0}
.scroll-cue{min-height:44px;display:flex;align-items:center;gap:15px;font-size:11px;color:var(--lp-hero-cue)}
.scroll-arrow{font-size:22px}
.video-toggle{min-height:44px;background:var(--lp-toggle-ground);border:1px solid var(--lp-toggle-line);color:var(--lp-white);border-radius:30px;padding:9px 15px;display:flex;align-items:center;gap:var(--s2);font-size:11px}
.video-toggle[hidden]{display:none}
.pause-icon{font-size:16px}
.chapter-label{font-size:11px;letter-spacing:.15em}
.hero-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--lp-lime);width:100%;transform:scaleX(0);transform-origin:left}

.production{background:var(--lp-paper)}
/* The grid's taller ceiling follows the band's own width, so a wide screen lets the film grow without a viewport breakpoint. */
.production-pin{padding-top:44px;padding-bottom:44px;display:flex;flex-direction:column;justify-content:center;gap:0;container-type:inline-size}
.production-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:7%;flex:1;max-height:650px}
.production h2{font-weight:500;font-size:clamp(48px,6.5vw,108px);line-height:1;letter-spacing:-.065em;margin-bottom:26px}
.production .body-copy{max-width:410px}
.sewing-window{width:100%;transform-origin:right center}
.sewing-media{position:relative;aspect-ratio:1.2;overflow:hidden;background:var(--lp-film-ground)}
.sewing-media video{width:100%;height:100%;object-fit:cover}
.sewing-toggle{position:absolute;bottom:14px;right:14px}
.sewing-window figcaption{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;padding-top:13px}
.stats{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.7fr);margin-top:var(--s7);padding-top:28px;border-top:1px solid var(--lp-rule);gap:var(--s5)}
.stat-value{display:block;font-size:clamp(32px,4.3vw,65px);font-weight:400;letter-spacing:-.06em;white-space:nowrap;font-variant-numeric:tabular-nums}
.stat-caption{display:block;font-size:11px;color:var(--lp-caption);margin-top:var(--s2)}
.word-reveal{display:inline-block}

.logistics{background:var(--lp-mist)}
.logistics-pin{padding-top:44px;padding-bottom:34px;display:flex;flex-direction:column;justify-content:center}
.route{background:var(--lp-route);color:var(--lp-white);padding:26px 36px 23px;margin-top:36px;position:relative}
.route-header{display:flex;justify-content:space-between;align-items:center}
.route-direct{font-size:10px;letter-spacing:.09em;color:var(--lp-lime)}
.direct-route{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:var(--s6) 0 26px}
.route-stop{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.route-stop strong{font-size:18px;font-weight:400;line-height:1.2}
.node{position:relative;border:1px solid var(--lp-node-line);border-radius:50%;background:var(--lp-route);display:grid;place-items:center;width:40px;height:40px;font-size:10px;z-index:1}
.node-poland{border-color:var(--lp-lime);background:var(--lp-lime);color:var(--lp-ink)}
.thread-track{position:absolute;top:20px;left:16.666%;width:66.666%;height:2px;display:flex}
.thread{display:block;width:50%;height:100%;background:repeating-linear-gradient(90deg,var(--lp-lime) 0 6px,transparent 6px 10px);transform-origin:left}
.indirect-route{display:flex;align-items:center;gap:14px;max-width:74%;margin:0 auto;padding-top:22px;border-top:1px solid var(--lp-route-rule);font-size:11px;color:var(--lp-route-text)}
.indirect-route i{flex:1;border-top:1px dashed var(--lp-route-dash);min-width:8px}
.middleman{display:flex;gap:var(--s2);align-items:center}
.middleman b{font-weight:400;font-size:16px}
.showrooms{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding-top:var(--s5);align-items:baseline}
.showrooms p{font-size:12px;line-height:1.7;max-width:950px}
/* Each showroom opens its map search as one whole touch target, and its ink underline and map mark tell it from the text around it without colour. */
.showroom-line{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s5)}
.showroom-link{display:inline-block;padding-block:var(--s3)}
.showroom-link:hover{color:var(--lp-blue)}
.showroom-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:currentColor}
.showroom-map{white-space:nowrap}
.unbroken{white-space:nowrap}

.pack{background:var(--lp-sand)}
.pack-pin{display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:30px}
.pack .section-top{margin-bottom:var(--s5)}
.pack-stage{height:clamp(270px,40svh,460px);position:relative;margin-top:20px;isolation:isolate}
.pack-tag{position:absolute;top:31%;left:calc(50% + 60px);z-index:10;width:215px;padding:25px 22px 20px;background:var(--lp-lime);transform:rotate(7deg)}
.pack-tag::before{content:"";height:1px;width:80px;background:var(--lp-tag-string);position:absolute;left:-70px;top:17px;transform:rotate(-16deg)}
.tag-hole{position:absolute;width:7px;height:7px;border-radius:50%;top:14px;left:11px;background:var(--lp-sand);box-shadow:inset 0 1px 2px var(--lp-hole-shade)}
.tag-title{display:flex;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:.05em;border-bottom:1px solid var(--lp-tag-rule);padding-bottom:var(--s3)}
.tag-title b{font-weight:400}
/* The example label wraps on the small tag, and where its longest word and the count no longer share a line the count drops under it on the right. */
.tag-label{text-transform:uppercase;flex:1 1 0;min-width:min-content}
.tag-title{align-items:baseline;flex-wrap:wrap;gap:0 var(--s2)}
.tag-title b{white-space:nowrap;margin-left:auto}
.tag-sizes{display:block;font-size:11px;padding-top:var(--s3);white-space:nowrap}
.tag-brand{display:block;font-size:8px;letter-spacing:.15em;padding-top:18px}
.pack-progress{position:absolute;width:80px;height:2px;bottom:13px;left:calc(50% - 40px);background:var(--lp-track)}
.pack-progress span{display:block;width:100%;height:100%;background:var(--lp-blue);transform-origin:left}
.pack-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);margin-top:10px}
/* The arrow hangs in its own column, so every line of the note, the unbreakable discount included, starts on one left edge. */
.discount-note{font-size:12px;line-height:1.5;max-width:265px;--lp-note-hang:var(--s6);padding-left:var(--lp-note-hang);text-indent:calc(-1 * var(--lp-note-hang))}
.discount-note>span{font-size:22px;vertical-align:middle;display:inline-block;width:var(--lp-note-hang);text-indent:0}
.discount-note strong{font-weight:600;white-space:nowrap}

.details-section{background:var(--lp-night);color:var(--lp-white);padding-top:60px}
.process-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}
.process-heading h2{font-size:clamp(48px,6.5vw,108px);font-weight:500;line-height:1;letter-spacing:-.065em}
.steps{list-style:none;padding:0;margin:62px 0 75px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6);position:relative;view-timeline-name:--steps;view-timeline-axis:block}
.steps::before{content:"";position:absolute;left:0;top:20px;width:100%;height:1px;background:repeating-linear-gradient(90deg,var(--lp-stitch) 0 5px,transparent 5px 9px);transform-origin:left}
.steps li{position:relative}
.step-number{position:relative;font-size:11px;width:40px;height:40px;display:grid;place-items:center;background:var(--lp-night);border:1px solid var(--lp-step-line);border-radius:50%;margin-bottom:29px}
.steps h3{font-size:20px;font-weight:500;margin-bottom:15px}
.steps p{font-size:14px;line-height:1.65;color:var(--lp-night-text);max-width:270px}
.contact{border-top:1px solid var(--lp-night-rule);border-bottom:1px solid var(--lp-night-rule);padding-block:44px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.contact h3{font-size:52px;font-weight:500;letter-spacing:-.055em;margin-top:var(--s3)}
.contact p:not(.eyebrow){font-size:14px;line-height:1.6;max-width:380px;margin-top:var(--s3);color:var(--lp-night-text)}
.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.phone{display:flex;align-items:center;gap:var(--s5);font-size:clamp(22px,3vw,43px);font-weight:400;min-height:50px;letter-spacing:-.045em}
.phone:hover{color:var(--lp-lime)}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:50px;padding-block:60px 40px}
.faq>h2{font-size:32px;line-height:1.08;letter-spacing:-.045em;font-weight:400;max-width:250px}
.faq details{border-bottom:1px solid var(--lp-night-rule);padding-bottom:0}
.faq summary{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);font-size:15px;line-height:1.4;list-style:none;padding-block:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span{width:13px;height:13px;position:relative;flex-shrink:0}
.faq summary>span::before,.faq summary>span::after{content:"";position:absolute;background:var(--lp-lime);width:13px;height:1px;top:6px}
.faq summary>span::after{transform:rotate(90deg)}
.faq details[open] summary>span::after{transform:none}
.faq details p{font-size:14px;line-height:1.7;color:var(--lp-night-text);padding-bottom:var(--s5);max-width:580px}
.closing{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:40px 60px}
.closing p{font-size:clamp(40px,5.6vw,80px);font-weight:500;letter-spacing:-.055em;line-height:1.02}
.sign-off{display:flex;align-items:center;gap:34px;justify-content:space-between;border-top:1px solid var(--lp-night-rule);padding-block:25px;font-size:11px;color:var(--lp-night-text)}
.sign-off a{display:flex;min-height:44px;align-items:center}
.sign-off .brand img{width:84px}
.chapter-nav{position:fixed;right:clamp(10px, calc(100% - 1770px), 30px);top:50%;transform:translateY(-50%);z-index:var(--z-top);display:flex;flex-direction:column;align-items:center;mix-blend-mode:difference;color:var(--lp-white)}
.chapter-nav a{display:grid;place-items:center;min-width:44px;min-height:44px}
.chapter-nav a span{font:10px var(--lp-mono);opacity:.5;border-right:1px solid transparent;padding-right:7px}
.chapter-nav a[aria-current] span{opacity:1;border-right-color:var(--lp-lime)}
.chapter-nav.is-away{visibility:hidden}

/* Scenes move only where the browser ties them to the scroll and the visitor allows motion, so no script runs per frame and everyone else reads a still page. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hero{height:165svh;view-timeline-name:--hero;view-timeline-axis:block}.hero-pin{position:sticky;top:0}.hero-content{animation:hero-out linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}.hero-media{animation:hero-zoom linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}.hero-progress{animation:grow-x linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
    .production{height:235svh;view-timeline-name:--production;view-timeline-axis:block}.production-pin{position:sticky;top:0;height:100svh}.word-reveal{animation:word-in linear both;animation-timeline:--production}.word-one{animation-range:contain 0% contain 17%}.word-two{animation-range:contain 10% contain 33%}.word-three{animation-range:contain 25% contain 48%}.sewing-window{animation:window-open linear both;animation-timeline:--production;animation-range:contain 0% contain 65%}
    .logistics{height:220svh;view-timeline-name:--logistics;view-timeline-axis:block}.logistics-pin{position:sticky;top:0;height:100svh}.thread{animation:grow-x linear both;animation-timeline:--logistics}.thread-first{animation-range:contain 0% contain 35%}.thread-second{animation-range:contain 35% contain 70%}.stop-two{animation:node-in linear both;animation-timeline:--logistics;animation-range:contain 20% contain 38%}.stop-three{animation:node-in linear both;animation-timeline:--logistics;animation-range:contain 55% contain 73%}.middleman b{animation:handoff linear both;animation-timeline:--logistics;animation-range:contain 25% contain 60%}.showrooms{animation:rise-in linear both;animation-timeline:--logistics;animation-range:contain 70% contain 90%}
    .pack{height:320svh;view-timeline-name:--pack;view-timeline-axis:block}.pack-pin{position:sticky;top:0;height:100svh}.pack-tag{animation:tag-in linear both;animation-timeline:--pack;animation-range:contain 81% contain 93%}.pack-progress span{animation:grow-x linear both;animation-timeline:--pack;animation-range:contain 0% contain 100%}.pack-bottom{animation:rise-in linear both;animation-timeline:--pack;animation-range:contain 86% contain 100%}.steps::before{animation:grow-x linear both;animation-timeline:--steps;animation-range:entry 30% cover 60%}
  }
}
@keyframes hero-out{0%,18%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-110px)}}
@keyframes hero-zoom{from{transform:scale(1.05)}to{transform:scale(1.5)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes word-in{from{opacity:.2;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes window-open{from{transform:scale(.68)}to{transform:scale(1)}}
@keyframes node-in{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes handoff{from{transform:translateX(-8px);opacity:.6}to{transform:translateX(8px);opacity:1}}
@keyframes tag-in{from{opacity:0;transform:translate(25px,-22px) rotate(-12deg)}to{opacity:1;transform:translate(0,0) rotate(7deg)}}
.fallback-motion .scene{height:auto!important}
.fallback-motion .pin{position:relative!important;height:auto!important;min-height:100svh}
.fallback-motion .hero-pin{height:100svh!important}
.fallback-motion .pack-tag{opacity:1}
.fallback-motion .reveal-once{opacity:0;transform:translateY(20px);transition:transform .7s ease,opacity .7s ease}
.fallback-motion .reveal-once.is-visible{opacity:1;transform:none}

/* The wide band's taller film ceiling, where the band's own content box reaches its widest. */
@container (min-width:1600px){.production-grid{max-height:720px}}
@media(max-width:1200px){.nav{gap:18px;font-size:12px}.header{gap:18px}.section-heading{gap:30px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.chapter-nav{display:none}.pack-bottom{align-items:start;flex-direction:column;gap:var(--s3)}.discount-note{max-width:none}.production-grid{gap:6%}.stats{gap:var(--s4)}.section-aside{font-size:9px}}
@media(max-width:900px){
  :root{--lp-header:68px;--lp-gutter:24px}.header{padding-block:var(--s3);gap:10px}.brand img{width:77px;height:30px}.nav{display:none}.button-small{font-size:11px;padding:11px var(--s3);gap:14px}.button-small>span{font-size:20px}.hero-pin{min-height:690px;align-items:center}.hero-content{padding-top:76px;padding-bottom:85px}.hero-eyebrow{font-size:9px;margin-bottom:33px}.search-term{font-size:21px;margin-bottom:15px}.lp .hero-title{font-size:clamp(38px,max(min(7.2728vw + 14.7272px,42px),9.8vw),74px);line-height:1.03;letter-spacing:-.065em}.hero-line:first-of-type{max-width:580px}.hero-intro{font-size:14px;line-height:1.6;max-width:340px;margin-top:26px}.hero .actions{gap:10px;align-items:flex-start;flex-direction:column;margin-top:25px}.button{min-height:53px;font-size:13px;padding:var(--s4) 19px;gap:28px}.hero .button{width:min(100%,292px)}.text-link{font-size:13px;min-height:44px}.hero-note{font-size:10px;margin-top:15px;max-width:310px}.hero-bottom{bottom:17px;gap:clamp(6px,3.6364vw - 5.6364px,var(--s2));flex-wrap:wrap}.scroll-cue{font-size:9px;gap:10px}.video-toggle{font-size:9px;padding-inline:clamp(var(--s2),7.2728vw - 15.2727px,var(--s3))}.chapter-label{display:none}.hero-media .hero-poster,.hero-video{object-position:65% center}.section-top{margin-bottom:var(--s5)}.section-top .section-aside{display:none}.eyebrow{font-size:9px}.production-pin{padding-top:29px;padding-bottom:30px}.production-grid{grid-template-columns:minmax(0,1fr);gap:21px;max-height:none;flex:0}.production h2{font-size:clamp(31px,8vw,57px);margin:0}.production .body-copy{font-size:12px;line-height:1.55}.sewing-window{width:100%;max-width:100%;transform-origin:center}.sewing-media{aspect-ratio:1.85;max-height:30svh}.sewing-window figcaption{font-size:8px;padding-top:var(--s2)}.sewing-toggle{bottom:10px;right:10px}.stats{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);margin-top:23px;padding-top:var(--s4);gap:var(--s4) 20px}.stat-value{font-size:clamp(29px,8vw,44px);line-height:1.05}.stat-caption{font-size:9px;margin-top:6px}.stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--lp-rule-soft);padding-top:13px}.section-heading{grid-template-columns:minmax(0,1fr);gap:18px}.section-heading h2{font-size:clamp(40px,10vw,65px);line-height:.99}.section-heading .body-copy{margin:0;padding:0;max-width:500px;font-size:13px;line-height:1.55}.logistics-pin{padding-top:29px;padding-bottom:25px}.route{padding:18px 15px var(--s4);margin-top:var(--s5)}.route-direct{font-size:8px;letter-spacing:.03em}.direct-route{margin:26px 0 22px}.route-stop strong{font-size:13px;line-height:1.3}.node{width:32px;height:32px;font-size:8px}.thread-track{top:var(--s4)}.route-stop{gap:13px}.indirect-route{max-width:93%;font-size:9px;gap:7px;padding-top:var(--s4)}.showrooms{grid-template-columns:minmax(0,1fr);gap:var(--s2);padding-top:20px}.showrooms p{font-size:10px;line-height:1.65}.pack-pin{padding-top:29px;padding-bottom:25px}.pack .section-top{margin-bottom:22px}.pack-stage{height:clamp(225px,31svh,330px);margin-top:22px}.pack-tag{width:166px;left:calc(50% + 3px);top:29%;padding:22px 14px 15px}.pack-tag::before{width:30px;left:-22px;top:17px}.tag-title{font-size:10px;padding-bottom:9px}.tag-sizes{font-size:9px;padding-top:10px}.tag-brand{font-size:7px;padding-top:14px}.pack-progress{bottom:var(--s1)}.pack .actions{gap:10px 20px;width:100%;flex-wrap:wrap}.pack .button{font-size:12px;gap:20px}.pack .text-link{font-size:11px;gap:10px}.pack-bottom{gap:7px;margin-top:10px}.discount-note{font-size:10px}.discount-note>span{font-size:17px}.details-section{padding-top:35px}.process-heading{align-items:start;flex-direction:column;gap:var(--s3)}.process-heading h2{font-size:48px}.steps{grid-template-columns:minmax(0,1fr);margin:37px 0 40px;gap:28px}.steps::before{width:1px;height:calc(100% - 40px);left:17px;top:17px;background:repeating-linear-gradient(0deg,var(--lp-stitch) 0 5px,transparent 5px 9px);transform-origin:top}.steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s2) 20px}.step-number{width:34px;height:34px;margin:0;grid-row:1/3}.steps h3{font-size:19px;margin:6px 0 0}.steps p{font-size:13px;max-width:none;grid-column:2}.contact{align-items:start;flex-direction:column;gap:25px;padding-block:var(--s6)}.contact h3{font-size:42px}.contact p:not(.eyebrow){font-size:13px}.contact-actions{gap:var(--s2)}.phone{font-size:28px}.faq{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding-top:35px}.faq>h2{max-width:none;font-size:30px}.faq summary{font-size:14px;min-height:66px;gap:18px}.faq details p{font-size:13px}.closing{align-items:start;flex-direction:column;gap:25px;padding:15px 0 40px}.closing p{font-size:45px}.sign-off{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2) 20px;font-size:10px}.sign-off>:nth-child(even){justify-self:end}.sign-off .brand img{width:74px}
  @supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.steps::before{animation-name:grow-y}}}
}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(max-height:720px) and (min-width:901px){.hero-pin{min-height:620px}.hero-content{padding-top:90px;padding-bottom:75px}.hero-eyebrow{margin-bottom:18px}.lp .hero-title{font-size:clamp(58px,6.5vw,95px)}.hero-intro{margin-top:18px}.hero .actions{margin-top:18px}.production-pin,.logistics-pin,.pack-pin{padding-block:26px}.section-top{margin-bottom:20px}.production h2{font-size:clamp(48px,6vw,85px)}.sewing-media{aspect-ratio:1.55}.stats{margin-top:var(--s5);padding-top:18px}.section-heading h2{font-size:clamp(48px,5.5vw,80px)}.route{margin-top:22px}.pack-stage{height:240px}.pack-bottom .actions{gap:18px}.body-copy{font-size:14px}}
@media(max-height:700px){.scene:not(.hero) .pin{height:700px;min-height:700px;top:calc(100svh - 700px)}.hero-pin{min-height:660px;top:min(0px,calc(100svh - 660px))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scene{height:auto!important}.pin{position:relative!important;height:auto!important;min-height:100svh}.hero-pin{height:100svh!important}.hero-content{opacity:1;transform:none}.hero-media{transform:none}.hero-video{display:none}.video-toggle{display:none!important}.word-reveal,.sewing-window,.showrooms,.pack-bottom,.reveal-once{opacity:1!important;transform:none!important}.thread,.pack-progress span,.hero-progress{transform:scaleX(1)}.pack-tag{opacity:1}.steps::before{transform:none}}

.scene{view-timeline-inset:0}
.pack-stage{overflow:clip}
.pack-bottom:focus-within{animation:none;opacity:1;transform:none}
.brand img{object-position:left center}
@media(max-width:900px){.production-copy{display:block}.production h2{font-size:44px;line-height:1.02;margin-bottom:17px}.production h2 br{display:none}.production h2 .word-reveal{margin-right:.18em}.production .body-copy{font-size:13px;max-width:500px}.sewing-media{max-height:25svh}.production-grid{gap:18px}}

/* ---------- refinements.css: continuous access to registration, readable motion and supplied films ---------- */
html{scroll-padding-top:100px}
.header{position:fixed;background:var(--lp-header-ground);backdrop-filter:blur(12px);height:76px}
.header .brand img{width:62px;height:38px}
.sewing-toggle{min-height:66px;min-width:160px}
.hero-note{font-size:14px;line-height:1.55;max-width:450px}
.production-pin,.logistics-pin,.pack-pin{padding-top:105px;padding-bottom:35px}
.stat-caption{font-size:13px;line-height:1.4}
.showrooms p{font-size:14px;line-height:1.55}
.discount-note{font-size:14px;max-width:320px}
.word-reveal{opacity:1!important}
.pack-bottom{animation:none!important;opacity:1!important;transform:none!important;align-items:center;flex-direction:row;flex-wrap:wrap;gap:var(--s4);margin-top:18px}
.pack-stage{height:clamp(220px,34svh,380px);margin-top:20px;overflow:visible}
.pack-film{position:relative;height:100%;width:min(100%,900px);margin:auto;background:var(--lp-film-backdrop);overflow:hidden;border-radius:3px}
.pack-film video,.pack-final{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.pack-film video{opacity:0}
.pack-film video.is-ready{opacity:1}
.pack-tag{width:178px;left:auto;right:max(var(--s3),calc((100% - 870px) / 2));top:auto;bottom:25px;padding:20px var(--s4) 15px;transform:rotate(5deg);box-shadow:0 5px 16px var(--lp-tag-shadow)}
.tag-title{font-size:12px}
.tag-sizes{font-size:11px}
.tag-brand{font-size:9px;padding-top:10px}
.pack-tag::before{width:35px;left:-28px}
.pack-progress{width:100%;bottom:-7px;left:0;height:2px}
.pack-sizes{display:flex;justify-content:center;align-items:center;gap:clamp(7px,2vw,26px);padding-top:18px;font-size:14px}
.pack-sizes>span{display:grid;place-items:center;width:34px;min-height:32px;border-bottom:1px solid var(--lp-size-rule)}
.pack-sizes b{font-size:12px;white-space:nowrap}
.mobile-actions{display:none}
.fallback-motion .pack-film video{display:none}
.fallback-motion .pack-stage{min-height:250px}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
  .hero{height:140svh}.production{height:190svh}.logistics{height:170svh}.pack{height:250svh}
  .word-one,.word-two,.word-three{animation-name:readable-word-in}
  .pack-tag{animation-name:small-tag-in}
}}
@keyframes readable-word-in{from{transform:translateY(12px)}to{transform:translateY(0)}}
@keyframes small-tag-in{from{opacity:0;transform:translate(15px,-12px) rotate(-6deg)}to{opacity:1;transform:rotate(5deg)}}
@media(max-width:1200px){.nav{gap:13px}.header{gap:var(--s3)}.header .button{gap:var(--s3)}.pack-bottom .actions{gap:15px}}
/* The narrow screen's smallest phones get their tighter values from clamp(), so no width under the phone step is a breakpoint. */
@media(max-width:900px){
  :root{--lp-gutter:clamp(19px,9.091vw - 10.0909px,24px);--lp-header:60px}
  html{scroll-padding-top:75px}
  body{padding-bottom:calc(83px + env(safe-area-inset-bottom,0px))}
  .header{height:60px;padding-block:var(--s2)}
  .header .brand{min-width:48px}.header .brand img{width:48px;height:32px}
  .header .button{font-size:12px;padding:var(--s3);min-height:44px;gap:20px}
  .header .button{display:none}
  .hero-pin{min-height:clamp(800px,936.3636px - 36.3637vw,820px);padding-bottom:80px}
  .hero-content{padding-top:84px;padding-bottom:110px}
  .hero-eyebrow{font-size:10px;margin-bottom:clamp(22px,5.4546vw + 4.5455px,25px)}
  .hero-intro{font-size:clamp(14px,1.8182vw + 8.1818px,15px);line-height:1.55;margin-top:var(--s5)}
  .hero-note{font-size:14px;line-height:1.5;max-width:340px;margin-top:var(--s4)}
  .hero .actions{margin-top:22px;gap:10px}
  .hero .button{width:100%;max-width:340px;font-size:14px}
  .hero .text-link{font-size:14px}
  .hero-bottom{bottom:100px}
  .scroll-cue,.video-toggle{font-size:clamp(10px,1.8182vw + 4.1818px,11px)}
  .hero-bottom .video-toggle{padding-inline:var(--s3)}
  .production-pin,.logistics-pin,.pack-pin{padding-top:85px;padding-bottom:105px;min-height:800px}
  .production .section-top,.pack .section-top,.logistics .section-top{margin-bottom:20px}
  .eyebrow{font-size:10px}
  .production-copy{display:block}
  .production h2{font-size:clamp(35px,10.3vw,44px);line-height:1.03;margin-bottom:var(--s4)}
  .production h2 br{display:none}.production h2 .word-reveal{margin-right:.14em}
  .production .body-copy,.section-heading .body-copy{font-size:14px;line-height:1.55}
  .production-grid{gap:var(--s4)}
  .sewing-media{max-height:23svh;min-height:145px;aspect-ratio:1.85}
  .sewing-window{animation:none!important;transform:none!important}
  .sewing-window figcaption{font-size:9px}
  .sewing-toggle{right:var(--s2);bottom:var(--s2);font-size:clamp(10px,1.8182vw + 4.1818px,11px);min-height:44px;min-width:120px}
  .stats{margin-top:18px;padding-top:14px;gap:13px var(--s4)}
  .stat-value{font-size:clamp(28px,8vw,38px)}.stat-caption{font-size:12px;margin-top:5px}
  .stat:nth-child(3),.stat:nth-child(4){padding-top:10px}
  .showrooms p{font-size:14px;line-height:1.55}
  .showrooms{padding-top:18px;gap:7px}
  .route{margin-top:22px}.route-stop strong{font-size:14px}.indirect-route{font-size:11px}
  .pack-stage{height:clamp(210px,29svh,290px);margin-top:20px}
  .pack-tag{width:clamp(127px,18.1819vw + 68.8182px,137px);right:clamp(6px,3.6364vw - 5.6364px,var(--s2));bottom:20px;padding:18px 11px var(--s3)}
  .tag-title{font-size:11px;padding-bottom:var(--s2)}.tag-sizes{font-size:clamp(9px,1.8182vw + 3.1818px,10px);padding-top:var(--s2)}.tag-brand{font-size:8px}
  .pack-sizes{gap:7px;padding-top:14px;font-size:13px;justify-content:space-between}
  .pack-sizes>span{width:28px}.pack-sizes b{font-size:11px}
  .pack-bottom{gap:var(--s3);margin-top:17px;flex-direction:column;align-items:stretch}
  .pack-bottom .actions{align-items:stretch;gap:var(--s2);flex-direction:column}
  .pack .button{font-size:14px;min-height:50px}
  .pack .text-link{font-size:14px;min-height:44px;width:100%}
  .discount-note{font-size:14px;max-width:none;--lp-note-hang:var(--s5)}.discount-note>span{font-size:18px}
  .mobile-actions{position:fixed;z-index:var(--z-dock);left:0;right:0;bottom:0;display:flex;align-items:center;gap:clamp(var(--s2),7.2728vw - 15.2727px,var(--s3));padding:var(--s3) var(--lp-gutter) calc(var(--s3) + env(safe-area-inset-bottom,0px));background:var(--lp-night);border-top:1px solid var(--lp-dock-rule);box-shadow:0 -5px 24px var(--lp-dock-shadow)}
  .mobile-actions .button{flex:1;min-width:0;font-size:clamp(12px,1.8182vw + 6.1818px,13px);min-height:52px;padding:15px clamp(var(--s3),7.2728vw - 11.2727px,var(--s4));gap:10px}
  .mobile-how{color:var(--lp-white);min-width:60px;min-height:48px;display:grid;place-content:center;font-size:12px;line-height:1.35;white-space:pre-line}
  /* The phone layout reaches tablets, where the bar has room to say the link on one line beside the button. */
  @media(min-width:601px){.mobile-how{white-space:nowrap}}
  .details-section{padding-top:85px}.steps p,.contact p:not(.eyebrow),.faq details p{font-size:14px}
  .sign-off{font-size:12px}.contact .text-link{font-size:14px}.faq summary{font-size:15px}
  .phone{font-size:28px}.section-heading h2{font-size:clamp(37px,10vw,48px)}
  @supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.hero{height:130svh}.production{height:170svh}.logistics{height:160svh}.pack{height:220svh}}}
}
@media(max-height:780px) and (max-width:900px){
  .scene{height:auto!important}
  .scene:not(.hero) .pin{position:relative!important;height:auto;min-height:0;top:0;padding-top:90px}
  .hero-pin{position:relative!important;height:auto;min-height:820px;top:0}
  .hero-content{animation:none!important;opacity:1;transform:none}
  .hero-bottom{bottom:100px}.pack-stage{height:210px}.production .sewing-media{min-height:145px}
}
@media(prefers-reduced-motion:reduce){
  .pack-film video{display:none!important}.pack-tag{opacity:1!important;transform:rotate(5deg)!important}
  .scene .pin{height:auto!important;min-height:0!important;top:auto!important}
  .hero-pin{min-height:800px!important}.hero .hero-content{opacity:1!important}
}

/* ---------- completion.css: six distinct size illustrations fold and move to a common stack in order ---------- */
.fold-six{display:none;position:absolute;inset:0;isolation:isolate}
.fold-lineup{position:absolute;left:50%;width:min(84%,680px);height:100%;top:15%;transform:translateX(-50%)}
.garment{position:absolute;left:calc(var(--lp-n)*17%);top:0;width:14%;aspect-ratio:200/480;transform-origin:50% 25%;filter:drop-shadow(0 9px 5px var(--lp-tag-shadow));z-index:calc(var(--lp-n) + 1)}
.garment-top,.garment-bottom{position:absolute;left:0;width:100%;height:50%;overflow:hidden}
.garment-top{top:0}
.garment-bottom{top:50%;transform-origin:50% 0}
.garment img{position:absolute;width:100%;height:200%;max-width:none;left:0;pointer-events:none}
.garment-top img{top:0}
.garment-bottom img{top:-100%}
.garment-size{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font-size:14px;font-variant-numeric:tabular-nums;color:var(--lp-ink)}
.garment-0{--lp-n:0;--lp-shift:303.57%;--lp-lift:15%;--lp-turn:-3deg}
.garment-1{--lp-n:1;--lp-shift:182.14%;--lp-lift:12%;--lp-turn:2deg}
.garment-2{--lp-n:2;--lp-shift:60.71%;--lp-lift:9%;--lp-turn:-2deg}
.garment-3{--lp-n:3;--lp-shift:-60.71%;--lp-lift:6%;--lp-turn:3deg}
.garment-4{--lp-n:4;--lp-shift:-182.14%;--lp-lift:3%;--lp-turn:-1deg}
.garment-5{--lp-n:5;--lp-shift:-303.57%;--lp-lift:0%;--lp-turn:1deg}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
 .fold-six{display:block;animation:illustration-out linear both;animation-timeline:--pack;animation-range:contain 82% contain 96%}
 .pack-film{animation:film-in linear both;animation-timeline:--pack;animation-range:contain 84% contain 98%}
 .garment{animation:six-stack linear both;animation-timeline:--pack}
 .garment-bottom{animation:six-fold linear both;animation-timeline:--pack}
 .garment-size{animation:six-label linear both;animation-timeline:--pack}
 .garment-0{animation-range:contain 10% contain 22%}.garment-0 .garment-bottom{animation-range:contain 2% contain 12%}.garment-0 .garment-size{animation-range:contain 10% contain 18%}
 .garment-1{animation-range:contain 22% contain 34%}.garment-1 .garment-bottom{animation-range:contain 14% contain 24%}.garment-1 .garment-size{animation-range:contain 22% contain 30%}
 .garment-2{animation-range:contain 34% contain 46%}.garment-2 .garment-bottom{animation-range:contain 26% contain 36%}.garment-2 .garment-size{animation-range:contain 34% contain 42%}
 .garment-3{animation-range:contain 46% contain 58%}.garment-3 .garment-bottom{animation-range:contain 38% contain 48%}.garment-3 .garment-size{animation-range:contain 46% contain 54%}
 .garment-4{animation-range:contain 58% contain 70%}.garment-4 .garment-bottom{animation-range:contain 50% contain 60%}.garment-4 .garment-size{animation-range:contain 58% contain 66%}
 .garment-5{animation-range:contain 70% contain 82%}.garment-5 .garment-bottom{animation-range:contain 62% contain 72%}.garment-5 .garment-size{animation-range:contain 70% contain 78%}
}}
@keyframes six-fold{from{transform:rotateX(0)}to{transform:rotateX(-180deg)}}
@keyframes six-stack{from{transform:translate(0,0) rotate(0) scale(1)}to{transform:translate(var(--lp-shift),var(--lp-lift)) rotate(var(--lp-turn)) scale(var(--lp-fold-scale,1.3))}}
@keyframes six-label{from{opacity:1}to{opacity:0}}
@keyframes illustration-out{from{opacity:1}to{opacity:0}}
@keyframes film-in{from{opacity:0}to{opacity:1}}
.fallback-motion .fold-six{display:none}
.fallback-motion .pack-film{animation:none;opacity:1}
/* A stop's name is what the route says, so it never fades with the drawing and a reader stopping mid-scroll can still read it. */
.route-stop{opacity:1!important}
:where(.lp) :is(a,button,summary){scroll-margin-block:110px}
.chapter-nav a span{opacity:1;font-size:12px}
@media(max-width:900px){.hero-shade{background:var(--lp-hero-shade-narrow)}}
.story:focus{outline:none}
@media(max-width:900px){.garment{--lp-fold-scale:2}.fold-lineup{width:min(94%,420px);top:25%}.garment-size{font-size:13px;top:-26px}.garment{filter:drop-shadow(0 6px 4px var(--lp-tag-shadow))}}
@media(prefers-reduced-motion:reduce){.fold-six{display:none!important}.pack-film{opacity:1!important;animation:none!important}}
/* Reflow for high zoom and landscape: reading flow takes priority over pinning. */
@media(max-height:600px){
 .scene{height:auto!important}.scene .pin{position:relative!important;top:0!important;height:auto!important;min-height:0!important}
 .hero-pin{min-height:790px!important}.hero-content{opacity:1!important;transform:none!important;animation:none!important}
 .production-pin,.logistics-pin,.pack-pin{padding-top:100px;padding-bottom:100px}
 .production-grid{max-height:none}.hero-media{animation:none!important}
}

/* ---------- the model strip ---------- */
/* The pack chapter's proof on its sand: only where the strip's own box cannot hold three cards side by side does it scroll sideways, and everywhere else every model shows in a still grid of at most six per row. */
.strip{background:var(--lp-sand);padding-block:clamp(var(--s6),5vw,var(--s8)) clamp(var(--s8),7vw,calc(var(--s9) + var(--s5)));container:strip / inline-size}
.strip-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:clamp(var(--s4),3vw,var(--s7));padding-top:clamp(var(--s6),4vw,var(--s8));border-top:1px solid var(--lp-rule)}
.strip-title{font-size:clamp(2rem,1.45rem + 2.2vw,3.5rem);font-weight:500;line-height:1.02;letter-spacing:-.055em;max-width:14ch}
.strip-intro{font-size:clamp(.875rem,.82rem + .25vw,1rem);line-height:1.6;max-width:28rem;justify-self:end}
.strip-list{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(10rem,64%,14rem);grid-template-rows:repeat(4,auto);--lp-strip-gap:clamp(var(--s4),1.6vw,var(--s5));gap:var(--s2) var(--lp-strip-gap);max-width:var(--lp-measure);margin:clamp(var(--s5),3vw,var(--s7)) auto 0;padding:var(--s3) var(--lp-gutter) var(--s5);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lp-gutter);scrollbar-width:thin;scrollbar-color:var(--lp-ink-line) transparent}
/* Each card spans the list's four rows as a subgrid, so photos, names, runs and totals line up across a row; it holds its own screen-reader words, so they never escape the sideways rail. */
.strip-card{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--s2);min-width:0;scroll-snap-align:start;color:var(--lp-ink)}
/* The site's photo frame keeps the product photo's ratio and the placeholder; on sand it takes the page's paper and a caption ink that stays readable there. */
.strip-photo{margin-bottom:var(--s1);background:var(--lp-paper);--muted:var(--lp-caption)}
.strip-label{display:grid;align-content:start;gap:calc(var(--s1) / 2);min-width:0}
.strip-name{font-size:clamp(.9375rem,.9rem + .15vw,1rem);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.strip-card:hover .strip-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
/* The page's blue ring is too light on sand, so a card is ringed in the page's darker blue. */
.strip-card:focus-visible{outline-color:var(--lp-blue)}
.strip-cut{font-size:.75rem;line-height:1.4;color:var(--lp-caption)}
/* The run is what a buyer decides on, so each size stands over its pieces in the card's body size and ink, a run of seven fits one line of the narrowest card, and the total under them names the unit. */
.strip-run{list-style:none;margin:var(--s1) 0 0;padding:var(--s2) 0 0;--run-pitch:1.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--run-pitch),1fr));align-content:start;row-gap:var(--s2);border-top:1px solid var(--lp-size-rule);font-size:.875rem;line-height:1.25;font-variant-numeric:tabular-nums}
/* A run longer than those seven splits into two even rows at the same pitch, so its last size never stands alone on a line of its own. */
.strip-run:has(> :nth-child(8)){grid-template-columns:repeat(4,var(--run-pitch))}
.strip-run:has(> :nth-child(9)){grid-template-columns:repeat(5,var(--run-pitch))}
.strip-run:has(> :nth-child(11)){grid-template-columns:repeat(6,var(--run-pitch))}
.strip-run:has(> :nth-child(13)){grid-template-columns:repeat(7,var(--run-pitch))}
.strip-size{display:grid;align-content:start;gap:calc(var(--s1) / 2);min-width:0}
.strip-size-name{font-weight:600}
.strip-size-pieces{white-space:nowrap}
/* The times sign is drawn, not spoken: a reader hears the count and its unit. */
.strip-size-pieces::before{content:"×";content:"×" / ""}
.strip-total{padding-top:var(--s2);border-top:1px solid var(--lp-rule-soft);font-size:.875rem;font-weight:600}
.strip-foot{margin-top:clamp(var(--s4),2vw,var(--s5))}
@container strip (max-width:48rem){
  .strip-head{grid-template-columns:minmax(0,1fr)}
  .strip-intro{justify-self:start}
}
/* Each step starts where that many cards at their least width fit side by side with their gaps and the strip's gutters, so a mouse never meets models hidden behind a sideways scroll; the counts divide a full strip into whole rows. */
@container strip (min-width:36.5rem){
  .strip-list{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(var(--s6),3vw,var(--s7));overflow-x:visible;scroll-snap-type:none}
}
@container strip (min-width:48rem){
  .strip-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Six to a row only once a ninth model exists, so the smallest strip stands as two full rows of four. */
@container strip (min-width:77rem){
  .strip-list:has(> :nth-child(9)){grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ---------- the comparison chapter ---------- */
/* The ways to buy are read across each fact; the i8 DENIM column is the warehouse chapter's dark route band, so the table makes the drawing's argument in words. */
.compare{background:var(--lp-mist);padding-block:clamp(var(--s8),7vw,calc(var(--s9) + var(--s5))) clamp(var(--s8),6vw,var(--s9))}
.compare-inner{container-type:inline-size}
.compare-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:clamp(var(--s5),4vw,var(--s7))}
.compare-title{font-size:clamp(2.125rem,1.45rem + 2.6vw,4rem);font-weight:500;line-height:1.02;letter-spacing:-.055em;max-width:18ch}
.compare-intro{font-size:clamp(.875rem,.82rem + .25vw,1rem);line-height:1.6;max-width:28rem;justify-self:end}
.compare-table{width:100%;margin-top:clamp(var(--s6),5vw,var(--s8));border-collapse:collapse;table-layout:fixed;font-size:clamp(.8125rem,.76rem + .25vw,.9375rem);line-height:1.5}
.compare-corner{width:22%;padding:0;border-bottom:1px solid var(--lp-rule)}
.compare-way,.compare-way-own{text-align:left;vertical-align:bottom;font-weight:600;overflow-wrap:break-word;hyphens:auto}
.compare-way{width:25%;padding:var(--s5) var(--s5) var(--s4) 0;font-size:clamp(.75rem,.7rem + .2vw,.875rem);border-bottom:1px solid var(--lp-rule)}
.compare-way-own{width:28%;padding:var(--s5) var(--s5) var(--s4);font-size:clamp(.875rem,.8rem + .35vw,1.125rem);letter-spacing:.02em;color:var(--lp-lime);background:var(--lp-route);border-top:3px solid var(--lp-lime);border-bottom:1px solid var(--lp-route-rule)}
.compare-fact{text-align:left;vertical-align:top;padding:var(--s5) var(--s5) var(--s5) 0;font-size:clamp(.8125rem,.78rem + .15vw,.875rem);font-weight:600;border-bottom:1px solid var(--lp-rule);overflow-wrap:break-word;hyphens:auto}
.compare-cell,.compare-cell-own{vertical-align:top;overflow-wrap:break-word;hyphens:auto}
.compare-cell{padding:var(--s5) var(--s5) var(--s5) 0;color:var(--lp-caption);border-bottom:1px solid var(--lp-rule)}
.compare-cell-own{padding:var(--s5);color:var(--lp-white);background:var(--lp-route);border-bottom:1px solid var(--lp-route-rule)}
/* Every English word fits its column whole even on the narrowest phone, so the English table is not hyphenated, where a split "middle-man" read as two words; the Polish one keeps hyphenating its longer words. */
.compare-table:lang(en) :is(.compare-way,.compare-way-own,.compare-fact,.compare-cell,.compare-cell-own){hyphens:manual}
/* Where the chapter's own width no longer holds the facts beside the answers, each fact heads its row and its answers stay side by side, so the comparison still reads across. */
@container (max-width:48rem){
  .compare-heading{grid-template-columns:minmax(0,1fr)}
  .compare-intro{justify-self:start;max-width:34rem}
}
@container (max-width:40rem){
  .compare-table,.compare-group{display:block}
  .compare-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr)}
  .compare-corner{display:none}
  .compare-way,.compare-way-own,.compare-cell-own{width:auto;padding-inline:var(--s2)}
  .compare-way{padding:var(--s3) var(--s2) var(--s3) 0}
  .compare-way-own{padding-block:var(--s4) var(--s3)}
  .compare-fact{grid-column:1/-1;padding:var(--s4) 0 var(--s2);border-bottom:0}
  .compare-cell{padding:0 var(--s2) var(--s4) 0}
  .compare-cell-own{padding-block:0 var(--s4)}
}
@media(forced-colors:active){.compare-way-own,.compare-cell-own{border-inline:2px solid CanvasText}}

/* ---------- the site footer ---------- */
/* The dark closing band meets the site footer edge to edge as the package ends, so the footer's shared top margin gives way on this page alone. */
body > footer{margin-top:0}

/* ---------- the site's cookie sheet ---------- */
/* While the sheet is open on a phone, the action bar docks on top of it and the page end and keyboard focus make room for both. */
@media(max-width:900px){
  body:has(> .consent:not([hidden])){padding-bottom:calc(var(--consent-h, 16rem) + 83px)}
  html:has(> body > .consent:not([hidden])){scroll-padding-bottom:calc(var(--consent-h, 16rem) + 83px)}
  body:has(> .consent:not([hidden])) .mobile-actions{bottom:var(--consent-h, 16rem);padding-bottom:var(--s3)}
  /* The open sheet covers the screen's lower part, so the hero's words stand from the top instead of the middle and the VAT note stays above it. */
  body:has(> .consent:not([hidden])) .hero-pin{align-items:flex-start}
  /* The English headline takes a third line on a phone, so while the sheet is open its hero closes up to keep the VAT note above it too. */
  body:has(> .consent:not([hidden])) .hero-eyebrow:lang(en){margin-bottom:var(--s4)}
  body:has(> .consent:not([hidden])) :is(.hero-intro,.hero .actions):lang(en){margin-top:var(--s4)}
  .mobile-actions.is-tucked{visibility:hidden}
}