/* boply.co. Plerouse palette. */
:root{
  --forest:#111D11; --paper:#FAF7F0; --paper-light:#FCFBF7; --white:#FFFFFF;
  --pink:#FDB4D2; --lime:#DBFB00; --wine:#4D080D; --wine-deep:#5D1519;
  --ember:#FF5819; --black:#000000; --fade:#404A41; --line:#F0ECE2; --grey:#5E625A;
  --forest-raised:#1E2B1E; --sage:#A3ABA2; --pink-hover:#FC9DC4; --input-line:#8E978F;
  --f-head:"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-body:"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-accent:"Instrument Serif", Georgia, "Times New Roman", serif;
  --r-section:28px; --r-card:20px; --r-btn:12px; --header-h:72px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 16px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--grey);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--forest);margin:0;letter-spacing:-0.02em;line-height:1.1}
p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img{max-width:100%;display:block}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.accent{font-family:var(--f-accent);font-style:italic;font-weight:400;letter-spacing:0;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--forest);color:var(--white);padding:10px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:16px}

/* Surfaces */
.s-paper{background:var(--paper)}
.s-paper-light{background:var(--paper-light)}
.s-white{background:var(--white)}
.s-pink{background:var(--pink);color:var(--forest)}
.s-forest{background:var(--forest);color:var(--sage)}
.s-forest h2,.s-forest h3{color:var(--white)}
.section{padding:112px 0}
.section-tight{padding:72px 0}
@media (max-width:820px){.section{padding:64px 0}.section-tight{padding:48px 0}}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:48px}
.head h2{font-size:clamp(32px,4.2vw,56px);letter-spacing:-0.03em;line-height:1.04}
.head p{max-width:34rem;font-size:18px}
.s-pink .head p{color:var(--forest)}
.head-1{grid-template-columns:minmax(0,1fr)}
@media (max-width:820px){.head{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:32px}}
.kick{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--forest);margin-bottom:16px}
.s-forest .kick,.dark .kick{color:var(--lime)}

/* Buttons */
.btn{font-family:var(--f-body);font-weight:600;font-size:16px;height:50px;padding:0 22px;border-radius:var(--r-btn);border:1.5px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,transform .1s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--forest);color:var(--white)}
.btn-primary:hover{background:var(--black)}
.btn-secondary{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn-secondary:hover{background:var(--forest);color:var(--white)}
.btn-black{background:var(--black);color:var(--white);height:44px;padding:0 18px;font-size:15px}
.btn-black:hover{background:var(--forest)}
.btn-pink{background:var(--pink);color:var(--forest)}
.btn-pink:hover{background:var(--pink-hover)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.85)}
.btn-ghost:hover{background:var(--white);color:var(--forest)}
.dark .btn:focus-visible,.dark .link:focus-visible,.dark .round:focus-visible{outline-color:var(--lime)}
.link{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.link:hover{text-decoration-thickness:3px;text-decoration-color:var(--wine)}
.link:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:4px}
.dark .link{color:var(--pink)}
.dark .link:hover{color:var(--white);text-decoration-color:var(--lime)}
.round{width:46px;height:46px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--pink);color:var(--forest);text-decoration:none;transition:background-color .15s,transform .15s}
.round:hover{background:var(--pink-hover);transform:rotate(-8deg)}
.round:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.round svg{width:18px;height:18px}
.ext{display:inline-block;width:12px;height:12px;margin-left:2px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Tags + chips */
.tag{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;flex:none}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.tag-live{background:var(--lime);color:var(--forest)}
.tag-live::before{background:var(--forest)}
.tag-testing{background:var(--pink);color:var(--wine)}
.tag-testing::before{background:transparent;border:2px solid var(--wine);width:8px;height:8px}
.tag-planned{background:var(--white);color:var(--grey);border:1px solid var(--input-line)}
.tag-planned::before{background:transparent;border:1.5px dashed var(--grey);width:8px;height:8px}
.tag-dev{background:var(--white);color:var(--wine);border:1px solid var(--wine)}
.tag-dev::before{background:var(--wine)}
.s-pink .head .tag-testing{background:var(--white)}
.dark .tag-planned{background:transparent;color:var(--sage);border-color:var(--fade)}
.dark .tag-planned::before{border-color:var(--sage)}
.dark .tag-dev{background:transparent;color:var(--pink);border-color:var(--pink)}
.dark .tag-dev::before{background:var(--pink)}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--pink);color:var(--forest);font-size:14px;font-weight:600;white-space:nowrap}
.chip-lime{background:var(--lime)}
.chip-plain{background:var(--white);border:1px solid var(--line)}
.dark .chip{background:var(--forest-raised);color:var(--white);border:1px solid var(--fade)}
.dark .chip.chip-lime{background:var(--lime);color:var(--forest);border-color:var(--lime)}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot-live{background:var(--lime);border:2px solid var(--forest);width:10px;height:10px}
.dot-testing{background:transparent;border:2px solid var(--wine)}
.dot-planned{background:transparent;border:1.5px dashed var(--grey)}

/* ===== Header ===== */
.top{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top-in{display:flex;align-items:center;gap:16px;height:var(--header-h)}
.logo{font-family:var(--f-head);font-weight:700;font-size:28px;color:var(--forest);letter-spacing:-0.045em;text-decoration:none;line-height:1}
.logo:focus-visible{outline:3px solid var(--forest);outline-offset:4px;border-radius:6px}
.nav{display:flex;align-items:center;gap:2px;margin-left:24px}
.nav-btn,.nav-link{font-family:var(--f-body);font-size:15px;font-weight:500;color:var(--forest);background:none;border:0;padding:10px 14px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.nav-btn:hover,.nav-link:hover,.nav-btn[aria-expanded="true"],.nav-link[aria-current="page"],.nav-btn.is-current{background:var(--white)}
.nav-btn:focus-visible,.nav-link:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.nav-btn svg{width:12px;height:12px;transition:transform .15s}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-item{position:relative}
.top-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.login{font-size:15px;font-weight:600;color:var(--forest);text-decoration:none}
.login:hover{text-decoration:underline;text-underline-offset:3px}
.login:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:4px}
.menu{position:absolute;top:calc(100% + 10px);left:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 24px 60px -24px rgba(17,29,17,.35);padding:12px;min-width:300px}
.menu[hidden]{display:none}
.menu a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;text-decoration:none;color:var(--forest)}
.menu a:hover{background:var(--paper)}
.menu a:focus-visible{outline:3px solid var(--forest);outline-offset:-3px}
.menu .dot{margin-top:7px}
.menu b{font-weight:600;font-size:15px;display:flex;align-items:center;gap:6px}
.menu small{display:block;font-size:14px;color:var(--grey);line-height:1.4;margin-top:2px}
.mega{width:min(720px,calc(100vw - 48px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.mega-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:6px;padding:14px 12px 4px;font-size:14px}
.mega-foot .legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mega-foot .legend span{display:inline-flex;gap:6px;align-items:center}
.mega-foot a{display:inline;padding:0}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--forest);background:transparent;align-items:center;justify-content:center;cursor:pointer;color:var(--forest)}
.burger svg{width:20px;height:20px}
.burger:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
@media (max-width:1080px){.nav,.top-right .login{display:none}.burger{display:inline-flex}}
@media (max-width:520px){.top-right .btn-black{display:none}}
.drawer{position:fixed;inset:0;z-index:60;background:var(--paper);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 24px calc(env(safe-area-inset-bottom,0px) + 32px)}
.drawer[hidden]{display:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:48px;margin-bottom:16px}
.drawer-top .burger{display:inline-flex}
.drawer details{border-bottom:1px solid var(--line)}
.drawer summary{list-style:none;cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:22px;color:var(--forest);padding:18px 0;display:flex;justify-content:space-between;align-items:center}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";font-size:26px;font-weight:400}
.drawer details[open] summary::after{content:"\2212"}
.drawer summary:focus-visible{outline:3px solid var(--forest);outline-offset:2px;border-radius:6px}
.drawer details a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:17px;color:var(--forest);text-decoration:none;font-weight:500}
.drawer details ul{padding-bottom:12px}
.drawer .plain{display:block;font-family:var(--f-head);font-weight:600;font-size:22px;color:var(--forest);padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.drawer-cta{display:grid;gap:12px;margin-top:28px}
.drawer-cta .btn{width:100%}

/* ===== Photo cards (hero style) ===== */
.photo-card{position:relative;border-radius:var(--r-section);overflow:hidden;background:var(--forest);isolation:isolate;color:var(--sage)}
.photo-card .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:opacity .9s ease}
.photo-card .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,29,17,.94) 0%,rgba(17,29,17,.78) 38%,rgba(17,29,17,.25) 72%,rgba(17,29,17,.15) 100%),linear-gradient(0deg,rgba(17,29,17,.6) 0%,transparent 45%)}
@media (max-width:980px){.photo-card .shade{background:linear-gradient(0deg,rgba(17,29,17,.96) 0%,rgba(17,29,17,.82) 55%,rgba(17,29,17,.4) 100%)}}

