@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#181c1a;--forest:#28382f;--navy:#10233f;--paper:#e9ede9;--ivory:#f5f5f0;--stone:#b8bdb5;--muted:#69756e;--line:#cdd3cc;--lightline:#f4f5f01f;--mono:'DM Mono',monospace;--main:'Manrope',Arial,sans-serif;}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--main);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.shell{width:min(1380px,calc(100% - 112px));margin-inline:auto}
.site-header{background:var(--ivory);border-bottom:1px solid var(--line)}
.nav-layout{min-height:96px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:206px;height:auto;max-height:64px;object-fit:contain}
.nav-signature{font:500 9px/1.4 var(--mono);letter-spacing:.10em;color:#747e76;white-space:nowrap;padding-left:31px;border-left:1px solid #c8cec5}
.site-header nav{margin-left:auto;display:flex;align-items:center;gap:38px;font-size:11px;font-weight:700;color:#3b4940}
.site-header nav a{transition:color .2s}.site-header nav a:hover{color:#6c816e}
.site-header nav .nav-action{border:1px solid var(--forest);padding:13px 16px;display:flex;align-items:center;gap:24px;text-transform:uppercase;letter-spacing:.06em}
.site-header nav .nav-action:hover{background:var(--forest);color:#fff}
.hero{background:var(--navy);color:#eef1ee;position:relative;overflow:hidden}
.hero-motif{position:absolute;right:-7%;top:-18%;height:115%;width:min(62%,900px);opacity:.44;pointer-events:none}
.hero-motif svg{width:100%;height:100%;stroke:#8a9b9a;stroke-width:1.15}
.hero-content{position:relative;z-index:1;min-height:684px;display:flex;flex-direction:column}
.hero-kicker{padding-top:38px;display:flex;align-items:center;gap:18px;font:500 10px/1.2 var(--mono);letter-spacing:.16em;color:#bec9c6}
.crosshair{font:28px/1 var(--main);color:#e8ede8}
.hero-kicker-line{height:1px;flex:0 1 82px;background:#a1b1b3}
.hero-columns{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:70px;flex:1;align-items:center;padding:61px 0 54px}
.hero-overline,.eyebrow{font:500 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.hero-overline{color:#c3cdd2;margin:0 0 28px}
.hero h1{font:800 clamp(70px,7.3vw,120px)/.98 var(--main);letter-spacing:-.085em;margin:0;max-width:1030px}
.hero h1 span:not(.period){color:#c7d3cf}
.hero h1 .period{color:#adbfb4}
.hero-deck{font-size:15px;line-height:1.85;font-weight:500;color:#c7d0d1;max-width:565px;margin:35px 0 36px}
.primary-link{display:inline-flex;align-items:center;gap:58px;background:#e7ede7;color:var(--navy);padding:17px 21px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.055em;transition:background .2s,transform .2s}
.primary-link:hover{background:white;transform:translateY(-2px)}.primary-link span{font-size:20px}
.hero-side{height:100%;display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid #d9e0e055;padding:6px 0 0 27px}
.hero-side-top{display:flex;align-items:start;gap:8px}.hero-side-top>span{font:800 121px/.8 var(--main);letter-spacing:-.1em;color:#ced9d3}.hero-side-top small{font:500 9px/1.5 var(--mono);color:#bfcace;margin-top:11px}
.hero-side-bottom{margin-top:auto;max-width:196px}.hero-side-bottom>span{font:500 11px var(--mono);letter-spacing:.14em;color:#d5e3d8}.hero-side-bottom p{font:400 13px/1.8 var(--main);color:#a9b9ba;margin:15px 0 0}
.hero-bottom{padding:21px 0;border-top:1px solid #d7e0e044;display:flex;align-items:center;justify-content:space-between;gap:15px;font:500 10px var(--mono);letter-spacing:.11em;color:#c8d2d4}
.intro-bar{background:var(--forest);color:#dfe9e0}.intro-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;font:500 10px var(--mono);letter-spacing:.12em}.intro-inner b{color:#fff;margin-right:26px;font-weight:500}
.collection{padding-top:119px;padding-bottom:83px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;padding-bottom:50px}
.eyebrow{color:#576960;margin:0}
.section-heading h2{font:800 clamp(48px,5.4vw,80px)/1.08 var(--main);letter-spacing:-.073em;margin:22px 0 0;max-width:750px}
.section-heading h2 span{color:#718377}
.section-heading>p{max-width:360px;font-size:13px;line-height:1.95;color:#56655d;font-weight:500;margin:0 0 8px}
.filter-row{border-top:1px solid var(--line);padding:19px 0 25px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.filter-label{font:500 10px var(--mono);letter-spacing:.09em;white-space:nowrap;color:#586a5f}
.filters{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid transparent;border-radius:0;background:transparent;color:#586960;padding:11px 17px;font-size:11px;font-weight:700;white-space:nowrap;transition:color .2s,background .2s,border-color .2s}
.filters button:hover{border-color:#a3b0a5}.filters button.active{background:var(--forest);color:white;border-color:var(--forest)}.filters button span{font:500 10px var(--mono);margin-left:8px;opacity:.7}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;row-gap:52px}
.demo{min-width:0;display:flex;flex-direction:column;transition:transform .25s}.demo:hover{transform:translateY(-3px)}
.demo>a{display:block;overflow:hidden}
.demo-image{height:340px;background-position:center;background-size:cover;position:relative;overflow:hidden;transition:filter .2s}
.demo-image:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0002 0%,#0000 40%,#0008 100%);z-index:1}
.demo-image>span{position:absolute;z-index:2;top:19px;left:20px;color:var(--forest);background:#eef2ec;padding:8px 10px;font:500 10px var(--mono);letter-spacing:.08em}
.demo-image>i{position:absolute;z-index:2;left:24px;right:22px;bottom:23px;color:white;font:800 clamp(24px,2.5vw,36px)/1.08 var(--main);letter-spacing:-.065em;font-style:normal;text-shadow:0 1px 15px #0006}
.demo-body{border-top:2px solid var(--forest);padding:19px 0 0;display:flex;flex-direction:column;flex:1}
.demo-meta{display:flex;justify-content:space-between;gap:14px;font:500 9px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#66786a}
.demo h3{font:800 22px/1.25 var(--main);letter-spacing:-.045em;margin:19px 0 8px}
.demo p{font:500 12px/1.6 var(--main);color:#65736b;margin:0 0 24px}
.demo-link{margin-top:auto;padding:15px 0 17px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;font:800 10px var(--main);letter-spacing:.05em}
.demo-link span{font-size:19px;font-weight:600;transition:transform .2s}.demo-link:hover span{transform:translate(3px,-3px)}
.collection-footer{display:flex;justify-content:space-between;align-items:center;margin-top:63px;padding-top:20px;border-top:1px solid var(--line);font:500 10px var(--mono);letter-spacing:.11em;color:#56685b}
.collection-footer a{text-transform:uppercase}.collection-footer a:hover{text-decoration:underline}
.manifesto{background:var(--forest);color:#f1f3ed}
.manifesto-inner{display:grid;grid-template-columns:250px minmax(0,1fr);gap:86px;padding-top:110px;padding-bottom:130px}
.manifesto-aside{display:flex;flex-direction:column;align-items:start;gap:48px;border-right:1px solid #d5e0d45a;font:500 10px/1.8 var(--mono);letter-spacing:.12em;color:#c7d2c7}
.manifesto-symbol{font:300 120px/1 var(--main);opacity:.75}
.manifesto-main>.eyebrow{color:#bacbbd}
.manifesto h2{font:800 clamp(51px,6.3vw,104px)/1.02 var(--main);letter-spacing:-.075em;margin:27px 0 35px}
.manifesto h2 span{color:#c2d1c1}
.manifesto-main>p:not(.eyebrow){max-width:640px;color:#d0dbcf;font:500 15px/1.95 var(--main)}
.manifesto-points{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px;padding-top:25px;border-top:1px solid #d6e0d43d}
.manifesto-points div span{font:500 11px var(--mono);color:#aabfaf}.manifesto-points div p{font:500 12px/1.8 var(--main);color:#edf2e8;max-width:235px}
.manifesto-closer{margin-top:57px;font-size:16px;letter-spacing:-.02em;color:#e1e9e1}.manifesto-closer strong{font-weight:800}
.disclaimer{padding:36px 0 42px;display:grid;grid-template-columns:275px 1fr;gap:35px;align-items:start}
.disclaimer span{font:500 10px/1.7 var(--mono);letter-spacing:.09em;color:#647469}.disclaimer p{font:500 11px/1.9 var(--main);color:#647469;max-width:910px;margin:0}
.site-footer{background:var(--ivory);border-top:1px solid var(--line)}
.footer-top{min-height:164px;display:flex;justify-content:space-between;align-items:center;gap:30px}.footer-top img{width:226px;height:auto}.footer-top>span{font:800 25px var(--main);letter-spacing:-.05em;color:var(--forest)}
.footer-bottom{border-top:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;gap:20px;font:500 9px var(--mono);letter-spacing:.09em;color:#627269}.footer-bottom a{text-decoration:underline;text-underline-offset:4px}
[hidden]{display:none!important}
@media(max-width:1180px){.shell{width:min(100% - 64px,1380px)}.nav-signature{display:none}.hero-columns{grid-template-columns:minmax(0,1fr) 180px;gap:30px}.hero-side-top>span{font-size:95px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:clamp(60px,7.3vw,100px)}}
@media(max-width:790px){.shell{width:calc(100% - 42px)}.nav-layout{min-height:76px}.brand img{width:170px}.site-header nav{gap:18px}.site-header nav a:not(.nav-action){display:none}.site-header nav .nav-action{padding:11px 13px;gap:10px}.hero-content{min-height:650px}.hero-columns{grid-template-columns:1fr;align-items:start;padding:74px 0 58px}.hero h1{font-size:clamp(54px,10vw,85px)}.hero-side{display:none}.hero-motif{right:-41%;width:113%;height:110%;opacity:.28}.hero-kicker{padding-top:29px}.hero-bottom{font-size:8px}.hero-bottom span:last-child{display:none}.section-heading{display:block;padding-bottom:36px}.section-heading>p{margin:25px 0 0;max-width:530px}.filter-row{display:block}.filter-label{display:block;margin-bottom:15px}.filters{justify-content:flex-start}.grid{gap:18px}.demo-image{height:290px}.manifesto-inner{grid-template-columns:1fr;gap:20px;padding-top:75px;padding-bottom:80px}.manifesto-aside{display:none}.manifesto-points{grid-template-columns:1fr 1fr 1fr;gap:17px}.disclaimer{grid-template-columns:1fr;gap:14px}.footer-top{min-height:125px}}
@media(max-width:590px){.shell{width:calc(100% - 34px)}.brand img{width:150px}.nav-layout{min-height:70px}.site-header nav .nav-action{font-size:10px}.hero-content{min-height:675px}.hero-kicker{font-size:8px;gap:12px}.hero-columns{padding:87px 0 40px}.hero-overline{font-size:9px}.hero h1{font-size:clamp(47px,11.3vw,71px);letter-spacing:-.075em}.hero-deck{font-size:13px;line-height:1.85;margin-top:32px}.primary-link{font-size:10px;gap:24px}.hero-bottom{line-height:1.5;gap:12px}.hero-bottom span:nth-child(2){display:none}.intro-inner{min-height:65px;font-size:9px}.intro-inner span:nth-child(2),.intro-inner span:nth-child(3){display:none}.collection{padding-top:74px;padding-bottom:54px}.section-heading h2{font-size:clamp(43px,10vw,58px)}.section-heading>p{font-size:12px}.filters{gap:4px}.filters button{font-size:10px;padding:10px 11px}.grid{grid-template-columns:1fr;row-gap:39px}.demo-image{height:310px}.demo-image>i{font-size:29px}.demo h3{font-size:21px}.collection-footer{margin-top:48px}.manifesto h2{font-size:clamp(48px,11vw,70px)}.manifesto-main>p:not(.eyebrow){font-size:13px}.manifesto-points{grid-template-columns:1fr;gap:8px;margin-top:35px}.manifesto-points div{display:grid;grid-template-columns:40px 1fr}.manifesto-points div p{margin:0}.manifesto-closer{font-size:14px;margin-top:34px}.footer-top{display:block;padding:43px 0 36px;min-height:0}.footer-top>span{display:block;margin-top:20px;font-size:20px}.footer-bottom{flex-wrap:wrap;font-size:8px;line-height:1.7}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* RELEASE V3: Bonic client-facing catalogue — no blue band. */
:root{--navy:#28382f}
.hero{background:#f5f5f0;color:#181c1a;border-bottom:1px solid #ccd2ca}
.hero-motif{opacity:.24}
.hero-motif svg{stroke:#7d9487}
.hero-kicker,.hero-overline,.hero-side-top small,.hero-side-bottom>span,.hero-side-bottom p,.hero-bottom{color:#4e6055}
.crosshair{color:#28382f}
.hero-kicker-line{background:#9cae9f}
.hero h1 span:not(.period){color:#778c7c}
.hero h1 .period{color:#627e66}
.hero-deck{color:#526159}
.primary-link{background:#28382f;color:#f5f5f0}
.primary-link:hover{background:#425746}
.hero-side{border-left-color:#b1bdb0}
.hero-side-top>span{color:#28382f}
.hero-bottom{border-top-color:#c0cabc}
/* Remove the concept banners/strips from all demos; a low-key disclosure remains in their footers. */
@media(max-width:590px){.hero-content{min-height:595px}.hero-columns{padding:63px 0 30px}.hero h1{font-size:clamp(41px,10.4vw,66px)}.hero-kicker{padding-top:26px}.hero-deck{max-width:330px}}