@font-face{font-family:"Archivo";src:url(../fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --pink:#FA017A;--pink-mark:#DE147A;--pink-word:#EB0C84;
  --pink-btn:#D6006E;--pink-btn-hover:#B80061;--pink-text:#C4005F;--pink-deep:#A3004C;
  --plum:#2B0A1D;--plum-2:#3F1029;
  --bg:#FFFFFF;--blush:#FFF3F8;--rose:#FBDDEA;--surface:#FFFFFF;
  --text:#2A1620;--soft:#6A5460;--line:#EBD4DF;
  --focus:#FA017A;--danger:#B4123F;
  --font:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --art-wire:#8E97A6;--art-core:#5F6775;--art-post:#6F7785;--art-ground:#B7BCC6;
  --post-a:#AEB6C3;--post-b:#F1F4F8;--post-c:#7F8897;
  --art-bg-a:#FCE4EF;--art-bg-b:#FFF7FA;--art-grid:rgba(214,0,110,.085);--hole:#FBDDEA;
  --plate-a:#F6F8FB;--plate-b:#D9DFE7;--plate-c:#EEF1F5;--plate-ink:#2A1620;--plate-line:rgba(43,10,29,.16);--plate-hi:rgba(255,255,255,.9);
  --header-glass:rgba(255,255,255,.82);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--bg:#1A0913;--blush:#220E18;--rose:#341829;--surface:#2A1421;--text:#FBEEF4;--soft:#C9ADBB;--line:#4C2A3D;
--pink-text:#FF6DB2;--danger:#FF8FB0;--focus:#FF6DB2;
--art-wire:#AEB6C3;--art-core:#DDE2E9;--art-post:#8D96A5;--art-ground:#5A4453;
--post-a:#7C8594;--post-b:#DDE2E9;--post-c:#59616F;
--art-bg-a:#3A1B2E;--art-bg-b:#2A1421;--art-grid:rgba(255,255,255,.06);--hole:#341829;
--plate-a:#3A2A34;--plate-b:#231720;--plate-c:#33232D;--plate-ink:#F7E6EE;--plate-line:rgba(255,255,255,.14);--plate-hi:rgba(255,255,255,.06);
--header-glass:rgba(26,9,19,.78);
}}
:root[data-theme="dark"]{
--bg:#1A0913;--blush:#220E18;--rose:#341829;--surface:#2A1421;--text:#FBEEF4;--soft:#C9ADBB;--line:#4C2A3D;
--pink-text:#FF6DB2;--danger:#FF8FB0;--focus:#FF6DB2;
--art-wire:#AEB6C3;--art-core:#DDE2E9;--art-post:#8D96A5;--art-ground:#5A4453;
--post-a:#7C8594;--post-b:#DDE2E9;--post-c:#59616F;
--art-bg-a:#3A1B2E;--art-bg-b:#2A1421;--art-grid:rgba(255,255,255,.06);--hole:#341829;
--plate-a:#3A2A34;--plate-b:#231720;--plate-c:#33232D;--plate-ink:#F7E6EE;--plate-line:rgba(255,255,255,.14);--plate-hi:rgba(255,255,255,.06);
--header-glass:rgba(26,9,19,.78);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.6;font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:clip}
svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:760;line-height:1.06;letter-spacing:-.02em;font-stretch:118%;text-wrap:balance}
p{margin:0}a{color:inherit}ul,ol{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.on-dark :focus-visible,.on-brand :focus-visible,.site-header:not(.scrolled):not(.open) :focus-visible{outline-color:#fff}
.wrap{width:min(1240px,100% - 3rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--pink-btn);color:#fff;padding:.7rem 1rem;border-radius:8px;text-decoration:none;font-weight:650}
.skip:focus{top:1rem}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:inherit;font-weight:650;font-stretch:104%;font-size:.98rem;line-height:1.2;padding:.75rem 1.3rem;min-height:48px;border-radius:12px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s,translate .2s,box-shadow .2s}
.btn-primary{background:var(--pink-btn);color:#fff}
.btn-primary:hover{background:var(--pink-btn-hover);translate:0 -2px;box-shadow:0 14px 26px -14px rgba(163,0,76,.85)}
.btn-ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink-text);translate:0 -2px}
.btn-white{background:#fff;color:#C4005F}
.btn-white:hover{background:#FFF3F8;translate:0 -2px;box-shadow:0 16px 28px -16px rgba(43,10,29,.7)}
.btn-outline{border-color:rgba(255,255,255,.8);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.16);border-color:#fff;translate:0 -2px}
.btn-added{background:transparent;border-color:var(--pink-btn);color:var(--pink-text)}
.btn-added:hover{background:var(--blush);color:var(--pink-text)}
.btn .ic{width:20px;height:20px}
.btn .ic-check{display:none}.btn.is-added .ic-check{display:block}.btn.is-added .ic-plus{display:none}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#fff;color:#C4005F;font-size:.8rem;font-weight:750}

/* ===== Header ===== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;color:#fff;border-bottom:1px solid transparent;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.site-header.scrolled{background:var(--header-glass);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);color:var(--text);border-bottom-color:color-mix(in srgb,var(--line) 85%,transparent);box-shadow:0 14px 34px -26px rgba(43,10,29,.6)}
.site-header.open{background:var(--bg);color:var(--text);border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:1.25rem;min-height:98px;transition:min-height .3s ease}
.site-header.scrolled .bar{min-height:74px}
/* header logo: hidden while the hero shows it; appears, big, once the About heading is reached */
.site-header .logo{position:absolute;opacity:0;visibility:hidden;pointer-events:none}
.site-header.show-logo .logo{position:static;opacity:1;visibility:visible;pointer-events:auto;animation:logoIn .45s ease both}
.site-header.show-logo .bar{min-height:106px}.site-header.show-logo .logo svg{height:86px}
@keyframes logoIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.site-header.show-logo .logo{animation:none}}
.logo{--lg-a:#fff;--lg-b:#fff;--lg-c:#fff;display:block;flex:none;text-decoration:none}
.logo svg{height:78px;width:auto;aspect-ratio:1205/1105;overflow:visible;transition:height .3s ease}
.site-header.scrolled .logo,.site-header.open .logo{--lg-a:var(--pink-mark);--lg-b:var(--pink-word)}
.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav a,.nav .nav-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .9rem;border-radius:9px;font:inherit;font-weight:580;font-stretch:104%;font-size:.97rem;text-decoration:none;color:inherit;background:none;border:0;cursor:pointer;position:relative}
.nav a:hover,.nav .nav-btn:hover{background:rgba(255,255,255,.16)}
.site-header.scrolled .nav a:hover,.site-header.scrolled .nav .nav-btn:hover{background:var(--blush)}
.nav [aria-current]::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.2rem;height:2px;border-radius:2px;background:currentColor;opacity:.9}
.site-header.scrolled .nav [aria-current]{color:var(--pink-text)}
.nav .ic{width:16px;height:16px}
.has-menu{position:relative}
.menu{position:absolute;top:calc(100% + 10px);left:0;min-width:320px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:.45rem;box-shadow:0 28px 56px -24px rgba(43,10,29,.6);display:none}
.menu.open{display:block;animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
.nav .menu a{display:flex;justify-content:space-between;gap:1rem;width:100%;padding:.72rem .9rem;border-radius:10px;color:var(--text)}
.nav .menu a:hover{background:var(--blush)}
.menu a span{color:var(--soft);font-variant-numeric:tabular-nums;font-weight:500}
.header-actions{display:flex;align-items:center;gap:.5rem}
.theme{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.theme:hover{background:rgba(255,255,255,.16)}
.site-header.scrolled .theme,.site-header.open .theme{border-color:var(--line)}
.site-header.scrolled .theme:hover{background:var(--blush)}
.theme .i-sun{display:none}
:root[data-theme="dark"] .theme .i-sun{display:block}:root[data-theme="dark"] .theme .i-moon{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme .i-sun{display:block}:root:not([data-theme="light"]) .theme .i-moon{display:none}}
.header-cta{background:#fff;color:#C4005F}
.header-cta:hover{background:#FFF3F8;color:#C4005F}
.site-header.scrolled .header-cta{background:var(--pink-btn);color:#fff}
.site-header.scrolled .header-cta:hover{background:var(--pink-btn-hover)}
.site-header.scrolled .header-cta .count{background:#fff;color:#C4005F}
.header-cta .count{background:var(--pink-btn);color:#fff}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.5);border-radius:12px;background:transparent;color:inherit;cursor:pointer}
.site-header.scrolled .burger,.site-header.open .burger{border-color:var(--line)}
.mobile-panel{display:none;border-top:1px solid var(--line);padding:.5rem 0 1.25rem;max-height:calc(100svh - 98px);overflow:auto}
.mobile-panel a{display:flex;justify-content:space-between;padding:.85rem .25rem;font-weight:620;text-decoration:none;border-bottom:1px solid var(--line);color:var(--text)}
.mobile-panel a.sub{padding-left:1.25rem;font-weight:500;color:var(--soft)}
.mobile-panel a.btn{width:100%;margin-top:1rem;border-bottom:0;justify-content:center;padding:.75rem 1.25rem;color:#fff}

/* ===== Hero ===== */
.hero{position:relative;color:#fff;isolation:isolate;display:flex;flex-direction:column;min-height:clamp(620px,calc(100svh - 5.5rem),840px);padding-top:calc(98px + clamp(1rem,3vw,2.5rem));touch-action:pan-y}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:-1;background:linear-gradient(112deg,#A6004D 0%,#C7005F 30%,#E4046F 58%,#FA0F86 84%,#FF2E97 100%)}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(52% 64% at 76% 46%,rgba(255,255,255,.3),transparent 66%),linear-gradient(180deg,rgba(43,10,29,0) 58%,rgba(43,10,29,.22))}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-grid{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1rem,4vw,4rem);align-items:center;padding-block:clamp(1.5rem,4vw,3rem) clamp(5.5rem,9vw,8rem)}
.hero h1{font-size:clamp(2.15rem,4.1vw,3.7rem);font-weight:800;font-stretch:120%;line-height:1.03;letter-spacing:-.032em;max-width:14em;text-shadow:0 2px 30px rgba(80,0,40,.25)}
.hero .sub{margin-top:1.5rem;font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:34rem;color:rgba(255,255,255,.95)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.hero-copy>*{animation:rise 1s var(--ease) both}
.hero-copy>h1{animation-delay:.55s}.hero-copy>.sub{animation-delay:.7s}.hero-copy>.actions{animation-delay:.85s}
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

.hero-mark{position:relative;isolation:isolate;display:grid;place-items:center;--px:0;--py:0}
.mk{width:min(100%,620px);height:auto;overflow:visible;will-change:transform;transform:translate3d(calc(var(--px)*18px),calc(var(--py)*12px),0) rotate(calc(var(--px)*1.1deg));transition:transform .35s ease-out}
.mk path{fill:#fff;fill-rule:evenodd}
.pc{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
/* soft ground shadow: a static gradient, so nothing has to be re-filtered while the logo moves */
.hero-mark::before{content:"";position:absolute;left:8%;right:8%;top:30%;bottom:-14%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(70,0,36,.38),rgba(70,0,36,.14) 55%,transparent 78%);animation:shadowIn 1.8s ease-out .1s both}
@keyframes shadowIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* held back until the page has settled (JS adds .go) so the first frames are never dropped */
.js .hero-mark:not(.go) .pc,.js .hero-mark:not(.go) .leaf,.js .hero-mark:not(.go) .rg,.js .hero-mark:not(.go) .sprout,.js .hero-mark:not(.go)::before{animation:none;opacity:0}
.hero-mark::before{animation:shadowIn 2s ease-out .2s both}
/* 1) the original fly-in: four links arrive from different sides, one after another, but slower and softer.
      Fade and movement are separate animations, so the movement can be long and gentle while the link is solid early. */
.pc-mid{animation:pcFade 1s ease-out .12s both,inT 1.9s var(--ease) .12s both,floatA 8s ease-in-out 2.4s infinite alternate}
.pc-left{animation:pcFade 1s ease-out .3s both,inL 1.9s var(--ease) .3s both,floatB 9s ease-in-out 2.5s infinite alternate}
.pc-right{animation:pcFade 1s ease-out .48s both,inR 1.9s var(--ease) .48s both,floatA 10s ease-in-out 2.6s infinite alternate-reverse}
.pc-conn{animation:pcFade 1s ease-out .66s both,inB 1.9s var(--ease) .66s both,floatB 8.5s ease-in-out 2.7s infinite alternate-reverse}
@keyframes pcFade{from{opacity:0}to{opacity:1}}
@keyframes inL{from{transform:translate(-190px,26px) rotate(-7deg)}to{transform:none}}
@keyframes inR{from{transform:translate(190px,26px) rotate(7deg)}to{transform:none}}
@keyframes inT{from{transform:translate(0,-150px) rotate(2deg)}to{transform:none}}
@keyframes inB{from{transform:translate(0,170px) rotate(-3deg)}to{transform:none}}
/* float uses the separate "translate" property and starts from rest: no snap when the fly-in ends */
@keyframes floatA{from{translate:0 0}to{translate:0 6px}}
@keyframes floatB{from{translate:0 0}to{translate:2px -6px}}
/* 2) the sprout grows out as the chain settles: base, then left leaf, then right leaf (the original grow, with a soft bounce) */
.leaf{transform-box:fill-box;will-change:transform,opacity}
.leaf-base{transform-origin:50% 100%;animation:leafFade .8s ease-out 1.5s both,leafGrow 1.4s cubic-bezier(.34,1.3,.56,1) 1.5s both}
.leaf-l{transform-origin:100% 100%;animation:leafFade .9s ease-out 1.6s both,leafGrow 1.8s cubic-bezier(.34,1.45,.56,1) 1.6s both}
.leaf-r{transform-origin:0% 100%;animation:leafFade .9s ease-out 1.95s both,leafGrow 1.8s cubic-bezier(.34,1.45,.56,1) 1.95s both}
@keyframes leafFade{from{opacity:0}to{opacity:1}}
@keyframes leafGrow{from{transform:scale(.05) rotate(-14deg)}to{transform:scale(1) rotate(0)}}
.sprout{transform-box:fill-box;transform-origin:42% 100%;animation:sway 7s ease-in-out 3.9s infinite alternate}
@keyframes sway{from{transform:rotate(0)}to{transform:rotate(2deg)}}
@keyframes grow{0%{opacity:0;transform:scale(.05) rotate(-14deg)}55%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0)}}
/* 3) the registered mark fades in last */
.rg{animation:fadeIn 1s ease-out 2.9s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pc{will-change:transform,opacity}

/* hanging tags */
.tags-row{list-style:none;margin:0 auto -3.6rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;position:relative;z-index:5;animation:rise 1s var(--ease) 1.05s both}
.tag{position:relative;display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);color:var(--text);border-radius:6px 6px 16px 16px;padding:1.45rem 1.2rem 1.2rem;box-shadow:0 26px 44px -24px rgba(60,0,30,.6);transform-origin:50% -14px;rotate:var(--rot,0deg)}
.tag:nth-child(1){--rot:-.7deg}.tag:nth-child(2){--rot:.5deg}.tag:nth-child(3){--rot:-.4deg}.tag:nth-child(4){--rot:.6deg}
.tag::before{content:"";position:absolute;top:-12px;left:50%;translate:-50% 0;width:26px;height:26px;border-radius:50%;border:3.5px solid #C9CFD8;background:transparent;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 3px 6px -2px rgba(0,0,0,.35)}
.tag::after{content:"";position:absolute;top:6px;left:50%;translate:-50% 0;width:9px;height:9px;border-radius:50%;background:var(--pink-btn);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.tag .tic{width:44px;height:44px;border-radius:12px;background:var(--rose);color:var(--pink-text);display:grid;place-items:center;flex:none;margin-top:.15rem}
.tag strong{display:block;font-weight:700;font-stretch:108%;line-height:1.2}
.tag span{display:block;font-size:.9rem;color:var(--soft);line-height:1.35;margin-top:3px}

/* ===== Sections ===== */
.section{padding:clamp(4.5rem,8vw,7.5rem) 0}
.section.after-hero{padding-top:calc(clamp(4.5rem,8vw,7.5rem) + 3.6rem)}
.tint{background:var(--blush)}
h2.big,.sec-head h2,.overview h2,.contact h2,.faq h2,.why h2,.facility h2,.ind-wrap h2{font-size:clamp(1.8rem,3.4vw,2.9rem);font-stretch:120%;font-weight:780}
.sec-head{max-width:50rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{margin-top:1rem;color:var(--soft);max-width:60ch}

/* Overview + plate */
.overview{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.overview .lead{margin-top:1.4rem;font-size:1.18rem;max-width:58ch}
.overview .lead+p{margin-top:1rem;color:var(--soft);max-width:60ch}
.badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .9rem .42rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:600;background:var(--surface)}
.badge .ic{width:18px;height:18px;color:var(--pink-text)}
.plate{--lg-a:var(--pink-mark);--lg-b:var(--pink-word);--lg-c:var(--pink-text);position:relative;color:var(--plate-ink);border-radius:20px;padding:1.5rem 1.6rem 1.2rem;background:repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 2px,rgba(255,255,255,.07) 2px 3px),linear-gradient(135deg,var(--plate-a),var(--plate-b) 46%,var(--plate-c));box-shadow:0 1px 0 var(--plate-hi) inset,0 30px 60px -36px rgba(43,10,29,.65),0 0 0 1px var(--plate-line)}
.plate .rv{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9AA3B1 65%,#6B7484);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.plate .rv:nth-of-type(1){top:12px;left:12px}.plate .rv:nth-of-type(2){top:12px;right:12px}.plate .rv:nth-of-type(3){bottom:12px;left:12px}.plate .rv:nth-of-type(4){bottom:12px;right:12px}
.plate-logo{width:min(250px,70%);height:auto;margin:.6rem auto 1.2rem}
.plate h3{font-size:1.02rem;font-stretch:104%;font-weight:720;padding:.9rem 0 .5rem;border-top:1px solid var(--plate-line);box-shadow:0 1px 0 var(--plate-hi) inset}
.plate dl{margin:0}
.plate dl>div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.8rem 0;border-top:1px solid var(--plate-line);box-shadow:0 1px 0 var(--plate-hi) inset}
.plate dt{font-size:.9rem;opacity:.72}
.plate dd{margin:0;font-stretch:88%;font-weight:640;font-size:1.02rem;letter-spacing:.005em}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(3rem,6vw,5rem)}
.duo>article{padding-top:1.6rem;border-top:3px solid var(--pink)}
.duo h3{font-size:1.4rem}
.duo .ic{width:32px;height:32px;color:var(--pink-text);margin-bottom:1rem}
.duo p{margin-top:.75rem;color:var(--soft);max-width:54ch}

/* ===== Products ===== */
.toolbar{display:flex;flex-wrap:wrap;gap:.9rem 1.25rem;align-items:center;margin-bottom:1.25rem}
.search{position:relative;display:block;flex:1 1 260px;max-width:360px}
.search input{width:100%;padding:.8rem 1rem .8rem 2.8rem;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font:inherit;min-height:48px}
.search .ic{position:absolute;left:.9rem;top:50%;translate:0 -50%;width:20px;height:20px;color:var(--soft);pointer-events:none}
.cats{display:flex;flex-wrap:wrap;gap:.5rem}
.cat-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-weight:600;font-stretch:104%;font-size:.95rem;color:var(--text);cursor:pointer;line-height:1.2;transition:background .18s,border-color .18s,color .18s}
.cat-btn:hover{border-color:var(--pink)}
.cat-btn[aria-pressed="true"]{background:var(--pink-btn);border-color:var(--pink-btn);color:#fff}
.cat-btn .n{font-variant-numeric:tabular-nums;font-weight:500;opacity:.8;font-size:.86rem}
.result-line{color:var(--soft);font-size:.95rem;margin-bottom:1.25rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.result-line a{color:var(--pink-text);font-weight:600}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:border-color .2s,box-shadow .25s,translate .25s var(--ease)}
.card:hover{border-color:var(--pink);box-shadow:0 30px 46px -32px rgba(163,0,76,.7);translate:0 -4px}
.art{position:relative;aspect-ratio:4/3;background:linear-gradient(var(--art-grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--art-grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(150deg,var(--art-bg-a),var(--art-bg-b));border-bottom:1px solid var(--line);overflow:hidden}
.art svg{width:100%;height:100%;transition:transform .6s var(--ease)}
.card:hover .art svg{transform:scale(1.04)}
.chip{position:absolute;left:.8rem;top:.8rem;display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);color:var(--text);font-size:.8rem;font-weight:620;padding:.28rem .7rem .28rem .5rem;border-radius:999px;box-shadow:0 6px 14px -8px rgba(43,10,29,.5)}
.chip .ic{width:16px;height:16px;color:var(--pink-text);stroke-width:2}
.flag{position:absolute;right:.8rem;top:0;background:var(--pink-btn);color:#fff;font-size:.78rem;font-weight:680;padding:.55rem .6rem .7rem;border-radius:0 0 10px 10px;line-height:1;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.card-body{display:flex;flex-direction:column;gap:.7rem;padding:1.15rem 1.25rem 1.3rem;flex:1}
.card h3{font-size:1.06rem;line-height:1.28;font-stretch:104%;font-weight:700;letter-spacing:-.005em;text-wrap:pretty}
.specs{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 .7rem;padding:0}
.specs li{font-size:.82rem;font-stretch:90%;font-weight:560;padding:.16rem .6rem;border-radius:7px;background:var(--blush);color:var(--soft);border:1px solid var(--line)}
.card .btn{margin-top:auto;width:100%;min-height:46px;padding:.6rem 1rem}
.empty{grid-column:1/-1;padding:2.5rem 1.5rem;border:1.5px dashed var(--line);border-radius:20px;text-align:center;background:var(--surface)}
.empty p{max-width:44ch;margin:0 auto 1.2rem;color:var(--soft)}
.empty .actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* Product art tokens */
.s-wire{stroke:var(--art-wire)}.s-core{stroke:var(--art-core)}.s-post{stroke:var(--art-post)}.s-ground{stroke:var(--art-ground)}
.f-post{fill:var(--art-post)}.f-wire{fill:var(--art-wire)}.f-core{fill:var(--art-core)}.f-brand{fill:url(#g-brand)}.f-deep{fill:var(--pink-deep)}.f-hole{fill:var(--hole)}.f-white{fill:#fff}.f-shadow{fill:rgba(43,10,29,.13)}
/* Product art motion (plays only while a card is on screen) */
[data-live]:not(.live) *{animation-play-state:paused!important}
.sweep{animation:sweep 5.4s cubic-bezier(.45,0,.25,1) infinite;animation-delay:var(--dl,0s)}
@keyframes sweep{0%{transform:translateX(0) skewX(-18deg)}58%,100%{transform:translateX(400px) skewX(-18deg)}}
.glint{fill:none;stroke:#fff;stroke-linecap:round;stroke-dasharray:8 92;animation:run 3.8s linear infinite;animation-delay:var(--dl,0s)}
@keyframes run{to{stroke-dashoffset:-100}}
.vib{animation:vib 2.6s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes vib{from{transform:translateY(-1px)}to{transform:translateY(1.4px)}}
.breathe{transform-box:fill-box;transform-origin:0 50%;animation:breathe 4.4s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes breathe{0%,100%{transform:scaleX(.955)}50%{transform:scaleX(1.04)}}
.crawl{animation:crawl 1.6s linear infinite}
@keyframes crawl{to{stroke-dashoffset:-20}}
.wn{fill:var(--pink);transform-box:fill-box;transform-origin:center;opacity:0;animation:weld 3.4s ease-out infinite;animation-delay:calc(var(--i)*.15s)}
@keyframes weld{0%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.5)}32%,100%{opacity:0;transform:scale(.6)}}
.spin-c{transform-box:view-box;transform-origin:var(--cx) var(--cy);animation:spin var(--sd,10s) linear infinite}
.spin-c.rev{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.feed{animation:feed .9s linear infinite}
@keyframes feed{to{transform:translateX(14px)}}
.lamp{animation:blink 1.5s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.piston{animation:stroke 1.4s ease-in-out infinite alternate}
@keyframes stroke{from{transform:translateX(0)}to{transform:translateX(-10px)}}
.rock{transform-box:view-box;transform-origin:var(--cx) var(--cy);animation:rock 2.4s ease-in-out infinite alternate}
@keyframes rock{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* ===== Why ===== */
.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem)}
.why-head{position:sticky;top:110px;align-self:start}
.why-head p{margin-top:1rem;color:var(--soft);max-width:44ch}
.why-list{list-style:none;padding:0;margin:0}
.why-list li{display:grid;grid-template-columns:56px 1fr;gap:1.2rem;padding:1.7rem 0;border-top:1px solid var(--line)}
.why-list li:last-child{border-bottom:1px solid var(--line)}
.why-list .ico{width:56px;height:56px;border-radius:14px;background:var(--rose);color:var(--pink-text);display:grid;place-items:center}
.why-list h3{font-size:1.22rem}
.why-list p{margin-top:.4rem;color:var(--soft);max-width:52ch}

/* ===== Builder ===== */
.builder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem)}
.controls{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1.5rem;align-content:start}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:650;margin-bottom:.6rem;padding:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:block;text-align:center;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-weight:580;font-size:.95rem;background:var(--surface);transition:background .15s,color .15s,border-color .15s}
.seg label:hover{border-color:var(--pink)}
.seg input:checked+label{background:var(--pink-btn);border-color:var(--pink-btn);color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.field{display:grid;gap:.4rem}
.field>label,.field>.lab{display:flex;align-items:baseline;gap:.5rem;font-weight:650;font-size:.97rem}
.field>label.rl{justify-content:space-between}
.field output{color:var(--pink-text);font-variant-numeric:tabular-nums;font-stretch:90%}
.field .opt{font-weight:400;color:var(--soft)}
input[type=range]{width:100%;accent-color:var(--pink-btn);height:28px;margin:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
select,input[type=number],input[type=text],input[type=tel],input[type=email],textarea{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:.75rem .9rem;min-height:48px}
select,input[type=number],input[type=text],input[type=tel],input[type=email]{height:48px}
textarea{min-height:110px;resize:vertical}
select:focus,input:focus,textarea:focus{border-color:var(--pink)}
.preview{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:1rem;display:flex;flex-direction:column;gap:.9rem}
.preview svg{width:100%;height:auto;border-radius:14px;background:linear-gradient(var(--art-grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--art-grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(150deg,var(--art-bg-a),var(--art-bg-b))}
.preview figcaption{display:grid;gap:.25rem;padding:0 .25rem .25rem}
.preview figcaption strong{font-size:1.05rem;font-weight:700;font-stretch:104%}
.preview figcaption span{color:var(--soft);font-size:.92rem}
.pv-t{fill:var(--soft);font-family:var(--font);font-size:13px;font-stretch:90%;font-weight:600}

/* ===== Industries ===== */
.on-dark{background:linear-gradient(160deg,var(--plum),#3A0E27);color:#fff}
.ind-wrap h2{max-width:20ch}
.ind{list-style:none;padding:0;margin:clamp(2.25rem,5vw,3.5rem) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ind li{padding:0 1.6rem;border-left:1px solid rgba(255,255,255,.16)}
.ind li:first-child{padding-left:0;border-left:0}
.ill{width:min(150px,100%);height:auto;margin-bottom:1.4rem;overflow:visible}
.il{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.il-p{fill:none;stroke:#FF4DA0;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.il-f{fill:#FF4DA0;stroke:none}
.ind h3{font-size:1.15rem;font-stretch:112%}
@media (min-width:921px){.ind h3{min-height:2.4em}}
.ind p{margin-top:.55rem;color:#EBD3DF;font-size:.98rem}
.also{margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);color:#F3DCE6}
/* industry illustrations */
.crane-jib{transform-box:view-box;transform-origin:50px 24px;animation:jib 7s ease-in-out infinite alternate}
@keyframes jib{from{transform:rotate(-2.6deg)}to{transform:rotate(2.2deg)}}
.crane-hook{transform-box:view-box;transform-origin:98px 24px;animation:cable 4.6s ease-in-out infinite alternate}
@keyframes cable{from{transform:scaleY(.72)}to{transform:scaleY(1.12)}}
.stem{stroke-dasharray:44;stroke-dashoffset:0}
.ill-sprout.in .stem{animation:draw 1.3s var(--ease) .1s both}
@keyframes draw{from{stroke-dashoffset:44}to{stroke-dashoffset:0}}
.lf{transform-box:fill-box}
.lf-a{transform-origin:100% 100%}.lf-b{transform-origin:0 100%}
.ill-sprout.in .lf-a{animation:grow 1s cubic-bezier(.3,1.5,.5,1) .9s both}
.ill-sprout.in .lf-b{animation:grow 1s cubic-bezier(.3,1.5,.5,1) 1.15s both}
.plant{transform-box:view-box;transform-origin:60px 88px;animation:sway 5s ease-in-out 2.4s infinite alternate}
.flow{stroke-dasharray:3 7;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.bolt{animation:zap 3.2s steps(1,end) infinite;transform-box:fill-box;transform-origin:center}
@keyframes zap{0%,38%,44%,100%{opacity:1}40%,42%{opacity:.15}90%{opacity:1}92%{opacity:.35}94%{opacity:1}}
.shackle{animation:lock 4.6s cubic-bezier(.5,0,.2,1) infinite}
@keyframes lock{0%,55%{transform:translateY(-7px)}62%,92%{transform:translateY(0)}96%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.ring{transform-box:fill-box;transform-origin:center;animation:ping 4.6s ease-out infinite}
@keyframes ping{0%,58%{opacity:0;transform:scale(.6)}62%{opacity:.9}100%{opacity:0;transform:scale(1.7)}}

/* ===== Facility ===== */
.facility{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.facility p{color:var(--soft);max-width:56ch}
.stations-wrap{position:relative;margin-top:clamp(2.75rem,6vw,4.25rem)}
.stations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.stations::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:4px;background:repeating-linear-gradient(115deg,var(--art-wire) 0 4px,var(--art-core) 4px 8px)}
.stations li{position:relative;padding:2.9rem 1.1rem 0 0}
.stations h3{font-size:1.06rem;font-stretch:108%;font-weight:700;letter-spacing:0}
.stations p{margin-top:.35rem;font-size:.94rem;color:var(--soft)}

/* ===== FAQ ===== */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-head{position:sticky;top:110px}
.faq-head p{margin:1rem 0 1.5rem;color:var(--soft);max-width:36ch}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 0;font-weight:650;font-stretch:106%;font-size:1.05rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:22px;height:22px;color:var(--pink-text);background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:rotate .3s var(--ease)}
details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat;rotate:180deg}
details p{padding:0 2.5rem 1.35rem 0;color:var(--soft);max-width:62ch}

/* ===== Contact ===== */
.brand-bg{position:relative;isolation:isolate;color:#fff;background:linear-gradient(120deg,#A6004D,#D6006E 48%,#F00A80);overflow:hidden}
.brand-bg::before{content:"";position:absolute;inset:0;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0L64 64M64 0L0 64' stroke='white' stroke-opacity='.11' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");-webkit-mask-image:linear-gradient(100deg,transparent 15%,#000 90%);mask-image:linear-gradient(100deg,transparent 15%,#000 90%)}
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact .intro{margin-top:1rem;max-width:36ch;color:#fff}
.info{margin-top:2.25rem;display:grid;gap:1.5rem}
.info h3{font-size:1rem;font-stretch:108%;font-weight:700;letter-spacing:0;margin-bottom:.3rem;display:flex;gap:.5rem;align-items:center}
.info h3 .ic{width:20px;height:20px}
.info address,.info p{font-style:normal;color:#fff}
.info a{font-weight:650}
.form-card{background:var(--surface);color:var(--text);border-radius:24px;padding:clamp(1.25rem,3vw,2.25rem);box-shadow:0 40px 70px -34px rgba(43,5,25,.75)}
.form-card h3{font-size:1.3rem;margin-bottom:1.25rem}
.fgrid{display:grid;gap:1.15rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.phone{display:grid;grid-template-columns:118px 1fr;gap:.5rem}
.err{color:var(--danger);font-size:.88rem}.err:empty{display:none}
[aria-invalid="true"]{border-color:var(--danger)!important}
.picked{display:flex;flex-direction:column;gap:.5rem;list-style:none;padding:0;margin:0}
.picked li{display:flex;justify-content:space-between;gap:.75rem;align-items:center;background:var(--blush);border:1px solid var(--line);border-radius:12px;padding:.45rem .5rem .45rem .9rem;font-size:.92rem;line-height:1.35}
.picked span{min-width:0}
.picked button{border:0;background:var(--rose);width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--text);display:grid;place-items:center;flex:none}
.picked button:hover{background:var(--pink-btn);color:#fff}
.picked button .ic{width:14px;height:14px}
.picked-empty{color:var(--soft);font-size:.93rem}
.picked-empty a,.consent a{color:var(--pink-text);font-weight:600}
.consent{font-size:.86rem;color:var(--soft)}
.form-card .btn-primary{width:100%}
.success{text-align:center;padding:1.5rem .5rem}
.success .tick{width:64px;height:64px;border-radius:50%;background:var(--pink-btn);color:#fff;display:grid;place-items:center;margin:0 auto 1.25rem}
.success .tick .ic{width:32px;height:32px;stroke-width:2.4}
.success h3{margin-bottom:.6rem}
.success p{color:var(--soft);max-width:40ch;margin:0 auto 1.5rem}
.success:focus{outline:none}

/* ===== Dock & footer ===== */
.dock{position:fixed;left:50%;bottom:1.1rem;translate:-50% 0;z-index:70;display:none;align-items:center;gap:1rem;background:var(--plum);color:#fff;padding:.55rem .55rem .55rem 1.25rem;border-radius:999px;box-shadow:0 22px 44px -14px rgba(0,0,0,.6);max-width:calc(100% - 1.5rem);border:1px solid rgba(255,255,255,.2)}
.dock.show{display:flex;animation:dockIn .35s var(--ease)}
.dock .btn{min-height:42px;padding:.5rem 1.1rem;white-space:nowrap}
.dock span{font-weight:600;font-size:.96rem}
@keyframes dockIn{from{opacity:0;translate:-50% 16px}to{opacity:1;translate:-50% 0}}
.site-footer{background:var(--plum);color:#EBD3DF;padding:clamp(3.5rem,6vw,5rem) 0 2rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2.5rem}
.foot-logo{--lg-a:#FA017A;--lg-b:#fff;--lg-c:#F3DCE6;display:block;width:min(260px,100%)}
.foot-logo svg{width:100%;height:auto}
.site-footer p.about{margin-top:1.4rem;max-width:36ch;color:#E6C9D6}
.site-footer h3{font-size:1rem;font-stretch:108%;color:#fff;margin-bottom:.9rem;letter-spacing:0}
.site-footer ul{list-style:none;padding:0;display:grid;gap:.5rem}
.site-footer a{text-decoration:none;color:#F3DCE6}
.site-footer a:hover{text-decoration:underline;color:#fff}
.site-footer address{font-style:normal;color:#E6C9D6}
.legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;font-size:.9rem;color:#D9B9C8}
.legal div{display:flex;gap:1.5rem;flex-wrap:wrap}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .tags-row{grid-template-columns:1fr 1fr;row-gap:1.6rem;margin-bottom:-3rem}
  .section.after-hero{padding-top:calc(clamp(4.5rem,8vw,7.5rem) + 6.2rem)}
}
@media (max-width:920px){
  .nav,.header-cta{display:none}
  .burger{display:inline-flex;margin-left:0}
  .header-actions{margin-left:auto}
  .site-header.open .mobile-panel{display:block}
  .hero-grid{grid-template-columns:1fr;padding-bottom:4.5rem}
  .hero-mark{order:-1;max-width:300px;margin-inline:0}
  .overview,.why,.builder,.faq,.contact,.facility,.foot{grid-template-columns:1fr}
  .why-head,.faq-head{position:static}
  .ind{grid-template-columns:1fr 1fr;row-gap:2.75rem}
  .ind li:nth-child(3){padding-left:0;border-left:0}
  .stations{grid-template-columns:1fr}
  .stations::before{left:10px;right:auto;top:0;bottom:0;width:4px;height:auto}
  .stations li{padding:0 0 1.9rem 3.2rem}
  .stations li:last-child{padding-bottom:0}
}
@media (max-width:640px){
  .wrap{width:min(100% - 2rem,1240px)}
  .bar{min-height:84px}.logo svg{height:64px}
  .site-header.scrolled .bar{min-height:68px}.site-header.scrolled .logo svg{height:50px}
  .site-header.show-logo .bar{min-height:82px}.site-header.show-logo .logo svg{height:64px}
  .hero{padding-top:calc(84px + 1rem)}
  .hero-mark{max-width:230px}
  .art{aspect-ratio:16/11}
  .duo{grid-template-columns:1fr}
  .row2,.pair{grid-template-columns:1fr}
  .ind{grid-template-columns:1fr}
  .ind li{padding:0;border-left:0}
  .plate dl>div{grid-template-columns:1fr;gap:.1rem}
  .tags-row{grid-template-columns:1fr;margin-bottom:-2.4rem;gap:1.5rem;padding-inline:.5rem}
  .tag{rotate:0deg}
  .section.after-hero{padding-top:calc(clamp(4.5rem,8vw,7.5rem) + 3rem)}
  .cats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;margin-inline:-1rem;padding-inline:1rem;scrollbar-width:thin}
  .cat-btn{white-space:nowrap}
  .toolbar{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .search{max-width:none;flex-basis:auto}
  .dock span{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .wn,.ring{opacity:0}
}
[data-live]:not(.live)::before,[data-live]:not(.live)::after,[data-live]:not(.live) *::before,[data-live]:not(.live) *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.glint{display:none}}

/* ===== Real-world additions: contact, WhatsApp, socials, photos, legal ===== */
.more-cta{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;padding:1.25rem 1.5rem;border:1.5px dashed var(--line);border-radius:20px;background:var(--surface)}
.more-cta p{color:var(--soft);max-width:52ch}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s}
.art.show-photo .photo.ok,.pd-art.show-photo .photo.ok{opacity:1}
.art-toggle{position:absolute;right:.8rem;bottom:.8rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;border:0;background:var(--surface);color:var(--text);font:inherit;font-size:.8rem;font-weight:620;padding:.4rem .8rem .4rem .6rem;border-radius:999px;box-shadow:0 6px 14px -8px rgba(43,10,29,.5);cursor:pointer}
.art-toggle:hover{color:var(--pink-text)}
.art-toggle .ic{width:16px;height:16px}
.art-toggle[aria-pressed="true"]{background:var(--pink-btn);color:#fff}
.card .more{align-self:center;font-size:.86rem;font-weight:600;color:var(--pink-text);text-decoration:none;padding:.1rem 0}
.card .more:hover{text-decoration:underline}
.reach{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.reach .btn{min-height:44px;padding:.55rem 1.05rem}
.info p a{text-decoration:underline;text-underline-offset:3px}
.social{display:flex;gap:.6rem;margin-top:.55rem}
.social a{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.55);color:#fff;transition:background .2s,translate .2s}
.social a:hover{background:rgba(255,255,255,.18);translate:0 -2px;text-decoration:none}
.site-footer .social a{border-color:rgba(255,255,255,.3)}
.social .ic{width:22px;height:22px}
.wa-note{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--soft)}
.wa-note .ic{width:20px;height:20px;color:#1DA851}
.form-card .btn-ghost{width:100%}
.success-actions{display:grid;gap:.6rem;max-width:20rem;margin:0 auto 1rem}
.wa-fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:65;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#1DA851;color:#fff;box-shadow:0 18px 32px -12px rgba(0,60,25,.7);text-decoration:none;transition:translate .2s,background .2s}
.wa-fab:hover{background:#178F44;translate:0 -3px}
.wa-fab .ic{width:30px;height:30px;stroke-width:1.7}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1DA851;animation:ping2 4s ease-out infinite;pointer-events:none}
@keyframes ping2{0%,70%{opacity:0;transform:scale(1)}75%{opacity:.7}100%{opacity:0;transform:scale(1.6)}}
.foot{grid-template-columns:1.4fr .7fr 1fr 1.3fr}
.site-footer li a{overflow-wrap:anywhere}
.legal-tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.legal-tabs button{font:inherit;font-weight:620;font-size:.93rem;padding:.5rem .95rem;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.legal-tabs button:hover{border-color:var(--pink)}
.legal-tabs button[aria-selected="true"]{background:var(--pink-btn);border-color:var(--pink-btn);color:#fff}
.legal-dlg .dlg-body h2{font-size:1.7rem;margin-bottom:.6rem}
.legal-meta{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;color:var(--soft);font-size:.92rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.legal-dlg .dlg-body h3{font-size:1.08rem;font-stretch:108%;margin:1.6rem 0 .5rem}
.legal-dlg .dlg-body p,.legal-dlg .dlg-body li{max-width:68ch}
.legal-dlg .dlg-body p+p{margin-top:.6rem}
.legal-dlg .dlg-body ul{margin:.5rem 0 0;padding-left:1.25rem}
.legal-dlg .dlg-body li{margin:.3rem 0}
.legal-dlg .dlg-body a{color:var(--pink-text)}
body:has(dialog[open]){overflow:hidden}
@media (max-width:1100px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:920px){.foot{grid-template-columns:1fr}}
@media (max-width:640px){.dock.show + .wa-aside .wa-fab{bottom:5.4rem}.legal-tabs button{padding:.45rem .7rem;font-size:.86rem}}

.credit{margin-top:1.25rem;text-align:center;font-size:.9rem;color:#D9B9C8}
.credit a,.credit strong{font-weight:700;color:#fff}
.credit a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.credit a:hover{text-decoration-color:#fff}
.cat-btn[aria-pressed="true"] .n{opacity:1}

/* ===== Manufacturing timeline: the logo mark is the moving element ===== */
.node{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--bg);border:5px solid var(--pink)}
:root[data-theme="dark"] .mv svg{--lg-a:#FF3D9A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mv svg{--lg-a:#FF3D9A}}

/* ===== Footer logo: a slow, gentle sheen ===== */
.foot-logo{position:relative;isolation:isolate}
.foot-logo::before{content:"";position:absolute;inset:-14% -18%;z-index:-1;background:radial-gradient(closest-side,rgba(250,1,122,.30),transparent 72%);opacity:.5;animation:glowBreath 7s ease-in-out infinite alternate}
@keyframes glowBreath{from{opacity:.32;transform:scale(.96)}to{opacity:.62;transform:scale(1.03)}}
.shine-rect{animation:sheen 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes sheen{0%,58%{transform:translateX(0) skewX(-18deg)}88%,100%{transform:translateX(1750px) skewX(-18deg)}}

/* ===== Dialogs (legal, enquiry, product details) ===== */
dialog.dlg{width:min(900px,calc(100% - 1.5rem));max-height:min(90svh,940px);padding:0;border:0;border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 50px 100px -30px rgba(20,0,10,.75);overflow:hidden}
dialog.dlg[open]{display:flex;flex-direction:column;animation:pop .3s var(--ease)}
dialog.dlg::backdrop{background:rgba(43,10,29,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem .9rem 1.4rem;border-bottom:1px solid var(--line);background:var(--surface);flex:none}
.dlg-head h2{font-size:1.25rem;font-stretch:112%}
.dlg-kicker{font-weight:650;font-size:.95rem;color:var(--pink-text)}
.dlg-close{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;flex:none}
.dlg-close:hover{border-color:var(--pink);color:var(--pink-text)}
.dlg-body{overflow:auto;padding:1.5rem clamp(1.25rem,4vw,2.5rem) 2rem;overscroll-behavior:contain}
.enquiry-dlg{width:min(600px,calc(100% - 1.5rem))}
.dr-block{margin-bottom:1.2rem}.dr-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.55rem}.dr-row .lab{font-weight:650}
.dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.dr-actions{display:grid;gap:.6rem;margin-top:1.2rem}
.dr-note{font-size:.86rem;color:var(--soft);margin-top:.9rem}.dr-note a{color:var(--pink-text)}
.dr-done{text-align:center;padding:.5rem 0}.dr-done .tick{width:64px;height:64px;border-radius:50%;background:var(--pink-btn);color:#fff;display:grid;place-items:center;margin:0 auto 1.1rem}.dr-done .tick .ic{width:32px;height:32px;stroke-width:2.4}
.dr-done h3{margin-bottom:.6rem}.dr-done h3:focus{outline:none}.dr-done p{color:var(--soft);max-width:40ch;margin:0 auto 1.4rem}
.linklike{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--pink-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pd{display:grid;grid-template-columns:1fr 1.05fr;gap:2rem;align-items:start}
.pd-art{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(var(--art-grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--art-grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(150deg,var(--art-bg-a),var(--art-bg-b))}
.pd-art svg{width:100%;height:100%}.pd-art img{width:100%;height:100%;object-fit:contain;background:#fff}
.pd-info h2{font-size:1.5rem;font-stretch:112%;margin-bottom:.7rem}
.pd-sum{color:var(--soft)}
.pd-specs{margin:1.2rem 0 0}.pd-specs>div{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;padding:.65rem 0;border-top:1px solid var(--line)}
.pd-specs dt{color:var(--soft);font-size:.93rem}.pd-specs dd{margin:0;font-stretch:92%;font-weight:620}
.pd-note{font-size:.86rem;color:var(--soft);margin-top:1rem}
.pd-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.card h3 a{color:inherit;text-decoration:none}.card h3 a:hover{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}

/* ===== Footer: credit, room for the floating buttons ===== */
.site-footer{padding-bottom:5.5rem}
.credit-sub{margin:.4rem 0 0;text-align:center;font-size:.85rem}
.credit-sub .linklike{color:#E6C9D6}
.credit a,.credit strong{color:#fff}

/* ===== Analytics consent bar (appears only when a Google Analytics ID is configured) ===== */
.consent-bar{position:fixed;left:1rem;bottom:1rem;z-index:90;width:min(430px,calc(100% - 2rem));background:var(--plum);color:#fff;border-radius:18px;padding:1rem 1.1rem;box-shadow:0 26px 50px -18px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.22)}
.consent-bar p{font-size:.92rem;margin:0 0 .8rem;color:#F3DCE6}.consent-bar a{color:#fff;font-weight:600}
.cb-actions{display:flex;gap:.6rem}.consent-bar .btn{min-height:42px;padding:.5rem 1rem}
@media (max-width:640px){
  dialog.dlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:92svh}
  .pd{grid-template-columns:1fr;gap:1.2rem}.pd-specs>div{grid-template-columns:1fr;gap:.1rem}
  .dr-grid{grid-template-columns:1fr}
  body.consent-open .dock{bottom:9.4rem}body.consent-open .wa-fab{bottom:9.4rem}
}
@media (prefers-reduced-motion:reduce){.foot-logo::before{animation:none}.shine-rect{display:none}}

.mv{position:absolute;left:0;top:0;z-index:3;width:64px;height:46px;display:grid;place-items:center;background:var(--surface);border-radius:15px;box-shadow:0 12px 24px -10px rgba(163,0,76,.5),0 0 0 1.5px var(--line);pointer-events:none;transform:translate(calc(12px - 50%),calc(12px - 50%))}
.mv svg{width:46px;height:auto;overflow:visible;--lg-a:var(--pink-mark)}
:root[data-theme="dark"] .mv svg{--lg-a:#FF4DA0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mv svg{--lg-a:#FF4DA0}}
@media (max-width:640px){.mv{width:54px;height:40px}.mv svg{width:38px}}

.pd-art svg,.pd-art img{position:absolute;inset:0;width:100%;height:100%}
.dock span{white-space:nowrap}
.pd-art{aspect-ratio:auto;height:0;padding-bottom:75%}

/* ===== Real pricing (from the No.1 Fence machinery brochure) ===== */
.card .price{margin:-.15rem 0 .1rem;font-weight:780;font-stretch:106%;font-size:1.14rem;color:var(--pink-text)}
.card .price span{display:block;font-weight:500;font-stretch:100%;font-size:.78rem;color:var(--soft);margin-top:1px}
.pd-price{font-size:1.5rem;margin:.3rem 0 .9rem}
.pd-price span{font-size:.85rem;font-weight:500;color:var(--soft);margin-left:.5rem}

/* ===== Machinery price list ===== */
.mach-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.mach-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.mach-thumb{position:relative;aspect-ratio:4/3;background:linear-gradient(var(--art-grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--art-grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(150deg,var(--art-bg-a),var(--art-bg-b))}
.mach-thumb svg,.mach-thumb img{position:absolute;inset:0;width:100%;height:100%}
.mach-thumb img{object-fit:contain;background:#fff}
.mach-body{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.mach-body h3{font-size:1.05rem;font-stretch:104%;font-weight:700}
.mach-body .more{margin-top:.4rem;font-weight:650;color:var(--pink-text);text-decoration:none;font-size:.92rem}
.mach-body .more:hover{text-decoration:underline}
.mach-foot{margin-top:1.5rem;text-align:center}
.mach-foot .btn{min-width:280px}

/* ===== Dye pricing ===== */
.dye-wrap{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,2.75rem);border-top:1px solid var(--line)}
.dye-head p{margin-top:.6rem;color:var(--soft);max-width:70ch}
.dye-table-wrap{margin-top:1.5rem;overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.dye-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:420px}
.dye-table th{text-align:left;padding:.8rem 1.1rem;background:var(--blush);font-weight:700;font-stretch:104%;border-bottom:1px solid var(--line)}
.dye-table td{padding:.65rem 1.1rem;border-bottom:1px solid var(--line);font-stretch:92%}
.dye-table tr:last-child td{border-bottom:0}
.dye-table td .gst{color:var(--soft);font-weight:500;font-size:.86rem}

/* ===== Terms, warranty, why-us pills ===== */
.terms-wrap{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,2.75rem);border-top:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem)}
.terms-wrap h3{font-size:1.15rem;margin-bottom:.8rem}
.terms-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.terms-list li{position:relative;padding-left:1.4rem;color:var(--soft);font-size:.96rem;line-height:1.5}
.terms-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--pink)}
#warrantyText{color:var(--soft);font-size:.96rem;line-height:1.5}
.why-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.why-pills li{padding:.5rem 1rem;border-radius:999px;background:var(--blush);border:1px solid var(--line);font-size:.9rem;font-weight:620}

/* ===== Stats strip ===== */
.stats-strip{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:clamp(1.75rem,4vw,2.5rem) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;text-align:center}
.stats-strip strong{display:block;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;font-stretch:118%;color:var(--pink-text)}
.stats-strip span{display:block;margin-top:.3rem;font-size:.86rem;color:var(--soft);line-height:1.3}

/* ===== Real-photo gallery ===== */
.gallery{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.gallery figure{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.gallery img{width:100%;height:280px;object-fit:cover;display:block}
.gallery figcaption{padding:.9rem 1.1rem;font-size:.92rem;color:var(--soft);font-weight:560}

.addr-note{display:block;margin-top:.3rem;font-size:.85rem;opacity:.85}

@media (max-width:920px){
  .terms-wrap{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:repeat(3,1fr);row-gap:1.5rem}
  .gallery{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .mach-foot .btn{min-width:0;width:100%}
}
.dye-table-wrap{max-width:680px}
.mach-body .price{margin:0;font-weight:780;font-stretch:106%;font-size:1.14rem;color:var(--pink-text)}
.mach-body .price span{display:block;font-weight:500;font-stretch:100%;font-size:.78rem;color:var(--soft);margin-top:1px}

/* product details: extra photos (dye moulds) */
.pd-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:0 0 1.1rem}
.pd-gallery img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px}

/* photo fills the whole product view (new photos are cropped to 4:3) */
.photo.cover,.pd-art img.photo.cover{object-fit:cover}
/* camera icon inside the Illustration / Photo button: keep it in the flow, never absolutely positioned */
.art-toggle{line-height:1;white-space:nowrap}
.art-toggle svg.ic,.pd-art .art-toggle svg.ic,.art .art-toggle svg.ic{position:static;inset:auto;width:16px;height:16px;flex:none;transform:none!important;transition:none}
.art-toggle .lbl{display:inline-block}

/* dye moulds: table with photos beside it */
.dye-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.5rem;align-items:start;margin-top:1.5rem}
.dye-layout .dye-table-wrap{margin-top:0;max-width:none}
.dye-photos{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.dye-photos figure{margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.dye-photos figure:first-child{grid-column:1/-1}
.dye-photos img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.dye-photos figcaption{padding:.55rem .9rem;font-size:.84rem;font-weight:620;color:var(--soft);border-top:1px solid var(--line);background:var(--surface)}
@media (max-width:900px){.dye-layout{grid-template-columns:1fr}}
@media (max-width:480px){.dye-photos{grid-template-columns:1fr}}

/* payment, warranty and why choose us */
.terms-wrap{grid-template-columns:1.25fr 1fr;align-items:start}
.pay-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.1rem}
.pay-card{display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.2rem;border-radius:18px;background:linear-gradient(150deg,var(--blush),var(--surface));border:1px solid var(--line);box-shadow:0 14px 28px -22px rgba(43,10,29,.45)}
.pay-card strong{font-size:2.1rem;line-height:1;font-stretch:112%;color:var(--pink-text)}
.pay-card span{font-size:.92rem;line-height:1.5;color:var(--soft)}
.terms-wrap .terms-list{gap:.6rem}
.terms-wrap .terms-list li{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.terms-wrap .terms-list li::before{display:none}
.terms-wrap .terms-list .ic{width:20px;height:20px;margin-top:.12rem;padding:3px;border-radius:50%;background:var(--pink-btn);color:#fff;stroke-width:2.6;flex:none}
.warranty-card{display:flex;gap:1rem;align-items:flex-start;padding:1.3rem 1.3rem;border-radius:20px;background:var(--pink-btn);color:#fff;margin-bottom:1.6rem}
.warranty-card .ic{width:40px;height:40px;stroke-width:1.6;flex:none}
.warranty-card h3{margin:0 0 .35rem;color:#fff}
.warranty-card p{margin:0;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.92)}
.terms-side .why-h{margin-bottom:.8rem}
.terms-side .why-pills{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.terms-side .why-pills li{display:flex;align-items:center;gap:.55rem;border-radius:14px;padding:.75rem .9rem;background:var(--surface)}
.terms-side .why-pills .ic{width:18px;height:18px;color:var(--pink-text);stroke-width:2.6;flex:none}
@media (max-width:900px){.terms-wrap{grid-template-columns:1fr}}
@media (max-width:480px){.pay-cards,.terms-side .why-pills{grid-template-columns:1fr}}
.terms-wrap .warranty-card p,.warranty-card #warrantyText{color:#fff;opacity:.95}
.terms-wrap .warranty-card h3{color:#fff}


/* ===== Intro splash: pink screen with the logo in the centre; scroll or tap sends the logo to its place in the hero ===== */
html.intro-lock,html.intro-lock body{overflow:hidden;overscroll-behavior:none}
.splash{position:fixed;inset:0;z-index:10000;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.splash-bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(112deg,#A6004D 0%,#C7005F 30%,#E4046F 58%,#FA0F86 84%,#FF2E97 100%);transition:opacity 1.4s ease .1s}
.splash-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(46% 52% at 50% 50%,rgba(255,255,255,.28),transparent 66%),linear-gradient(180deg,rgba(43,10,29,0) 58%,rgba(43,10,29,.22))}
.splash.leaving .splash-bg{opacity:0}
.hero-mark.splash-mark{position:fixed;left:50%;top:50%;translate:-50% -50%;width:min(84vw,600px);max-width:none;margin:0;order:0;z-index:1;transform-origin:50% 50%;transition:transform 1.65s cubic-bezier(.7,0,.2,1),opacity .45s ease}
.splash.landed .splash-mark{opacity:0}
.splash-hint{position:absolute;left:0;right:0;bottom:max(1.8rem,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:.7rem;color:rgba(255,255,255,.95);font-size:.78rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .9s ease}
.splash.ready .splash-hint{opacity:1}
.splash.leaving .splash-hint{opacity:0;transition-duration:.3s}
.splash-hint i{width:22px;height:36px;border:2px solid rgba(255,255,255,.9);border-radius:14px;position:relative}
.splash-hint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:hintDot 1.7s ease-in-out infinite}
.splash-hint.touch i{display:none}
.splash-hint.touch span{animation:hintPulse 1.9s ease-in-out infinite}
@keyframes hintDot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(11px)}}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* while the splash is up the hero text waits; the real logo is hidden until the flying copy lands on it */
html.intro-on:not(.intro-go) .hero-copy>*{animation:none;opacity:0}
html.intro-on:not(.intro-land) #heroMark{opacity:0}
/* the real logo in the hero is shown complete (no assembling), it only floats gently */
.hero-mark.static .pc,.hero-mark.static .leaf,.hero-mark.static .rg,.hero-mark.static::before{animation:none}
.hero-mark.static .pc-mid{animation:floatA 8s ease-in-out infinite alternate}
.hero-mark.static .pc-left{animation:floatB 9s ease-in-out infinite alternate}
.hero-mark.static .pc-right{animation:floatA 10s ease-in-out infinite alternate-reverse}
.hero-mark.static .pc-conn{animation:floatB 8.5s ease-in-out infinite alternate-reverse}
.hero-mark.static .sprout{animation:sway 7s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.splash{display:none}}

/* length shortcuts in the spec builder */
.len-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.5rem}
.len-chips button{font:inherit;font-size:.85rem;font-weight:620;padding:.3rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer}
.len-chips button:hover{background:var(--blush);color:var(--pink-text)}
.len-chips span{font-size:.8rem;color:var(--soft)}
/* brands */
.brands{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.75rem,3.5vw,2.5rem);border-top:1px solid var(--line)}
.brands h3{font-size:1.25rem;font-weight:780;font-stretch:112%}
.brands p{margin-top:.4rem;color:var(--soft)}
.brand-row{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.brand-row li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.6rem;display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;overflow:hidden}
.brand-row img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;border-radius:8px}
@media (max-width:760px){.brand-row{grid-template-columns:repeat(2,1fr)}}
.pair{align-items:start}
.brands{grid-column:1/-1}.brand-row li{max-width:300px}.brand-row{justify-items:center}

/* ===== Brands: a vertical bar that keeps moving ===== */
.brands-grid{display:grid;grid-template-columns:1fr minmax(240px,340px);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.brands-copy h2{font-size:clamp(1.8rem,3.4vw,2.9rem);font-stretch:120%;font-weight:780}
.brands-copy p{margin-top:1rem;color:var(--soft);max-width:44ch}
.brand-rail{position:relative;height:clamp(340px,52vh,460px);overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--blush);padding:1rem 1rem 0;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.brand-track{display:flex;flex-direction:column;animation:brandUp 24s linear infinite;will-change:transform}
.brand-rail:hover .brand-track,.brand-rail:focus-within .brand-track{animation-play-state:paused}
.brand-track ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;padding-bottom:1rem}
.brand-track li{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 24px -16px rgba(43,10,29,.4);display:flex;align-items:center;justify-content:center;height:128px;padding:.9rem 1.1rem}
.brand-track img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;image-rendering:auto}
@keyframes brandUp{to{transform:translateY(-50%)}}
@media (max-width:760px){.brands-grid{grid-template-columns:1fr}.brand-rail{max-width:340px;width:100%;margin:0 auto;height:360px}}
@media (prefers-reduced-motion:reduce){.brand-track{animation:none}.brand-rail{overflow-y:auto;-webkit-mask-image:none;mask-image:none}.brand-track ul[aria-hidden]{display:none}}

/* ===== Brands: larger, richer ===== */
.brands{padding-block:clamp(3.5rem,8vw,6.5rem);background:linear-gradient(180deg,var(--blush),var(--bg))}
.brands-grid{grid-template-columns:1fr minmax(300px,520px);gap:clamp(2rem,6vw,5rem)}
.brands-eyebrow{display:inline-block;margin:0 0 .9rem;padding:.35rem .8rem;border-radius:99px;background:var(--rose);color:var(--pink-text);font-weight:760;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.brands-copy h2{font-size:clamp(2.3rem,5vw,4rem);line-height:1.05}
.brands-copy .brands-lead{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:46ch}
.brands-points{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.9rem}
.brands-points li{flex:1 1 130px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--pink);border-radius:14px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.brands-points strong{font-size:1.5rem;font-weight:800;font-stretch:112%;color:var(--pink-text);line-height:1.1}
.brands-points span{font-size:.85rem;color:var(--soft)}
.brands-cta{display:inline-block;margin-top:1.75rem;padding:.85rem 1.5rem;border-radius:99px;background:var(--pink-btn);color:#fff;font-weight:700;text-decoration:none;transition:background .2s,transform .2s}
.brands-cta:hover{background:var(--pink-btn-hover);transform:translateY(-2px)}
.brand-rail{height:clamp(460px,70vh,620px);border:0;border-radius:28px;padding:1.5rem 1.5rem 0;background:linear-gradient(140deg,#A6004D,#D6006E 50%,#F00A80);box-shadow:0 30px 60px -30px rgba(166,0,77,.6)}
.brand-track ul{gap:1.25rem;padding-bottom:1.25rem}
.brand-track li{height:clamp(150px,22vh,190px);border:0;border-radius:20px;padding:1.2rem 1.6rem;box-shadow:0 14px 30px -14px rgba(43,10,29,.55);transition:transform .25s}
.brand-track li:hover{transform:scale(1.04)}
.brand-track{animation-duration:30s}
:root[data-theme="dark"] .brand-track li{background:#fff}
@media (max-width:760px){.brand-rail{max-width:440px;height:460px}.brands-copy{text-align:left}}
@media (max-width:860px){.brands-grid{grid-template-columns:minmax(0,1fr)}.brand-rail{width:100%;max-width:460px;margin:0 auto}}

.foot{grid-template-columns:1.4fr .7fr .8fr .7fr 1.2fr}
@media (max-width:1100px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:920px){.foot{grid-template-columns:1fr}}