/* Home hero */
.hero-sec{padding:20px 0 0}
.hero{min-height:min(780px,calc(100svh - var(--header-h) - 40px));display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end}
.hero-copy{padding:64px;max-width:780px}
.hero h1{color:var(--white);font-size:clamp(46px,7.2vw,96px);font-weight:700;letter-spacing:-0.035em;line-height:.98;margin-top:22px}
.hero h1 .accent{color:var(--pink);font-size:1.06em}
.hero-sub{color:#E6E3DA;margin-top:22px;max-width:32rem;font-size:19px;line-height:1.55}
.hero .btns{margin-top:32px}
.for{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.for>span{color:var(--white);font-weight:600;font-size:15px;margin-right:4px}
.for button{font-family:var(--f-body);font-size:15px;font-weight:600;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);background:rgba(17,29,17,.35);color:var(--white);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;backdrop-filter:blur(6px)}
.for button:hover{border-color:var(--white)}
.for button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.for button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.for .pause{width:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.for .pause svg{width:14px;height:14px}
.progress{height:3px;border-radius:3px;background:rgba(255,255,255,.2);margin-top:18px;max-width:420px;overflow:hidden}
.progress i{display:block;height:100%;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left center}
.progress i.run{animation:fill 6s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.floats{position:relative;padding:0 40px 64px 0;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.fcard{background:var(--white);border-radius:20px;padding:16px 18px;width:min(300px,100%);box-shadow:0 30px 60px -20px rgba(0,0,0,.55);color:var(--grey);transition:opacity .35s,transform .35s}
.fcard.swap{opacity:0;transform:translateY(8px)}
.fcard .k{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:600}
.fcard strong{display:block;font-family:var(--f-head);font-weight:600;color:var(--forest);font-size:18px;line-height:1.3;margin:8px 0 4px}
.fcard p{font-size:15px;line-height:1.45}
.fcard.alt{background:var(--lime);margin-right:56px}
.fcard.alt .k,.fcard.alt p{color:var(--forest)}
.fcard .tag-alt{background:var(--forest);color:var(--white)}
.fcard .tag-alt::before{background:var(--lime)}
.fnote{font-size:14px;color:#D5D2C8}
@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);align-items:stretch;min-height:0}
  .hero-copy{padding:140px 28px 24px}
  .floats{padding:0 28px 32px;align-items:stretch}
  .fcard,.fcard.alt{width:100%;margin-right:0}
}
@media (max-width:520px){.hero .btns .btn{width:100%}.for{margin-top:28px}}

/* Marquee */
.marquee{background:var(--forest);overflow:hidden;padding:20px 0;margin-top:20px}
.marquee-track{display:flex;gap:30px;width:max-content;animation:slide 52s linear infinite;font-family:var(--f-head);font-weight:600;font-size:24px;color:var(--white);letter-spacing:-0.01em}
.marquee:hover .marquee-track{animation-play-state:paused}
.star{color:var(--ember)}
@keyframes slide{to{transform:translateX(calc(-50% - var(--loop-gap,30px)/2))}}

/* Page hero (inner pages) */
.phero-sec{padding:20px 0 0}
.phero{min-height:560px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}
.phero-copy{padding:64px;max-width:720px}
.phero h1{color:var(--white);font-size:clamp(38px,4.8vw,66px);letter-spacing:-0.035em;line-height:1}
.phero h1 .accent{color:var(--pink)}
.phero .lede{color:#E6E3DA;margin-top:20px;max-width:34rem;font-size:19px;line-height:1.55}
.phero .btns{margin-top:32px}
.phero .crumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.phero-visual{padding:48px 48px 0 0;display:flex;justify-content:flex-end;align-items:flex-end;align-self:stretch}
@media (max-width:980px){.phero{grid-template-columns:minmax(0,1fr);min-height:0}.phero-copy{padding:140px 28px 28px}.phero-visual{padding:0 28px;justify-content:center}}
@media (max-width:520px){.phero .btns .btn{width:100%}}
.simple-hero{padding:96px 0 48px}
.simple-hero h1{font-size:clamp(40px,6vw,80px);letter-spacing:-0.035em;line-height:1}
.simple-hero .lede{margin-top:20px;max-width:40rem;font-size:19px;color:var(--forest)}
@media (max-width:820px){.simple-hero{padding:56px 0 32px}}

/* Devices (simplified product views) */
.device{background:var(--white);border:8px solid var(--forest);border-bottom:0;border-radius:34px 34px 0 0;width:300px;max-width:100%;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);color:var(--forest)}
.device.browser{width:460px;border-width:6px;border-radius:18px 18px 0 0}
.device .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line);font-size:13px;color:var(--grey)}
.device .bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
.device .bar span{margin-left:8px;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:2px 10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device .notch{height:22px;display:flex;justify-content:center;align-items:center}
.device .notch i{width:70px;height:6px;border-radius:6px;background:var(--forest)}
.scr{padding:14px 16px 20px;font-size:14px;line-height:1.4;text-align:left}
.scr h4{font-family:var(--f-head);font-size:17px;color:var(--forest);margin-bottom:4px}
.scr .sub{font-size:13px;color:var(--grey);margin-bottom:12px}
.scr .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-top:8px;background:var(--white)}
.scr .row b{font-weight:600;font-size:14px;display:block}
.scr .row small{font-size:13px;color:var(--grey);display:block}
.scr .row .tag{height:24px;font-size:12px;padding:0 9px}
.scr .meter{height:8px;border-radius:8px;background:var(--line);margin:8px 0 4px;overflow:hidden}
.scr .meter i{display:block;height:100%;background:var(--forest);border-radius:8px}
.scr .sbtn{margin-top:12px;height:40px;border-radius:10px;background:var(--forest);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.scr .sbtn.pink{background:var(--pink);color:var(--forest)}
.scr .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.scr .slots span{border:1px solid var(--line);border-radius:8px;text-align:center;padding:7px 0;font-size:13px;font-weight:600}
.scr .slots span.on{background:var(--lime);border-color:var(--forest)}
.scr .slots span.off{color:var(--input-line);text-decoration:line-through}
.scr .tl{margin-top:8px;border-left:2px solid var(--line);padding-left:14px}
.scr .tl div{position:relative;padding:6px 0;font-size:13px}
.scr .tl div::before{content:"";position:absolute;left:-20px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--white);border:2px solid var(--input-line)}
.scr .tl div.done::before{background:var(--forest);border-color:var(--forest)}
.scr .tl div.now::before{background:var(--lime);border-color:var(--forest)}
.scr .tl b{font-weight:600}
.scr .field{border:1px solid var(--input-line);border-radius:10px;padding:8px 10px;margin-top:8px;font-size:13px;color:var(--grey)}
.scr .field b{display:block;color:var(--forest);font-size:12px;font-weight:600}
.scr .bubble{background:var(--paper);border-radius:12px 12px 12px 4px;padding:9px 11px;margin-top:8px;font-size:13px}
.scr .bubble.me{background:var(--forest);color:var(--white);border-radius:12px 12px 4px 12px;margin-left:30px}
.view-note{font-size:14px;color:var(--grey);margin-top:12px}
.dark .view-note{color:var(--sage)}

