:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/assistant-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/assistant-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/assistant-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/karantina-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/karantina-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/karantina-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/karantina-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/karantina-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/karantina-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/fonts/noto-sans-hebrew-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/fonts/noto-sans-hebrew-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/fonts/noto-sans-hebrew-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: hash-routed multi-page site. Home opens with a scroll-driven WebGL box; each category page has its own lit 3D product scene with colorways and logo upload. RTL Hebrew. */
:root{
  --paper:#EEF2F4; --paper-2:#E2E9ED; --card:#F9FAFB; --ink:#0E2230; --muted:#557080;
  --line:rgba(14,34,48,.09); --line-2:rgba(14,34,48,.18);
  --deep:#2F6A8C; --on-deep:#FFFFFF; --sky:#4FA9DB; --night:#0C2433; --on-night:#E9F2F7; --beige:#E6F2FA; --beige-2:#8DB5CE; --tint:#E2EDF5; --tint-dot:rgba(47,106,140,.22);
  --logo-dark:#36708F; --logo-light:#4FA9DB;
  --f-display:"Noto Sans Hebrew","Arial Hebrew",system-ui,sans-serif;
  --f-big:"Karantina","Noto Sans Hebrew",system-ui,sans-serif;
  --f-body:"Assistant","Noto Sans Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-brand:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#09131A; --paper-2:#0E1C26; --card:#10202B; --ink:#E3ECF1; --muted:#8EA5B3;
  --line:rgba(227,236,241,.08); --line-2:rgba(227,236,241,.18);
  --deep:#7DB4D5; --on-deep:#06121A; --sky:#62BBEA; --night:#050D13; --on-night:#E3ECF1; --logo-dark:#5E9CC0; --logo-light:#62BBEA; --tint:#0C1C27; --tint-dot:rgba(98,187,234,.16); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#09131A; --paper-2:#0E1C26; --card:#10202B; --ink:#E3ECF1; --muted:#8EA5B3;
  --line:rgba(227,236,241,.08); --line-2:rgba(227,236,241,.18);
  --deep:#7DB4D5; --on-deep:#06121A; --sky:#62BBEA; --night:#050D13; --on-night:#E3ECF1; --logo-dark:#5E9CC0; --logo-light:#62BBEA; --tint:#0C1C27; --tint-dot:rgba(98,187,234,.16); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--paper)}
body.menu-open{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-weight:700;font-size:.92rem;color:var(--sky);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0}
h2{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;font-stretch:86%;line-height:1.02}
.lead{color:var(--muted);max-width:54ch;font-size:1.12rem;margin:0}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.75em 1.3em;border-radius:8px;border:1px solid var(--line-2);background:transparent;text-decoration:none;font-weight:700;cursor:pointer;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--deep);color:var(--on-deep);border-color:transparent}
.btn.wa{background:#1F9D55;color:#fff;border-color:transparent}
section.block{padding-block:clamp(64px,10vw,130px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:44px}
.sec-head .eyebrow{margin-bottom:14px}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}

/* header + menu */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:80;transition:background .3s,box-shadow .3s}
.hdr.solid{background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
body.menu-open .hdr{background:transparent;box-shadow:none;backdrop-filter:none;color:var(--on-night)}
.hdr .wrap{display:flex;align-items:center;gap:14px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:36px;height:36px}
.bw{display:grid;line-height:1}
.bw b{font-family:var(--f-brand);font-weight:800;font-stretch:118%;font-size:1.28rem;letter-spacing:-.02em;direction:ltr;text-align:right}
.bw small{font-family:var(--f-display);font-weight:600;font-size:.72rem;color:var(--muted);margin-top:3px}
body.menu-open .bw small{color:inherit;opacity:.7}
.hdr .sp{flex:1}
.hdr .btn{padding:.55em 1.1em}
body.menu-open .hdr .btn.primary{background:var(--on-night);color:var(--night)}
.burger{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;display:grid;place-content:center;gap:5px}
body.menu-open .burger{border-color:rgba(255,255,255,.3)}
.burger span{display:block;width:18px;height:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:520px){.hdr .btn.primary{display:none}}
.menu{position:fixed;inset:0;z-index:70;background:var(--night);color:var(--on-night);clip-path:circle(0 at 44px 40px);transition:clip-path .7s var(--ease);overflow:auto;visibility:hidden}
body.menu-open .menu{clip-path:circle(150% at 44px 40px);visibility:visible}
.menu .wrap{min-height:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;padding-block:110px 40px;align-items:center}
.mlist{list-style:none;margin:0;padding:0;display:grid}
.mlist a{display:flex;align-items:baseline;gap:18px;text-decoration:none;padding:6px 0;font-family:var(--f-display);font-weight:800;font-stretch:84%;font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1.15;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s var(--ease),color .2s}
body.menu-open .mlist a{opacity:1;transform:none}
.mlist a i{font-style:normal;font-family:var(--f-mono);font-size:.8rem;font-weight:400;color:var(--sky);min-width:2.2em}
.mlist a:hover,.mlist a.cur{color:var(--sky)}
.mlist .sep{height:1px;background:rgba(255,255,255,.12);margin:10px 0}
.mside{display:grid;gap:18px}
.mprev{aspect-ratio:4/3;border-radius:10px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.12),rgba(255,255,255,.02));overflow:hidden;display:grid;place-items:center}
.mprev img{width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.mcontact{display:grid;gap:6px;font-size:1rem;opacity:.85}
.mcontact b{font-family:var(--f-mono);font-weight:500;font-size:1.3rem;direction:ltr;text-align:right}
@media (max-width:820px){.menu .wrap{grid-template-columns:1fr;padding-top:96px}.mprev{display:none}}

/* hero */
.hero{height:420vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:70px 0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;background-position:center}
.bigword{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.bigword span{grid-area:1/1;font-family:var(--f-big);font-weight:700;font-size:clamp(7rem,30vw,26rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line-2);opacity:0;transform:translateY(30px);transition:opacity .6s,transform .8s var(--ease)}
.bigword span.on{opacity:1;transform:none}
.htext{position:relative;z-index:2;max-width:560px;justify-self:end;width:100%}
.stages{display:grid}
.stg{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .7s var(--ease);pointer-events:none}
.stg.on{opacity:1;transform:none;pointer-events:auto}
.stg h1{font-size:clamp(2.6rem,6.2vw,5.4rem);font-weight:850;font-stretch:84%;line-height:.98;margin:.3em 0 .3em}
.stg h1 em{font-style:normal;color:var(--sky)}
.stg h2{font-size:clamp(2.2rem,5vw,4.2rem);margin:.3em 0 .35em}
.stg p{color:var(--muted);max-width:42ch;font-size:1.12rem;margin:0}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6rem}
.ticks{display:flex;gap:6px;margin-top:2.2rem;max-width:420px}
.ticks div{flex:1;font-weight:700;font-size:.85rem;color:var(--muted);padding-top:10px;border-top:2px solid var(--line-2);transition:color .4s,border-color .4s}
.ticks div.on{color:var(--ink);border-color:var(--sky)}
.scene3d{position:relative;height:100%;z-index:1}
.scene3d canvas,.vstage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.ruler{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:3;direction:ltr;border-top:1px solid var(--line-2);
  background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 10px) top/100% 8px no-repeat,repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 50px) top/100% 14px no-repeat;background-color:var(--paper)}
.ruler i{position:absolute;top:-1px;left:0;width:2px;height:20px;background:var(--sky);transform:translateX(var(--rx,0px))}
.ruler b{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:6px;font-family:var(--f-mono);font-weight:400;font-size:.7rem;color:var(--muted);letter-spacing:.1em}
.hint{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);font-weight:700;font-size:.85rem;color:var(--muted);z-index:3;transition:opacity .4s;display:flex;align-items:center;gap:.6em}
.hint::after{content:"";width:1px;height:22px;background:var(--muted);animation:drip 1.6s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:820px){
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding-top:86px}
  .htext{justify-self:start}
  .stg h1{font-size:clamp(2.3rem,11vw,3.6rem)}
  .stg h2{font-size:clamp(2rem,9vw,2.9rem)}
  .stg p{font-size:1.02rem}
  .ticks{margin-top:1.2rem}.ctas{margin-top:1.1rem}
}

.hero{height:220vh}
.hero .stage{background:radial-gradient(ellipse at 30% 58%,#1A4560 0,var(--night) 62%);background-size:auto;color:var(--beige);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.hero .htext{max-width:540px}
.hey{font-family:var(--f-brand);font-weight:700;font-stretch:115%;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--beige-2);direction:ltr;display:inline-block}
.hero h1{font-size:clamp(2.9rem,6.6vw,6rem);font-weight:800;font-stretch:80%;line-height:.96;margin:.28em 0 .3em;color:var(--beige)}
.hero h1 span,.hero h1 em{display:inline-block;animation:rise 1s var(--ease) both}
.hero h1 span:nth-child(2){animation-delay:.08s}.hero h1 span:nth-child(3){animation-delay:.16s}.hero h1 em{animation:none;font-style:normal;color:#fff}
.hsub{color:var(--beige-2);font-size:1.12rem;max-width:40ch;margin:0;animation:rise 1s .25s var(--ease) both}
.hero .ctas{animation:rise 1s .35s var(--ease) both}
.hb1{background:var(--beige);color:#0C2433;border-color:transparent}
.hb2{color:var(--beige);border-color:rgba(232,220,198,.35)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hspec{position:absolute;inset-inline-start:max(20px,env(safe-area-inset-left,0px));bottom:34px;display:grid;gap:2px;z-index:3;color:var(--beige-2);font-size:.9rem}
.hspec b{font-family:var(--f-mono);font-weight:400;font-size:1.05rem;color:var(--beige);direction:rtl;font-variant-numeric:tabular-nums}
.hprog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(232,220,198,.12)}
.hprog i{position:absolute;inset:0;background:var(--beige);transform-origin:right;transform:scaleX(var(--hp,0))}
.hero .hint{color:var(--beige-2);bottom:34px;left:auto;inset-inline-end:max(20px,env(safe-area-inset-right,0px));transform:none}
.hero .hint::after{background:var(--beige-2)}
.hdr.dark{color:var(--beige)}
.hdr.dark.solid{background:color-mix(in srgb,#0C2433 70%,transparent);box-shadow:0 1px 0 rgba(232,220,198,.08)}
.hdr.dark .bw small{color:var(--beige-2)}
.hdr.dark .btn.primary{background:var(--beige);color:#0C2433}
.hdr.dark .burger{border-color:rgba(232,220,198,.3)}
.hdr.dark .brand svg path{stroke:var(--beige)}
.quoteband blockquote,.quoteband .eyebrow{color:var(--beige)}
.quoteband blockquote em{color:#fff}
.clients{padding-block:44px 40px;border-bottom:1px solid var(--line)}
.clients .eyebrow{margin-bottom:22px;color:var(--muted)}
.cl-mask{overflow:hidden;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.cl-track{display:flex;gap:18px;width:max-content;animation:marq 90s linear infinite}
@media (hover:hover){.cl-track:hover{animation-play-state:paused}}
.cl{display:flex;align-items:center;gap:10px;padding:16px 26px;border:1px dashed var(--line-2);border-radius:8px;color:var(--muted);white-space:nowrap;direction:rtl;font-weight:700;opacity:.8;transition:opacity .3s,color .3s}
.cl:hover{opacity:1;color:var(--ink)}
.cl svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}
@media (max-width:820px){.hero .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr}.hero h1{font-size:clamp(2.5rem,12vw,3.8rem)}.hsub{font-size:1rem}.hspec{bottom:26px}.hero .hint{bottom:26px}}
@media (prefers-reduced-motion: reduce){.hero h1 span,.hero h1 em,.hsub,.hero .ctas{animation:none}.cl-track{animation:none}}
.foldsec{height:260vh;position:relative;background:var(--paper)}
.fstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:24px;align-items:center;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:70px 0;
  background-image:radial-gradient(var(--line-2) 1px,transparent 1.2px);background-size:22px 22px}
.ftext{max-width:440px;justify-self:end;width:100%;position:relative;z-index:2}
.fsteps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:4px;counter-reset:f}
.fsteps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 8px;padding:12px 0;border-top:1px solid var(--line-2);opacity:.4;transition:opacity .4s}
.fsteps li::before{counter-increment:f;content:counter(f,decimal-leading-zero);font-family:var(--f-mono);font-size:.85rem;color:var(--sky);padding-top:.35em;grid-row:span 2}
.fsteps li.on{opacity:1}
.fsteps b{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:1.5rem;line-height:1.2}
.fsteps p{margin:0;color:var(--muted);max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.fsteps li.on p{max-height:6em}
.fbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.fbar i{position:absolute;inset:0;background:var(--sky);transform-origin:right;transform:scaleX(var(--fp,0))}
@media (max-width:820px){.fstage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding-top:84px}.ftext{justify-self:start}.fsteps{margin-top:12px}.fsteps li{padding:6px 0}.fsteps li:not(.on){display:none}.fsteps b{font-size:1.25rem}}
.marq{border-block:1px solid var(--line-2);overflow:hidden;background:var(--paper-2);direction:ltr}
.marq-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.marq span{font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:clamp(1.3rem,2.8vw,2rem);padding:16px 28px;white-space:nowrap;display:flex;align-items:center;gap:28px;direction:rtl}
.marq span::before{content:"";width:10px;height:10px;border:2px solid var(--sky);border-radius:50%}
@keyframes marq{to{transform:translateX(-50%)}}

/* category cards (home) */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:960px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.cats{grid-template-columns:1fr}}
.catcard{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.catcard:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 24px 50px -30px rgba(8,30,45,.5)}
.thumb{position:relative;aspect-ratio:4/3;max-width:100%;background:radial-gradient(circle at 50% 38%,var(--card),var(--paper-2));overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.catcard:hover .thumb img{transform:scale(1.06)}
.thumb:empty::after,.thumb img[src=""]{content:"";position:absolute;inset:30%;border-radius:50%;background:var(--line)}
.catcard .ci{padding:18px 20px 20px;display:grid;gap:4px;border-top:1px solid var(--line)}
.catcard .ci i{font-style:normal;font-family:var(--f-mono);font-size:.78rem;color:var(--sky)}
.catcard h3{font-size:1.5rem;font-weight:800;font-stretch:88%}
.catcard p{margin:0;color:var(--muted);font-size:.98rem}
.catcard .go{margin-top:8px;font-weight:700;color:var(--deep)}

/* 3 steps */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:820px){.steps3{grid-template-columns:1fr}}
.s3{padding:26px 24px;border-radius:10px;background:var(--card);border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.s3 i{font-style:normal;font-family:var(--f-big);font-size:4.4rem;line-height:.8;color:var(--sky)}
.s3 h3{font-size:1.6rem;font-weight:800;font-stretch:88%}
.s3 p{margin:0;color:var(--muted)}

.quoteband{background:var(--night);color:var(--on-night)}
.quoteband .wrap{padding-block:clamp(70px,10vw,120px);display:grid;gap:22px;justify-items:start}
.quoteband blockquote{margin:0;font-family:var(--f-display);font-weight:850;font-stretch:80%;font-size:clamp(2.2rem,6.4vw,5.2rem);line-height:1.02;max-width:16ch}
.quoteband blockquote em{font-style:normal;color:var(--sky)}
.quoteband p{margin:0;opacity:.75;max-width:52ch}

.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-block:52px}
.values div b{display:block;font-family:var(--f-display);font-weight:850;font-stretch:82%;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.05;margin-bottom:6px}
.values div span{color:var(--muted)}
@media (max-width:820px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* category page */
.cat-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:center;padding-block:110px 40px;min-height:min(100vh,860px)}
@media (max-width:900px){.cat-top{grid-template-columns:1fr;padding-top:96px;min-height:0}}
.crumb{font-size:.92rem;color:var(--muted);display:flex;gap:8px;margin-bottom:18px}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--ink)}
.cat-top h1{font-size:clamp(2.8rem,7vw,5.6rem);font-weight:850;font-stretch:80%;line-height:.95;margin-bottom:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags span{padding:5px 12px;border-radius:8px;border:1px solid var(--line-2);font-size:.9rem;font-weight:600}
.viewer{position:relative;min-height:560px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 35%,var(--card),var(--paper-2) 75%);border:1px solid var(--line);touch-action:pan-y}
.viewer .vstage{position:absolute;inset:0;cursor:grab}
.viewer .vstage:active{cursor:grabbing}
.vctl{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;z-index:2}
.swatches{display:flex;gap:6px;flex-wrap:wrap;background:color-mix(in srgb,var(--card) 86%,transparent);padding:6px;border-radius:8px;border:1px solid var(--line);backdrop-filter:blur(8px)}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sw[aria-pressed="true"]{border-color:var(--sky)}
.logo-up{display:flex;gap:6px;align-items:center}
.logo-up label,.logo-up button{display:inline-flex;align-items:center;gap:6px;padding:.55em 1em;border-radius:8px;background:var(--deep);color:var(--on-deep);font-weight:700;font-size:.92rem;cursor:pointer;border:0}
.logo-up button{background:color-mix(in srgb,var(--card) 86%,transparent);color:var(--ink);border:1px solid var(--line)}
.logo-up [hidden]{display:none}
.logo-up input{position:absolute;width:1px;height:1px;opacity:0}
.vhint{position:absolute;top:14px;inset-inline-start:16px;font-size:.85rem;font-weight:600;color:var(--muted);z-index:2}
.vname{position:absolute;top:12px;inset-inline-end:16px;font-size:.85rem;font-weight:700;z-index:2;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--card) 86%,transparent);border:1px solid var(--line)}
@media (max-width:900px){.viewer{min-height:440px}}
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
@media (max-width:820px){.items{grid-template-columns:1fr}}
.it{padding:22px 0;border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 10px;padding-inline-end:24px}
.it i{font-style:normal;font-family:var(--f-mono);font-size:.82rem;color:var(--sky);padding-top:.4em}
.it h3{font-size:1.3rem;font-weight:800;font-stretch:90%}
.it p{grid-column:2;margin:0;color:var(--muted);font-size:.98rem}
.gallery{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px}
@media (max-width:820px){.gallery{grid-template-columns:1fr 1fr}.gallery figure:first-child{grid-column:1/-1}}
.gallery figure{margin:0;position:relative;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 38%,var(--card),var(--paper-2));aspect-ratio:4/3;max-width:100%}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;bottom:10px;inset-inline-start:10px;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:8px;background:color-mix(in srgb,var(--card) 88%,transparent)}
.nextcat{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:40px 80px;border-top:1px solid var(--line-2)}
.nextcat a.big{text-decoration:none;font-family:var(--f-display);font-weight:850;font-stretch:82%;font-size:clamp(1.8rem,4.6vw,3.4rem)}
.nextcat a.big small{display:block;font-family:var(--f-body);font-size:.95rem;font-weight:600;color:var(--muted)}
.nextcat a.big:hover{color:var(--sky)}