/* ===== Product finder ===== */
.finder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips [role="tab"]{font-family:var(--f-body);font-size:16px;font-weight:600;height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--forest);background:transparent;color:var(--forest);cursor:pointer;transition:background-color .15s,color .15s}
.chips [role="tab"]:hover{background:var(--white)}
.chips [role="tab"][aria-selected="true"]{background:var(--forest);color:var(--white)}
.chips [role="tab"]:focus-visible{outline:3px solid var(--lime);outline-offset:2px;box-shadow:0 0 0 5px var(--forest)}
.finder-hint{margin-top:20px;font-size:15px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-section);padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.panel[hidden]{display:none}
.panel>*{min-width:0}
.panel-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.panel h3{font-size:30px;letter-spacing:-0.025em}
.panel .lede{margin-top:12px;font-size:17px;color:var(--forest)}
.feat{margin-top:20px}
.feat li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--forest);font-size:16px;font-weight:500}
.panel .act{margin-top:24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.panel .pic{border-radius:18px;background-size:cover;background-position:center;min-height:340px;height:100%}
@media (max-width:1180px){.finder{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.panel{grid-template-columns:minmax(0,1fr)}.panel .pic{min-height:200px;order:-1}}
@media (max-width:620px){.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:4px 24px 8px;scroll-snap-type:x mandatory}.chips::-webkit-scrollbar{display:none}.chips [role="tab"]{scroll-snap-align:start;flex:none}.panel{padding:20px}}

/* Proof strip */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.proof-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.proof-label{font-family:var(--f-head);font-weight:600;color:var(--forest);font-size:16px;display:inline-flex;align-items:center;gap:8px}
.proof a{color:var(--forest);font-weight:500;text-decoration:none;border-bottom:1.5px solid var(--forest);padding-bottom:1px}
.proof a:hover{border-bottom-width:3px;border-bottom-color:var(--wine)}
.proof a:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:4px}
.proof a span{color:var(--grey);font-weight:400}

/* Ways */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:96px}
.way{border-radius:var(--r-section);padding:40px;display:flex;flex-direction:column;gap:20px;min-height:340px;justify-content:space-between;position:relative;overflow:hidden;isolation:isolate}
.way h3{font-size:clamp(28px,3.2vw,40px);letter-spacing:-0.03em;line-height:1.05;color:var(--white)}
.way p{font-size:18px;max-width:26rem}
.way-ready{background:var(--forest);color:var(--sage)}
.way-new{background:var(--wine);color:#F5D7E3}
.way .num{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--forest);background:var(--lime);width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:820px){.ways{grid-template-columns:minmax(0,1fr);margin-bottom:64px}.way{padding:28px;min-height:0}}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.pcard{background:var(--white);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px;grid-column:span 2;color:var(--grey);min-width:0}
.pcard.lg{grid-column:span 3;padding:28px}
.pcard.half{grid-column:span 3}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pcard h3{font-size:22px;letter-spacing:-0.02em}
.pcard.lg h3{font-size:32px;letter-spacing:-0.03em}
.pcard .line{font-size:15px;color:var(--forest);margin-top:6px}
.pcard .tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pcard ul{margin-top:auto}
.pcard li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:var(--forest);font-weight:500}
.pcard .pic{border-radius:14px;background-size:cover;background-position:center;aspect-ratio:16/9}
.pcard.lg .pic{aspect-ratio:16/10}
.pcard.forest{background:var(--forest);color:var(--sage)}
.pcard.forest h3,.pcard.forest li,.pcard.forest .line{color:var(--white)}
.pcard.forest li{border-color:var(--forest-raised)}
.pcard.wine{background:var(--wine);color:#F5D7E3}
.pcard.wine h3,.pcard.wine li,.pcard.wine .line{color:var(--white)}
.pcard.wine li{border-color:var(--wine-deep)}
@media (max-width:1080px){.pcard,.pcard.lg,.pcard.half{grid-column:span 3}}
@media (max-width:680px){.bento{grid-template-columns:minmax(0,1fr)}.pcard,.pcard.lg,.pcard.half{grid-column:auto}}

/* Rail */
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.rail li{position:relative;padding:0 20px 0 0}
.rail li::before{content:"";position:absolute;top:22px;left:44px;right:0;height:2px;background:var(--forest)}
.rail li:last-child::before{display:none}
.rail .n{width:46px;height:46px;border-radius:50%;background:var(--lime);color:var(--forest);font-family:var(--f-head);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;border:2px solid var(--forest)}
.rail li:last-child .n{background:var(--pink)}
.rail h3{font-size:24px;margin-top:20px}
.rail p{margin-top:8px;font-size:16px;max-width:15rem}
.rail .out{display:block;margin-top:10px;font-size:14px;font-weight:600;color:var(--forest)}
.dark .rail li::before{background:var(--fade)}
.dark .rail .n{border-color:var(--lime)}
.dark .rail .out{color:var(--lime)}
.rail-foot{margin-top:48px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 24px}
.rail-foot p{color:var(--forest);font-weight:500}
@media (max-width:900px){
  .rail{grid-template-columns:minmax(0,1fr);gap:28px}
  .rail li{padding:0 0 0 66px;min-height:46px}
  .rail .n{position:absolute;left:0;top:0}
  .rail li::before{top:46px;bottom:-28px;left:22px;right:auto;width:2px;height:auto}
  .rail h3{margin-top:6px}
}

/* Stats */
.stats{display:flex;gap:16px;align-items:stretch}
.stats>div:first-child{flex:1.2 1 0;min-width:0}
.stats .stat{flex:1 1 0;min-width:0}
.stats h2{font-size:clamp(32px,4.2vw,56px);letter-spacing:-0.03em;line-height:1.04}
.stats .lead{margin-top:16px;font-size:18px;max-width:24rem}
.stat{background:var(--forest-raised);border:1px solid var(--fade);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:240px}
.stat .num{font-family:var(--f-head);font-weight:700;font-size:clamp(72px,8vw,112px);line-height:.9;color:var(--lime);letter-spacing:-0.05em}
.stat .lbl{font-size:16px;color:var(--white);font-weight:500}
.stat .lbl small{display:block;color:var(--sage);font-weight:400;font-size:15px;margin-top:4px}
@media (max-width:900px){.stats{flex-direction:column}.stat{min-height:0}}

/* Work cards */
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.work-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:16px;min-width:0;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
a.wcard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(17,29,17,.4)}
a.wcard:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.cover{border-radius:14px;aspect-ratio:16/10;padding:20px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.cover .cn{font-family:var(--f-head);font-weight:700;font-size:clamp(26px,3vw,36px);letter-spacing:-0.04em;line-height:1}
.cover .cc{font-size:14px;font-weight:600}
.cover::after{content:"";position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;border:24px solid currentColor;opacity:.14}
.c-forest{background:var(--forest);color:var(--white)}
.c-forest .cc{color:var(--lime)}
.c-pink{background:var(--pink);color:var(--forest)}
.c-wine{background:var(--wine);color:var(--white)}
.c-wine .cc{color:var(--pink)}
.c-lime{background:var(--lime);color:var(--forest)}
.c-paper{background:var(--paper);color:var(--forest);border:1px solid var(--line)}
.wbody{padding:0 8px 8px}
.wmeta{font-size:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wcard h3{font-size:22px;margin-top:10px}
.wcard ul{margin-top:12px;display:grid;gap:6px}
.wcard li{font-size:15px;color:var(--forest);padding-left:16px;position:relative}
.wcard li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:2px;background:var(--forest)}
.wcard .more{display:inline-flex;margin-top:14px;font-size:15px;font-weight:600;color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.work-foot{margin-top:28px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filters button{font-family:var(--f-body);font-size:15px;font-weight:600;height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--forest);background:transparent;color:var(--forest);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--forest);color:var(--white)}
.filters button:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.wcard[hidden]{display:none}
@media (max-width:1080px){.work-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.work,.work-3{grid-template-columns:minmax(0,1fr)}}

/* Brands */
.brands{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.brand{border-radius:var(--r-section);padding:36px;display:flex;flex-direction:column;gap:20px;min-height:340px;position:relative;overflow:hidden;isolation:isolate}
.brand-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.brand .name{font-family:var(--f-head);font-weight:700;font-size:40px;letter-spacing:-0.04em;line-height:1;display:block}
.brand .region{font-size:14px;font-weight:600;margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.brand p{font-size:18px;max-width:30rem}
.brand .visit{margin-top:auto;display:flex;gap:20px;flex-wrap:wrap}
.brand-kelmo{background:var(--forest);color:var(--sage)}
.brand-kelmo .name{color:var(--white)}
.brand-kelmo p{color:#E6E3DA}
.brand-acc{background:var(--white);border:1px solid var(--line);color:var(--grey)}
.brand-acc .name{color:var(--forest)}
.brand-acc p{color:var(--forest)}
@media (max-width:900px){.brands{grid-template-columns:minmax(0,1fr)}.brand{padding:28px;min-height:0}.brand .name{font-size:32px}}

/* Locations */
.locs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--forest)}
.locs li{padding:28px 20px 0 0;border-right:1px solid var(--line)}
.locs li:last-child{border-right:0}
.locs li+li{padding-left:24px}
.locs .c{font-family:var(--f-head);font-weight:700;font-size:clamp(28px,3.4vw,44px);letter-spacing:-0.035em;color:var(--forest);line-height:1;display:block}
.locs .p{font-size:15px;margin-top:10px}
.locs-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.locs-head h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-0.03em}
@media (max-width:820px){.locs{grid-template-columns:repeat(2,minmax(0,1fr))}.locs li,.locs li+li{padding:24px 16px 24px 0;border-right:0;border-bottom:1px solid var(--line)}.locs li:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}}

/* Statement */
.statement{min-height:540px;display:flex;align-items:flex-end}
.statement .shade{background:linear-gradient(0deg,rgba(17,29,17,.95) 0%,rgba(17,29,17,.6) 50%,rgba(17,29,17,.2) 100%)}
.statement-in{padding:56px;max-width:920px}
.statement blockquote{font-family:var(--f-head);font-weight:600;color:var(--white);font-size:clamp(30px,4.4vw,56px);letter-spacing:-0.03em;line-height:1.08}
.statement .by{margin-top:24px;display:flex;align-items:center;gap:12px;color:#E6E3DA;font-size:16px}
@media (max-width:820px){.statement{min-height:460px}.statement-in{padding:120px 28px 32px}}

/* CTA */
.cta{background:var(--forest);border-radius:var(--r-section);padding:96px 48px;text-align:center;position:relative;overflow:hidden;color:var(--sage)}
.cta h2{color:var(--white);font-size:clamp(40px,6vw,84px);letter-spacing:-0.035em;line-height:1}
.cta h2 .accent{color:var(--pink)}
.cta p{margin:20px auto 0;max-width:32rem;font-size:19px;color:#E6E3DA}
.cta .btns{justify-content:center;margin-top:36px}
.cta .pill-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
@media (max-width:620px){.cta{padding:64px 24px}.cta .btns .btn{width:100%}}

/* Feature groups (product pages) */
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.group{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.group.dark{background:var(--forest);border-color:var(--forest);color:var(--sage)}
.group.dark h3{color:var(--white)}
.group.dark li{color:var(--white);border-color:var(--forest-raised)}
.group h3{font-size:24px;letter-spacing:-0.02em}
.group>p{margin-top:8px;font-size:16px}
.group ul{margin-top:16px}
.group li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:16px;color:var(--forest);font-weight:500}
.legend-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:24px;font-size:15px;color:var(--forest)}
@media (max-width:900px){.groups{grid-template-columns:minmax(0,1fr)}.group{padding:22px}}

/* Demo tabs */
.demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center}
.demo-tabs{display:grid;gap:10px}
.demo-tabs [role="tab"]{text-align:left;font-family:var(--f-body);background:transparent;border:1.5px solid var(--fade);border-radius:16px;padding:18px 20px;color:var(--white);cursor:pointer;transition:background-color .15s,border-color .15s}
.demo-tabs [role="tab"] b{display:block;font-family:var(--f-head);font-size:19px;font-weight:600}
.demo-tabs [role="tab"] small{display:block;color:var(--sage);font-size:15px;margin-top:4px;line-height:1.45}
.demo-tabs [role="tab"]:hover{border-color:var(--sage)}
.demo-tabs [role="tab"][aria-selected="true"]{background:var(--forest-raised);border-color:var(--lime)}
.demo-tabs [role="tab"]:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.demo-stage{background:var(--forest-raised);border-radius:var(--r-section);padding:40px 24px 0;display:flex;justify-content:center;align-items:flex-end;min-height:520px;overflow:hidden;position:relative}
.demo-stage [role="tabpanel"]{display:flex;flex-direction:column;align-items:center;width:100%}
.demo-stage [role="tabpanel"][hidden]{display:none}
@media (max-width:980px){.demo{grid-template-columns:minmax(0,1fr)}.demo-stage{min-height:0;padding-top:28px}}

/* Steps (numbered list of cards) */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:10px}
.step .n{width:36px;height:36px;border-radius:50%;background:var(--lime);border:2px solid var(--forest);display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:700;color:var(--forest);font-size:15px}
.step h3{font-size:20px}
.step p{font-size:15px}

/* Pricing model */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:start}
.price-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-section);padding:32px}
.price-card li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.price-card li:first-child{border-top:0;padding-top:0}
.price-card li b{font-family:var(--f-head);font-size:18px;color:var(--forest);font-weight:600;display:block}
.price-card li small{display:block;font-size:15px;margin-top:2px}
.price-card li .amt{font-family:var(--f-head);font-weight:600;color:var(--forest);font-size:16px;white-space:nowrap;text-align:right}
.region{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.region button{font-family:var(--f-body);font-size:15px;font-weight:600;height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--forest);background:transparent;color:var(--forest);cursor:pointer}
.region button[aria-pressed="true"]{background:var(--forest);color:var(--white)}
.region button:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.cur-note{margin-top:14px;font-size:15px;color:var(--forest)}
@media (max-width:900px){.price{grid-template-columns:minmax(0,1fr)}.price-card{padding:24px}}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:0 22px}
.faq summary{list-style:none;cursor:pointer;padding:20px 32px 20px 0;font-family:var(--f-head);font-weight:600;font-size:18px;color:var(--forest);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:16px;font-size:26px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--forest);outline-offset:4px;border-radius:8px}
.faq details p{padding:0 0 20px;font-size:16px;max-width:60rem}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.split h2{font-size:clamp(32px,4vw,52px);letter-spacing:-0.03em;line-height:1.05}
.split .side p{margin-top:16px;font-size:18px;max-width:26rem}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:24px}}

/* Integrations + examples */
.integr{display:flex;flex-wrap:wrap;gap:10px}
.integr>span{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;background:var(--white);border:1px solid var(--line);color:var(--forest);font-weight:600;font-size:15px}
.examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ex{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:10px}
.ex h3{font-size:22px}
.ex .wmeta{margin-top:-2px}

/* Generic cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3{font-size:22px}
.card p{font-size:16px}
.card .ico{width:44px;height:44px;border-radius:12px;background:var(--pink);display:flex;align-items:center;justify-content:center;color:var(--forest)}
.card .ico svg{width:22px;height:22px}
.card.forest{background:var(--forest);border-color:var(--forest);color:var(--sage)}
.card.forest h3{color:var(--white)}
.card.wine{background:var(--wine);border-color:var(--wine);color:#F5D7E3}
.card.wine h3{color:var(--white)}
.card.pink{background:var(--pink);border-color:var(--pink);color:var(--forest)}
.card .bottom{margin-top:auto;padding-top:8px}
.card ul.ticks{display:grid;gap:8px;margin-top:4px}
.ticks li{position:relative;padding-left:28px;font-size:16px;color:var(--forest)}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--lime);border:1.5px solid var(--forest)}
.ticks li::after{content:"";position:absolute;left:6px;top:8px;width:5px;height:8px;border:solid var(--forest);border-width:0 2px 2px 0;transform:rotate(45deg)}
.dark .ticks li,.card.forest .ticks li{color:var(--white)}
.crosses li{position:relative;padding-left:28px;font-size:16px;color:var(--forest)}
.crosses li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--white);border:1.5px solid var(--input-line)}
.crosses li::after{content:"\00d7";position:absolute;left:5px;top:-1px;font-size:16px;color:var(--grey)}
.crosses{display:grid;gap:8px;margin-top:4px}
@media (max-width:1080px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cards,.cards-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.cards-4{grid-template-columns:minmax(0,1fr)}}

.stack{display:flex;flex-wrap:wrap;gap:10px}
.stack span{height:48px;padding:0 18px;border-radius:12px;display:inline-flex;align-items:center;background:var(--forest-raised);color:var(--white);border:1px solid var(--fade);font-weight:600}

/* Prose (legal + case study) */
.prose{max-width:46rem;color:var(--forest)}
.prose h2{font-size:28px;margin:48px 0 12px}
.prose h3{font-size:20px;margin:28px 0 8px}
.prose p,.prose li{font-size:17px;line-height:1.7;color:var(--grey)}
.prose p+p{margin-top:14px}
.prose ul{list-style:disc;padding-left:22px;margin-top:10px;display:grid;gap:6px}
.prose .updated{font-size:15px;color:var(--grey)}

/* Case study */
.cs-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.cs-hero .cover{aspect-ratio:auto;min-height:420px;border-radius:var(--r-section);padding:36px}
.cs-hero .cover .cn{font-size:clamp(40px,5vw,72px)}
.cs-facts{background:var(--white);border:1px solid var(--line);border-radius:var(--r-section);padding:32px;display:grid;gap:16px;align-content:start}
.cs-facts dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0}
.cs-facts dt{font-size:15px;color:var(--grey)}
.cs-facts dd{margin:0;font-size:16px;font-weight:600;color:var(--forest)}
@media (max-width:900px){.cs-hero{grid-template-columns:minmax(0,1fr)}.cs-hero .cover{min-height:280px}}