/* factory: dieline + finishes */
.proc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.dl-wrap{position:sticky;top:110px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px}
.dl-wrap svg{width:100%;height:auto;display:block;max-height:62vh}
.dl-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-top:12px}
.dl-legend span{display:flex;align-items:center;gap:8px}
.dl-legend i{width:22px;border-top:2px solid var(--ink)}
.dl-legend i.d{border-top:2px dashed var(--sky)}
.cut{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.cutfill{fill:var(--sky);stroke:none}
.fold{stroke:var(--sky);stroke-width:1;stroke-dasharray:3 3}
.dlab{font-family:var(--f-body);font-weight:700;font-size:7px;fill:var(--muted)}
.dim{stroke:var(--muted);stroke-width:.6}
.stamp text{font-family:var(--f-display);font-weight:900;font-size:15px;fill:var(--deep)}
.stamp rect{fill:none;stroke:var(--deep);stroke-width:1.6}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{min-height:50vh;padding-block:24px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 12px;align-content:start;opacity:.38;transition:opacity .4s}
.steps li.on{opacity:1}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--f-mono);color:var(--sky);font-size:.95rem;padding-top:.6em}
.steps h3{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;font-stretch:88%}
.steps p{grid-column:2;margin:0;color:var(--muted);max-width:44ch;font-size:1.05rem}
@media (max-width:820px){.proc{grid-template-columns:1fr;gap:20px}.dl-wrap{top:78px;z-index:2;padding:12px}.dl-wrap svg{max-height:30vh}.dl-legend{display:none}.steps li{min-height:42vh;grid-template-columns:48px minmax(0,1fr)}}
.lab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
@media (max-width:820px){.lab{grid-template-columns:1fr}}
.panel{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:6px;overflow:hidden;background:#15181B;transform:perspective(900px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg));transition:transform .25s ease-out,background .4s;box-shadow:0 30px 60px -30px rgba(5,20,30,.6)}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,30%) var(--my,25%),rgba(255,255,255,.16),transparent 48%);z-index:3;pointer-events:none}
.panel.soft{background:#1B1E21 radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.2px) 0 0/3px 3px}
.lprint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;color:#7F8A92;transition:color .4s,filter .4s}
.lprint svg{width:26%;height:auto}
.lwm{font-family:var(--f-brand);font-weight:900;font-stretch:125%;font-size:clamp(1.6rem,5vw,3.2rem);letter-spacing:.06em;line-height:1;direction:ltr}
.panel.foil .lprint svg path{stroke:url(#gold)}
.panel.foil .lwm{background:linear-gradient(100deg,#9C7A3C 0%,#F6E3B0 28%,#B8913F 50%,#F3DCA2 72%,#9C7A3C 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foilmove 4s linear infinite}
@keyframes foilmove{to{background-position:-200% 0}}
.panel.emboss .lprint{filter:drop-shadow(1.5px 1.5px 0 rgba(0,0,0,.85)) drop-shadow(-1px -1px 0 rgba(255,255,255,.22))}
.panel.emboss:not(.foil) .lprint{color:#1C2024}
.uv{position:absolute;inset:0;opacity:0;transition:opacity .4s;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);background-size:260% 100%;-webkit-mask:radial-gradient(circle at 50% 40%,#000 0 17%,transparent 18%);mask:radial-gradient(circle at 50% 40%,#000 0 17%,transparent 18%);animation:sheen 3.2s ease-in-out infinite}
.panel.uvon .uv{opacity:1}
@keyframes sheen{0%{background-position:120% 0}100%{background-position:-60% 0}}
.panel .tag{position:absolute;inset-inline-start:14px;bottom:12px;z-index:4;font-size:.8rem;font-weight:600;color:#8D979E}
.chips{display:grid;gap:10px;margin-top:22px}
.chip{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 14px;text-align:start;padding:14px 16px;border-radius:8px;border:1px solid var(--line-2);background:var(--card);cursor:pointer}
.chip::before{content:"";width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);margin-top:3px}
.chip[aria-pressed="true"]{border-color:var(--sky)}
.chip[aria-pressed="true"]::before{background:var(--sky);border-color:var(--sky);box-shadow:inset 0 0 0 3px var(--card)}
.chip b{font-weight:800}
.chip span{grid-column:2;color:var(--muted);font-size:.95rem}
.page-top{padding-block:120px 20px}
.page-top h1{font-size:clamp(2.8rem,7vw,5.6rem);font-weight:850;font-stretch:80%;line-height:.95;margin:14px 0 18px}

/* contact */
.quote{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
@media (max-width:820px){.quote{grid-template-columns:1fr;gap:28px}}
.contact{margin-top:28px;display:grid;gap:14px}
.phone{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.phone strong{font-family:var(--f-mono);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:500;direction:ltr;user-select:all}
.where{color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px}
form .full{grid-column:1/-1}
@media (max-width:520px){form{grid-template-columns:1fr}}
label.f{display:grid;gap:6px;font-size:.92rem;font-weight:700}
input,select,textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:.7em .85em;width:100%;min-width:0}
input[type="tel"]{direction:ltr;text-align:right}
textarea{min-height:110px;resize:vertical}
.fmsg{grid-column:1/-1;font-size:.98rem;color:var(--deep);min-height:1.4em;margin:0}

footer{background:var(--paper-2);border-top:1px solid var(--line-2)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;padding-block:52px 28px}
.fgrid h4{margin:0 0 10px;font-family:var(--f-display);font-size:1rem}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fgrid a{text-decoration:none;color:var(--muted)}.fgrid a:hover{color:var(--ink)}
.fgrid p{color:var(--muted);margin:10px 0 0;max-width:30ch}
.fbot{padding-block:18px 30px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}

.wa-fab{position:fixed;left:max(18px,calc(env(safe-area-inset-left,0px) + 18px));bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 18px));z-index:60;width:56px;height:56px;border-radius:50%;background:#1F9D55;display:grid;place-items:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:transform .25s}
.wa-fab:hover{transform:scale(1.06)}
.wa-fab svg{width:28px;height:28px}

@media (prefers-reduced-motion: reduce){
  .marq-track,.uv,.panel.foil .lwm,.hint::after{animation:none!important}
  .menu{transition:none}
}

/* classic / minimal refinement */
h2{font-weight:600;font-stretch:92%;letter-spacing:-.01em;line-height:1.08}
.hero h1{font-weight:600;font-stretch:90%;letter-spacing:-.015em;line-height:1.02}
.cat-top h1,.page-top h1{font-weight:600;font-stretch:90%;line-height:1}
.catcard h3,.s3 h3,.it h3,.steps h3,.fsteps b,.mpanel h3{font-weight:600;font-stretch:94%}
.mlist a{font-weight:500;font-stretch:92%}
.quoteband blockquote{font-weight:500;font-stretch:92%;line-height:1.1}
.values div b,.nextcat a.big{font-weight:600;font-stretch:92%}
.eyebrow{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.eyebrow::before{display:none}
.btn{font-weight:600;padding:.7em 1.4em}
.catcard{border-color:transparent;background:transparent}
.catcard:hover{transform:none;box-shadow:none;border-color:transparent}
.catcard .thumb{border-radius:10px}
.catcard .ci{border-top:0;padding:16px 2px 4px}
.catcard .ci i{display:none}
.catcard .go{font-weight:600;font-size:.92rem;color:var(--muted)}
.s3{background:transparent;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:22px 0 0}
.s3 i{font-size:3rem;color:var(--muted)}
.tags span{border-color:var(--line);font-weight:500;color:var(--muted)}
.values{display:none}
.wa-fab{width:48px;height:48px}.wa-fab svg{width:24px;height:24px}
section.block{padding-block:clamp(80px,12vw,150px)}

/* calm category pages */
.ctop{padding-block:132px 40px;display:grid;justify-items:center;text-align:center;gap:16px}
.ctop .crumb{margin:0;justify-content:center;font-size:.85rem}
.ctop h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:500;font-stretch:92%;letter-spacing:-.01em;line-height:1}
.ctop .lead{text-align:center;max-width:48ch;margin-inline:auto}
.viewer{min-height:0;background:none;border:0;border-radius:0;overflow:visible}
.vbox{position:relative;height:min(66vh,620px);min-height:360px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--card),var(--paper-2) 80%)}
.vbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:18px 4px 0}
.vlabel{display:grid;font-weight:600}
.vlabel small{font-weight:400;color:var(--muted);font-size:.85rem}
.vbar .swatches{background:none;border:0;padding:0;backdrop-filter:none;gap:10px}
.vbar .sw{width:24px;height:24px;border-width:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 3px var(--paper),0 0 0 4px transparent}
.vbar .sw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
.vbar .logo-up label,.vbar .logo-up button{background:none;color:var(--ink);border:0;padding:0;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2);font-size:.95rem}
.vbar .logo-up button{color:var(--muted);margin-inline-start:14px}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 64px;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.ilist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
@media (max-width:560px){.ilist{grid-template-columns:1fr}}
.ilist li{padding:18px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.ilist b{font-family:var(--f-display);font-weight:600;font-size:1.12rem}
.ilist span{color:var(--muted);font-size:.95rem}
.gallery{gap:16px}
.gallery figure{border-radius:10px;background:var(--paper-2)}
.gallery figcaption{display:none}
.nextcat{border-top:1px solid var(--line)}
.nextcat a.big{font-weight:500}

/* hero v3: box alone, content arrives on scroll */
.hero .stage{display:block;padding:0}
.hero .scene3d{position:absolute;inset:0}
.hero .htext{position:absolute;z-index:2;top:50%;inset-inline-start:max(32px,calc((100vw - 1240px)/2 + 20px));width:min(520px,44vw);transform:translateY(calc(-50% + var(--ty,30px)));opacity:var(--to,0);pointer-events:none;max-width:none}
.hero.shown .htext{pointer-events:auto}
.hero h1 span,.hero h1 em,.hsub,.hero .ctas{animation:none}
.hero h1 em{color:var(--sky)}
.hb1{background:var(--beige);color:#0C2433}
.hspec,.hprog{opacity:var(--to,0);transition:opacity .2s}
.hero .hint{left:50%;inset-inline-end:auto;transform:translateX(-50%);bottom:30px;flex-direction:column;letter-spacing:.06em}

@media (max-width:820px){.hero .htext{top:96px;inset-inline-start:20px;width:auto;inset-inline-end:20px;transform:translateY(var(--ty,30px))}}

.ship-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px 64px;align-items:center}
@media (max-width:820px){.ship-in{grid-template-columns:1fr}}
.shipfacts{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shipfacts li{border-top:1px solid var(--line-2);padding-top:12px;display:grid;gap:2px}
.shipfacts b{font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.shipfacts span{color:var(--muted);font-size:.9rem}
@media (max-width:520px){.shipfacts{grid-template-columns:1fr}}
.road{border-radius:12px;background:radial-gradient(circle at 50% 45%,var(--card),var(--paper-2) 80%);padding:12px;overflow:hidden}
.road svg{width:100%;height:auto;display:block;direction:ltr}
.rt-base{stroke:var(--line-2);stroke-width:14;stroke-linecap:round}
.rt-dash{stroke:var(--card);stroke-width:1.5;stroke-dasharray:8 9}
.rt-done{stroke:var(--sky);stroke-width:3;stroke-linecap:round;opacity:.9}
.pin circle{fill:var(--deep)}
.pin text{font-family:var(--f-body);font-weight:700;font-size:15px;fill:var(--ink)}
.pin .ok{fill:var(--sky);font-size:13px;opacity:0;transition:opacity .4s}
.pin.arrived .ok{opacity:1}
.pin .pulse{fill:var(--sky);opacity:0;transform-origin:center}
.pin.arrived .pulse{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.tk-box{fill:#2C6A91}.tk-cab{fill:#1F5577}.tk-win{fill:#BFE3F7}
.tk-logo path{fill:none;stroke:#fff;stroke-width:11.5}
.wheel circle{fill:#0E2230;stroke:var(--card);stroke-width:1.5}.wheel path{stroke:#8FB6CF;stroke-width:1.2}
@media (prefers-reduced-motion: reduce){.pin.arrived .pulse{animation:none}}

.hero .hspec{inset-inline-start:auto;left:50%;transform:translateX(-50%);bottom:9vh;text-align:center;justify-items:center;opacity:var(--cap,1);font-size:.85rem}
.hero .hspec b{font-size:.95rem}
.hero .hint{bottom:28px}
@media (max-width:820px){.hero .hspec{bottom:16vh}}

.foldsec{background:var(--tint)}
.foldsec .fstage{background-image:radial-gradient(var(--tint-dot) 1px,transparent 1.3px)}
.foldsec .fbar{background:var(--tint-dot)}

:root{--map-sea:rgba(79,169,219,.18);--map-road:rgba(14,34,48,.075);--map-block:rgba(14,34,48,.04);--map-park:rgba(95,161,63,.12)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--map-sea:rgba(98,187,234,.14);--map-road:rgba(227,236,241,.07);--map-block:rgba(227,236,241,.035);--map-park:rgba(120,190,90,.1)}}
:root[data-theme="dark"]{--map-sea:rgba(98,187,234,.14);--map-road:rgba(227,236,241,.07);--map-block:rgba(227,236,241,.035);--map-park:rgba(120,190,90,.1)}
.m-sea{fill:var(--map-sea)}.m-road{fill:none;stroke:var(--map-road);stroke-linecap:round;opacity:.75}.m-block{fill:var(--map-block)}.m-park{fill:var(--map-park)}
.sea-l{font-family:var(--f-body);font-size:11px;font-weight:600;fill:var(--sky);opacity:.7;letter-spacing:.08em}
.road{padding:0;background:var(--card)}
.rt-base{stroke-width:12}

/* ===== fold: keep drawing close to the text on phones ===== */
@media (max-width:820px){
  .foldsec .fstage{grid-template-rows:auto minmax(0,52svh);align-content:center;gap:4px;padding-top:70px}
  .foldsec .scene3d{height:100%;min-height:0}
}

/* ===== work cards: compact on phones ===== */
@media (max-width:820px){
  .wstack{gap:22px}
  .wcard{height:auto;min-height:0;grid-template-rows:auto auto;border-radius:10px;top:calc(78px + var(--i)*8px)}
  .wmedia{grid-area:auto;aspect-ratio:5/4;max-width:100%}
  .wtext{grid-area:auto;align-self:auto;background:none;padding:16px 18px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 14px}
  .wnum{grid-column:1/-1;font-size:.72rem}
  .wtext h3{font-size:1.6rem;margin:0}
  .wsub{grid-column:1;font-size:.92rem}
  .wbtn{grid-column:1/-1;justify-self:stretch;margin-top:12px;padding:.6em 1em;background:transparent;color:var(--beige);border:1px solid rgba(230,242,250,.22);font-size:.9rem}
}

/* ===== categories: clearer contrast ===== */
:root{--tile-a:#F6FAFD;--tile-b:#CFE1EE;--tile-line:rgba(47,106,140,.14)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tile-a:#1A3446;--tile-b:#0E2130;--tile-line:rgba(98,187,234,.16)}}
:root[data-theme="dark"]{--tile-a:#1A3446;--tile-b:#0E2130;--tile-line:rgba(98,187,234,.16)}
#cats{background:var(--card);border-block:1px solid var(--line)}
.cats{gap:22px}
.catcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
.catcard:hover{transform:translateY(-4px);border-color:var(--tile-line);box-shadow:0 26px 50px -32px rgba(12,36,51,.45)}
.catcard .thumb{border-radius:10px;background:radial-gradient(circle at 50% 38%,var(--tile-a) 0,var(--tile-a) 30%,var(--tile-b) 100%);box-shadow:inset 0 0 0 1px var(--tile-line)}
.catcard .ci{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 14px;padding:18px 10px 10px}
.catcard .ci i{display:block;grid-column:1/-1;font-family:var(--f-mono);font-size:.75rem;color:var(--sky);letter-spacing:.08em}
.catcard h3{font-size:1.45rem;font-weight:700;color:var(--ink)}
.catcard p{grid-column:1;color:var(--muted);font-size:.95rem}
.catcard .ci{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:16px 12px 12px}
.catcard .ci h3{grid-column:1;grid-row:2}
.catcard .ci p{grid-column:1;grid-row:3}
.catcard .go{grid-column:2;grid-row:2;align-self:center;margin:0;font-size:0;line-height:1;color:var(--muted);transition:transform .35s var(--ease),color .25s}
.catcard .go::before{content:"←";font-size:1.25rem;font-weight:400}
.catcard:hover .go{color:var(--deep);transform:translateX(-5px)}

/* ===== work ===== */
body.pv-open{overflow:hidden}
.work{background:var(--night);color:var(--beige);padding-block:clamp(80px,11vw,140px) clamp(40px,6vw,80px)}
.whead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:clamp(36px,6vw,64px)}
.whead h2{color:#fff;margin-top:12px}
.work .eyebrow{color:var(--beige-2)}
.work .lead{color:var(--beige-2)}
.wlink{display:inline-block;margin-top:16px;color:var(--sky);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
@media (max-width:820px){.whead{grid-template-columns:1fr}}
.wstack{display:grid;gap:5vh;padding-bottom:6vh}
.wdots{display:none}
.wcard{position:sticky;top:calc(84px + var(--i)*14px);height:min(78vh,700px);min-height:520px;border-radius:12px;overflow:hidden;background:#102C3E;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);transform-origin:50% 0;box-shadow:0 -20px 60px -30px rgba(0,0,0,.6);will-change:transform}
.wcard::after{content:"";position:absolute;inset:0;background:#06121A;opacity:var(--dim,0);pointer-events:none}
.wmedia{position:relative;overflow:hidden;background:#0A2130}
.wmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1.1s ease,transform 4s ease}
.wmedia img.on{opacity:1;transform:scale(1)}
.wtext{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3.4vw,44px);min-width:0;overflow:auto}
.wnum{font-family:var(--f-mono);font-size:.8rem;color:var(--beige-2);letter-spacing:.08em}
.wtext h3{font-family:var(--f-brand);font-weight:800;font-stretch:112%;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1;color:#fff;margin-top:6px}
.wtext h3:lang(he){font-family:var(--f-display)}
.wsub{color:var(--sky);font-weight:600}
.wtext p{margin:4px 0 0;color:var(--beige-2);max-width:40ch}
.wtext ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wtext li{font-size:.85rem;padding:4px 11px;border-radius:8px;border:1px solid rgba(230,242,250,.18);color:var(--beige)}
.wthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.wthumbs button{padding:0;border:0;border-radius:6px;overflow:hidden;aspect-ratio:1;cursor:pointer;background:#0A2130}
.wthumbs img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.wthumbs button:hover img{transform:scale(1.08)}
.wbtn{background:var(--beige);color:#0C2433;border:0;justify-content:center}
@media (max-width:820px){
  .wstack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wstack::-webkit-scrollbar{display:none}
  .wcard{position:relative;top:auto;flex:0 0 84%;scroll-snap-align:start;transform:none!important;display:block;height:auto;min-height:0;border-radius:10px;box-shadow:none}
  .wcard::after{display:none}
  .wdots{display:flex;justify-content:center;gap:6px;margin-top:4px}
  .wdots i{width:6px;height:6px;border-radius:3px;background:rgba(230,242,250,.25);transition:width .3s,background .3s}
  .wdots i.on{width:20px;background:var(--sky)}
  .wmedia{position:relative;aspect-ratio:5/4;max-width:100%}
  .wtext{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 18px 16px;background:none;overflow:visible;text-align:start;justify-items:start}
  .wtext p,.wthumbs,.wtext ul{display:none}
  .wnum{font-size:.72rem}
  .wtext h3{font-size:1.6rem;margin:2px 0 0}
  .wsub{font-size:.92rem}
  .wtext .wbtn{justify-self:stretch;margin-top:12px;padding:.6em 1em;background:transparent;color:var(--beige);border:1px solid rgba(230,242,250,.22);font-size:.9rem}
}
.clients .cl{font-family:var(--f-brand);font-weight:800;font-stretch:112%;font-size:clamp(1.25rem,2.2vw,1.7rem);border:0;background:none;padding:10px 26px;color:var(--muted);opacity:.7;cursor:pointer;letter-spacing:-.01em}
.clients .cl.he{font-family:var(--f-display);font-weight:800}
.clients .cl:hover{opacity:1;color:var(--deep)}
.cl-track{gap:8px;align-items:center}
/* work page */
.wfilters{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.wfilters button{padding:.5em 1.1em;border-radius:8px;border:1px solid var(--line-2);background:transparent;font-weight:600;cursor:pointer;color:var(--muted)}
.wfilters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 22px}
@media (max-width:960px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.wgrid{grid-template-columns:1fr}}
.wtile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:12px}
.wtile:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:10px}
.wimg{position:relative;display:block;aspect-ratio:4/5;max-width:100%;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.wimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease,transform 1.2s var(--ease)}
.wimg img.alt{opacity:0}
.wtile:hover .wimg img{transform:scale(1.04)}
.wtile:hover .wimg img.alt{opacity:1}
.wcap{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.wcap b{font-family:var(--f-display);font-weight:600;font-size:1.3rem}
.wcap span{grid-column:1;color:var(--muted);font-size:.95rem}
.wcap i{font-style:normal;grid-column:2;grid-row:1;font-size:.82rem;color:var(--muted);font-family:var(--f-mono)}
/* category real gallery */
.rhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:20px}
.rhead .wlink{margin:0;color:var(--deep)}
.rgal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:720px){.rgal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rfig{position:relative;padding:0;border:0;border-radius:10px;overflow:hidden;aspect-ratio:4/5;max-width:100%;cursor:pointer;background:var(--paper-2)}
.rfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.rfig:hover img{transform:scale(1.05)}
.rfig span{position:absolute;bottom:10px;inset-inline-start:10px;padding:3px 11px;border-radius:8px;background:rgba(6,18,26,.66);color:#fff;font-weight:600;font-size:.85rem;backdrop-filter:blur(6px)}
/* factory photo */
.fphoto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:20px 40px}
.fphoto figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;max-width:100%;max-height:640px}
.fphoto img{width:100%;height:100%;object-fit:cover}
.fphoto .btn{margin-top:18px}
@media (max-width:820px){.fphoto{grid-template-columns:1fr}}
/* viewer */
.pv{position:fixed;inset:0;z-index:95;background:#06121A;color:var(--beige);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);clip-path:inset(100% 0 0 0);transition:clip-path .65s cubic-bezier(.7,0,.2,1)}
.pv.show{clip-path:inset(0 0 0 0)}
.pv-stage{position:relative;overflow:hidden;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top,0px)) 24px max(24px,env(safe-area-inset-bottom,0px));touch-action:pan-y}
.pv-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;user-select:none;-webkit-user-drag:none}
.pv-arr{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(230,242,250,.25);background:rgba(6,18,26,.5);color:#fff;font-size:1.3rem;cursor:pointer;backdrop-filter:blur(6px)}
.pv-prev{right:18px}.pv-next{left:18px}
.pv-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:.85rem;color:var(--beige-2)}
.pv-side{position:relative;padding:max(70px,calc(env(safe-area-inset-top,0px) + 70px)) 28px max(28px,env(safe-area-inset-bottom,0px));border-inline-start:1px solid rgba(230,242,250,.1);display:flex;flex-direction:column;gap:14px;overflow:auto;padding-inline-end:max(28px,env(safe-area-inset-right,0px))}
.pv-x{position:absolute;top:max(20px,env(safe-area-inset-top,0px));inset-inline-end:24px;background:none;border:0;color:var(--beige);font-weight:600;cursor:pointer;border-bottom:1px solid currentColor;padding:0 0 2px}
.pv .eyebrow{color:var(--sky)}
.pv-side h3{font-family:var(--f-brand);font-weight:800;font-stretch:112%;font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;color:#fff}
.pv-side p{margin:0;color:var(--beige-2)}
.pv-items{list-style:none;margin:0;padding:0;border-top:1px solid rgba(230,242,250,.12)}
.pv-items li{padding:9px 0;border-bottom:1px solid rgba(230,242,250,.12);font-size:.95rem}
.pv-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pv-thumbs button{padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;aspect-ratio:1;cursor:pointer;background:#0A2130;opacity:.55;transition:opacity .3s}
.pv-thumbs button[aria-current="true"]{border-color:var(--sky);opacity:1}
.pv-thumbs img{width:100%;height:100%;object-fit:cover}
.pv-side .btn.primary{background:var(--beige);color:#0C2433;justify-content:center;margin-top:auto}
.pv-nav{display:flex;justify-content:space-between;gap:12px;font-size:.88rem}
.pv-nav button{background:none;border:0;color:var(--beige-2);cursor:pointer;padding:6px 0}
.pv-nav button:hover{color:#fff}
@media (max-width:860px){
  .pv{grid-template-columns:1fr;grid-template-rows:56svh auto;overflow:auto}
  .pv-stage{padding:max(56px,calc(env(safe-area-inset-top,0px) + 56px)) 12px 12px}
  .pv-side{padding:20px 18px max(24px,env(safe-area-inset-bottom,0px));border:0;overflow:visible}
  .pv-x{position:fixed;z-index:3;background:rgba(6,18,26,.7);padding:6px 12px;border-radius:8px;border:0}
  .pv-arr{width:42px;height:42px}
}
@media (prefers-reduced-motion: reduce){.pv{transition:none}.wmedia img{transition:none}}

/* ===== system pass: category page ===== */
.chero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:120px 40px}
.chero .crumb{margin-bottom:22px;font-size:.85rem}
.chero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:700;font-stretch:90%;line-height:1;margin-bottom:18px}
.chero .lead{max-width:44ch}
.chero .ctas{margin-top:26px}
.cfor{list-style:none;margin:30px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:.92rem}
.cfor li::before{content:"·";margin-inline-end:8px;color:var(--sky)}
.chero-i{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;max-width:100%;max-height:640px;background:radial-gradient(circle at 50% 38%,var(--tile-a),var(--tile-b))}
.chero-i img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.chero{grid-template-columns:1fr;padding-top:92px;gap:28px}.chero-i{aspect-ratio:4/3;order:-1}}
.csec{border-top:1px solid var(--line)}
.chead{max-width:640px;margin-bottom:36px}
.chead h2{margin-top:10px}
.cgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.cgrid li{padding:24px 0 26px;padding-inline-end:28px;border-bottom:1px solid var(--line);display:grid;gap:6px;align-content:start}
.cgrid span{font-family:var(--f-mono);font-size:.78rem;color:var(--sky)}
.cgrid h3{font-size:1.2rem;font-weight:600}
.cgrid p{margin:0;color:var(--muted);font-size:.95rem;max-width:34ch}
@media (max-width:820px){.cgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cgrid{grid-template-columns:1fr}}
.ctry{background:var(--card)}
.ctry-t>.eyebrow{display:block}
.ctry-t>h2{margin-top:10px}
.ctry-t>.lead{margin-top:12px}
.ctry .viewer{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:28px;margin-top:34px;align-items:stretch}
.ctry .vbox{position:relative;height:min(58vh,520px);min-height:340px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--tile-a),var(--tile-b));box-shadow:inset 0 0 0 1px var(--tile-line)}
.ctry .vstage{position:absolute;inset:0;cursor:grab}
.ctry .vname{position:absolute;top:auto;inset-inline-end:auto;background:none;border:0;padding:0;backdrop-filter:none;bottom:14px;inset-inline-start:16px;font-size:.85rem;font-weight:600;color:var(--muted)}
.vctl2{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.vlab{font-size:.8rem;font-weight:700;color:var(--muted);margin-top:8px}
.vctl2 .swatches{display:grid;gap:6px;background:none;border:0;padding:0;backdrop-filter:none}
.vctl2 .sw{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);cursor:pointer;font-weight:600;font-size:.95rem;width:100%}
.vctl2 .sw i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);flex:none}
.vctl2 .sw[aria-pressed="true"]{border-color:var(--deep);background:var(--paper)}
.vctl2 .sw:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.vctl2 .logo-up{display:grid;gap:6px}
.vctl2 .logo-up label{display:flex;justify-content:center;padding:.75em 1em;border-radius:8px;background:var(--deep);color:var(--on-deep);font-weight:600;cursor:pointer}
.vctl2 .logo-up button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.88rem}
@media (max-width:820px){.ctry .viewer{grid-template-columns:1fr}.ctry .vbox{order:-1;height:56vw;min-height:300px}.vctl2 .swatches{grid-template-columns:1fr 1fr}}
.rhead{align-items:end;margin-bottom:24px}
.nextcat{justify-content:flex-start}
/* ===== CTA band + mobile bar ===== */
.ctaband{background:var(--night);color:var(--beige)}
.ctaband-in{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:24px 48px;align-items:center;padding-block:clamp(56px,8vw,96px)}
.ctaband h2{color:#fff;margin-top:10px}
.ctaband p{margin:12px 0 0;color:var(--beige-2);max-width:48ch}
.ctaband .eyebrow{color:var(--beige-2)}
.ctaband-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ctaphone{font-family:var(--f-mono);direction:ltr;color:var(--beige-2);user-select:all;margin-inline-start:6px}
@media (max-width:820px){.ctaband-in{grid-template-columns:1fr}}
.mbar{display:none}
@media (max-width:720px){
  .wa-fab{display:none}
  .mbar{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:65;padding:10px max(12px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
  .mbar.on{transform:none}
  .mbar .btn{justify-content:center;padding:.7em 1em}
  footer{padding-bottom:70px}
}
/* unified buttons */
.btn{min-height:44px}
.hb1,.wbtn,.pv-side .btn.primary{background:var(--beige);color:#0C2433;border-color:transparent}
.hb2{background:transparent;color:var(--beige);border-color:rgba(230,242,250,.3)}

.cprod{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.cprod>span{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:10px}
.cprod ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.cprod li{padding:7px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-size:.98rem}
.wcar{position:relative}
.warr{display:none}
@media (max-width:820px) and (hover:hover){
  .warr{display:grid;place-items:center;position:absolute;top:38%;z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(230,242,250,.35);background:rgba(6,18,26,.35);color:#fff;font-size:1.15rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s}
  .warr:hover{background:rgba(6,18,26,.6)}
  .wprev{right:10px}.wnext{left:10px}
}

/* ===== less template, more print shop ===== */
.eyebrow{display:none!important}
.pv .eyebrow{display:inline-flex!important}
.wnum,.catcard .ci i{display:none!important}
.sec-head .lead,.whead .lead{font-size:1.02rem}
/* crop marks */
[data-marks]:not(.stage){position:relative}
.cm{position:absolute;width:0;height:0;pointer-events:none;z-index:4;color:currentColor;opacity:.45;--o:22px}
.cm::before,.cm::after{content:"";position:absolute}
.cm::before{width:16px;border-top:1px solid}
.cm::after{height:16px;border-left:1px solid}
.cm.tl{top:var(--o);left:var(--o)}.cm.tl::before{top:0;right:6px}.cm.tl::after{bottom:6px;left:0}
.cm.tr{top:var(--o);right:var(--o)}.cm.tr::before{top:0;left:6px}.cm.tr::after{bottom:6px;right:0;left:auto;border-left:0;border-right:1px solid}
.cm.bl{bottom:var(--o);left:var(--o)}.cm.bl::before{bottom:0;right:6px;border-top:0;border-bottom:1px solid}.cm.bl::after{top:6px;left:0}
.cm.br{bottom:var(--o);right:var(--o)}.cm.br::before{bottom:0;left:6px;border-top:0;border-bottom:1px solid}.cm.br::after{top:6px;right:0;left:auto;border-left:0;border-right:1px solid}
.hero .cm{color:var(--beige-2);--o:18px}
.ctaband .cm,.work .cm{color:var(--beige-2);--o:16px}
@media (max-width:720px){.cm{--o:10px!important}.cm::before{width:10px}.cm::after{height:10px}}
/* colour bar + registration mark */
.cbar{display:inline-flex;height:10px}
.cbar i{width:10px;height:10px}
.cbar i.pms{width:14px;margin-left:4px}
.reg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1}
.hprint{position:absolute;left:max(24px,env(safe-area-inset-left,0px));bottom:30px;z-index:3;display:flex;align-items:center;gap:10px;color:var(--beige-2);opacity:.55;direction:ltr}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.fprint{display:inline-flex;align-items:center;gap:10px;direction:ltr;color:var(--muted);opacity:.7}
.slug{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em}
@media (max-width:720px){.hprint{display:none}}
/* collage: photos only */
.collage{display:grid;grid-template-columns:1.2fr .8fr 1fr;grid-template-rows:repeat(2,minmax(0,22vw));gap:10px;padding:10px max(10px,env(safe-area-inset-right,0px)) 10px max(10px,env(safe-area-inset-left,0px));background:var(--night)}
.cg{all:unset;cursor:pointer;position:relative;overflow:hidden;border-radius:6px;min-height:0}
.cg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cg:hover img{transform:scale(1.04)}
.cg:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.cg1{grid-row:1/3}.cg2{grid-column:2}.cg3{grid-column:3;grid-row:1/3}.cg4{grid-column:2}.cg5{display:none}
@media (max-width:720px){.collage{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,44vw)}.cg1{grid-row:1/3}.cg3{grid-column:auto;grid-row:auto}.cg2{grid-column:2}.cg4{grid-column:2}.cg3{grid-column:1/3;grid-row:3}}
/* calmer quote band */
.quoteband blockquote{font-size:clamp(2.4rem,7.4vw,6.4rem);max-width:none}
@media (min-width:821px){.hero h1{font-size:clamp(2.6rem,4.8vw,4.6rem)}}

/* ===== merged system: sharp, industrial, confident ===== */
:root{--sky2:#7CC4F5;--navy:#0B1A33;--navy-2:#13254A}
*{border-radius:0}
.btn,.sw,.chip,.wfilters button,.tags span,.wtext li,.vctl2 .sw,.vctl2 .logo-up label,.rfig,.rfig span,.wimg,.catcard,.catcard .thumb,.wcard,.chero-i,.fphoto figure,.ctry .vbox,.pv-stage img,.pv-thumbs button,.wthumbs button,.cg,.panel,.dl-wrap,.mprev,.road,.gallery figure,.s3,form,input,select,textarea,.mcard,.vbox{border-radius:0!important}
.sw i,.wdots i,.warr,.pv-arr,.wa-fab,.reg,.pin circle,.burger{border-radius:50%}
h1,h2{font-weight:800!important;font-stretch:100%!important;letter-spacing:-.02em}
h3{font-weight:700}
.btn{border-radius:0;font-weight:700;padding:.85em 1.5em}
.btn.primary,.hb1,.wbtn,.pv-side .btn.primary,.mbar .btn.primary{background:var(--sky2)!important;color:var(--navy)!important;border-color:transparent!important}
.btn.primary:hover,.hb1:hover{background:#9AD3F8!important}
/* header */
.hdr,.hdr.solid,.hdr.dark{background:var(--navy);color:#E6F2FA;box-shadow:0 1px 0 rgba(255,255,255,.08);backdrop-filter:none}
body::before{background:var(--navy)}
.hdr .wrap{height:72px}
.bw b{font-family:var(--f-brand);font-weight:900;font-stretch:125%;font-size:1.3rem;letter-spacing:.01em;color:#fff}
.bw b em{font-style:normal;color:var(--sky2)}
.hdr .bw small{color:#8DB5CE}
.hdr .brand svg path{stroke:#fff}
.hnav{display:flex;gap:30px;margin-inline-start:48px}
.hnav a{text-decoration:none;color:#C9DCEA;font-weight:500;font-size:.98rem;padding-block:6px;border-bottom:2px solid transparent}
.hnav a:hover,.hnav a.cur{color:var(--sky2)}
.hphone{display:inline-flex;align-items:center;gap:8px;color:#C9DCEA;font-size:.95rem;direction:ltr}
.hphone svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.hdr .burger{border-color:rgba(255,255,255,.25);color:#fff;border-radius:0}
@media (min-width:1025px){.hdr .burger{display:none}}
@media (max-width:1024px){.hnav,.hphone{display:none}}
/* categories as a bordered grid */
.cats{gap:0;border-top:1px solid var(--line-2);border-inline-start:1px solid var(--line-2)}
.catcard{border:0;border-bottom:1px solid var(--line-2);border-inline-end:1px solid var(--line-2);padding:0;background:var(--card);transition:background .3s,color .3s}
.catcard:hover{transform:none;box-shadow:none;background:var(--navy)}
.catcard .thumb{box-shadow:none}
.catcard .ci{padding:22px 24px 26px}
.catcard:hover h3{color:#fff}.catcard:hover p{color:#9FB8C9}.catcard:hover .go{color:var(--sky2)}
/* how we work */
.howband{background:var(--navy);color:#E6F2FA;padding-block:clamp(80px,10vw,130px);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:80px 80px}
.howband h2{color:#fff;margin-bottom:56px;max-width:20ch}
.how4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.how4>div{border-top:2px solid var(--sky2);padding-top:28px;display:grid;gap:10px;align-content:start}
.sic{width:30px;height:30px;fill:none;stroke:var(--sky2);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.how4 h3{color:#fff;font-size:1.3rem;margin-top:8px}
.how4 p{margin:0;color:#9FB8C9}
@media (max-width:900px){.how4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.how4{grid-template-columns:1fr}}
/* light split band */
.splitband{background:#E8F2FB;padding-block:clamp(70px,9vw,120px)}
.split-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.split-in figure{margin:0;aspect-ratio:4/3;max-width:100%;overflow:hidden;box-shadow:0 30px 60px -36px rgba(11,26,51,.5)}
.split-in img{width:100%;height:100%;object-fit:cover}
.split-in h2{color:var(--navy)}
.split-in h2 em{font-style:normal;color:#2456D6}
.split-in .lead{margin-top:18px}
.split-in .ctas{margin-top:28px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .splitband{background:var(--paper-2)}:root:not([data-theme="light"]) .split-in h2{color:#fff}}
:root[data-theme="dark"] .splitband{background:var(--paper-2)}:root[data-theme="dark"] .split-in h2{color:#fff}
@media (max-width:820px){.split-in{grid-template-columns:1fr}}
/* CTA: photo + blue panel */
.ctaband{background:var(--paper);color:#fff;padding-block:clamp(40px,6vw,80px)}
.ctaband .cm{color:var(--muted)}
.cta2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-height:380px}
.cta2 figure{margin:0;overflow:hidden}
.cta2 img{width:100%;height:100%;object-fit:cover}
.cta2-t{background:linear-gradient(140deg,#2C6A91 0%,#1A4A6E 55%,#0F2E4A 100%);padding:clamp(32px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.cta2-t h2{color:#fff}
.cta2-t p{color:#D7E4FF;margin:14px 0 0;max-width:46ch}
.cta2-t .ctaband-b{margin-top:28px}
.cta2-t .hb2{color:#fff;border-color:rgba(255,255,255,.45)}
.cta2-t .ctaphone{color:#D7E4FF}
@media (max-width:820px){.cta2{grid-template-columns:1fr}.cta2 figure{aspect-ratio:16/9}}
/* footer: tape stripe + navy */
footer{background:var(--navy);color:#C9DCEA;border-top:0;position:relative}
footer::before{content:none}
footer .fgrid{padding-top:70px}
footer h4{color:var(--sky2)}
footer a,footer .fgrid p,footer .fgrid span{color:#C9DCEA!important}
footer .bw b{color:#fff}footer .bw small{color:#8DB5CE}
footer .brand svg path{stroke:#fff}
.fbot{border-top-color:rgba(255,255,255,.1);color:#8DB5CE}
.fprint{color:#8DB5CE}
/* work section matches navy */
.work,.collage{background:var(--navy)}
.wcard{background:var(--navy-2)}
/* cats section header */
#cats{background:#F7FAFD}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #cats{background:var(--paper)}}
:root[data-theme="dark"] #cats{background:var(--paper)}

/* ===== editorial layer (accent: peach) ===== */
:root{--peach:#E3A07F}
.hero h1 em,.split-in h2 em,.manifesto h2 em{color:var(--peach)!important;font-style:italic}
.manifesto{background:var(--paper);padding-block:clamp(90px,14vw,190px)}
.manifesto h2{font-weight:400!important;font-size:clamp(2.6rem,7vw,6.2rem);line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
.manifesto .lead{margin-top:clamp(24px,3vw,40px);max-width:52ch;font-size:1.1rem}
.caps{background:var(--paper);padding-block:clamp(40px,6vw,80px)}
.caps .wrap{border-top:1px solid var(--line-2)}
.caprow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 40px;gap:12px 40px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--ink);transition:padding .35s var(--ease)}
.caprow h3{font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem)}
.caprow p{margin:0;color:var(--muted);max-width:52ch}
.cap-ar{justify-self:end;color:var(--deep);font-size:1.4rem;transition:transform .35s var(--ease)}
.caprow:hover{padding-inline-start:14px}
.caprow:hover .cap-ar{transform:translate(-4px,-4px);color:var(--peach)}
@media (max-width:720px){.caprow{grid-template-columns:1fr 30px}.caprow p{grid-column:1;grid-row:2}.cap-ar{grid-row:1/3;grid-column:2}}
.cta2-t{position:relative}
.stamp{position:absolute;top:-46px;left:clamp(20px,4vw,48px);width:120px;height:120px;border-radius:50%!important;background:var(--peach);color:var(--navy);display:grid;place-items:center;text-decoration:none;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);transition:transform .4s var(--ease)}
.stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:spinstamp 16s linear infinite}
.stamp text{font-family:var(--f-display);font-weight:700;font-size:11.5px;letter-spacing:.06em;fill:var(--navy)}
.stamp b{font-size:1.5rem;font-weight:400}
.stamp:hover{transform:scale(1.06)}
@keyframes spinstamp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.stamp svg{animation:none}}
@media (max-width:820px){.stamp{top:-40px;width:96px;height:96px}}

/* ===== from the third concept ===== */
.stamp text{font-family:var(--f-brand);font-weight:700;font-size:10.5px;letter-spacing:.18em}
/* tape label sticker */
.tape-lbl{position:absolute;z-index:3;top:118px;left:max(48px,8vw);transform:rotate(-24deg);background:#F2D46B;color:var(--navy);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;padding:10px 26px;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);opacity:calc(1 - var(--to,0));transition:opacity .3s}
@media (max-width:820px){.tape-lbl{top:auto;bottom:22vh;left:16px;font-size:.66rem;padding:7px 16px}}
/* clients as a navy marquee band */
.clients{background:var(--navy);border:0;padding-block:20px}
.clients .cl{color:#C9DCEA;opacity:.85;font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:.04em}
.clients .cl:hover{color:#fff}
.clients .star{color:var(--sky2);font-size:.9rem;padding-inline:6px;align-self:center}
/* category thumbs in soft packaging colours */
.cats .catcard:nth-child(3n+1) .thumb{background:#BFDCEB}
.cats .catcard:nth-child(3n+2) .thumb{background:#E4EEF5}
.cats .catcard:nth-child(3n) .thumb{background:#D6E2EC}
/* underline form */
form{background:transparent;border:0;padding:0;gap:26px 32px}
label.f{font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;color:var(--muted)}
input,select,textarea{background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:10px 0;font-family:var(--f-body);font-size:1.05rem;letter-spacing:0}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--deep)}
form .btn.primary{background:var(--navy)!important;color:#fff!important;padding:1em 2.2em}

/* ===== round 8: system pass ===== */
/* accent: light blue leads, peach retired */
:root{--acc:#2F7CC0}
.hero h1 em,.ctaband h2 em{color:var(--sky2)!important;font-style:italic}
.manifesto h2 em,.split-in h2 em{color:var(--acc)!important;font-style:italic}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--acc:#7CC4F5}}
:root[data-theme="dark"]{--acc:#7CC4F5}
.stamp{background:var(--sky2)}
.caprow:hover .cap-ar{color:var(--acc)}
/* type contrast: heavy display, lighter section heads, quieter body */
.hero h1{font-weight:800!important}
.sec-head h2,.whead h2,.chead h2,.rhead h2,.split-in h2,.fsteps b,.ctry-t>h2{font-weight:500!important;letter-spacing:-.025em}
.whead h2,.sec-head h2{font-size:clamp(2.2rem,5.4vw,4.4rem)}
.lead{font-size:1rem;line-height:1.7}
.caprow h3,.wt-c b{font-weight:400}
/* editorial portfolio */
.wedit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,2.2vw,32px);align-items:start;padding-bottom:4vh}
.wt{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:14px;min-width:0}
.wt:focus-visible{outline:2px solid var(--sky2);outline-offset:6px}
.wt-i{position:relative;display:block;overflow:hidden;background:var(--navy-2);max-width:100%}
.wt-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .8s ease}
.wt-i img.alt{opacity:0}
.wt:hover .wt-i img{transform:scale(1.045)}
.wt:hover .wt-i img.alt{opacity:1}
.wt-c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;color:#E6F2FA}
.wt-c b{font-family:var(--f-brand);font-stretch:110%;font-size:clamp(1.4rem,2.4vw,2.1rem);letter-spacing:-.01em}
.wt-c span{grid-column:1;color:#8DB5CE;font-size:.95rem}
.wt-c i{grid-column:2;grid-row:1/3;font-style:normal;font-family:var(--f-mono);font-size:.78rem;color:#8DB5CE;align-self:center}
.wt-c i em{font-style:normal;display:inline-block;margin-inline-start:6px;color:var(--sky2);transition:transform .35s var(--ease)}
.wt:hover .wt-c i em{transform:translate(-4px,-4px)}
.e1{grid-column:1/8}.e1 .wt-i{aspect-ratio:4/5}
.e2{grid-column:8/13;margin-top:20vh}.e2 .wt-i{aspect-ratio:3/4}
.e3{grid-column:2/7;margin-top:-4vh}.e3 .wt-i{aspect-ratio:1/1}
.e4{grid-column:7/13;margin-top:10vh}.e4 .wt-i{aspect-ratio:5/4}
.e5{grid-column:1/6;margin-top:2vh}.e5 .wt-i{aspect-ratio:3/4}
.e6{grid-column:6/13;margin-top:14vh}.e6 .wt-i{aspect-ratio:4/3}
@media (max-width:820px){
  .wedit{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory}
  .wt{flex:0 0 84%;scroll-snap-align:start;margin-top:0!important}
  .wt .wt-i{aspect-ratio:4/5!important}
}
/* fold steps: names only */
.fsteps p{display:none}
.fsteps li{padding:8px 0}
/* slim shipping strip */
.shipstrip{background:var(--navy);color:#E6F2FA;padding-block:26px 0;overflow:hidden}
.ss-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px}
.ss-in b{font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:500}
.ss-in ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px;color:#8DB5CE;font-size:.92rem}
.ss-in li::before{content:"✦";color:var(--sky2);margin-inline-end:8px;font-size:.75rem}
.ss-road{position:relative;height:44px;margin-top:18px;border-top:1px dashed rgba(230,242,250,.22)}
.ss-truck{position:absolute;top:-24px;right:-80px;width:64px;animation:drive 14s linear infinite}
.ss-truck svg{display:block;width:100%;height:auto}
@keyframes drive{to{right:calc(100% + 20px)}}
@media (prefers-reduced-motion: reduce){.ss-truck{animation:none;right:8%}}
/* micro-interactions */
.rv{transform:translateY(26px);transition:transform 1.1s var(--ease)}
.rv.in{transform:none}
.btn{transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(11,26,51,.6)}
.btn:active{transform:translateY(0)}
.hnav a{position:relative}
.hnav a::after{content:"";position:absolute;right:0;left:0;bottom:-2px;height:2px;background:var(--sky2);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.hnav a:hover::after,.hnav a.cur::after{transform:scaleX(1)}
.wlink{transition:color .25s,letter-spacing .35s}
.wlink:hover{letter-spacing:.02em}
@media (prefers-reduced-motion: reduce){.rv{transform:none;transition:none}}

/* shipping strip v2: light map + road, truck drives right-to-left with scroll */
.shipstrip{background:#E3EEF6;color:var(--navy);padding-block:34px 0;position:relative;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220'%3E%3Cg fill='none' stroke='%232C6A91' stroke-opacity='.13' stroke-linecap='round'%3E%3Cpath d='M0 40C90 30 160 70 360 50' stroke-width='6'/%3E%3Cpath d='M0 150C120 170 220 120 360 160' stroke-width='3'/%3E%3Cpath d='M80 0C70 80 110 140 90 220' stroke-width='3'/%3E%3Cpath d='M250 0C270 70 230 150 260 220' stroke-width='5'/%3E%3Cpath d='M0 100H360' stroke-width='1.5'/%3E%3C/g%3E%3Cg fill='%232C6A91' fill-opacity='.06'%3E%3Crect x='120' y='70' width='40' height='22'/%3E%3Crect x='170' y='176' width='52' height='26'/%3E%3Crect x='290' y='86' width='36' height='40'/%3E%3Crect x='20' y='176' width='44' height='24'/%3E%3C/g%3E%3Cellipse cx='190' cy='18' rx='34' ry='14' fill='%235FA13F' fill-opacity='.08'/%3E%3C/svg%3E")}
.shipstrip .ss-in li{color:#45657A}.shipstrip .ss-in b{font-weight:600}
.ss-road{height:126px;margin-top:26px;border:0;position:relative}
.ss-lane{position:absolute;left:0;right:0;bottom:0;height:46px;background:#33475A;box-shadow:inset 0 3px 0 rgba(0,0,0,.15)}
.ss-lane::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:repeating-linear-gradient(90deg,#F2F6F9 0 26px,transparent 26px 50px)}
.ss-truck{position:absolute;bottom:26px;z-index:2;right:0;width:192px;animation:none;will-change:transform;transform:translateX(var(--tx,0px))}
.ss-truck svg{animation:bump .5s ease-in-out infinite alternate}
@keyframes bump{to{transform:translateY(-1.5px)}}
.ss-pin{position:absolute;bottom:52px;font-weight:700;font-size:.85rem;color:var(--navy);display:flex;align-items:center;gap:6px;white-space:nowrap}
.ss-pin::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 4px rgba(47,106,140,.2)}
.ss-from{right:max(20px,4vw);bottom:62px}.ss-to{left:max(20px,4vw);bottom:62px}
.ss-to.on::before{background:var(--sky2);box-shadow:0 0 0 6px rgba(124,196,245,.35)}
@media (max-width:720px){.ss-truck{width:140px}.ss-road{height:108px}}
@media (prefers-reduced-motion: reduce){.ss-truck svg{animation:none}}

/* ===== hero v4: real photography ===== */
.hero2{overflow:hidden;background:var(--navy);color:#E6F2FA;padding:96px max(20px,env(safe-area-inset-right,0px)) 56px max(20px,env(safe-area-inset-left,0px))}
.h2-in{position:relative;max-width:1320px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;min-height:min(82vh,760px)}
.h2-t h1{font-size:clamp(2.8rem,6.2vw,6rem);font-weight:800!important;line-height:.96;color:#fff;margin:18px 0 22px}
.h2-t h1 em{font-style:italic;color:var(--sky2)}
.h2-t p{color:#9FB8C9;font-size:1.08rem;max-width:38ch;margin:0 0 30px}
.h2-t .hey{color:#8DB5CE}
.h2-m{position:relative;align-self:stretch;min-height:420px}
.h2-ph{position:absolute;inset:0;overflow:hidden;transform-origin:50% 40%;will-change:transform}
.h2-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.h2-ph img.on{opacity:1}
.h2-m .tape-lbl{top:-14px;left:-18px;opacity:1}
.h2-cap{position:absolute;bottom:16px;right:16px;z-index:2;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;background:rgba(11,26,51,.72);padding:7px 12px;backdrop-filter:blur(6px)}
.h2-dots{position:absolute;bottom:22px;left:18px;z-index:2;display:flex;gap:6px}
.h2-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:width .4s,background .4s}
.h2-dots i.on{width:22px;border-radius:3px;background:var(--sky2)}
.hero2 .cm{color:#8DB5CE;--o:-14px}
@media (max-width:820px){
  .hero2{padding-top:84px}
  .h2-in{grid-template-columns:1fr;min-height:0}
  .h2-m{order:-1;aspect-ratio:4/5;min-height:0;max-height:58svh}
  .h2-t h1{font-size:clamp(2.4rem,11vw,3.6rem)}
  .hero2 .cm{display:none}
  .h2-m .tape-lbl{top:10px;left:10px;bottom:auto;font-size:.62rem;padding:6px 14px}
}

/* food page film */
.vscrub{position:relative;height:340vh;background:#1F2023}
.vs-st{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.vs-st canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vs-st::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,18,30,0) 30%,rgba(11,18,30,.55) 52%,rgba(11,18,30,.86) 100%)}
.vs-l{position:absolute;z-index:2;top:50%;right:max(24px,7vw);width:min(520px,44vw);transform:translateY(-50%);color:#fff;opacity:0;will-change:opacity,transform}
.vs-l h1{font-size:clamp(2.4rem,5.2vw,5rem);line-height:1;margin:14px 0 0}
.vs-l h1 em{font-style:italic;color:#F2C14E}
.vs-l h2{font-size:clamp(1.8rem,3.6vw,3.2rem);font-weight:500!important;color:#fff;line-height:1.1}
.vs-l p{color:#D4DCE3;max-width:36ch;margin:14px 0 24px}
.vs-l .hey{color:#F2C14E}
.vs-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:#D4DCE3;font-size:.85rem}
@media (max-width:820px){.vs-st::after{background:linear-gradient(180deg,rgba(11,18,30,.0) 40%,rgba(11,18,30,.85) 100%)}.vs-l{top:auto;bottom:12vh;transform:none;right:20px;left:20px;width:auto}}

/* manifesto centred */
.manifesto .wrap{display:grid;justify-items:center;text-align:center}
.manifesto h2{font-size:clamp(2.4rem,6vw,5.4rem);line-height:1.08}
.manifesto h2::after{content:"";display:block;width:56px;height:2px;background:var(--acc);margin:clamp(26px,3vw,38px) auto 0}
.manifesto .lead{margin-inline:auto;text-align:center;max-width:46ch}
/* fold scroll hint */
.fhint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 14px;background:var(--navy);color:#fff;font-size:.9rem;box-shadow:0 14px 30px -16px rgba(11,26,51,.6);transition:opacity .4s,transform .4s var(--ease)}
.fhint.off{opacity:0;transform:translate(-50%,12px);pointer-events:none}
.fhint b{font-weight:600}
.mouse{width:18px;height:28px;border:2px solid var(--sky2);border-radius:10px;position:relative;flex:none}
.mouse i{position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--sky2);animation:wheel 1.4s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(9px)}}
@media (max-width:820px){.fhint{bottom:22px;font-size:.82rem}}
@media (prefers-reduced-motion: reduce){.mouse i{animation:none}}
/* hero: floating transparent products */
.h2-m{display:grid;place-items:center}
.h2-ph{position:relative;inset:auto;width:100%;height:min(70vh,640px);overflow:visible}
.h2-ph::before{content:"";position:absolute;left:14%;right:14%;bottom:2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);filter:blur(8px)}
.h2-ph::after{content:"";position:absolute;inset:10% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(124,196,245,.18),transparent);z-index:-1}
.h2-ph img{object-fit:contain;padding:4% 6% 8%;opacity:0;transform:translateY(24px) scale(.96);transition:opacity .45s ease,transform .9s var(--ease);filter:drop-shadow(0 30px 30px rgba(0,0,0,.35))}
.h2-ph img.on{opacity:1;transform:none}
.h2-ph img.on{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{translate:0 -10px}}
.h2-dots{left:50%;transform:translateX(-50%);bottom:-6px}
.hero2 [data-marks] .cm{display:none}
@media (prefers-reduced-motion: reduce){.h2-ph img.on{animation:none}}
@media (max-width:820px){.h2-m{aspect-ratio:auto;max-height:none}.h2-ph{height:46svh}}
/* category cutouts */
.catcard .thumb.cut{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#F7FBFE 0,#DCE9F3 75%)!important}
.catcard .thumb.cut img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8% 14%;transform:none;filter:drop-shadow(0 18px 18px rgba(11,26,51,.22));transition:transform .7s var(--ease)}
.catcard:hover .thumb.cut img{transform:translateY(-6px) scale(1.04)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .catcard .thumb.cut{background:radial-gradient(circle at 50% 45%,#1C3346 0,#0E2130 75%)!important}}
:root[data-theme="dark"] .catcard .thumb.cut{background:radial-gradient(circle at 50% 45%,#1C3346 0,#0E2130 75%)!important}

/* intro film */
.intro{position:relative;height:180vh;background:var(--vidbg,#EEF2FA)}
.in-st{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.in-st canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.in-st::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#EEF2FA 0,#EEF2FA 18%,rgba(238,242,250,0) 30%),linear-gradient(90deg,#EEF2FA 0,rgba(238,242,250,0) 6%,rgba(238,242,250,0) 94%,#EEF2FA 100%)}
@media (max-width:820px){.in-st::after{background:linear-gradient(180deg,#EEF2FA 0,#EEF2FA 24%,rgba(238,242,250,0) 34%)}}
.in-l{position:absolute;z-index:2;top:max(46px,7vh);left:0;right:0;text-align:center;padding-inline:20px;color:#0B1A33;will-change:opacity,transform}
.in-l span{display:block;font-family:var(--f-brand);font-weight:800;font-stretch:125%;font-size:.8rem;letter-spacing:.42em;color:#2C6A91;margin-bottom:14px;direction:ltr}
.in-l h2{font-size:clamp(1.9rem,4vw,3.6rem);font-weight:400!important;letter-spacing:-.02em;line-height:1.1;color:#0B1A33}
.in-l h2 em{font-style:italic;color:#2C6A91}
.in2{opacity:0}
.in-hint{position:absolute;z-index:2;bottom:max(26px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:#0B1A33;font-size:.85rem;font-weight:600;background:rgba(255,255,255,.7);padding:8px 14px;backdrop-filter:blur(6px)}
.in-hint .mouse{border-color:#2C6A91}.in-hint .mouse i{background:#2C6A91}
.in-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(11,26,51,.08);z-index:2}
.in-bar i{position:absolute;inset:0;background:#2C6A91;transform-origin:right;transform:scaleX(var(--p,0))}
.hdr{transition:transform .5s var(--ease),background .3s}
body.intro-on .hdr{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}
body.intro-on::before{background:#EEF2FA}
body.intro-on .wa-fab,body.intro-on .mbar{opacity:0;pointer-events:none}
.wa-fab{transition:opacity .4s,transform .25s}
@media (max-width:820px){.intro{height:150vh}.in-l{top:max(40px,6vh)}
.in1 h2{font-size:clamp(1.8rem,min(8.6vw,4.2vh),3rem)}
.in2 h2{font-size:clamp(1.7rem,min(9.4vw,4.6vh),2.9rem);font-weight:700!important;line-height:1.08;letter-spacing:-.03em}
.in2 h2 em{display:block;margin-top:.12em;font-weight:500}}
@media (min-width:821px){.in2 h2{font-size:clamp(2rem,min(4.6vw,7vh),4.4rem)}}
/* hero text away from the edge */
.hero2{padding-inline:max(32px,6vw)}
.h2-t{padding-inline-start:clamp(0px,2vw,32px)}

.clients{padding-block:30px;border-top:1px solid rgba(230,242,250,.12);margin-top:0}
.hero2{padding-bottom:clamp(64px,8vw,110px)}

/* last call: contact */
.lastcall{background:#F4F7FA;color:var(--navy);padding-block:clamp(80px,10vw,140px);border-top:1px solid var(--line)}
.lastcall .cm{display:none}
.lc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.lc-t h2{font-size:clamp(2.6rem,5.6vw,5rem);font-weight:500!important;line-height:1.02;color:var(--navy);letter-spacing:-.03em}
.lc-t h2 em{font-style:italic;font-weight:800;color:#2C6A91!important}
.lc-t p{color:var(--muted);font-size:1.05rem;max-width:40ch;margin:24px 0 36px;line-height:1.7}
.lc-contact{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2);max-width:440px}
.lc-contact li{display:grid;grid-template-columns:22px 90px minmax(0,1fr);align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.lc-contact svg{width:20px;height:20px;fill:none;stroke:#2C6A91;stroke-width:1.6;stroke-linejoin:round}
.lc-contact span{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;color:var(--muted)}
.lc-contact b{font-weight:600;font-size:1.05rem}
.lc-contact li:first-child b{font-family:var(--f-mono);font-weight:500;direction:ltr;text-align:right;user-select:all}
.lc-contact a{color:#2C6A91;font-weight:600;text-decoration:none}
.lc-form{display:grid;grid-template-columns:1fr;gap:30px;border-top:1px solid var(--line-2);padding-top:30px;background:none;border-radius:0}
.lc-form label.f{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;color:var(--muted);font-weight:500}
.lc-form input,.lc-form select{background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:12px 0;font-family:var(--f-body);font-size:1.15rem;color:var(--navy)}
.lc-form input::placeholder{color:#9DB0BE}
.lc-form input:focus,.lc-form select:focus{outline:none;border-bottom-color:#2C6A91}
.lc-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lc-form .btn{background:var(--navy)!important;color:#fff!important;padding:1em 2.2em;font-weight:700}
.lc-msg{color:#2C6A91;font-size:.95rem}
@media (max-width:820px){.lc-in{grid-template-columns:1fr}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lastcall{background:var(--paper)}:root:not([data-theme="light"]) .lc-t h2,:root:not([data-theme="light"]) .lc-contact b,:root:not([data-theme="light"]) .lc-form input,:root:not([data-theme="light"]) .lc-form select{color:var(--ink)}}
:root[data-theme="dark"] .lastcall{background:var(--paper)}

/* last call v2: blue panel */
.lc2{background:#396F93;color:#fff;border:0}
.lc2 .lc-in{align-items:start}
.lc-kick{display:block;font-size:.85rem;font-weight:600;letter-spacing:.14em;color:#C3D8E6;margin-bottom:22px}
.lc2 .lc-t h2{color:#fff;font-weight:800!important;font-size:clamp(2.8rem,6.2vw,5.6rem);line-height:1;letter-spacing:-.03em}
.lc2 .lc-t h2 em{font-style:normal!important;color:#5DA9DD!important;font-weight:800}
.lc2 .lc-t p{color:#E3EEF5;font-size:1.12rem;max-width:42ch;margin:30px 0 34px}
.lc-direct{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);max-width:440px}
.lc-direct span{font-size:.82rem;color:#C3D8E6}
.lc-direct b{font-family:var(--f-mono);font-weight:500;font-size:1.15rem;direction:ltr;user-select:all}
.lc-direct a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.lc2 .lc-form{border:0;padding-top:0;gap:10px}
.lc2 .lc-form label.f{font-family:var(--f-body);font-weight:700;font-size:.78rem;letter-spacing:.1em;color:#C3D8E6;display:grid;gap:10px;padding-top:18px}
.lc2 .lc-form input,.lc2 .lc-form textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;padding:8px 0 18px;color:#fff;font-size:1.15rem;font-family:var(--f-body)}
.lc2 .lc-form textarea{min-height:110px;resize:vertical}
.lc2 .lc-form input::placeholder,.lc2 .lc-form textarea::placeholder{color:rgba(255,255,255,.55)}
.lc2 .lc-form input:focus,.lc2 .lc-form textarea:focus{outline:none;border-bottom-color:#fff}
.lc-btn{margin-top:34px;display:flex;justify-content:space-between;align-items:center;width:100%;background:#fff;color:#0B1A33;border:0;padding:24px 34px;font:inherit;font-weight:700;font-size:1.08rem;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.lc-btn i{font-style:normal;font-size:1.4rem;transition:transform .35s var(--ease)}
.lc-btn:hover{background:#EAF3F9}
.lc-btn:hover i{transform:translateX(-6px)}
.lc2 .lc-msg{color:#fff;min-height:1.4em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lc2{background:#2A4E67}}
:root[data-theme="dark"] .lc2{background:#2A4E67}

/* last call v3: white, compact */
.lc3{background:var(--card);color:var(--ink);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,96px)}
.lc3 .lc-in{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,6vw,96px);align-items:center;justify-content:space-between}
.lc3 .lc-t h2{font-size:clamp(2rem,3.8vw,3.3rem);font-weight:800!important;line-height:1.08;letter-spacing:-.025em;color:var(--ink);max-width:14ch;text-wrap:balance}
.lc3 .lc-t h2 em{font-style:normal!important;color:#2C6A91!important;font-weight:800}
.lc3 .lc-t p{color:var(--muted);font-size:1.05rem;margin:16px 0 24px;max-width:36ch}
.lc3 .lc-direct{border-top:1px solid var(--line-2);padding-top:14px}
.lc3 .lc-direct span{color:var(--muted)}
.lc3 .lc-direct b{color:var(--ink);font-size:1.05rem}
.lc3 .lc-direct a{color:#2C6A91;border-bottom-color:rgba(44,106,145,.4)}
.lc3 .lc-form{display:grid;gap:14px;padding:clamp(20px,3vw,28px);background:var(--paper);border:1px solid var(--line-2);border-radius:6px}
.lc3 .lc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lc3 .lc-form label.f{display:grid;gap:6px;padding:0;font-family:var(--f-body);font-weight:600;font-size:.82rem;letter-spacing:0;color:var(--ink)}
.lc3 .lc-form label.f i{font-style:normal;font-weight:400;color:var(--muted)}
.lc3 .lc-form input,.lc3 .lc-form textarea{width:100%;min-width:0;background:var(--card);border:1px solid var(--line-2);border-radius:4px;padding:11px 12px;font:400 16px/1.4 var(--f-body);color:var(--ink);transition:border-color .2s,background .2s}
.lc3 .lc-form textarea{min-height:0;resize:none}
.lc3 .lc-form input::placeholder,.lc3 .lc-form textarea::placeholder{color:#97A9B8}
.lc3 .lc-form input:focus,.lc3 .lc-form textarea:focus{outline:none;border-color:#2C6A91}
.lc3 .lc-btn{margin-top:4px;display:flex;justify-content:center;gap:10px;width:100%;background:#0B1A33;color:#fff;border:0;border-radius:4px;padding:14px 20px;font:700 1rem var(--f-body);cursor:pointer}
.lc3 .lc-btn:hover{background:#2C6A91}
.lc3 .lc-btn i{font-style:normal}
.lc3 .lc-msg{color:#2C6A91;font-size:.9rem;min-height:0}
.lc3 .lc-msg:empty{display:none}
@media (max-width:820px){.lc3 .lc-in{grid-template-columns:1fr;gap:24px}.lc3 .lc-t p{margin:12px 0 16px}.lc3 .lc-t h2{max-width:none}}
@media (max-width:420px){.lc3 .lc-row{grid-template-columns:1fr}}

/* The switcher is a band, not chips floating over the page: a label so the
   row explains itself, a hairline tying it to what follows, room to breathe,
   and a fade at the end so it is plain that it keeps going. */
.catnav-wrap{padding-bottom:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--line)}
.catnav-lab{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.catnav{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:2px 0 6px}
.catnav::-webkit-scrollbar{display:none}
.catnav a{flex:0 0 auto;scroll-snap-align:center;text-decoration:none;font-weight:700;
  font-size:.92rem;line-height:1;padding:.72em 1.1em;border:1px solid var(--line-2);
  border-radius:999px;color:var(--muted);white-space:nowrap;
  transition:color .25s,border-color .25s,background .25s}
.catnav a:hover{color:var(--deep);border-color:var(--deep)}
.catnav a[aria-current="page"]{background:var(--deep);border-color:transparent;color:var(--on-deep)}
.catnav--foot{padding-top:14px}
.catnav--top{padding-top:0}
.catnav-wrap--top{padding-top:calc(94px + env(safe-area-inset-top,0px))}
.catnav-wrap + .chero{padding-top:clamp(26px,3.4vw,40px)}
@media (max-width:820px){
  .catnav-wrap--top{padding-top:calc(84px + env(safe-area-inset-top,0px))}
  .catnav-wrap{margin-inline:calc(max(20px,env(safe-area-inset-right,0px)) * -1) calc(max(20px,env(safe-area-inset-left,0px)) * -1);
    padding-inline:max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-left,0px))}
  /* the row runs to the screen edge and fades, so it reads as scrollable */
  .catnav{-webkit-mask:linear-gradient(270deg,#000 calc(100% - 34px),transparent);
    mask:linear-gradient(270deg,#000 calc(100% - 34px),transparent)}
  .catnav a{font-size:.88rem;padding:.68em 1em}
  .catnav-wrap + .chero{padding-top:20px}
}

/* ── the packaging page ───────────────────────────────────────── */
.packhero{padding:calc(96px + env(safe-area-inset-top,0px)) 0 clamp(26px,4vw,44px);background:var(--navy);color:#E6F2FA}
.packhero .crumb{margin-bottom:18px;font-size:.85rem;color:#8DB5CE}
.packhero .crumb a{color:#8DB5CE}
.packhero h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:700;font-stretch:88%;line-height:.98;margin-bottom:18px}
.packhero h1 em{font-style:normal;color:var(--sky2,#7CC4F5)}
.packhero .lead{color:#AFCBDC;max-width:52ch}
.packhero-n{display:flex;align-items:baseline;gap:10px;margin-top:26px;font-size:.92rem;color:#8DB5CE}
.packhero-n b{font-family:var(--f-mono);font-size:1.6rem;color:#fff;font-weight:500}
.packhero-n i{width:1px;height:22px;background:rgba(255,255,255,.18);margin-inline:8px}
.cats--page{margin-top:0}

.packidx{background:var(--paper-2)}
.pidx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,34px)}
.pcol{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 20px 10px}
.pcol-h{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;
  font-weight:700;font-size:1.08rem;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--line)}
.pcol-h i{font-style:normal;color:var(--deep);transition:transform .3s var(--ease)}
.pcol-h:hover{color:var(--deep)}.pcol-h:hover i{transform:translateX(-5px)}
.pcol ul{list-style:none;margin:0;padding:0}
.pcol li{padding:11px 0;border-bottom:1px solid var(--line)}
.pcol li:last-child{border-bottom:0}
.pcol li b{display:block;font-weight:600;font-size:.97rem}
.pcol li span{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}

.ctaband2{background:var(--deep);color:var(--on-deep);padding-block:clamp(40px,6vw,72px);text-align:center}
.ctaband2 h2{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:700}
.ctaband2 p{margin:12px auto 22px;max-width:46ch;color:rgba(255,255,255,.82)}
.ctaband2 .ctas{justify-content:center}
.ctaband2 .btn{border-color:rgba(255,255,255,.4);color:#fff}
.ctaband2 .btn.primary{background:#fff;color:var(--deep)}

/* the band that replaced the grid on the home page */
.catchips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 24px;padding:0}
.catchips a{display:block;text-decoration:none;font-weight:600;font-size:.95rem;padding:.6em 1em;
  border:1px solid var(--line-2);border-radius:999px;color:var(--muted);transition:color .25s,border-color .25s}
.catchips a:hover{color:var(--deep);border-color:var(--deep)}

/* the kinds of packaging are children of one page, so they are indented
   under it in the menu instead of being ten flat items */
.menu .mlist li.sub a,.mlist li.sub a{font-size:.92em;opacity:.78;padding-inline-start:0}
.mlist li.sub a::before{content:"—";margin-inline-end:.5em;opacity:.5}

@media (max-width:980px){.pidx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pidx{grid-template-columns:1fr}}

/* ── the film on a category page was the whole screen on a phone, which
      cropped the shot to a corner of a box ── */
@media (max-width:820px){
  .vscrub{height:200vh}
}
/* On a phone the same two buttons are already fixed to the bottom of the
   screen the whole way down, so the pair inside the hero was the same offer
   twice on one screen. The fixed bar keeps it; the hero drops it. */
@media (max-width:820px){ .chero .ctas{display:none} }

/* The stage fills the screen for the whole pin. Making it shorter put a
   permanent empty strip under it — you scrolled past blank page before the
   next section arrived. Full height means there is never a gap: the shot is
   on screen until the moment the next section starts coming up over it.
   The pin itself is shorter than it was (150vh rather than 210vh), which is
   the honest way to ask for less scrolling. */
.intro{height:150vh}
@media (max-width:820px){ .intro{height:152vh} }

/* the carousel already had arrows but only drew them on a desktop, where
   you can drag with a trackpad anyway — a phone is where they are needed */
@media (max-width:820px){
  .wcar{position:relative}
  .wt{flex:0 0 100%!important}
  .warr{position:absolute!important;display:grid!important;place-items:center;
    top:31%;z-index:4;width:42px;height:42px;font-size:1.1rem;
    border:0;background:rgba(10,26,42,.52);color:#fff;cursor:pointer;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
  .warr:active{background:rgba(10,26,42,.78)}
  .wprev{right:10px;left:auto}
  .wnext{left:10px;right:auto}
}

/* The headline veil was solid colour over the top 18% of the stage (24% on
   a phone) before it began to fade — so it cut the top off the product
   shot. It softens the type now instead of covering the picture. */
.in-st::after{background:
  linear-gradient(180deg,rgba(238,242,250,.9) 0,rgba(238,242,250,.55) 6%,rgba(238,242,250,0) 15%),
  linear-gradient(90deg,#EEF2FA 0,rgba(238,242,250,0) 5%,rgba(238,242,250,0) 95%,#EEF2FA 100%)}
@media (max-width:820px){
  .in-st::after{background:linear-gradient(180deg,rgba(238,242,250,.92) 0,rgba(238,242,250,.6) 8%,rgba(238,242,250,0) 19%)}
}

.social{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--line)}
.social>span{font-size:.82rem;color:var(--muted)}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;
  font-size:.92rem;color:var(--ink);padding:.5em .9em;border:1px solid var(--line-2);
  border-radius:999px;transition:color .25s,border-color .25s}
.social a:hover{color:var(--deep);border-color:var(--deep)}
.social svg{width:17px;height:17px;fill:currentColor}

.catsband__go{margin-top:clamp(22px,3vw,34px)}

/* ── two sections in light blue ───────────────────────────────────
   These were white, which threw bare white against navy five times down
   the page. A mid blue was tried here and was wrong — too strong a colour
   to give two whole sections. Light blue, then: one carrying the dot grid
   the factory pages already use, one plain. Both keep their dark text. */
.manifesto{background-color:#EAF2F9;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='120' height='120' fill='%23EAF2F9'/><g fill='%232F6A8C' fill-opacity='.16'><circle cx='10' cy='10' r='1.6'/><circle cx='10' cy='30' r='1.6'/><circle cx='10' cy='50' r='1.6'/><circle cx='10' cy='70' r='1.6'/><circle cx='10' cy='90' r='1.6'/><circle cx='10' cy='110' r='1.6'/><circle cx='30' cy='10' r='1.6'/><circle cx='30' cy='30' r='1.6'/><circle cx='30' cy='50' r='1.6'/><circle cx='30' cy='70' r='1.6'/><circle cx='30' cy='90' r='1.6'/><circle cx='30' cy='110' r='1.6'/><circle cx='50' cy='10' r='1.6'/><circle cx='50' cy='30' r='1.6'/><circle cx='50' cy='50' r='1.6'/><circle cx='50' cy='70' r='1.6'/><circle cx='50' cy='90' r='1.6'/><circle cx='50' cy='110' r='1.6'/><circle cx='70' cy='10' r='1.6'/><circle cx='70' cy='30' r='1.6'/><circle cx='70' cy='50' r='1.6'/><circle cx='70' cy='70' r='1.6'/><circle cx='70' cy='90' r='1.6'/><circle cx='70' cy='110' r='1.6'/><circle cx='90' cy='10' r='1.6'/><circle cx='90' cy='30' r='1.6'/><circle cx='90' cy='50' r='1.6'/><circle cx='90' cy='70' r='1.6'/><circle cx='90' cy='90' r='1.6'/><circle cx='90' cy='110' r='1.6'/><circle cx='110' cy='10' r='1.6'/><circle cx='110' cy='30' r='1.6'/><circle cx='110' cy='50' r='1.6'/><circle cx='110' cy='70' r='1.6'/><circle cx='110' cy='90' r='1.6'/><circle cx='110' cy='110' r='1.6'/></g></svg>");background-repeat:repeat}
#catsHome{background-color:#EAF2F9;background-image:none}
.hero2,.work,.ctaband{background-image:none}
.manifesto,#catsHome{padding-block:clamp(84px,11vh,150px)}

/* a lighter navy for the opening block — same family, less weight */
.hero2{background-color:#17325A}

/* and a calmer one for the footer, which was the heaviest thing on the page */
footer{background:#1B3A5E}

/* ── the projects, calmer ─────────────────────────────────────────
   The cards came in three different shapes (4:5, 3:4, and the rest) down a
   single wide column, each nearly a screen tall, scaling and dimming as the
   next one arrived. Every one of them was competing, and two were on screen
   at once. Three across, one shape for all of them, smaller type, real
   space between: each project gets read instead of fought over. */
@media (min-width:821px){
  .wstack{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(30px,3.2vw,52px) clamp(22px,2.4vw,38px);padding-bottom:0}
  /* each card was placed by hand across a twelve-column grid and pushed
     down by a different number of viewport heights — that is where the
     unevenness came from */
  .wstack > .wt{grid-column:auto!important;grid-row:auto!important;margin-top:0!important}
  .wt{position:relative!important;top:auto!important;transform:none!important;
    height:auto!important;min-height:0!important;gap:12px}
  .wt::after{display:none!important}
  .wstack .wt-i{aspect-ratio:4/3!important}
  .wt-c b{font-size:clamp(1.05rem,1.35vw,1.35rem)}
  .wt-c span{font-size:.88rem}
  .wt-c i{font-size:.72rem}
  .whead{margin-bottom:clamp(30px,4vw,52px)}
}

/* the dots are controls, so they look and behave like controls */
.h2-dots i{cursor:pointer}
.h2-dots i:focus-visible{outline:2px solid var(--sky2);outline-offset:4px}
@media (hover:hover){.h2-dots i:hover{background:rgba(255,255,255,.75)}}
.h2-ph{touch-action:pan-y}

/* ── the folding box ──────────────────────────────────────────────
   On a phone only the current step was shown, so there was nothing to say
   there are four of them or that scrolling is what moves between them. And
   the rule drawing a line above each step still drew one above the only one
   left — that is the stray line. All four show now, small and in a row,
   with the one you are on marked and underlined. */
@media (max-width:820px){
  .fsteps{display:flex;gap:8px;margin-top:10px;counter-reset:f}
  .fsteps li{display:flex!important;position:relative;align-items:baseline;gap:5px;
    border-top:0;padding:0 0 8px;flex:1 1 0;min-width:0;opacity:.42;
    transition:opacity .4s var(--ease)}
  .fsteps li::before{padding-top:0;font-size:.66rem}
  .fsteps li.on{opacity:1}
  .fsteps b{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fsteps li::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;
    background:var(--tint-dot);border-radius:2px}
  .fsteps li.on::after{background:var(--sky)}
}

/* ── the fixed bar on a phone ─────────────────────────────────────
   It sat across the bottom of every screen the whole way down. It steps out
   of the way while you read forward and comes back the moment you scroll up
   or reach the foot of the page. */
@media (max-width:820px){
  .mbar{transition:transform .35s var(--ease),opacity .35s}
  .mbar.away{transform:translateY(130%);opacity:0;pointer-events:none}
}

/* ── the figures on the packaging page ────────────────────────────
   Centred, and large enough to be the thing you read after the heading. */
.packhero .lead{max-width:none}
@media (min-width:980px){ .packhero .lead{white-space:nowrap} }
.packhero-n{display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(26px,5vw,72px);margin-top:clamp(34px,5vh,56px);text-align:center}
.packhero-n>div{display:grid;gap:4px}
.packhero-n b{font-family:var(--f-brand);font-weight:800;font-stretch:112%;
  font-size:clamp(2.4rem,5.4vw,3.8rem);line-height:1;color:#fff;letter-spacing:-.02em}
.packhero-n span{font-size:.92rem;color:#AFCBDC}
.packhero .wrap{text-align:center}
.packhero .crumb{justify-content:center}
.packhero h1,.packhero .lead{margin-inline:auto}

/* ── every kind of packaging, one page shape ──────────────────────
   They did not match: one opened on a scrubbing film, the rest on a
   two-column block with the picture beside the words, and the demo came
   before the work. Every one now runs cover, switcher, words, work, demo,
   next — in that order. The food page's film is its cover; the other five
   get a banner. */
/* the blurred photograph behind the row took its colour from whichever
   picture happened to be first — marble and warm wood turned the whole band
   olive. The band is the light blue of the rest of the page now, and the
   pictures sit on it. */
.cbanner{position:relative;isolation:isolate;display:flex;align-items:center;
  justify-content:center;overflow:hidden;width:100%;
  margin:calc(72px + env(safe-area-inset-top,0px)) 0 0;
  height:clamp(240px,29vw,380px);
  background-color:#EAF2F9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%232F6A8C' fill-opacity='.13'%3E%3Ccircle cx='10' cy='10' r='1.6'/%3E%3Ccircle cx='10' cy='30' r='1.6'/%3E%3Ccircle cx='10' cy='50' r='1.6'/%3E%3Ccircle cx='10' cy='70' r='1.6'/%3E%3Ccircle cx='10' cy='90' r='1.6'/%3E%3Ccircle cx='10' cy='110' r='1.6'/%3E%3Ccircle cx='30' cy='10' r='1.6'/%3E%3Ccircle cx='30' cy='30' r='1.6'/%3E%3Ccircle cx='30' cy='50' r='1.6'/%3E%3Ccircle cx='30' cy='70' r='1.6'/%3E%3Ccircle cx='30' cy='90' r='1.6'/%3E%3Ccircle cx='30' cy='110' r='1.6'/%3E%3Ccircle cx='50' cy='10' r='1.6'/%3E%3Ccircle cx='50' cy='30' r='1.6'/%3E%3Ccircle cx='50' cy='50' r='1.6'/%3E%3Ccircle cx='50' cy='70' r='1.6'/%3E%3Ccircle cx='50' cy='90' r='1.6'/%3E%3Ccircle cx='50' cy='110' r='1.6'/%3E%3Ccircle cx='70' cy='10' r='1.6'/%3E%3Ccircle cx='70' cy='30' r='1.6'/%3E%3Ccircle cx='70' cy='50' r='1.6'/%3E%3Ccircle cx='70' cy='70' r='1.6'/%3E%3Ccircle cx='70' cy='90' r='1.6'/%3E%3Ccircle cx='70' cy='110' r='1.6'/%3E%3Ccircle cx='90' cy='10' r='1.6'/%3E%3Ccircle cx='90' cy='30' r='1.6'/%3E%3Ccircle cx='90' cy='50' r='1.6'/%3E%3Ccircle cx='90' cy='70' r='1.6'/%3E%3Ccircle cx='90' cy='90' r='1.6'/%3E%3Ccircle cx='90' cy='110' r='1.6'/%3E%3Ccircle cx='110' cy='10' r='1.6'/%3E%3Ccircle cx='110' cy='30' r='1.6'/%3E%3Ccircle cx='110' cy='50' r='1.6'/%3E%3Ccircle cx='110' cy='70' r='1.6'/%3E%3Ccircle cx='110' cy='90' r='1.6'/%3E%3Ccircle cx='110' cy='110' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}
.cbanner-row{position:relative;z-index:2;display:flex;align-items:center;
  height:72%;gap:clamp(12px,1.6vw,22px);padding-inline:20px}
.cbanner-row img{height:100%;width:auto;max-width:min(26vw,320px);object-fit:cover;
  object-position:50% 45%;display:block;border-radius:12px;
  background:#fff;box-shadow:0 14px 30px -10px rgba(11,26,51,.3)}
.cbanner + .catnav-wrap--top{padding-top:clamp(18px,2.4vw,26px)}
@media (max-width:620px){.cbanner-row img:nth-child(3){display:none}}
.chero{grid-template-columns:1fr!important}
.chero-t{max-width:none}
.chero .lead{max-width:62ch}
@media (max-width:820px){
  .cbanner{margin-top:calc(64px + env(safe-area-inset-top,0px));height:clamp(196px,44vw,250px)}
  .cbanner-row{height:76%;gap:10px;padding-inline:14px}
  .cbanner-row img{border-radius:10px;max-width:40vw}
  .cbanner + .catnav-wrap--top{padding-top:14px}
}

/* ── the opening film ─────────────────────────────────────────────
   On a desktop the intro is now a 1920 render of a Packtop box turning
   and opening — 192 frames, scrubbed by the scroll instead of played.
   It is drawn into the same canvas the still sequence used, so it lands
   in the same place, keeps the soft edges and leaves the same clear band
   above it for the headline. The video element itself is only a decoder;
   the canvas is what you see. The phone keeps its own lighter sequence. */
.in-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.001;pointer-events:none;z-index:0}
#inPoster{display:none}
.in-st canvas{z-index:1}

/* a kind with no photographs yet shows one render, so it is given the
   width the three photographs would have taken rather than sitting small
   and alone in the middle of the band */
.cbanner-row--one img{max-width:min(46vw,460px)}
@media (max-width:820px){.cbanner-row--one img{max-width:64vw}}

/* ── the twenty pixels the page could be dragged sideways ─────────
   The category switcher is a .wrap pulled out to the screen edge with a
   negative inline margin, which makes its box wider than the screen even
   though the row inside it scrolls. Clipping the x axis stops the page
   sliding; clip rather than hidden, because hidden on an ancestor would
   break the sticky stages the whole site is built on. */
html,body{overflow-x:clip}

/* ── the line beside the box ──────────────────────────────────────
   Small, quiet and right-aligned in the clear column next to the box,
   with a hairline under it. The big centred headline belonged to a film
   whose products ran the full width; this one has a subject in the middle
   and room either side, so the type sits beside it and stays calm. */
@media (min-width:821px){
  body.vidintro .in-l span{margin-bottom:18px}
  body.vidintro .in-l h2,
  body.vidintro .in2 h2{font-size:clamp(2.1rem,min(3.6vw,5.4vh),3.5rem);line-height:1.08;
    font-weight:400!important;letter-spacing:-.025em}
  body.vidintro .in-l h2::after{content:"";display:block;width:56px;height:1px;
    background:#2C6A91;opacity:.38;margin:26px auto 0}
  /* the canvas paints its own ground and its own soft edges now, so the
     veil that used to sit over the stage has nothing left to do */
  body.vidintro .in-st::after{display:none}
}
body.vidintro .in-l{will-change:opacity,transform,clip-path}

/* ── the stage hands over ─────────────────────────────────────────── */
#hero{position:relative;z-index:2}

/* ── the step counter in the fold hint ───────────────────────────── */
.fhint .fnum{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;
  color:#9FC6E0;padding-inline-end:12px;margin-inline-end:2px;
  border-inline-end:1px solid rgba(255,255,255,.22);flex:none}
.fhint .fnum i{font-style:normal;opacity:.5;padding:0 2px}
.fhint.step{animation:fstep .5s var(--ease)}
@keyframes fstep{0%{transform:translate(-50%,0) scale(1)}
  34%{transform:translate(-50%,-5px) scale(1.035)}
  100%{transform:translate(-50%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.fhint.step{animation:none}}

/* the hint carries a counter and a name now, so on a phone it is set
   tighter to stay on one line */
@media (max-width:820px){
  .fhint{bottom:22px;font-size:.78rem;padding:8px 12px 8px 10px;gap:8px}
  .fhint .fnum{font-size:.68rem;padding-inline-end:9px}
  .fhint b{white-space:nowrap}
}

/* the small line that carries what is actually made, under the second beat */
.in-sub{margin:18px auto 0;color:#45657A;font-size:clamp(.9rem,1.05vw,1.05rem);
  line-height:1.55;max-width:46ch}
@media (max-width:820px){.in-sub{display:none}}

/* the film settles into place the first time it has a frame to show */
.in-st.ready #inCv{animation:inArrive 1.15s var(--ease) both}
@keyframes inArrive{from{transform:scale(.955);opacity:0}to{transform:none;opacity:1}}

/* and the things around it get out of the way: the hint was a white chip
   sitting on a pale stage, which is one box too many on a screen whose
   subject is a box */
body.vidintro .in-hint{background:none;backdrop-filter:none;padding:0;
  color:#4E6E86;font-weight:500;letter-spacing:.01em}
body.vidintro .in-bar{background:none}
body.vidintro .in-bar i{background:rgba(44,106,145,.55);height:1px;top:1px}
@media (prefers-reduced-motion:reduce){.in-st.ready #inCv{animation:none}}

/* ── the four stages, as a track ──────────────────────────────────── */
@media (min-width:821px){
  .fsteps{position:relative;margin-top:30px;padding-inline-end:30px}
  /* the rail, and how far down it the scroll has carried you */
  .fsteps::before,.fsteps::after{content:"";position:absolute;inset-inline-end:6px;
    width:2px;border-radius:2px;top:14px}
  .fsteps::before{bottom:14px;background:var(--line-2)}
  .fsteps::after{height:max(0px,calc(var(--fy,0px) - 14px));background:var(--sky)}
  .fsteps li{border-top:0;opacity:.52;padding:13px 0;position:relative;
    transition:opacity .45s var(--ease)}
  .fsteps li.done{opacity:.72}
  .fsteps li.on{opacity:1}
  .fsteps b{transition:font-size .35s var(--ease)}
  .fsteps li.on b{font-size:1.72rem}
  /* the marker on the stage you are on */
  .fsteps li::marker{content:""}
  .fsteps li>b::after{content:"";position:absolute;inset-inline-end:1px;top:50%;
    width:12px;height:12px;margin-top:-6px;border-radius:50%;
    background:var(--paper);border:2px solid var(--line-2);
    transition:border-color .35s,background .35s,box-shadow .35s}
  .fsteps li.done>b::after{border-color:var(--sky);background:var(--sky)}
  .fsteps li.on>b::after{border-color:var(--sky);background:var(--sky);
    box-shadow:0 0 0 5px rgba(44,106,145,.16)}
  /* and the ask to scroll, in the gap before the stage that comes next */
  .fsteps li.on[data-cue]::after{content:attr(data-cue) " ↓";position:absolute;
    inset-inline-start:auto;inset-inline-end:46px;top:calc(100% - 4px);
    font-size:.82rem;font-weight:600;letter-spacing:.01em;
    color:var(--deep);opacity:.9;white-space:nowrap;
    animation:fcue 1.9s ease-in-out infinite}
  .fsteps li:last-child.on[data-cue]::after{animation:none;opacity:.6}
  @keyframes fcue{0%,100%{transform:translateY(0);opacity:.75}
    50%{transform:translateY(4px);opacity:1}}
  /* the list carries the cue, so the chip at the foot of the screen goes */
  .fhint{display:none}
}
@media (prefers-reduced-motion:reduce){.fsteps li.on[data-cue]::after{animation:none}}

/* ── the clients strip ────────────────────────────────────────────
   White, on a phone and on a desktop, with the names in the navy they used
   to sit on. The hairlines keep it from floating between the two sections
   either side of it. */
.clients{background:#fff!important;border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;padding-block:24px!important}
.clients .cl{color:#1E3E63!important;opacity:.82}
.clients .cl:hover,.clients .cl:focus-visible{color:#17325A!important;opacity:1}
.clients .star{color:#8FB8D8!important}
.clients .eyebrow{color:var(--muted)!important}
@media (max-width:820px){.clients{padding-block:18px!important}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .clients{background:#fff!important}}

/* ── air between the folding box, the delivery strip and the band ──
   Three sections with their own backgrounds, each starting the moment the
   last one ended, so they read as one block with lines drawn through it.
   A gap of the page's own colour between them separates them without
   changing any of them. */
.foldsec + .shipstrip{margin-top:clamp(26px,3.6vw,54px)}
.shipstrip + .splitband{margin-top:clamp(26px,3.6vw,54px)}
.shipstrip{border-top:0!important}
@media (max-width:820px){
  .foldsec + .shipstrip,.shipstrip + .splitband{margin-top:clamp(20px,5vw,34px)}
}

/* the rule across the foot of the folding section was a progress bar from
   before the stages became a track with markers. The track shows where you
   are; the bar only showed as a stray blue line once there was a gap under
   the section for it to sit above. */
.foldsec .fbar{display:none}

/* ── the scrubbed film and the folding box are the two pieces of motion
   the page is built on. Everything else was moving as much as they were:
   blocks rising a long way as they entered, two marquees running at a
   pace you follow with your eye. They are still there, quieter. */
[data-marks] .cm,.reveal,.rise{transition-duration:.55s!important}
.cl-track{animation-duration:55s!important}
.marq .mt{animation-duration:46s!important}
@media (prefers-reduced-motion:no-preference){
  .wt,.caprow,.catcard,.rfig,.cg{transition-duration:.45s!important}
}

/* ── the opening headline ─────────────────────────────────────────
   Sized to the column rather than to the screen, so it lands on two lines
   from 1100px up instead of five of one word each. */
@media (min-width:821px){
  .hero2 .h2-in{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)!important;
    gap:clamp(24px,3.4vw,52px)!important}
  .hero2 .h2-t{max-width:none}
  .hero2 h1{font-size:clamp(2.4rem,4.3vw,4rem)!important;line-height:1.04;text-wrap:balance}
  .hero2 .h2-t p{max-width:46ch}
}

/* the long factory headline ran 1277px into a 1240px column, which cost it
   a second line for the sake of thirty-seven pixels */
@media (min-width:821px){
  .page-top h1,.cat-top h1{font-size:clamp(2.6rem,5.4vw,4.9rem)!important;text-wrap:balance}
}

/* ── the contact page ─────────────────────────────────────────────
   It was two columns side by side, so the details and the form competed for
   where to start reading. It reads down now: who we are and where, a
   picture, and then the form. */
@media (min-width:821px){
  .quote{grid-template-columns:minmax(0,1fr)!important;gap:clamp(26px,3vw,40px)!important;
    max-width:760px;margin-inline:auto}
}
.qpic{margin:4px 0 0;border-radius:10px;overflow:hidden;background:var(--tint)}
.qpic img{display:block;width:100%;height:clamp(180px,26vw,300px);object-fit:cover}

/* ── phone and WhatsApp in the header, on a phone ─────────────────
   They replace the two buttons that used to sit across the foot of every
   screen. Desktop keeps the number and the quote button it already had. */
.hico{display:none}
@media (max-width:820px){
  .hico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(230,242,250,.22);color:#E6F2FA;flex:none;
    transition:background .2s,border-color .2s}
  .hico svg{width:19px;height:19px;fill:currentColor}
  .hico:active{background:rgba(230,242,250,.14)}
  .hico-wa{background:#1F9D55;border-color:#1F9D55;color:#fff}
  .hico-wa:active{background:#188347}
  .hdr .wrap{gap:8px}
  .mbar{display:none!important}
}

/* ── the opening headline on a phone ──────────────────────────────
   Five words were falling one to a line. The coloured middle becomes its
   own line, which splits them two, two and one. */
@media (max-width:820px){
  .hero2 h1{font-size:clamp(2rem,9.4vw,2.9rem)!important;line-height:1.1;text-wrap:balance}
  .hero2 h1 em{display:block}
  .hero2 .h2-t p{max-width:34ch}
}

/* ── the way one product photograph becomes the next ──────────────
   It was a plain cross-fade with a drop. The one leaving lifts away very
   slightly as it goes and the one arriving settles in from a little closer,
   over a second rather than half of one, which is what makes it read as a
   change of subject rather than a swap of files. */
.h2-ph img{opacity:0;transform:scale(1.05) translateY(10px);
  transition:opacity .85s var(--ease),transform 1.15s var(--ease),filter .85s var(--ease);
  filter:blur(3px)}
.h2-ph img.on{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .h2-ph img{transition:opacity .2s;transform:none;filter:none}
}

/* ── the gap above the folding box on a phone ─────────────────────
   Its stage is a screen tall and its contents — a heading and a 52svh
   drawing — were centred in it, which left a fifth of a screen of empty
   dotted ground above the heading and the same below. They start at the
   top of the stage instead. */
@media (max-width:820px){
  .foldsec .fstage{align-content:start!important;
    padding-top:calc(64px + clamp(14px,4vw,26px) + env(safe-area-inset-top,0px))!important;
    grid-template-rows:auto minmax(0,58svh)!important}
}

/* ── the header on the home page ──────────────────────────────────
   Solid navy on a page that opens on a film made it a bar laid over the
   picture. It lets what is behind it through, and firms up once you have
   scrolled past the opening — which is also when it has something to
   separate itself from. */
body[data-route="home"] .hdr{
  background:color-mix(in srgb,var(--navy) 75%,transparent)!important;
  backdrop-filter:blur(16px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.25)!important;
  box-shadow:none!important}
body[data-route="home"] .hdr.solid{
  background:color-mix(in srgb,var(--navy) 82%,transparent)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08)!important}
body[data-route="home"]::before{
  background:color-mix(in srgb,var(--navy) 75%,transparent)}
@supports not (backdrop-filter:blur(2px)){
  body[data-route="home"] .hdr{background:color-mix(in srgb,var(--navy) 90%,transparent)!important}
}

/* =====================================================================
   Added for packtop.co.il
   ===================================================================== */

/* print demo */
.pt-print{height:240vh;position:relative;border-bottom:1px solid var(--line);background:var(--card)}
.pt-stick{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));height:calc(100svh - 64px);display:grid;align-content:center;justify-items:center;gap:clamp(22px,3.4vh,38px);overflow:hidden;padding-block:12px}
.pt-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.pt-head h2{font-size:clamp(1.5rem,2.8vw,2.4rem);text-wrap:balance}
.pt-tags{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px}
.pt-tags button{padding:6px 18px;border:0;background:none;border-radius:999px;font:inherit;font-size:.9rem;color:var(--muted);cursor:pointer;transition:background .35s,color .35s}
.pt-tags button:hover{color:var(--ink)}
.pt-tags button.on{background:var(--navy);color:#fff}
.pt-tags button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.pt-frame{position:relative;width:min(calc(100% - 40px),1100px,calc((100svh - 380px) * 1.5));aspect-ratio:1999/1333;border-radius:10px;overflow:hidden;background:var(--paper)}
.pt-frame img{width:100%;height:100%;object-fit:cover;display:block}
.pt-ink{position:absolute;inset:0;width:100%;height:100%;color:#1F5A86;mix-blend-mode:multiply;opacity:.92}
.pt-line{position:absolute;left:0;right:0;top:0;height:2px;background:#7FC4F0;box-shadow:0 0 14px 3px rgba(79,169,219,.55);opacity:0;pointer-events:none}
.pt-sub{color:var(--muted);text-align:center;font-size:.98rem;text-wrap:balance}
.pt-sub span{display:block}
@media (max-width:760px){.pt-print{height:170vh}.pt-frame{width:calc(100% - 32px);border-radius:8px}.pt-head h2{font-size:1.4rem;max-width:18ch}.pt-sub{font-size:.9rem}}
@media (prefers-reduced-motion: reduce){.pt-print{height:auto}.pt-stick{position:static;height:auto;padding-block:56px}}

/* production */
.pt-mfg{background:linear-gradient(180deg,#EEF4F9 0%,#D6E7F3 100%);padding-block:clamp(64px,9vw,120px)}
.pt-mfg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.pt-duo{position:relative;padding-bottom:9%}
.pt-duo-main{border-radius:10px;overflow:hidden;aspect-ratio:5/4;background:var(--paper)}
.pt-duo img{width:100%;height:100%;object-fit:cover;display:block}
.pt-duo-inset{position:absolute;bottom:0;inset-inline-end:-5%;width:44%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:6px solid #EEF4F9;box-shadow:0 18px 40px rgba(11,26,51,.18)}
.pt-mfg-txt h2{font-size:clamp(1.6rem,2.7vw,2.5rem);white-space:nowrap;color:var(--navy)}
.pt-mfg-txt p{color:#557080;margin-top:16px;max-width:46ch}
.pt-mfg-txt ul{list-style:none;padding:0;margin:28px 0 32px;border-top:1px solid rgba(47,106,140,.18)}
.pt-mfg-txt li{padding:14px 0;border-bottom:1px solid rgba(47,106,140,.18);display:flex;gap:12px;align-items:baseline}
.pt-mfg-txt li b{font-weight:700;min-width:7em;color:var(--navy)}
.pt-mfg-txt li span{color:#557080;font-size:.96rem}
.pt-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:6px;background:#fff;color:var(--navy);font-weight:700;text-decoration:none;border:1px solid transparent;transition:border-color .25s}
.pt-btn:hover{border-color:var(--navy)}
.pt-btn i{font-style:normal;transition:transform .3s}
.pt-btn:hover i{transform:translateX(-4px)}
@media (max-width:980px){.pt-duo-inset{inset-inline-end:-2%}}
@media (max-width:760px){
  .pt-mfg{padding-block:56px}
  .pt-mfg-in{grid-template-columns:1fr;gap:20px}
  .pt-duo{padding-bottom:12%}.pt-duo-main{aspect-ratio:16/11}.pt-duo-inset{inset-inline-end:4%;width:42%;border-width:4px}
  .pt-mfg-txt h2{font-size:1.5rem}
  .pt-mfg-txt p{margin-top:10px;font-size:.97rem}
  .pt-mfg-txt ul{margin:16px 0 20px}.pt-mfg-txt li{padding:9px 0}.pt-mfg-txt li b{min-width:4.6em;font-size:.92rem}.pt-mfg-txt li span{font-size:.88rem}
  .pt-btn{width:100%;justify-content:center;min-height:46px}
}
@media (max-width:400px){.pt-mfg-txt h2{font-size:1.32rem}}

/* phones: category cards two per row instead of six tall cards stacked */
@media (max-width:760px){
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cats .catcard .ci{padding:12px 12px 14px!important}
  .cats .catcard h3{font-size:1.02rem!important}
  .cats .catcard p{font-size:.82rem!important;line-height:1.35}
  .cats .catcard .go{display:none}
}

/* footer legal links */
.flegal{color:inherit;opacity:.75;text-decoration:none;margin-inline-start:14px}
.flegal:hover{opacity:1;text-decoration:underline}