/* Locations page */
.loc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.loc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-section);padding:32px;display:flex;flex-direction:column;gap:16px}
.loc h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-0.035em}
.loc .lab{font-size:14px;font-weight:600;color:var(--grey)}
.loc address{font-style:normal;font-size:17px;color:var(--forest);line-height:1.55}
.loc .contact{display:grid;gap:6px;font-size:16px}
.loc.dark{background:var(--forest);border-color:var(--forest);color:var(--sage)}
.loc.dark h2,.loc.dark address{color:var(--white)}
@media (max-width:900px){.loc-cards{grid-template-columns:minmax(0,1fr)}.loc{padding:24px}}

/* Forms */
.form-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:start}
@media (max-width:980px){.form-wrap{grid-template-columns:minmax(0,1fr)}}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-section);padding:36px}
@media (max-width:620px){.form-card{padding:22px}}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.field .lbl{font-size:15px;font-weight:600;color:var(--forest)}
.field .help{font-size:14px}
.input{font-family:var(--f-body);font-size:16px;height:50px;padding:0 16px;border-radius:12px;border:1.5px solid var(--input-line);background:var(--white);color:var(--forest);width:100%}
.input::placeholder{color:var(--grey)}
.input:hover{border-color:var(--grey)}
.input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--lime)}
.input[aria-invalid="true"]{border-color:var(--wine);border-width:2px}
textarea.input{height:auto;min-height:130px;padding:14px 16px;resize:vertical}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111D11' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
input[type="file"].input{padding:12px 16px;height:auto}
.err{font-size:14px;color:var(--wine);font-weight:600;display:flex;gap:6px;align-items:center}
.err::before{content:"";width:8px;height:8px;background:var(--ember);border-radius:2px;transform:rotate(45deg);flex:none}
.err[hidden]{display:none}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{font-family:var(--f-body);font-size:15px;font-weight:500;height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--input-line);background:var(--white);color:var(--forest);cursor:pointer}
.pick button[aria-pressed="true"]{background:var(--forest);color:var(--white);border-color:var(--forest)}
.pick button:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--forest)}
.check input{width:20px;height:20px;accent-color:var(--forest);margin-top:3px;flex:none}
.stepper{display:flex;gap:6px;margin-bottom:28px}
.stepper i{flex:1;height:6px;border-radius:6px;background:var(--line)}
.stepper i.on{background:var(--forest)}
.stepper i.now{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--forest)}
.step-label{font-size:15px;font-weight:600;color:var(--grey);margin-bottom:6px}
.fstep{display:grid;gap:18px}
.fstep[hidden]{display:none}
.fstep h2{font-size:28px;letter-spacing:-0.025em}
.fnav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}
.saved{font-size:14px;color:var(--grey);margin-top:12px}
.review{display:grid;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.review div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:15px}
.review div:first-child{border-top:0}
.review dt,.review span{color:var(--grey)}
.review b{color:var(--forest);font-weight:600;word-break:break-word}
@media (max-width:520px){.review div{grid-template-columns:minmax(0,1fr);gap:2px}}
.thanks{text-align:center;padding:24px 0}
.thanks .big{font-family:var(--f-head);font-weight:700;font-size:clamp(36px,5vw,56px);letter-spacing:-0.035em;color:var(--forest);line-height:1.05}
.thanks p{margin:16px auto 0;max-width:30rem}
.notice{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15px;color:var(--forest)}
.notice[hidden]{display:none}
.side-photo{border-radius:var(--r-section);min-height:420px;background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:28px}
.side-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,29,17,.9),rgba(17,29,17,.1) 70%)}
.side-photo div{position:relative;color:var(--white)}
.side-photo b{font-family:var(--f-head);font-size:24px;display:block;line-height:1.2}
.side-photo p{color:#E6E3DA;margin-top:8px;font-size:16px}
@media (max-width:980px){.side-photo{min-height:260px}}

/* Login */
.login-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;min-height:calc(100svh - var(--header-h) - 40px);padding:20px 24px}
.login-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-section);padding:48px;display:flex;flex-direction:column;justify-content:center}
.login-card h1{font-size:clamp(34px,4vw,48px);letter-spacing:-0.035em}
.login-card form{display:grid;gap:16px;margin-top:28px}
.seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;height:40px;border:0;border-radius:9px;background:transparent;font-family:var(--f-body);font-weight:600;font-size:15px;color:var(--forest);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--white);box-shadow:0 1px 3px rgba(17,29,17,.15)}
.seg button:focus-visible{outline:3px solid var(--forest);outline-offset:1px}
@media (max-width:900px){.login-wrap{grid-template-columns:minmax(0,1fr)}.login-wrap .side-photo{display:none}.login-card{padding:28px}}

/* Support */
.status{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.status li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-top:1px solid var(--line);color:var(--forest);font-weight:500}
.status li:first-child{border-top:0}

/* Footer */
footer.site{background:var(--forest);color:var(--sage);padding:88px 0 0;overflow:hidden;margin-top:112px}
@media (max-width:820px){footer.site{margin-top:64px;padding-top:64px}}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px}
.fgrid h3{color:var(--white);font-size:15px;font-family:var(--f-body);font-weight:600;letter-spacing:0;margin-bottom:14px}
.fgrid ul{display:grid;gap:10px}
.fgrid ul a{color:var(--sage);text-decoration:none;font-size:15px}
.fgrid ul a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.fgrid ul a:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
.fbrand .logo{color:var(--white);font-size:32px}
.fbrand p{margin-top:14px;max-width:20rem;font-size:15px}
.fbrand .btn{margin-top:24px}
.fregions{margin-top:40px;font-size:15px;color:var(--white);font-weight:500}
.fbottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;border-top:1px solid var(--forest-raised);margin-top:24px;padding-top:24px;font-size:14px}
.fbottom ul{display:flex;flex-wrap:wrap;gap:8px 20px}
.bigmark{font-family:var(--f-head);font-weight:700;font-size:clamp(120px,27vw,400px);letter-spacing:-0.065em;line-height:.74;color:var(--fade);user-select:none;margin-top:40px;text-align:center;transform:translateY(8%)}
@media (max-width:980px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand{grid-column:1/-1}}

/* Cookie bar + toast */
.cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;max-width:520px;background:var(--black);color:var(--white);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:center;justify-content:space-between;box-shadow:0 16px 40px -12px rgba(0,0,0,.5);font-size:15px}
.cookie[hidden]{display:none}
.cookie a{color:var(--pink)}
.cookie button{font-family:var(--f-body);font-weight:600;font-size:15px;height:40px;padding:0 16px;border:0;border-radius:10px;background:var(--lime);color:var(--forest);cursor:pointer;flex:none}
.cookie button:focus-visible{outline:3px solid var(--white);outline-offset:2px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);opacity:0;z-index:80;background:var(--forest);color:var(--white);padding:12px 18px;border-radius:12px;font-size:15px;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Preview router */
.page[hidden]{display:none}
.fset{display:contents}
.fset[hidden]{display:none}
.loc.dark .lab{color:var(--sage)}
.scr .slots span.off{color:var(--grey)}
.device .tag-planned{background:var(--white);color:var(--grey);border-color:var(--input-line)}
.device .tag-planned::before{border-color:var(--grey)}
.device{color:var(--forest)}
.cover{background-size:cover;background-position:center}
.work:not(.work-3) .cover{aspect-ratio:2/1}
.demo-stage .device.browser{width:min(540px,100%)}
.demo-stage .device{width:min(320px,100%)}
/* Feature ticks (replace status labels) */
.feat li,.group li,.pcard li{justify-content:flex-start;gap:12px}
.feat li::before,.group li::before,.pcard li::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid var(--forest);background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23111D11' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.fcard .k{justify-content:flex-start}
.mega-foot>span{color:var(--grey)}
@media (max-width:560px){.price-card li{flex-direction:column;align-items:flex-start;gap:6px}.price-card li .amt{text-align:left;white-space:normal}}
@media (max-width:400px){.chip{white-space:normal;height:auto;min-height:34px;padding:6px 14px;line-height:1.3}}
.status li .tag{white-space:normal;height:auto;min-height:28px;padding:5px 11px;text-align:center}
.cta-sec{padding:112px 0 0}
@media (max-width:820px){.cta-sec{padding:64px 0 0}}
@media (max-width:900px){.stats>div:first-child,.stats .stat{flex:none}}
@media (max-width:980px){.hero-copy{padding-top:104px}.phero-copy{padding-top:96px}}
.tools-card{padding:56px 48px}
@media (max-width:620px){.tools-card{padding:32px 22px}}
.cs-hero .cover .cn{font-size:clamp(32px,4vw,56px)}


/* ===== Hero: wider container ===== */
.wrap-wide{max-width:1440px}
.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.hero .bg{transform:none;transition:opacity 900ms cubic-bezier(.4,0,.2,1)}
.hero .bg.on{transform:none}
.hero .shade{background:linear-gradient(90deg,rgba(17,29,17,.95) 0%,rgba(17,29,17,.82) 40%,rgba(17,29,17,.35) 72%,rgba(17,29,17,.2) 100%),linear-gradient(0deg,rgba(17,29,17,.6) 0%,transparent 45%)}
.hero-copy{padding:72px;max-width:860px}
.floats .fset{display:contents}
.floats .fset[hidden]{display:none}
.floats .fset>*{animation:none}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.fcard .k{justify-content:flex-start}
@media (min-width:1101px){.for{flex-wrap:nowrap}}
.for button{padding:0 15px}
@media (max-width:1100px){.hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.hero-copy{padding:56px}}
@media (max-width:980px){.hero{grid-template-columns:minmax(0,1fr)}.hero-copy{padding:104px 28px 24px}}
@media (max-width:620px){.for{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-28px;padding:4px 28px 4px 2px}.for::-webkit-scrollbar{display:none}.for>span{flex:none}.for button{flex:none}}
/* Collapse doubled spacing between same-colour sections */
.section.s-paper + .section.s-paper,.section.s-paper-light + .section.s-paper-light,.section.s-paper + .cta-sec.s-paper{padding-top:0}
@media (max-width:980px){
  .demo-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:2px 24px 6px}
  .demo-tabs::-webkit-scrollbar{display:none}
  .demo-tabs [role="tab"]{flex:none;padding:10px 16px;border-radius:999px}
  .demo-tabs [role="tab"] b{font-size:15px}
  .demo-tabs [role="tab"] small{display:none}
  .demo{gap:16px}
}
.photo-card .shade{background:linear-gradient(90deg,rgba(17,29,17,.95) 0%,rgba(17,29,17,.88) 40%,rgba(17,29,17,.5) 68%,rgba(17,29,17,.25) 100%),linear-gradient(0deg,rgba(17,29,17,.6) 0%,transparent 45%)}
@media (max-width:980px){.photo-card .shade{background:linear-gradient(0deg,rgba(17,29,17,.96) 0%,rgba(17,29,17,.85) 55%,rgba(17,29,17,.45) 100%)}}
.statement .shade{background:linear-gradient(0deg,rgba(17,29,17,.95) 0%,rgba(17,29,17,.6) 50%,rgba(17,29,17,.2) 100%)}
.demo-cta{padding:48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.demo-cta h2{color:var(--white);font-size:clamp(28px,3.4vw,44px);letter-spacing:-0.03em}
.demo-cta p{color:#E6E3DA;margin-top:12px;max-width:34rem;font-size:18px}
@media (max-width:620px){.demo-cta{padding:28px}.demo-cta .btn{width:100%}}
.phero-copy{padding:64px 72px}
@media (max-width:980px){.phero-copy{padding:96px 28px 28px}}
@media (max-width:620px){.wrap.wrap-wide{padding:0 12px}}

/* ===== Live site mockups ===== */
.bframe{background:var(--white);border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(17,29,17,.45);min-width:0}
.bbar{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#F2EFE6;border-bottom:1px solid var(--line)}
.bbar i{width:10px;height:10px;border-radius:50%;background:#DCD7CA;flex:none}
.bbar span{margin-left:10px;flex:1;min-width:0;height:22px;border-radius:6px;background:var(--white);border:1px solid var(--line);font-size:13px;color:var(--grey);display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bscreen{aspect-ratio:16/10;background-color:#EEEBE3;background-size:cover;background-position:top center;background-repeat:no-repeat}
.bframe.tall .bscreen{aspect-ratio:auto;height:min(640px,72vh);background-size:100% auto;background-position:center 0;animation:shotscroll 46s ease-in-out infinite alternate}
.bframe.tall:hover .bscreen{animation-play-state:paused}
@keyframes shotscroll{0%,6%{background-position:center 0}94%,100%{background-position:center 100%}}
.bframe.wide .bscreen{aspect-ratio:1360/760}
.dark .bframe{border-color:var(--fade);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.pframe{width:210px;border-radius:32px;border:7px solid var(--forest);overflow:hidden;background:var(--white);box-shadow:0 30px 60px -20px rgba(17,29,17,.55)}
.pscreen{aspect-ratio:390/844;background-size:cover;background-position:top center;background-color:#EEEBE3}
.pframe.inline{width:170px}
/* work card shot */
.wshot{position:relative;background:var(--paper);border-radius:14px;padding:14px 14px 0;overflow:hidden}
.wshot .bframe{border-radius:10px 10px 0 0;border-bottom:0;box-shadow:0 18px 40px -24px rgba(17,29,17,.5);transition:transform .35s ease}
a.wcard:hover .wshot .bframe{transform:translateY(-6px)}
.wshot .chip{position:absolute;left:24px;top:56px;height:28px;font-size:13px}
.wshot .bbar{height:28px}.wshot .bbar span{height:18px;font-size:13px}
/* case study */
.cs-hero-shot{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);align-items:start}
.cs-show{position:relative;padding:0 56px 48px 0}
.cs-show .pframe{position:absolute;right:0;bottom:0;width:190px;z-index:2}
@media (max-width:900px){.cs-hero-shot{grid-template-columns:minmax(0,1fr)}.cs-show{padding:0 40px 40px 0}.cs-show .pframe{width:130px;border-width:5px;border-radius:24px}.bframe.tall .bscreen{height:min(460px,62vh)}}
/* 3D feature */
.feature-3d{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:56px;align-items:center}
.feature-3d .kick{display:block}
@media (max-width:980px){.feature-3d{grid-template-columns:minmax(0,1fr);gap:28px}}
/* showcase strip */
.strip{overflow:hidden;padding:8px 0 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip-track{--loop-gap:28px;display:flex;gap:28px;width:max-content;animation:slide 70s linear infinite}
.strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
.sitem{display:block;width:480px;flex:none;text-decoration:none;color:inherit}
.sitem .bframe{transition:transform .3s ease}
.sitem:hover .bframe{transform:translateY(-6px)}
.sitem:focus-visible{outline:3px solid var(--forest);outline-offset:6px;border-radius:14px}
.scap{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:15px}
.scap b{font-family:var(--f-head);font-weight:600;color:var(--forest);font-size:17px}
@media (max-width:620px){.sitem{width:300px}.strip-track{--loop-gap:18px;gap:18px}}
.ex .bframe{margin-bottom:8px}
@media (prefers-reduced-motion:reduce){.strip{overflow-x:auto}.strip-track{animation:none}.bframe.tall .bscreen{animation:none}}

/* ===== Menu icons ===== */
.mi{width:38px;height:38px;flex:none;border-radius:11px;background:var(--paper);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--forest);transition:background-color .15s,border-color .15s}
.mi svg{width:19px;height:19px}
.menu a:hover .mi,.menu a:focus-visible .mi{background:var(--lime);border-color:var(--forest)}
.menu a{align-items:center}
.menu .mi+span small{margin-top:1px}

/* ===== Partners grid ===== */
.brands-all{grid-template-columns:repeat(2,minmax(0,1fr))}
.brands-all .brand:first-child{grid-column:1/-1}
.brand-pink{background:var(--pink);color:var(--forest)}
.brand-pink .name,.brand-pink p{color:var(--forest)}
.brand-lime{background:var(--lime);color:var(--forest)}
.brand-lime .name,.brand-lime p{color:var(--forest)}
.brand-lime .chip:not(.chip-plain){background:var(--forest);color:var(--lime)}
.brand-pink .round,.brand-lime .round{background:var(--forest);color:var(--white)}
.brand-pink .round:focus-visible,.brand-lime .round:focus-visible{outline-color:var(--forest)}
@media (max-width:900px){.brands-all{grid-template-columns:minmax(0,1fr)}}

/* ===== Locations: five ===== */
.locs{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1080px){.locs{grid-template-columns:repeat(3,minmax(0,1fr))}.locs li,.locs li+li{padding:24px 16px 24px 0;border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:820px){.locs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Page hero spacing + side card ===== */
.phero-sec{padding-bottom:20px}
.hcard{background:var(--white);border-radius:22px;padding:22px;width:min(380px,100%);box-shadow:0 30px 60px -20px rgba(0,0,0,.55);color:var(--forest);margin-bottom:48px}
.hcard .hc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.hcard .hc-top b{font-family:var(--f-head);font-size:18px}
.hcard ol{display:grid;gap:10px}
.hcard li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}
.hcard li i{width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--input-line);font-style:normal;font-size:12px;font-weight:700}
.hcard li.done i{background:var(--forest);border-color:var(--forest);color:var(--lime)}
.hcard li.now i{background:var(--lime);border-color:var(--forest);color:var(--forest)}
.hcard li small{margin-left:auto;color:var(--grey);font-size:13px}
.hcard .fi{margin-top:16px;display:flex;align-items:center;gap:10px;background:var(--forest);color:var(--white);border-radius:14px;padding:12px 14px;font-size:14px}
.hcard .fi svg{width:20px;height:20px;color:var(--lime);flex:none}
@media (max-width:980px){.hcard{margin:0 auto 28px}}

/* ===== Frontier Intelligence ===== */
.fi-sec{position:relative;overflow:hidden}
.fi-badge{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:var(--lime);color:var(--forest);font-weight:700;font-size:14px;margin-bottom:18px}
.fi-badge svg{width:18px;height:18px}
.fi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.fi-card{background:var(--forest-raised);border:1px solid var(--fade);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:12px}
.fi-card h3{color:var(--white);font-size:22px}
.fi-card p{color:var(--sage);font-size:16px}
.fi-card .n{font-family:var(--f-head);font-weight:700;color:var(--lime);font-size:15px}
.fi-line{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--sage);font-size:15px}
.fi-line span{background:var(--forest-raised);border:1px solid var(--fade);color:var(--white);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px}
@media (max-width:900px){.fi-grid{grid-template-columns:minmax(0,1fr)}}
/* Announcement bar (CMS) */
.announce{background:var(--forest);color:var(--lime);text-align:center;font-size:15px;font-weight:600;padding:10px 16px}
.announce a{color:var(--lime);text-decoration:none}
.announce a:hover{text-decoration:underline;text-underline-offset:3px}
.announce a:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}

/* ===================== Motion and touch polish ===================== */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.65,0,.35,1)}
*{-webkit-tap-highlight-color:transparent}
a,button,summary,label,[role="tab"],input,select{touch-action:manipulation}
:focus:not(:focus-visible){outline:none}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),summary:focus:not(:focus-visible){box-shadow:none}

/* Buttons and links */
.btn,.round,.chip,.icon-btn,.burger,.nav-btn,.login{transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out),transform .2s var(--ease-out),box-shadow .25s var(--ease-out)}
.btn:active,.round:active,.burger:active,.nav-btn:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}.round:hover{transform:translateY(-2px) rotate(-8deg)}}
.link{transition:color .2s,text-decoration-color .2s,text-underline-offset .2s}
@media (hover:hover){.link:hover{text-underline-offset:5px}}

/* Header */
.top{transition:box-shadow .35s var(--ease-out),background-color .35s var(--ease-out),border-color .35s}
.top.scrolled{box-shadow:0 10px 30px -18px rgba(17,29,17,.35)}

/* Desktop menus: fade and slide instead of popping */
.menu[hidden]{display:block}
.menu{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.985);transform-origin:top left;transition:opacity .22s var(--ease-out),transform .3s var(--ease-out),visibility 0s linear .3s}
.menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .22s var(--ease-out),transform .3s var(--ease-out),visibility 0s}
.menu.open a,.menu.open .menu-foot{animation:none}
.menu.open a:nth-child(2){animation-delay:.03s}.menu.open a:nth-child(3){animation-delay:.06s}.menu.open a:nth-child(4){animation-delay:.09s}
.menu.open a:nth-child(5){animation-delay:.12s}.menu.open a:nth-child(6){animation-delay:.15s}.menu.open a:nth-child(7){animation-delay:.18s}
@keyframes mIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.menu a{transition:background-color .2s var(--ease-out)}
.nav-btn svg{transition:transform .3s var(--ease-out)}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Mobile menu: slides in, items follow */
.drawer[hidden]{display:block}
.drawer{transform:translateX(100%);visibility:hidden;transition:transform .45s var(--ease-out),visibility 0s linear .45s;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);overscroll-behavior:contain}
.drawer.open{transform:none;visibility:visible;transition:transform .45s var(--ease-out),visibility 0s}
.drawer.open .drawer-top,.drawer.open details,.drawer.open .plain,.drawer.open .drawer-cta{animation:none}
.drawer.open details:nth-of-type(1){animation-delay:.06s}.drawer.open details:nth-of-type(2){animation-delay:.1s}.drawer.open details:nth-of-type(3){animation-delay:.14s}
.drawer.open .plain{animation-delay:.18s}.drawer.open .drawer-cta{animation-delay:.24s}
@keyframes dIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.drawer-scrim{position:fixed;inset:0;z-index:59;background:rgba(17,29,17,.35);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
.drawer-scrim.on{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}

/* Accordions (mobile menu and FAQs): smooth open and close */
.drawer details,.faq details{overflow:hidden}
.drawer summary::after,.faq summary::after{transition:transform .35s var(--ease-out)}
.drawer details[open] summary::after,.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq details{transition:border-color .25s,box-shadow .25s}
@media (hover:hover){.faq details:hover{border-color:var(--input-line)}}

/* Tabs: content fades in */
[role="tabpanel"]:not([hidden]){animation:fadeUp .4s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Cards lift on hover (mouse only) */
@media (hover:hover){
  .pcard,.wcard,.ex,.brand,.loc,.fi-card,.card,.kpi{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s}
  a.wcard:hover,.pcard:hover,.ex:hover,.brand:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(17,29,17,.45)}
}

/* Scroll reveal */
.rv{opacity:0;translate:0 12px;transition:opacity .5s var(--ease-out),translate .6s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.rv.in{opacity:1;translate:none}

@media (prefers-reduced-motion:reduce){.rv{opacity:1;translate:none}.menu,.drawer,.drawer-scrim{transition:none!important}.menu.open a,.drawer.open *{animation:none!important}}

/* Boply identity: outlined artwork keeps the logo independent of fonts. */
.logo{display:inline-flex;align-items:center;flex-shrink:0}
.logo .brand-logo{display:block;width:132px;height:38px;max-width:100%;flex-shrink:0}
.fbrand .logo .brand-logo{width:152px;height:44px}
.bigmark{font-size:inherit;line-height:0;letter-spacing:normal}
.bigmark .brand-wordmark{display:block;width:min(92vw,1120px);height:auto;margin:0 auto;fill:currentColor}


/* Typography refinement: shared by static pages and CMS-published pages.
   Keep controls, device previews, colours and interaction styles unchanged. */
:root{
  --type-home:clamp(42px,5.8vw,64px);
  --type-page:clamp(34px,4.2vw,48px);
  --type-section:clamp(28px,3.2vw,36px);
  --type-cta:clamp(32px,3.8vw,44px);
}
.hero h1{font-size:var(--type-home);line-height:1.08;max-width:10ch}
.hero h1 .accent{font-size:1.04em}
.phero h1,.simple-hero h1{font-size:var(--type-page);line-height:1.12}
.head h2,.stats h2,.split h2,.locs-head h2{font-size:var(--type-section);line-height:1.15;font-weight:600}
.hero-sub,.phero .lede,.simple-hero .lede{font-size:18px;line-height:1.6}
.head p,.stats .lead,.split .side p,.way p,.brand p,.demo-cta p{font-size:17px;line-height:1.6}
.panel h3,.pcard.lg h3{font-size:26px;line-height:1.2;font-weight:600}
.way h3{font-size:clamp(24px,2.5vw,28px);line-height:1.2;font-weight:600}
.brand .name{font-size:clamp(26px,2.7vw,32px);line-height:1.15;font-weight:600}
.loc h2{font-size:28px;line-height:1.2;font-weight:600}
.locs .c{font-size:26px;line-height:1.2;font-weight:600}
.cs-hero .cover .cn{font-size:clamp(26px,3vw,36px);line-height:1.15}
.statement blockquote{font-size:clamp(28px,3.5vw,42px);line-height:1.2}
.cta h2{font-size:var(--type-cta);line-height:1.15}
.cta p{font-size:18px;line-height:1.6;margin-top:16px}
.demo-cta h2{font-size:var(--type-section);line-height:1.15}
.prose h2{font-size:24px;line-height:1.25;margin-top:36px;font-weight:600}
.fstep h2{font-size:24px;line-height:1.25;font-weight:600}
.login-card h1{font-size:clamp(30px,3.2vw,38px);line-height:1.15}
.section{padding:88px 0}
.section-tight{padding:60px 0}
.head{margin-bottom:36px}
.ways{margin-bottom:72px}
.way{min-height:300px;padding:32px;gap:16px}
.brand{min-height:300px;padding:30px;gap:16px}
.simple-hero{padding:64px 0 36px}
.cta-sec{padding:88px 0 0}
.cta{padding:72px 40px}
.cta .btns{margin-top:28px}
.cta .pill-row{margin-bottom:22px}
.phero{min-height:480px}
.phero-copy{padding:48px 64px}
.phero-compact{min-height:380px}
.phero-compact .phero-copy{max-width:800px}
.hero{min-height:min(680px,calc(100svh - var(--header-h) - 40px))}
.hero-copy{padding:56px;max-width:800px}
.hero .btns,.phero .btns{margin-top:26px}
.for{margin-top:30px}
.cookie{max-width:460px;padding:12px 14px;gap:12px;font-size:14px;line-height:1.5}
.cookie button{font-size:14px;min-height:40px}
.legal-page .simple-hero{padding-bottom:24px}
.legal-page .simple-hero h1{font-size:clamp(32px,3.4vw,40px)}
.legal-page .section{padding-top:24px}

/* Form is first in source order; retain its desktop position beside the context. */
.form-wrap>.form-card{grid-column:2;grid-row:1;min-width:0}
.form-wrap>.form-context{grid-column:1;grid-row:1;min-width:0}
@media (max-width:1100px){.hero-copy{padding:48px}}
@media (max-width:980px){
  .hero,.phero,.phero-compact{min-height:0}
  .hero-copy{padding:72px 28px 24px}
  .phero-copy{padding:64px 28px 28px}
  .phero-compact .phero-copy{padding:48px 28px}
  .form-wrap>.form-card{grid-column:1;grid-row:1}
  .form-wrap>.form-context{grid-column:1;grid-row:2}
}
@media (max-width:820px){
  .section{padding:52px 0}
  .section-tight{padding:40px 0}
  .head{gap:14px;margin-bottom:28px}
  .ways{margin-bottom:48px}
  .way,.brand{padding:26px;min-height:0}
  .simple-hero{padding:40px 0 28px}
  .cta-sec{padding:52px 0 0}
}
@media (max-width:620px){
  :root{--type-section:26px}
  .hero-sub,.phero .lede,.simple-hero .lede,.cta p{font-size:17px}
  .hero-copy{padding:64px 24px 24px}
  .phero-copy{padding:56px 24px 24px}
  .phero-compact .phero-copy{padding:40px 24px}
  .floats{padding:0 24px 28px}
  .for{margin-right:-24px;padding-right:24px;margin-top:24px}
  .phero-visual{padding:0 24px}
  .cta{padding:48px 24px}
  .panel h3,.pcard.lg h3,.fstep h2{font-size:24px}
  .brand .name,.loc h2{font-size:26px}
  .locs .c{font-size:24px}
}
/* Preserve the existing adjacent-section spacing rule after the overrides. */
.section.s-paper + .section.s-paper,.section.s-paper-light + .section.s-paper-light,.section.s-paper + .cta-sec.s-paper{padding-top:0}

/* Keep the updated project URL readable at every breakpoint. */
.cs-facts dd{min-width:0;overflow-wrap:anywhere}.cs-facts dd a{text-underline-offset:3px}

/* Stable motion layers. Grid overlap reserves the tallest hero card set. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
.motion-ready .floats{display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
.motion-ready .floats .fset{display:flex;grid-area:1/1;flex-direction:column;gap:14px;align-items:flex-end;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,6px,0);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),visibility 0s linear .6s}
.motion-ready .floats .fset.active{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),visibility 0s}
@media(max-width:980px){.motion-ready .floats .fset{align-items:stretch}}
/* Pan a composited image layer instead of repainting background-position. */
.bframe.tall .bscreen{animation:none;position:relative;overflow:hidden}
.bframe.tall .bscreen.motion-shot::before{content:"";position:absolute;inset:0 0 auto;height:var(--shot-height,100%);background-image:inherit;background-size:100% auto;background-position:top center;background-repeat:no-repeat;animation:shotpan 46s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
@keyframes shotpan{0%,6%{transform:translate3d(0,0,0)}94%,100%{transform:translate3d(0,var(--shot-travel,0px),0)}}
.bframe.tall:hover .bscreen::before,.bframe.tall:focus-within .bscreen::before{animation-play-state:paused}
.motion-offscreen .strip-track,.motion-offscreen .marquee-track,.motion-offscreen .bscreen::before,.motion-paused .strip-track,.motion-paused .marquee-track,.motion-paused .bscreen::before{animation-play-state:paused!important}
.motion-offscreen .bscreen::before{will-change:auto}
/* Avoid two hover lifts on the same project card. */
a.wcard:hover .wshot .bframe{transform:none}
@media(hover:hover) and (pointer:fine){a.wcard:hover,.pcard:hover,.ex:hover,.brand:hover{transform:translateY(-2px)}}
@media(hover:none){a.wcard:hover,.pcard:hover,.ex:hover,.brand:hover,.sitem:hover .bframe{transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-ready .floats .fset{transform:none;transition:none}
  .bframe.tall .bscreen.motion-shot::before{animation:none;will-change:auto}
  .rv{opacity:1;translate:none}
}
@media print{.rv{opacity:1;translate:none}}

/* Rendering budget: preserve native scrolling and avoid full-screen blur passes. */
html{scroll-behavior:auto}
.top{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}
.top.scrolled{box-shadow:none}
.for button{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(17,29,17,.82)}
.for button[aria-pressed="true"]{background:var(--lime)}
/* A bounded native gallery replaces the continuously moving image wall. */
.strip{overflow-x:auto;overflow-y:hidden;mask-image:none;-webkit-mask-image:none;scrollbar-width:thin;overscroll-behavior-x:contain;padding-inline:24px}
.strip-track{animation:none;width:max-content;transform:none}
.sitem .bframe,.wshot .bframe{transition:none}
/* Keep hover feedback on a single compositor-friendly property. */
.pcard,.wcard,.ex,.brand,.loc,.fi-card,.card,.kpi{transition:transform .28s cubic-bezier(.25,.1,.25,1),border-color .2s}
@media(hover:hover) and (pointer:fine){a.wcard:hover,.pcard:hover,.ex:hover,.brand:hover{box-shadow:none;transform:translateY(-2px)}}
.btn,.round,.chip,.icon-btn,.burger,.nav-btn,.login{transition:background-color .2s,color .2s,border-color .2s,transform .25s cubic-bezier(.25,.1,.25,1)}
/* Content stays in its final position while scrolling. */
.rv{opacity:1;translate:none;transition:none}
[role="tabpanel"]:not([hidden]){animation:panelFade .3s ease both}
@keyframes panelFade{from{opacity:0}to{opacity:1}}
.menu{transform:translate3d(0,4px,0);transition:opacity .22s ease,transform .28s cubic-bezier(.25,.1,.25,1),visibility 0s linear .28s}
.menu.open{transform:translate3d(0,0,0);transition:opacity .22s ease,transform .28s cubic-bezier(.25,.1,.25,1),visibility 0s}
.drawer{transition:transform .35s cubic-bezier(.25,.1,.25,1),visibility 0s linear .35s}
.drawer.open{transform:translate3d(0,0,0);transition:transform .35s cubic-bezier(.25,.1,.25,1),visibility 0s}
/* Only two hero photographs are promoted during a crossfade. */
.hero .bg{transition:opacity .65s ease;will-change:auto}
.hero .bg.on,.hero .bg.leaving{will-change:opacity}
.motion-ready .floats .fset{transform:none;transition:opacity .4s ease,visibility 0s linear .4s}
.motion-ready .floats .fset.active{transform:none;transition:opacity .4s ease,visibility 0s}
/* Large screenshot pans run only on deliberate desktop hover. */
.bframe.tall .bscreen.motion-shot::before{animation-play-state:paused;will-change:auto}
@media(hover:hover) and (pointer:fine){.bframe.tall:hover .bscreen.motion-shot::before{animation-play-state:running;will-change:transform}}
.marquee-track{transform:translate3d(0,0,0);will-change:transform}
.motion-offscreen .marquee-track,.motion-paused .marquee-track{will-change:auto}
@media(prefers-reduced-motion:reduce){.hero .bg,.motion-ready .floats .fset{transition:none}.marquee-track{animation:none;will-change:auto}}