:root{--paper:#f7f8f5;--ink:#202521;--muted:#606862;--line:#d8ddd6;--signal:#d8fa74;--dark:#17221d;--pad:clamp(22px,5vw,88px);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #6b8c23;outline-offset:5px}::selection{background:var(--signal);color:var(--ink)}img,svg{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,sans-serif}h1,h2{letter-spacing:-.065em;line-height:1.05;font-weight:600}h2{font-size:clamp(38px,4.9vw,74px)}p{ text-wrap:pretty}section{scroll-margin-top:0}.wrap{padding-inline:var(--pad);max-width:1800px;margin:auto}.skip{position:fixed;top:-100px;left:20px;background:var(--signal);padding:12px;z-index:100}.skip:focus{top:10px}.site-nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(247,248,245,.96);z-index:20;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand img{width:44px;height:44px;object-fit:contain}.brand span{font-size:14px;line-height:1.3;border-left:1px solid #b9c1b9;padding-left:12px;max-width:100px}.nav-links{display:flex;align-items:center;gap:30px;font-size:14px}.nav-links>a:not(.button){position:relative}.nav-links>a:not(.button):after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:width .2s}.nav-links>a:hover:after{width:100%}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:50px;padding:13px 22px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;border:1px solid transparent;border-radius:5px;transition:background .2s,transform .2s}.button:hover{background:#354d3a;transform:translateY(-2px)}.button.light{background:var(--signal);color:var(--ink)}.button.light:hover{background:#c4e761}.button.outline{background:transparent;color:inherit;border-color:var(--line)}.button.outline:hover{background:#e9ede5}.arrow{font-size:22px;line-height:1;font-weight:400}.menu-button{display:none}.hero{padding-top:54px;overflow:hidden}.hero-topline{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);align-items:center}.eyebrow{font-size:12px;font-weight:550;letter-spacing:.04em;display:flex;align-items:center;gap:9px}.dot{width:7px;height:7px;border-radius:50%;background:#527536;display:inline-block}.hero-grid{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:20px;min-height:610px}.hero-copy{padding:50px 0 70px;z-index:1}.hero h1{font-size:clamp(58px,5.9vw,100px);line-height:1.03}.hero h1 .mk{color:#6b766c}.hero-copy p{max-width:465px;font-size:18px;color:var(--muted);margin:30px 0}.actions{display:flex;gap:12px;flex-wrap:wrap}.text-link{display:inline-flex;align-items:center;gap:20px;font-weight:600;font-size:14px;padding:12px 0;border-bottom:1px solid currentColor}.hero-art{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}.system-art{width:112%;max-width:none;overflow:visible}.art-label{font:500 12px 'DM Sans',sans-serif;fill:#566459;letter-spacing:1px}.art-title{font:600 19px Manrope,sans-serif;fill:#293c30;letter-spacing:-.5px}.layer{transition:transform .65s var(--ease)}.hero-art:hover .layer-top{transform:translateY(-9px)}.hero-art:hover .layer-bottom{transform:translateY(9px)}.art-caption{position:absolute;bottom:42px;right:6px;font-size:11px;color:var(--muted)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;padding:23px 0;border-top:1px solid var(--line);gap:22px;font-size:12px;color:var(--muted)}.hero-bottom strong{font-weight:600;color:var(--ink)}.hero-bottom a{color:var(--ink)}.intro{background:var(--dark);color:var(--paper);padding-block:100px}.intro-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:12vw}.intro h2{font-size:clamp(36px,4vw,60px);max-width:570px}.intro h2 .lime,.intro h2 .ln span span{color:var(--signal)}.intro-copy>p{color:#bac8be;font-size:18px;max-width:600px}.capabilities{display:grid;grid-template-columns:1fr 1fr;margin-top:35px;gap:20px 32px}.capability{border-top:1px solid #405048;padding-top:18px}.capability h3{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}.capability p{font-size:13px;color:#b8c5bb;max-width:250px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:50px}.section-head>p{max-width:340px;color:var(--muted)}.section-head .eyebrow{margin-bottom:18px}.products{padding-block:110px}.product-shell{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#eff2eb}.product-tabs{padding:18px;background:#e5ebe1;display:flex;flex-direction:column;gap:6px}.product-tab{width:100%;border:0;background:transparent;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:21px 17px;border-radius:5px;color:#475747;font-size:17px}.product-tab[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 2px 4px #152a1409}.product-tab span:first-child{font-weight:600}.product-tab:hover{background:#f7f8f577}.product-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:35px;padding:48px;align-items:center;min-height:395px}.product-panel[hidden]{display:none}.product-panel h3{font-size:32px;letter-spacing:-.045em;margin:14px 0}.product-panel p{font-size:15px;color:#526050}.product-panel .text-link{margin-top:25px}.mini-diagram{height:265px;display:flex;align-items:center;justify-content:center;position:relative}.diagram-center{width:125px;height:125px;background:var(--dark);color:var(--signal);border-radius:26px;display:grid;place-content:center;text-align:center;font-family:Manrope;font-size:25px;z-index:2;box-shadow:0 18px 40px #23342018}.diagram-center small{display:block;font-size:10px;color:#d2dbd3;margin-top:6px}.orbit{position:absolute;border:1px solid #b6c4b0;width:245px;height:245px;border-radius:50%}.orbit:after{content:'';position:absolute;inset:25px;border:1px dashed #b6c4b0;border-radius:50%}.node{position:absolute;background:#f7f8f5;border:1px solid #d3dccd;padding:8px 13px;border-radius:5px;font-size:11px;z-index:3}.node.n1{top:4px;left:30%}.node.n2{right:-5px;top:44%}.node.n3{bottom:5px;left:28%}.node.n4{left:-15px;top:44%}.product-more{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;align-items:center;font-size:12px;color:var(--muted)}.product-more strong{margin-right:10px;font-weight:500}.product-more a{border:1px solid var(--line);padding:7px 12px;border-radius:4px;transition:background .2s}.product-more a:hover{background:#e1e9d8}.build{background:#e6eddf;padding-block:95px}.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:9vw}.build-copy>p{margin:26px 0 28px;color:#53614e;max-width:470px}.build-copy .eyebrow{margin-bottom:20px}.process{display:flex;flex-direction:column}.process details{border-top:1px solid #bac8b2}.process details:last-child{border-bottom:1px solid #bac8b2}.process summary{display:flex;align-items:center;gap:20px;padding:23px 0;font-family:Manrope;font-size:21px;letter-spacing:-.03em;font-weight:600;cursor:pointer;list-style:none}.process summary::-webkit-details-marker{display:none}.process summary small{font-size:11px;color:#5e6a57;letter-spacing:0}.process summary:after{content:'+';margin-left:auto;font-size:24px;font-weight:400}.process details[open] summary:after{content:'−'}.process details p{padding:0 30px 25px 37px;font-size:14px;color:#53614e;max-width:480px}.work{padding-block:110px}.work-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}.case{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#eff2eb}.case-photo{height:350px;position:relative;overflow:hidden}.case-photo img{width:100%;height:100%;object-fit:cover}.case-photo:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#132016aa)}.case-photo .case-stamp{position:absolute;left:26px;bottom:22px;color:#fafbf6;font-size:12px;z-index:1}.case-body{padding:30px}.case h3{font-size:clamp(23px,2.2vw,33px);letter-spacing:-.04em;line-height:1.2;max-width:490px}.case p{margin-top:16px;color:var(--muted);font-size:14px;max-width:520px}.status{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.05em;font-weight:600;border:1px solid #ccd8c6;padding:4px 8px;border-radius:4px;margin-bottom:18px}.status:before{content:'';width:5px;height:5px;background:#4d713c;border-radius:50%}.case-system{height:350px;background:#dce7d2;display:grid;place-content:center;position:relative;overflow:hidden}.job-count{font:500 clamp(50px,5vw,80px)/1.1 Manrope;letter-spacing:-.065em;z-index:1}.case-system>span{text-align:center;color:#51624a;font-size:12px;margin-top:12px;z-index:1}.case-system:before,.case-system:after{content:'';position:absolute;width:420px;height:420px;border:1px solid #b9cbaa;border-radius:50%;top:-45px;left:calc(50% - 210px)}.case-system:after{inset:-105px auto auto calc(50% - 270px);width:540px;height:540px}.case-list{margin-top:25px}.case-list details{border-bottom:1px solid var(--line)}.case-list summary{display:flex;gap:25px;align-items:center;list-style:none;padding:24px 0;cursor:pointer;font-size:17px}.case-list summary:after{content:'+';margin-left:auto}.case-list details[open] summary:after{content:'−'}.case-list .status{margin:0;min-width:85px;justify-content:center}.case-list details>p{padding:0 0 24px 110px;font-size:14px;color:var(--muted);max-width:760px}.work-note{font-size:11px;color:var(--muted);margin-top:22px}.centre{position:relative;color:var(--paper);min-height:660px;display:flex;align-items:flex-end;padding-block:70px;background:var(--dark)}.centre>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.centre:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#111e18ed,#17231b70),linear-gradient(0deg,#17221dc9,transparent)}.centre-content{position:relative;z-index:1;max-width:710px}.centre h2{margin:20px 0 24px}.centre p{max-width:500px;color:#d2dcd3;margin-bottom:30px}.centre .eyebrow{color:var(--signal)}.centre-note{position:absolute;bottom:70px;right:var(--pad);z-index:1;max-width:260px;border-top:1px solid #8a988c;padding-top:16px;color:#d2dcd3;font-size:12px}.labs{padding-block:100px;background:#eef1e9}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.lab-card{padding:35px;background:var(--paper);border:1px solid var(--line);border-radius:8px;display:grid;grid-template-columns:1fr auto;gap:20px}.lab-card h3{font-size:25px;letter-spacing:-.04em}.lab-card p{font-size:14px;color:var(--muted);margin-top:14px;max-width:430px}.lab-rule{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;font-size:12px;color:#54644f}.wave{display:flex;align-items:center;gap:4px;height:80px;width:100px}.wave i{display:block;width:5px;background:#526b3b;height:var(--h);border-radius:3px}.doc-art{width:82px;height:88px;border:1px solid #a5b69a;border-radius:5px;padding:16px;transform:rotate(6deg)}.doc-art i{display:block;height:3px;margin:8px 0;background:#a5b69a}.doc-art i:last-child{width:60%;background:#526b3b}.impact{padding-block:100px;display:grid;grid-template-columns:1fr 1.3fr;gap:10vw}.impact blockquote{font:500 clamp(26px,3vw,43px)/1.25 Manrope;letter-spacing:-.045em;margin:0}.impact cite{display:block;font:400 12px 'DM Sans';letter-spacing:0;color:var(--muted);margin-top:24px}.impact h2{font-size:13px;letter-spacing:0;font-family:'DM Sans';line-height:1.5;margin-bottom:20px}.impact p{font-size:17px;color:var(--muted);max-width:520px}.impact-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.impact-tags span{font-size:12px;padding:5px 10px;background:#e9ede4;border-radius:4px}.contact{background:var(--signal);padding-block:78px}.contact-grid{display:flex;justify-content:space-between;align-items:center;gap:50px}.contact h2{font-size:clamp(48px,6vw,90px);max-width:800px}.contact p{max-width:380px;margin-bottom:24px;color:#43512b}.contact .text-link{margin-left:22px}.footer{background:var(--dark);color:#c9d4ca;padding-block:45px}.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer .brand span{border-color:#637266}.footer-bottom{border-top:1px solid #3d5043;margin-top:35px;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#9eafa1}.trust{font-size:12px;display:flex;gap:28px}.hero-copy{animation:enter .8s var(--ease) both}.hero-art{animation:enter 1s .12s var(--ease) both}@keyframes enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(min-width:1650px){.hero-grid{min-height:700px}}
@media(max-width:1100px){.nav-links{gap:20px}.nav-links>a:nth-child(3){display:none}.hero-grid{min-height:560px}.hero h1{font-size:7vw}.hero-copy p{font-size:16px}.product-shell{grid-template-columns:230px 1fr}.product-panel{padding:32px;gap:20px}.mini-diagram{transform:scale(.8)}.intro-grid{gap:6vw}.centre-note{display:none}.trust{gap:15px}}
@media(max-width:760px){.site-nav{height:74px}.brand img{width:38px;height:38px}.brand span{font-size:12px}.menu-button{display:block;border:1px solid #bdc8b7;background:transparent;padding:7px 12px;border-radius:4px;font-size:13px}.nav-links{display:none;position:absolute;top:73px;left:0;right:0;background:var(--paper);padding:25px var(--pad);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:22px}.nav-links.open{display:flex}.nav-links>a:nth-child(3){display:block}.hero{padding-top:28px}.hero-topline>span:last-child{display:none}.hero-grid{grid-template-columns:1fr;gap:0}.hero-copy{padding:40px 0 15px}.hero h1{font-size:clamp(53px,10.7vw,78px)}.hero-copy p{margin:23px 0;font-size:16px;max-width:480px}.hero-art{height:365px;margin-inline:-10px}.system-art{height:100%;width:auto;max-width:110%}.art-caption{bottom:5px;right:12px;font-size:10px}.hero-bottom{flex-wrap:wrap;padding-block:22px;gap:10px 24px;font-size:11px}.hero-bottom>a{display:none}.intro,.products,.build,.work,.labs,.impact{padding-block:64px}.intro-grid,.build-grid,.impact{grid-template-columns:1fr;gap:35px}.intro h2{font-size:39px}.intro-copy>p{font-size:16px}.section-head{display:block;margin-bottom:30px}.section-head>p{margin-top:22px;max-width:480px;font-size:15px}.product-shell{grid-template-columns:1fr}.product-tabs{flex-direction:row;padding:8px;gap:3px}.product-tab{padding:15px 9px;justify-content:center;font-size:12px}.product-tab>span:last-child{display:none}.product-panel{grid-template-columns:1fr;padding:28px;gap:12px}.mini-diagram{height:250px;transform:scale(.9);max-width:270px;width:100%;margin:auto}.product-panel h3{font-size:30px}.product-more{gap:7px}.product-more strong{width:100%;margin-bottom:5px}.work-grid,.lab-grid{grid-template-columns:1fr}.case-photo,.case-system{height:280px}.case-body{padding:24px}.case h3{font-size:27px}.case-list summary{gap:14px;font-size:14px}.case-list .status{min-width:70px;font-size:9px}.case-list details>p{padding-left:0}.centre{min-height:610px;padding-block:48px}.centre h2{font-size:43px}.centre:after{background:linear-gradient(0deg,#14241bed,#14241b45)}.lab-card{padding:25px;gap:18px}.lab-card h3{font-size:23px}.wave{width:65px;gap:3px}.wave i{width:4px}.doc-art{width:62px;height:75px;padding:10px}.impact{gap:35px}.impact blockquote{font-size:32px}.contact{padding-block:58px}.contact-grid{display:block}.contact h2{font-size:53px;margin-bottom:28px}.contact .text-link{margin-left:15px}.contact p{font-size:15px}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column}.trust{flex-direction:column;gap:5px;font-size:11px}.footer{padding-block:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-art:hover .layer{transform:none}}


/* ═══════════════════════════════════════════════════════════════
   SPECTACULAR LAYER · 5 Oct 2026 · same direction, studio craft.
   Rules: every move runs once (load or first view) or is one
   element on the compositor. No canvas, no per-frame JS, no blur
   beyond the nav. ?static=1 and reduced-motion = finished page.
   ═══════════════════════════════════════════════════════════════ */
:root{--out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:90px}
/* masked line rises on every big heading (lines are wrapped by revamp.js) */
.rise .ln{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.rise .ln>span{display:block;color:inherit;transform:translateY(112%);transition:transform 1s var(--out)}
.in .rise .ln>span,.rise.in .ln>span{transform:none}
.rise .ln:nth-child(2)>span{transition-delay:.09s}.rise .ln:nth-child(3)>span{transition-delay:.18s}
/* the lime marker: sweeps under the key words once they land */
.mk{color:var(--ink);background-image:linear-gradient(var(--signal),var(--signal));background-repeat:no-repeat;background-size:0% .42em;background-position:0 86%;transition:background-size 1.1s var(--out) .9s;padding:0 .04em;margin:0 -.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.in .mk,.mk.in{background-size:100% .42em}
.impact .mk{transition-delay:.4s}

/* nav: shrinks once you scroll, current section underlined */
.site-nav{transition:height .4s var(--ease),box-shadow .4s}
.site-nav.small{height:68px;box-shadow:0 1px 0 var(--line)}
.site-nav.small .brand img{width:34px;height:34px}
.brand img{transition:width .4s var(--ease),height .4s var(--ease)}
.nav-links>a.on:after{width:100%}
.button .arrow{transition:transform .35s var(--spring)}
.button:hover .arrow{transform:translate(3px,-3px)}
.button.outline:hover .arrow{transform:translateY(3px)}
.text-link span,.text-link{transition:gap .3s var(--ease),color .2s}
.text-link:hover{gap:28px}

/* hero: a faint isometric grid under the art, the stack assembles itself, then floats */
.hero{position:relative}
.hero::before{content:'';position:absolute;inset:0 0 0 46%;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='22'%3E%3Cpath d='M0 0L38 22M38 0L0 22' fill='none' stroke='%23c9d3c2' stroke-width='.6'/%3E%3C/svg%3E");opacity:.55;-webkit-mask-image:radial-gradient(60% 70% at 55% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(60% 70% at 55% 50%,#000 20%,transparent 75%)}
.hero-copy,.hero-art{animation:none}
.hero-copy p,.hero .actions{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.in .hero-copy p{opacity:1;transform:none;transition-delay:.5s}.hero.in .actions{opacity:1;transform:none;transition-delay:.65s}
.hero-topline{opacity:0;transition:opacity .8s var(--ease) .2s}.hero.in .hero-topline{opacity:1}
.hero-topline .dot{box-shadow:0 0 0 0 rgba(82,117,54,.5);animation:ping 1.6s var(--ease) 1.2s 2}
@keyframes ping{to{box-shadow:0 0 0 9px rgba(82,117,54,0)}}
.system-art{animation:float 7s ease-in-out 2.4s infinite}
@keyframes float{50%{transform:translateY(-9px)}}
.hero-art .layer{animation:slab 1.2s var(--out) backwards}
.hero-art .layer-bottom{animation-delay:.25s}.hero-art .layer-mid{animation-delay:.5s}.hero-art .layer-top{animation-delay:.75s}
@keyframes slab{from{opacity:0;transform:translateY(46px)}}
.art-shadow{animation:fadein 1.2s var(--ease) .9s backwards}
.art-link,.art-floor{animation:fadein 1s var(--ease) 1.25s backwards}
.art-notes{animation:fadein 1s var(--ease) 1.5s backwards}
.art-glow{opacity:.5;animation:glow 1.6s var(--ease) 1.2s backwards}
@keyframes glow{from{opacity:0}}
@keyframes fadein{from{opacity:0}}
.art-caption{opacity:0;transition:opacity .8s var(--ease) 1.8s}.hero.in .art-caption{opacity:1}
.hero-bottom{opacity:0;transition:opacity 1s var(--ease) 1.2s}.hero.in .hero-bottom{opacity:1}
.hero-bottom strong{font-variant-numeric:tabular-nums}
@supports (animation-timeline:view()){
  .hero-art{animation:artdrift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes artdrift{to{transform:translateY(-60px)}}
}

/* the dark band: an isometric grid, numbered capabilities */
.intro{position:relative;overflow:clip}
.intro::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='22'%3E%3Cpath d='M0 0L38 22M38 0L0 22' fill='none' stroke='%23d8fa74' stroke-width='.5'/%3E%3C/svg%3E");opacity:.07;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000)}
.intro-grid{position:relative}
.capability{position:relative;transition:transform .5s var(--spring)}
.capability::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--signal);transition:width .6s var(--out)}
.capability:hover::before{width:100%}
.capability:hover{transform:translateY(-3px)}
.capability h3::before{content:counter(cap,decimal-leading-zero);counter-increment:cap;font:500 11px 'DM Sans';color:#8ea38f;letter-spacing:.06em;margin-right:12px;vertical-align:.2em}
.capabilities{counter-reset:cap}
.in .capability{animation:fadeup .9s var(--ease) backwards}
.in .capability:nth-child(1){animation-delay:.2s}.in .capability:nth-child(2){animation-delay:.3s}.in .capability:nth-child(3){animation-delay:.4s}.in .capability:nth-child(4){animation-delay:.5s}
.capability{opacity:0}.in .capability{opacity:1}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}}

/* products: a sliding indicator behind the tabs, panels slide in, the orbit turns */
.product-tabs{position:relative}
.tab-ind{position:absolute;left:18px;right:18px;top:0;height:0;border-radius:5px;background:var(--paper);box-shadow:0 2px 4px #152a1409;transition:top .45s var(--spring),height .45s var(--spring);pointer-events:none}
.product-tab{position:relative;z-index:1;transition:color .3s}
.product-tab[aria-selected=true]{background:transparent;box-shadow:none}
.product-tab span:last-child{transition:transform .35s var(--spring)}
.product-tab:hover span:last-child,.product-tab[aria-selected=true] span:last-child{transform:translate(2px,-2px)}
.product-panel{animation:panel .55s var(--out)}
@keyframes panel{from{opacity:0;transform:translateY(10px)}}
.orbit{animation:spin 48s linear infinite}
.orbit:after{animation:spin 70s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.diagram-center{transition:transform .6s var(--spring),box-shadow .6s}
.mini-diagram:hover .diagram-center{transform:translateY(-4px) rotate(-3deg);box-shadow:0 26px 50px #23342026}
.node{transition:transform .5s var(--spring),border-color .3s}
.mini-diagram:hover .node.n1{transform:translateY(-4px)}.mini-diagram:hover .node.n3{transform:translateY(4px)}.mini-diagram:hover .node.n2{transform:translateX(4px)}.mini-diagram:hover .node.n4{transform:translateX(-4px)}
.product-shell{box-shadow:0 30px 60px -40px #1b2a1a33}
.product-more a{transition:background .2s,transform .4s var(--spring)}.product-more a:hover{transform:translateY(-2px)}

/* process: the open step is lime, the content opens smoothly where the browser can */
.process summary{transition:color .3s,padding-left .35s var(--ease)}
.process details[open] summary small{color:#4d713c}
.process details[open] summary{padding-left:6px}
.process summary small{display:inline-block;min-width:22px;transition:color .3s}
.process summary:after{transition:transform .4s var(--spring);display:inline-block}
.process details[open] summary:after{transform:rotate(180deg)}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .process details::details-content,.case-list details::details-content{height:0;overflow:clip;transition:height .5s var(--out),content-visibility .5s allow-discrete}
  .process details[open]::details-content,.case-list details[open]::details-content{height:auto}
}
.case-list summary{transition:padding-left .35s var(--ease)}.case-list details[open] summary,.case-list summary:hover{padding-left:6px}

/* work: photographs settle in, the index sweeps */
.case{transition:transform .6s var(--spring),box-shadow .6s}
.case:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px #1b2a1a40}
.case-photo img{transform:scale(1.08);transition:transform 1.6s var(--out)}
.in .case-photo img{transform:scale(1)}
.case:hover .case-photo img{transform:scale(1.04)}
.case-system .sweep{position:absolute;width:540px;height:540px;border-radius:50%;top:-105px;left:calc(50% - 270px);background:conic-gradient(from 0deg,rgba(77,113,60,.7),rgba(77,113,60,0) 26%);animation:spin 9s linear infinite;-webkit-mask-image:radial-gradient(circle closest-side,transparent 76%,#000 77%,#000 79%,transparent 80%,transparent 97.5%,#000 98.5%);mask-image:radial-gradient(circle closest-side,transparent 76%,#000 77%,#000 79%,transparent 80%,transparent 97.5%,#000 98.5%)}
.job-count{font-variant-numeric:tabular-nums}

/* centre: the photograph drifts with the scroll */
.centre{overflow:clip}
@supports (animation-timeline:view()){
  .centre>img{scale:1.12;animation:drift linear both;animation-timeline:view()}
  @keyframes drift{from{translate:0 -4.5%}to{translate:0 4.5%}}
}
.centre .eyebrow{opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.centre.in .eyebrow{opacity:1;transform:none}

/* labs: the figures draw once in view */
.wave i{height:8%;transition:height .9s var(--out);transition-delay:calc(var(--i) * 55ms)}
.in .wave i{height:var(--h)}
.doc-art i{transform-origin:left;transform:scaleX(0);transition:transform .8s var(--out)}
.doc-art i:nth-child(2){transition-delay:.12s}.doc-art i:nth-child(3){transition-delay:.24s}.doc-art i:nth-child(4){transition-delay:.36s}
.in .doc-art i{transform:none}
.lab-card{transition:transform .5s var(--spring),box-shadow .5s}.lab-card:hover{transform:translateY(-3px);box-shadow:0 24px 40px -30px #1b2a1a40}

/* contact: the lime block carries the grid too */
.contact{position:relative;overflow:clip}
.contact::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='22'%3E%3Cpath d='M0 0L38 22M38 0L0 22' fill='none' stroke='%2317221d' stroke-width='.5'/%3E%3C/svg%3E");opacity:.08;-webkit-mask-image:linear-gradient(90deg,transparent 45%,#000);mask-image:linear-gradient(90deg,transparent 45%,#000)}
.contact-grid{position:relative}
.impact-tags span{transition:background .25s,transform .4s var(--spring)}.impact-tags span:hover{background:var(--signal);transform:translateY(-2px)}

/* finished states */
html.static *,html.static *::before,html.static *::after{animation:none!important;transition:none!important}
html.static .rise .ln>span{transform:none}html.static .mk{background-size:100% .42em}
html.static .hero-copy p,html.static .hero .actions,html.static .hero-topline,html.static .art-caption,html.static .hero-bottom,html.static .capability,html.static .centre .eyebrow{opacity:1;transform:none}
html.static .case-photo img{transform:none}html.static .wave i{height:var(--h)}html.static .doc-art i{transform:none}html.static .centre>img{scale:1;translate:0}html.static .hero-art{transform:none}
@media(prefers-reduced-motion:reduce){
  .rise .ln>span{transform:none}.mk{background-size:100% .42em}
  .hero-copy p,.hero .actions,.hero-topline,.art-caption,.hero-bottom,.capability,.centre .eyebrow{opacity:1;transform:none}
  .case-photo img{transform:none}.wave i{height:var(--h)}.doc-art i{transform:none}.centre>img{scale:1;translate:0}.hero-art{transform:none}
}
@media(max-width:760px){.hero::before{inset:auto 0 0 0;height:420px}.tab-ind{left:8px;right:auto;top:8px;bottom:8px;height:auto}}


/* ═══ THE TOP · 5 Oct 17:30 · a rendered hero: the stack in light ═══ */
.hero{padding-top:30px;overflow:visible}
.hero::before{display:none}
.hero-topline{margin-bottom:22px}
.hero-stage{position:relative;aspect-ratio:16/9;margin-inline:calc(-1 * var(--pad));overflow:clip;background:#f1f2ef;isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.05);opacity:0;transition:opacity 1.4s var(--ease),transform 3.4s var(--out)}
.hero.in .hero-img{opacity:1;transform:none}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--paper) 0%,rgba(247,248,245,.94) 20%,rgba(247,248,245,.42) 42%,transparent 58%),linear-gradient(0deg,var(--paper),transparent 12%),linear-gradient(180deg,var(--paper),rgba(247,248,245,.6) 6%,transparent 18%),linear-gradient(270deg,var(--paper),transparent 9%)}
.hero-stage .hero-copy{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);width:min(46%,720px);padding:0;z-index:2;animation:none}
.hero h1{font-size:clamp(58px,6.9vw,120px);line-height:.97;letter-spacing:-.062em;font-weight:650}
.hero-copy p{font-size:clamp(17px,1.25vw,20px);max-width:480px;margin:28px 0 30px}
.tags{position:absolute;inset:0;z-index:2;pointer-events:none}
.tag{position:absolute;display:grid;gap:3px;font:600 13.5px/1.2 'DM Sans',sans-serif;color:var(--ink);letter-spacing:-.01em;opacity:0;transition:opacity .9s var(--ease)}
.tag small{font-weight:450;font-size:11.5px;color:var(--muted);letter-spacing:0}
.tag i{position:absolute;background:var(--ink);opacity:.4}
.t1{left:66%;top:8%;transform:translateX(-50%);text-align:center}.t1 i{left:50%;top:100%;width:1px;height:36px;margin-top:8px}
.t2{left:91%;top:45%}.t2 i{right:100%;top:9px;height:1px;width:34px;margin-right:10px}
.t3{left:63%;top:86%;transform:translateX(-50%);text-align:center}.t3 i{left:50%;bottom:100%;width:1px;height:36px;margin-bottom:8px}
.hero.in .tag{opacity:1}.hero.in .t1{transition-delay:1.7s}.hero.in .t2{transition-delay:1.95s}.hero.in .t3{transition-delay:2.2s}
.hero-stage .art-caption{position:absolute;right:var(--pad);bottom:18px;z-index:2;opacity:0;transition:opacity .8s var(--ease) 2.4s}
.hero.in .art-caption{opacity:1}
@supports (animation-timeline:view()){
  .hero-img{animation:heroDrift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes heroDrift{to{translate:0 9%}}
}
html.static .hero-img{opacity:1;transform:none;translate:0}html.static .tag,html.static .hero-stage .art-caption{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-img{opacity:1;transform:none;translate:0}.tag,.hero-stage .art-caption{opacity:1}}
@media(max-width:1100px){.hero h1{font-size:6.6vw}.hero-stage .hero-copy{width:52%}.t2{left:88%}}
@media(max-width:760px){
  .hero{padding-top:22px}.hero-topline{margin-bottom:10px}
  .hero-stage{aspect-ratio:4/6.3;margin-inline:calc(-1 * var(--pad))}
  .hero-img{object-position:66% 30%}
  .hero-veil{background:linear-gradient(0deg,var(--paper) 0%,rgba(247,248,245,.94) 34%,rgba(247,248,245,.3) 56%,transparent 72%)}
  .hero-stage .hero-copy{top:auto;bottom:22px;transform:none;width:auto;left:var(--pad);right:var(--pad)}
  .hero h1{font-size:clamp(46px,11.6vw,78px);line-height:.98}
  .hero-copy p{margin:18px 0 20px;font-size:16px}
  .tags,.hero-stage .art-caption{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   THREE TOPS · 5 Oct 2026 · the Work section and everything below is
   shared and unchanged (revamp.css). Each top has one bold idea.
   A · The Object   — the render is the page; a scroll story reveals it
   B · The Statement — type at monumental scale over a cinematic strip
   C · The Light Room — one dark act: the lime slab is the only light
   ═══════════════════════════════════════════════════════════════════ */
:root{--forest:#527536;--out:cubic-bezier(.16,1,.3,1)}
.lime{color:var(--signal)}
.a-cta{margin-top:40px}
/* shared figures */
.grid40{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:250px}
.grid40 i{aspect-ratio:1;border-radius:2px;background:#dde4d6;transition:background .5s;transition-delay:calc(var(--d,0) * 0ms)}
.grid40 i.on{background:#b9c6b0}.in .grid40 i.on{background:var(--forest)}
.flow{display:flex;align-items:center;gap:8px;font:600 12px 'DM Sans';color:var(--ink);max-width:300px}
.flow em{flex:1;height:1px;background:#b9c6b0;transform-origin:left;transform:scaleX(0);transition:transform .9s var(--out)}
.in .flow em{transform:none}.in .flow em:nth-of-type(2){transition-delay:.25s}.in .flow em:nth-of-type(3){transition-delay:.5s}
.bars{display:flex;align-items:flex-end;gap:5px;height:64px;width:170px}
.bars i{flex:1;background:var(--forest);height:8%;border-radius:2px 2px 0 0;transition:height .9s var(--out)}
.in .bars i{height:var(--h)}
.bars i:nth-child(2){transition-delay:.06s}.bars i:nth-child(3){transition-delay:.12s}.bars i:nth-child(4){transition-delay:.18s}.bars i:nth-child(5){transition-delay:.24s}.bars i:nth-child(6){transition-delay:.3s}.bars i:nth-child(7){transition-delay:.36s}.bars i:nth-child(8){transition-delay:.42s}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:#eff2eb;border:1px solid var(--line);border-radius:10px;padding:30px;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:16px;min-height:430px;color:var(--ink);transition:transform .5s var(--spring),box-shadow .5s}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px #1b2a1a55}
.tile .tk{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.tile .st{display:inline-flex;align-items:center;gap:7px}.tile .st .dot{width:6px;height:6px}
.tile h3{font:650 clamp(28px,2.6vw,42px)/1 Manrope;letter-spacing:-.05em}
.tile p{font-size:14.5px;color:#526050;max-width:34ch}
.tile .fig{align-self:end}
.go{font:600 13.5px 'DM Sans';border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:center;transition:gap .3s}
.go b{font-weight:400;font-size:18px;transition:transform .35s var(--spring)}
.tile:hover .go b,.c-tile:hover .go b{transform:translate(3px,-3px)}
.rail5{list-style:none;margin:40px 0 0;padding:34px 0 0;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.rail5::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:#bac8b2}
.rail5::after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--forest);transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease)}
.in .rail5::after{transform:scaleX(1)}
.rail5 li{position:relative}
.rail5 li::before{content:'';position:absolute;top:-38px;left:0;width:8px;height:8px;border-radius:50%;background:#bac8b2;transition:background .4s;transition-delay:calc(var(--k) * .3s)}
.in .rail5 li::before{background:var(--forest)}
.rail5 i{font:600 11px 'DM Sans';font-style:normal;color:var(--forest);display:block;margin-bottom:10px}
.rail5 h3{font:650 18px/1.15 Manrope;letter-spacing:-.03em}
.rail5 p{font-size:13.5px;color:#53614e;margin-top:8px;max-width:26ch}

/* ═══ A · THE OBJECT ═══ */
.a-hero{position:relative;height:230vh;padding:0;overflow:visible}
.a-stage{position:sticky;top:0;height:100svh;overflow:clip;background:#f1f2ef;isolation:isolate}
.a-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 52%;transform-origin:62% 55%;opacity:0;transition:opacity 1.3s var(--ease)}
.hero.in .a-img{opacity:1}
.a-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--paper) 0%,rgba(247,248,245,.92) 24%,rgba(247,248,245,.3) 46%,transparent 60%),linear-gradient(0deg,var(--paper),transparent 16%),linear-gradient(180deg,rgba(247,248,245,.9),transparent 14%)}
.a-copy{position:absolute;left:0;right:0;top:50%;transform:translateY(-52%);z-index:2}
.a-copy .hero-topline{margin-bottom:26px;max-width:620px}
.a-copy h1{font-size:clamp(60px,7vw,128px);line-height:.94;letter-spacing:-.066em;font-weight:650;max-width:13.5ch}
.a-copy p{max-width:470px;font-size:clamp(17px,1.2vw,20px);color:var(--muted);margin:26px 0 28px}
.a-cap{position:absolute;right:var(--pad);top:50%;transform:translateY(-46%);z-index:2;list-style:none;margin:0;padding:0;width:min(30%,380px);display:grid;gap:20px}
.a-cap li{opacity:0;transform:translateX(18px);border-top:1px solid #c9d3c2;padding-top:14px;display:grid;grid-template-columns:34px 1fr;gap:3px 10px}
.a-cap small{font:600 11px 'DM Sans';color:var(--forest);grid-row:1/3;padding-top:5px}
.a-cap b{font:700 18px/1.15 Manrope;letter-spacing:-.03em}
.a-cap span{font-size:13.5px;line-height:1.5;color:var(--muted);grid-column:2}
.a-prog{position:absolute;left:var(--pad);bottom:84px;width:160px;height:2px;background:#dfe4da;z-index:2}
.a-prog i{display:block;height:100%;width:100%;background:var(--forest);transform-origin:left;transform:scaleX(0)}
.a-facts{position:absolute;left:0;right:0;bottom:24px;z-index:2;display:flex;gap:30px;flex-wrap:wrap;font-size:12px;color:var(--muted);opacity:0;transition:opacity 1s var(--ease) 1.4s}
.hero.in .a-facts{opacity:1}
.a-facts strong{color:var(--ink);font-weight:600}
@supports (animation-timeline:scroll()){
  .a-img{animation:aZoom linear both;animation-timeline:scroll(root);animation-range:0px 1300px}
  @keyframes aZoom{to{transform:scale(1.3) translate(-3%,3%)}}
  .a-cap li{animation:aCap linear both;animation-timeline:scroll(root)}
  .a-cap li:nth-child(1){animation-range:140px 420px}.a-cap li:nth-child(2){animation-range:420px 700px}.a-cap li:nth-child(3){animation-range:700px 980px}
  @keyframes aCap{to{opacity:1;transform:none}}
  .a-copy{animation:aCopy linear both;animation-timeline:scroll(root);animation-range:520px 1100px}
  @keyframes aCopy{to{opacity:.32;transform:translateY(-52%) translateX(-24px)}}
  .a-prog i{animation:aProg linear both;animation-timeline:scroll(root);animation-range:0px 1300px}
  @keyframes aProg{to{transform:none}}
}
@supports not (animation-timeline:scroll()){.a-hero{height:auto}.a-cap li{opacity:1;transform:none}}
.a-who{background:var(--paper);color:var(--ink);padding-block:110px;overflow:visible}
.a-who::before{display:none}
.a-who .section-head h2{font-size:clamp(42px,5vw,78px)}
.a-who .lime,.a-who h2 .ln span span{color:var(--ink);background-image:linear-gradient(var(--signal),var(--signal));background-repeat:no-repeat;background-size:0% .42em;background-position:0 86%;transition:background-size 1s var(--out) .8s}
.a-who.in .lime{background-size:100% .42em}
.a-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
.a-caps article{padding:26px 28px 34px 0;border-right:1px solid var(--line);display:grid;gap:12px;align-content:start}
.a-caps article+article{padding-left:28px}.a-caps article:last-child{border-right:0}
.a-caps i{font:650 clamp(40px,4.4vw,64px)/1 Manrope;letter-spacing:-.06em;color:var(--forest);font-style:normal}
.a-caps h3{font:650 19px Manrope;letter-spacing:-.03em;margin-top:14px}
.a-caps p{font-size:14px;color:var(--muted);max-width:26ch}
.a-prod{padding-block:110px}
.a-build{background:#e6eddf;padding-block:100px}
.a-build .section-head h2{font-size:clamp(40px,4.6vw,70px)}

/* ═══ B · THE STATEMENT ═══ */
.b-hero{position:relative;padding-top:36px;overflow:visible}
.b-hero::before{display:none}
.b-grid{position:absolute;inset:0 var(--pad);pointer-events:none;background-image:repeating-linear-gradient(to right,rgba(32,37,33,.075) 0 1px,transparent 1px calc(100% / 12));-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.b-top{position:relative}
.b-folio{font-size:12px;color:var(--muted)}
.b-h1{font-size:clamp(60px,9.4vw,172px);line-height:.9;letter-spacing:-.072em;font-weight:700;margin-top:48px}
.b-h1 .ol{color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color 1.3s var(--ease) 1.1s,-webkit-text-stroke-color 1.3s var(--ease) 1.1s}
.hero.in .b-h1 .ol{color:var(--ink);-webkit-text-stroke-color:transparent}
.b-sub{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin:40px 0 52px}
.b-sub p{max-width:520px;font-size:clamp(17px,1.25vw,20px);color:var(--muted)}
.b-sub .actions{justify-content:flex-end}
.b-strip{margin:0 calc(-1 * var(--pad));position:relative;aspect-ratio:16/6.4;overflow:clip;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.b-img{width:100%;height:100%;object-fit:cover;object-position:50% 56%;transform:scale(1.08);transition:transform 3.2s var(--out)}
.hero.in .b-img{transform:none}
.b-strip figcaption{position:absolute;left:var(--pad);right:var(--pad);bottom:16px;display:flex;justify-content:space-between;font-size:12px;color:#4b5a4d}
.b-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:28px 0 60px}
.b-facts div{display:grid;gap:6px;border-left:1px solid var(--line);padding-left:18px}
.b-facts div:first-child{border-left:0;padding-left:0}
.b-facts b{font:650 clamp(32px,3.6vw,58px)/1 Manrope;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.b-facts b small{font-size:.5em;color:var(--forest);font-weight:600;letter-spacing:-.02em}
.b-facts>div>span{font-size:12.5px;color:var(--muted)}
@supports (animation-timeline:view()){.b-img{animation:drift linear both;animation-timeline:view();scale:1.1}@keyframes drift{from{translate:0 -4%}to{translate:0 4%}}}
.b-who .intro-grid{gap:8vw}
.clauses{list-style:none;padding:0;margin:32px 0 0;border-top:1px solid #405048}
.clauses li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid #405048;font-size:15px;line-height:1.5;color:#bac8be;transition:padding-left .35s var(--ease)}
.clauses li:hover{padding-left:8px}
.clauses i{font-style:normal;color:var(--signal);font-weight:600;font-size:12px;padding-top:4px}
.clauses b{color:#fff;font-weight:600}
.b-prod{padding-block:110px}
.board{border-top:1px solid var(--ink)}
.board .r{display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,6fr) 230px;gap:22px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;color:var(--ink);position:relative;transition:padding-left .4s var(--ease)}
.board .r::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--forest);transition:width .5s var(--out)}
.board .r:hover{padding-left:10px}.board .r:hover::before{width:48px}
.board .r i{font:600 11px 'DM Sans';color:var(--forest);font-style:normal}
.board .r h3{font:650 clamp(24px,2.4vw,36px)/1 Manrope;letter-spacing:-.045em}
.board .r.core h3{font-size:clamp(30px,3.4vw,52px)}
.board .r h3 small{display:block;font:450 12px 'DM Sans';color:var(--muted);margin-top:7px;letter-spacing:0}
.board .r p{font-size:14.5px;color:var(--muted);max-width:54ch}
.board .r .st{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);text-align:right}
.board .r.core{padding:28px 0}
.b-build{background:#e6eddf;padding-block:100px}
.spine{border-left:1px solid #bac8b2;padding-left:26px}
.spine details{position:relative}
.spine details[open]::before{content:'';position:absolute;left:-27px;top:0;bottom:0;width:2px;background:var(--forest)}

/* ═══ C · THE LIGHT ROOM ═══ */
.dark-top .site-nav{background:rgba(15,22,19,.84);color:var(--paper);border-color:#24322a;transition:background .5s,color .5s,border-color .5s,height .4s var(--ease)}
.dark-top .site-nav .brand span{border-color:#4a5a50}
.dark-top .site-nav .button{background:var(--signal);color:var(--ink)}
.dark-top .site-nav .menu-button{color:var(--paper);border-color:#4a5a50}
.dark-top.lit .site-nav{background:rgba(247,248,245,.96);color:var(--ink);border-color:var(--line)}
.dark-top.lit .site-nav .brand span{border-color:#b9c1b9}
.dark-top.lit .site-nav .button{background:var(--ink);color:var(--paper)}
.dark-top.lit .site-nav .menu-button{color:var(--ink);border-color:#bdc8b7}
.dark-top .nav-links{color:inherit}
.c-hero{position:relative;min-height:100svh;background:#0f1613;color:var(--paper);display:grid;overflow:clip;padding:0}
.c-hero::before{display:none}
.c-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;opacity:0;transform:scale(1.07);transition:opacity 1.8s var(--ease),transform 4.5s var(--out)}
.hero.in .c-img{opacity:1;transform:none}
.c-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,22,19,.88),rgba(15,22,19,.5) 38%,rgba(15,22,19,.08) 60%,transparent),linear-gradient(0deg,#0f1613 0%,rgba(15,22,19,.55) 22%,transparent 48%)}
.c-copy{position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr auto;min-height:100svh;padding-top:30px;padding-bottom:22px}
.c-hero .hero-topline{color:#9eafa1}.c-hero .dot{background:var(--signal)}
.c-low{align-self:end;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end;padding-bottom:44px}
.c-hero h1{font-size:clamp(58px,8.2vw,150px);line-height:.93;letter-spacing:-.066em;font-weight:650;color:#fff}
.c-side p{color:#c9d4ca;font-size:clamp(16px,1.2vw,19px);max-width:440px;margin-bottom:24px}
.button.ghost{background:transparent;color:var(--paper);border-color:#4a5a50}.button.ghost:hover{background:#1f2c24}
.c-facts{border-top:1px solid #2a3a30;padding-top:18px;display:flex;gap:30px;flex-wrap:wrap;font-size:12px;color:#9eafa1;opacity:0;transition:opacity 1s var(--ease) 1.6s}
.hero.in .c-facts{opacity:1}
.c-facts strong{color:#fff;font-weight:600}
.c-copy>*{opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.hero.in .c-copy>*{opacity:1;transform:none}.hero.in .c-copy>.hero-topline{transition-delay:.3s}.hero.in .c-copy>.c-low{transition-delay:.5s}.hero.in .c-copy>.c-facts{transition-delay:1.5s}
@supports (animation-timeline:view()){.c-img{animation:cdrift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}@keyframes cdrift{to{translate:0 10%}}}
.c-who{background:var(--paper);color:var(--ink);padding-block:120px}
.c-who::before{display:none}
.c-who-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;align-items:start}
.c-who h2{font-size:clamp(40px,4.8vw,74px);max-width:none}
.c-who .lime{color:var(--forest)}
.c-lede{font-size:clamp(18px,1.4vw,22px);line-height:1.5;color:#3c463f;max-width:600px}
.c-caps{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-top:44px}
.c-caps div{border-top:1px solid var(--line);padding-top:16px}
.c-caps h3{font:600 17px Manrope;letter-spacing:-.02em}
.c-caps p{font-size:13.5px;color:var(--muted);margin-top:6px;max-width:26ch}
.c-prod{background:var(--signal);color:var(--ink);padding-block:110px}
.c-prod .section-head>p{color:#43512b}
.c-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.c-tile{background:var(--dark);color:var(--paper);border-radius:10px;padding:30px;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:14px;min-height:410px;transition:transform .5s var(--spring)}
.c-tile:hover{transform:translateY(-4px)}
.c-tile .tk{font-size:12px;color:#9eafa1}
.c-tile h3{font:650 clamp(26px,2.4vw,38px)/1 Manrope;letter-spacing:-.05em;color:#fff}
.c-tile p{font-size:14.5px;color:#bac8be;max-width:32ch}
.c-tile .fig{align-self:end}
.c-tile .grid40 i{background:#2a3a30}.c-tile .grid40 i.on{background:#4a6a3a}.in .c-tile .grid40 i.on{background:var(--signal)}
.c-tile .flow{color:#dfe6dc}.c-tile .flow em{background:#3d5043}
.c-tile .bars i{background:var(--signal)}
.c-tile .go{border-top-color:#2f3f35;color:#fff}
.c-more{color:#43512b}.c-more a{border-color:#9bb34a;color:var(--ink)}.c-more a:hover{background:#c4e761}
.c-build{background:#eef1e9;padding-block:100px}
.c-build .section-head h2{font-size:clamp(40px,4.6vw,70px)}

/* finished states */
html.static .a-hero{height:auto}html.static .a-stage{height:900px}html.static .a-img,html.static .c-img{opacity:1;transform:none;translate:0}html.static .a-cap li{opacity:1;transform:none}html.static .a-copy{opacity:1}html.static .a-facts,html.static .c-facts{opacity:1}html.static .a-prog i{transform:none}
html.static .b-h1 .ol{color:var(--ink);-webkit-text-stroke-color:transparent}html.static .b-img{transform:none;scale:1;translate:0}
html.static .c-copy>*{opacity:1;transform:none}html.static .rail5::after{transform:none}html.static .rail5 li::before{background:var(--forest)}html.static .bars i{height:var(--h)}html.static .flow em{transform:none}html.static .grid40 i.on{background:var(--forest)}html.static .c-tile .grid40 i.on{background:var(--signal)}html.static .a-who .lime{background-size:100% .42em}
@media(prefers-reduced-motion:reduce){.a-hero{height:auto}.a-img,.c-img{opacity:1;transform:none;translate:0}.a-cap li{opacity:1;transform:none}.a-copy,.a-facts,.c-facts{opacity:1}.b-h1 .ol{color:var(--ink);-webkit-text-stroke-color:transparent}.b-img{transform:none}.c-copy>*{opacity:1;transform:none}.rail5::after{transform:none}.rail5 li::before{background:var(--forest)}.bars i{height:var(--h)}.flow em{transform:none}.a-who .lime{background-size:100% .42em}}

@media(max-width:1100px){.tiles,.c-tiles{grid-template-columns:1fr 1fr}.a-caps{grid-template-columns:1fr 1fr}.a-caps article:nth-child(2){border-right:0}.a-caps article:nth-child(3){padding-left:0;border-top:1px solid var(--line)}.a-caps article:nth-child(4){border-top:1px solid var(--line)}.rail5{grid-template-columns:repeat(3,1fr)}.a-cap{width:38%}.board .r{grid-template-columns:40px minmax(0,1fr);gap:8px 16px}.board .r p,.board .r .st{grid-column:2}.board .r .st{justify-content:flex-start}}
@media(max-width:760px){
  .tiles,.c-tiles,.a-caps,.rail5,.b-facts,.b-sub,.c-who-grid,.c-caps{grid-template-columns:1fr}
  .a-hero{height:auto}.a-stage{position:relative;height:auto;min-height:92svh;display:grid}.a-img{object-position:58% 22%;position:absolute}.a-veil{background:linear-gradient(0deg,var(--paper) 0%,rgba(247,248,245,.94) 36%,rgba(247,248,245,.3) 58%,transparent 72%)}
  .a-copy{position:relative;top:auto;transform:none;padding-top:62vw;padding-bottom:140px;animation:none!important}.a-copy h1{font-size:clamp(46px,11.6vw,78px)}.a-cap{display:none}.a-prog{display:none}.a-facts{position:absolute;bottom:22px;left:var(--pad);right:var(--pad);display:grid;gap:8px}
  .a-caps article{padding:22px 0;border-right:0;border-top:1px solid var(--line)}.a-caps article+article{padding-left:0}.a-caps i{font-size:40px}
  .rail5{gap:22px;padding-top:0}.rail5::before,.rail5::after,.rail5 li::before{display:none}.rail5 li{border-top:1px solid #bac8b2;padding-top:16px}
  .b-h1{font-size:clamp(50px,13vw,80px);margin-top:28px}.b-h1 .ol{-webkit-text-stroke-width:1px}.b-sub .actions{justify-content:flex-start}.b-strip{aspect-ratio:16/9}.b-facts div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
  .c-low{grid-template-columns:1fr;gap:22px;padding-bottom:24px}.c-hero h1{font-size:clamp(48px,12vw,80px)}.c-img{object-position:62% 40%}.c-facts{display:grid;gap:8px}.c-who{padding-block:70px}.c-prod,.a-prod,.b-prod,.a-who,.a-build,.b-build,.c-build{padding-block:64px}
  .spine{padding-left:18px}.spine details[open]::before{left:-19px}
}

/* capture caps: svh scales with the capture window */
html.static .a-stage{min-height:0!important;height:900px!important}@media(min-width:761px){html.static .c-hero,html.static .c-copy{min-height:900px!important}}html.static .a-copy{padding-bottom:140px}

/* THE PAGE · the impact spine in the light system · 5 Oct 2026 */
.the-page .section-head h2{font-size:clamp(38px,4.8vw,70px)}
/* the lens */
.lens{padding-block:110px 90px}
.lens-lede{max-width:520px!important;font-size:16.5px}
.lens-lede b{color:var(--ink);font-weight:600}
.lens-line{grid-template-columns:repeat(6,1fr);margin-top:0}
.lens-line h3{font:650 clamp(17px,1.4vw,21px)/1.15 Manrope;letter-spacing:-.03em;max-width:12ch}
.themes{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.themes a{padding:20px 22px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:9px;align-content:start;min-height:160px;transition:background .3s}
.themes a:hover{background:#eef1e9}
.themes b{font:650 18px Manrope;letter-spacing:-.03em}
.themes span{font-size:13.5px;line-height:1.5;color:var(--muted)}
/* judged by what changed */
.outcomes{padding-block:100px;background:#eef1e9;margin-inline:0}
.outcomes.wrap{max-width:none}
.outcomes .section-head,.outcomes .tiles{max-width:1800px;margin-inline:auto}
.outcomes .section-head{margin-bottom:44px}
.tile{background:var(--paper)}
.tile h3.oc{font:650 clamp(22px,1.9vw,28px)/1.1 Manrope;letter-spacing:-.04em;max-width:18ch}
.tile p b{color:var(--ink);font-weight:600}
.figcap{display:block;font-size:11.5px;color:var(--muted);margin-top:12px}
.lring{width:84px;height:84px;border-radius:50%;border:1px solid #c7d3bd;position:relative}
.lring::before{content:'';position:absolute;inset:12px;border-radius:50%;border:2px solid var(--forest);opacity:0;transform:scale(.7);transition:opacity .8s var(--ease) .2s,transform .9s var(--out) .2s}
.in .lring::before{opacity:1;transform:none}
.lring::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--forest)}
.lring.sm{width:64px;height:64px}.lring.sm::before{inset:9px}
.month{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:260px;height:28px;align-items:end}
.month i{display:block;height:8px;border-radius:1px;background:#dde4d6;transition:height .6s var(--out),background .5s}
.in .month i.on{height:100%;background:var(--forest)}
.month i.on:nth-child(2){transition-delay:.1s}.month i.on:nth-child(3){transition-delay:.2s}
.monthlbl{display:flex;justify-content:space-between;max-width:260px;font-size:10.5px;color:var(--muted);margin-top:6px}
/* work: legend */
.work-note{font-size:12px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.work-note .status{margin:0}
/* how we work */
.method{background:#e6eddf}
.method-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:end;margin-bottom:10px}
.mq{font:650 clamp(30px,3.6vw,54px)/1.08 Manrope;letter-spacing:-.05em;margin:0;max-width:16ch}
.mq cite{display:block;font:400 12.5px 'DM Sans';letter-spacing:0;color:var(--muted);margin-top:20px}
.mh{font-size:clamp(26px,2.6vw,38px)!important;margin:14px 0 12px}
.method-grid p{font-size:15px;color:#53614e;max-width:46ch}
.ways{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:44px}
.ways .eyebrow{margin-right:10px}
.ways span:not(.eyebrow){font-size:13px;padding:8px 13px;border:1px solid #bac8b2;border-radius:5px;background:#eef3e8}
/* your team: the bench */
.bench{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;max-width:560px;font-size:13.5px;color:#d2dcd3}
.bench li{display:flex;gap:10px;align-items:baseline}
.bench li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--signal);flex:none;transform:translateY(-2px)}
.centre-content{max-width:760px}
.centre .button.light{background:var(--signal);color:var(--ink)}
/* labs: four clauses */
.lab-grid.four{grid-template-columns:repeat(4,1fr)}
.lab-grid.four .lab-card{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:18px;padding:26px;min-height:320px}
.lab-grid.four .lab-card h3{font-size:21px}
.lab-grid.four .wave{height:60px;width:100px;align-self:center}
.lab-grid.four .doc-art{align-self:center}
.lab-rule b{color:var(--forest);font-weight:600;margin-right:6px}
.ctr{font:650 clamp(32px,2.8vw,44px)/1 Manrope;letter-spacing:-.05em;align-self:center;font-variant-numeric:tabular-nums}
/* hero copy on the page */
.c-hero h1{font-size:clamp(54px,7.6vw,140px)}
.c-low{grid-template-columns:1.3fr .7fr}
/* finished states */
html.static .lring::before{opacity:1;transform:none}html.static .month i.on{height:100%;background:var(--forest)}
@media(prefers-reduced-motion:reduce){.lring::before{opacity:1;transform:none}.month i.on{height:100%;background:var(--forest)}}
@media(max-width:1100px){.lab-grid.four{grid-template-columns:1fr 1fr}.themes{grid-template-columns:1fr 1fr}.lens-line{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.lens{padding-block:64px 50px}.themes{grid-template-columns:1fr}.themes a{min-height:0}.lens-line{grid-template-columns:1fr 1fr;gap:18px}.lens-line li{border-top:1px solid #bac8b2;padding-top:12px}.outcomes{padding-block:64px}.method-grid{grid-template-columns:1fr;gap:28px}.c-low{grid-template-columns:1fr;gap:22px}.lab-grid.four{grid-template-columns:1fr}.bench{grid-template-columns:1fr}.c-hero h1{font-size:clamp(46px,12vw,80px)}}

/* ═══ the photographic top · one image, blended into the paper ═══ */
.p-hero{position:relative;padding:0;overflow:clip;background:#f3f4f1;isolation:isolate;display:grid;grid-template-rows:1fr auto;min-height:calc(100svh - 88px)}
.p-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:0;transform:scale(1.04);transition:opacity 1.6s var(--ease),transform 4s var(--out)}
.hero.in .p-img{opacity:1;transform:none}
.p-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(247,248,245,.96) 0%,rgba(247,248,245,.9) 22%,rgba(247,248,245,.55) 36%,rgba(247,248,245,0) 52%),linear-gradient(0deg,var(--paper) 0%,var(--paper) 7%,rgba(247,248,245,.85) 16%,rgba(247,248,245,0) 40%),linear-gradient(180deg,rgba(247,248,245,.55),rgba(247,248,245,0) 16%)}
.p-copy{position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr;padding-top:30px;padding-bottom:clamp(28px,4vw,56px)}
.p-low{align-self:end;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end;padding-top:clamp(120px,22vh,260px)}
.p-hero h1{font-size:clamp(54px,7.4vw,136px);line-height:.94;letter-spacing:-.066em;font-weight:650;color:var(--ink)}
.p-hero .mk{color:var(--ink)}
.p-side p{color:#3c463f;font-size:clamp(16px,1.2vw,19px);max-width:440px;margin-bottom:24px}
.p-side{background:rgba(247,248,245,.72);padding:22px 24px 24px;border-radius:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-facts{position:relative;z-index:2;width:100%;justify-self:stretch;border-top:1px solid var(--line);padding-top:18px;padding-bottom:22px;display:flex;gap:30px;flex-wrap:wrap;font-size:12px;color:var(--muted);opacity:0;transition:opacity 1s var(--ease) 1.4s}
.hero.in .p-facts{opacity:1}
.p-facts strong{color:var(--ink);font-weight:600}
.p-copy>*{opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.hero.in .p-copy>*{opacity:1;transform:none}.hero.in .p-copy>.hero-topline{transition-delay:.3s}.hero.in .p-copy>.p-low{transition-delay:.5s}
@supports (animation-timeline:view()){.p-img{animation:pdrift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}@keyframes pdrift{to{translate:0 9%}}}
html.static .p-img{opacity:1;transform:none;translate:0}html.static .p-copy>*,html.static .p-facts{opacity:1;transform:none}html.static .p-hero{min-height:860px}
@media(prefers-reduced-motion:reduce){.p-img{opacity:1;transform:none;translate:0}.p-copy>*,.p-facts{opacity:1;transform:none}}
@media(max-width:1100px){.p-low{grid-template-columns:1fr;gap:22px}.p-hero h1{font-size:clamp(50px,8.4vw,110px)}}
@media(max-width:760px){.p-hero{min-height:0}.p-img{object-position:66% 50%}.p-veil{background:linear-gradient(0deg,var(--paper) 0%,rgba(247,248,245,.94) 30%,rgba(247,248,245,.55) 52%,rgba(247,248,245,0) 70%)}.p-low{padding-top:64vw}.p-hero h1{font-size:clamp(44px,11.6vw,78px)}.p-side{padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}.p-facts{display:grid;gap:8px}}

/* ═══ the dark top, sized by the photograph (never by the window) ═══ */
.the-page .c-hero{min-height:0;height:clamp(520px,min(56.25vw,calc(100svh - 88px)),940px);display:block}
.the-page .c-copy{position:absolute;inset:0;min-height:0;height:100%;z-index:2;display:grid;grid-template-rows:auto 1fr;padding-top:22px;padding-bottom:78px}
.the-page .c-low{padding-bottom:0;grid-template-columns:1.2fr .8fr}
.the-page .c-hero h1{font-size:clamp(46px,min(6.4vw,11.5svh),112px);line-height:.96}
.the-page .rise .ln{padding-bottom:.2em;margin-bottom:-.2em}
.the-page .c-img{object-position:60% 50%}
.the-page .c-veil{background:linear-gradient(90deg,rgba(15,22,19,.96) 0%,rgba(15,22,19,.86) 24%,rgba(15,22,19,.42) 44%,rgba(15,22,19,.06) 62%,rgba(15,22,19,0) 75%),linear-gradient(0deg,#0f1613 0%,rgba(15,22,19,.7) 18%,rgba(15,22,19,0) 44%),linear-gradient(180deg,rgba(15,22,19,.5),rgba(15,22,19,0) 18%)}
.the-page .c-facts{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:22px;margin:0 auto}
.the-page .c-facts.wrap{padding-inline:var(--pad)}
.the-page .c-side p{color:#d2dcd3}
.the-page .centre{min-height:620px}
@media(max-width:1100px){.the-page .c-low{grid-template-columns:1fr;gap:18px}.the-page .c-hero{height:clamp(620px,78vw,940px)}.the-page .c-hero h1{font-size:clamp(46px,8vw,96px)}}
@media(max-width:760px){.the-page .c-hero{height:auto;min-height:0}.the-page .c-copy{position:relative;height:auto;padding-bottom:150px}.the-page .c-low{padding-top:66vw}.the-page .c-img{object-position:66% 38%}.the-page .c-veil{background:linear-gradient(0deg,#0f1613 0%,rgba(15,22,19,.92) 34%,rgba(15,22,19,.45) 56%,rgba(15,22,19,0) 74%)}.the-page .c-facts{position:absolute;bottom:0;display:grid;gap:8px;padding-bottom:22px}}
@media(min-width:761px){html.static .the-page .c-hero{min-height:0!important;height:900px!important}}html.static .the-page .c-copy{min-height:0!important}

/* ═══ sleek top: one stack, bottom-left ═══ */
.the-page .c-low{grid-template-columns:1fr;gap:0;max-width:none;align-content:end;justify-items:start}
.the-page .c-hero h1{font-size:clamp(42px,min(5.6vw,10.5svh),96px);line-height:.98;letter-spacing:-.06em;max-width:none}
.the-page .c-lede{color:#c9d4ca;font-size:clamp(15px,1.1vw,17.5px);line-height:1.55;max-width:50ch;margin:22px 0 26px}
.the-page .c-low .actions{gap:10px}
.the-page .c-low .button{min-height:46px;padding:11px 18px;font-size:13.5px;gap:18px}
.the-page .c-copy{padding-bottom:86px;padding-top:20px}
.the-page .c-hero .hero-topline{font-size:12px}
.the-page .c-facts{font-size:11.5px;gap:26px;border-top:1px solid rgba(247,248,245,.12);padding-top:16px;padding-bottom:20px;align-items:center}
.the-page .c-facts .c-where{margin-left:auto;color:#8a9b8e}
.the-page .c-veil{background:linear-gradient(90deg,rgba(15,22,19,.95) 0%,rgba(15,22,19,.84) 26%,rgba(15,22,19,.38) 46%,rgba(15,22,19,.04) 64%,rgba(15,22,19,0) 76%),linear-gradient(0deg,#0f1613 0%,rgba(15,22,19,.74) 16%,rgba(15,22,19,0) 42%),linear-gradient(180deg,rgba(15,22,19,.45),rgba(15,22,19,0) 16%)}
@media(max-width:1100px){.the-page .c-hero h1{font-size:clamp(42px,7vw,88px)}}
@media(max-width:760px){.the-page .c-lede{margin:16px 0 20px}.the-page .c-facts .c-where{margin-left:0}.the-page .c-copy{padding-bottom:170px}}
/* ═══ mask + position (Rishi 19:05): the text zone held in clean dark, the subject clear of it ═══ */
.the-page .c-hero h1{font-size:clamp(40px,min(4.9vw,9.6svh),84px)}
.the-page .c-img{object-position:58% 50%;scale:1.08;transform-origin:100% 60%}
.the-page .c-veil{background:linear-gradient(90deg,rgba(15,22,19,.97) 0%,rgba(15,22,19,.95) 30%,rgba(15,22,19,.82) 42%,rgba(15,22,19,.42) 54%,rgba(15,22,19,.08) 66%,rgba(15,22,19,0) 76%),linear-gradient(0deg,#0f1613 0%,rgba(15,22,19,.8) 14%,rgba(15,22,19,.25) 34%,rgba(15,22,19,0) 50%),linear-gradient(180deg,rgba(15,22,19,.5),rgba(15,22,19,0) 16%)}
html.static .the-page .c-img,.the-page .c-img{translate:0}
@media(prefers-reduced-motion:reduce){.the-page .c-img{scale:1.08}}
@media(max-width:760px){
  .the-page .c-img{object-position:64% 30%;scale:1;transform-origin:50% 50%}
  .the-page .c-low{padding-top:74vw}
  .the-page .c-veil{background:linear-gradient(0deg,#0f1613 0%,#0f1613 30%,rgba(15,22,19,.93) 44%,rgba(15,22,19,.55) 58%,rgba(15,22,19,.12) 72%,rgba(15,22,19,0) 82%),linear-gradient(180deg,rgba(15,22,19,.55),rgba(15,22,19,0) 18%)}
  .the-page .c-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:11px}
  .the-page .c-facts .c-where{grid-column:1/-1}
}
.the-page .c-hero h1{margin-bottom:26px}
@media(max-width:760px){.the-page .c-copy{padding-bottom:150px}}
@media(max-width:760px){.the-page .c-copy{padding-bottom:118px}.the-page .c-low{padding-top:70vw}}
/* ═══ above the fold on a laptop (Rishi 19:20): the dark block ends 32px short of the viewport ═══ */
.the-page .c-hero{height:clamp(480px,min(56.25vw,calc(100svh - 120px)),900px)}
.the-page .c-hero h1{font-size:clamp(38px,min(4.9vw,8.4svh),84px);margin-bottom:clamp(14px,2.6svh,26px)}
.the-page .c-copy{padding-bottom:72px;padding-top:16px}
.the-page .c-facts{padding-top:13px;padding-bottom:16px}
.the-page .c-low .button{min-height:44px;padding:10px 16px}
@media(max-width:760px){.the-page .c-hero{height:auto}.the-page .c-copy{padding-bottom:176px}}

/* hero.css · 5 Oct 2026 22:45 · the kitchen hero on its own (extracted from line.css so nothing else on the page is touched) */
:root{--forest:#527536;--track:#dfe5d9;--out:cubic-bezier(.16,1,.3,1)}
.mark{display:inline-flex;align-items:center;gap:8px;font:600 11.5px 'DM Sans';letter-spacing:.04em;text-transform:uppercase;color:#3f4b42}
.mark i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--forest);flex:none;box-sizing:border-box}
.mark.run i{background:var(--forest)}
.mark.built i{background:linear-gradient(90deg,var(--forest) 50%,transparent 50%)}
.mark.designed i{border-style:dashed}
.line-hero{padding:0 var(--pad) 0;overflow:visible;--fgap:clamp(28px,4vh,44px)}
.line-hero::before{display:none}
.line-hero .stage{position:relative;margin-inline:calc(-1 * var(--pad));height:clamp(500px,min(46vw,calc(100svh - 88px - 118px)),780px);overflow:clip;background:var(--paper);isolation:isolate}
.line-hero .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 50%;transform-origin:0 50%;transform:scale(1.12);transition:transform 1.8s var(--out),opacity .9s var(--ease);opacity:0}
.hero.in .scene{opacity:1;transform:scale(1.09)}
.line-hero .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,transparent 9%)}
.line-hero .copy{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);width:min(36%,560px);z-index:2}
.line-hero .hero-topline{margin-bottom:clamp(22px,3.5vh,40px)}
.line-hero h1{font:700 clamp(40px,min(5.6vw,10svh),99px)/.93 Manrope;letter-spacing:-.07em;max-width:none}
.line-hero .rise .ln{padding-bottom:.26em;margin-bottom:-.26em}
.line-hero .mk{color:var(--ink)}
.line-hero .deck{display:grid;grid-template-columns:minmax(0,470px);justify-content:start;gap:22px;align-items:end;margin-top:clamp(20px,3vh,36px)}
.line-hero .deck p{max-width:520px;font-size:clamp(15px,1.1vw,18px);color:#3c463f;line-height:1.5}
.line-hero .deck .actions{gap:10px}
.line-hero .facts{margin-top:0;border-top:1px solid var(--ink);padding:16px 0 0;display:flex;gap:28px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.line-hero .facts strong{color:var(--ink);font-weight:600}
.line-hero .facts .legend{margin-left:auto;display:flex;gap:18px}
.line-hero .hero-topline,.line-hero .deck,.line-hero .facts{opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.in .hero-topline{opacity:1;transform:none;transition-delay:.2s}
.hero.in .deck{opacity:1;transform:none;transition-delay:.7s}
.hero.in .facts{opacity:1;transform:none;transition-delay:1s}
html.static .line-hero .scene{opacity:1;transform:scale(1.09)}
html.static .line-hero .hero-topline,html.static .line-hero .deck,html.static .line-hero .facts{opacity:1;transform:none}
.line-hero h1 .mk{color:var(--ink)}
@media(min-width:900px){.line-hero h1 .ln{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.line-hero .scene{opacity:1;transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){.line-hero .hero-topline,.line-hero .deck,.line-hero .facts{opacity:1;transform:none}}
@media(max-width:1400px){.line-hero{--fig:clamp(460px,calc(100svh - 240px),660px)}}
@media(max-width:900px){.line-hero .deck{grid-template-columns:1fr;gap:22px}.line-hero .facts .legend{margin-left:0;width:100%}.line-hero h1{font-size:clamp(40px,10.4vw,77px)}.line-hero .stage{height:auto;overflow:visible;background:none;margin-inline:calc(-1 * var(--pad));display:grid}.line-hero .copy{position:static;transform:none;width:auto;padding:28px var(--pad) 0;order:-1}.line-hero .veil{display:none}.line-hero .scene{position:static;height:94vw;width:100%;object-position:100% 50%;margin-top:26px;transform:none!important}.line-hero .facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding-top:14px;font-size:12px}.line-hero .facts .legend{grid-column:1/-1;margin-left:0;gap:16px;padding-top:4px}.line-hero .deck .actions{display:grid;grid-template-columns:1fr;gap:10px}.line-hero .deck .actions .button{width:100%}.line-hero .hero-topline>span:last-child{display:flex}}

/* products.css · 5 Oct 2026 23:05 · the ten parts as a shelf, not a ledger. Hairlines, no boxes. */
.b-prod .section-head{margin-bottom:34px}
.shelf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.part{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:8px;grid-column:span 3;min-height:230px;padding:22px 22px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);background:var(--paper);transition:background .35s var(--ease)}
.part.core{grid-column:span 4;min-height:250px;padding:26px 26px 22px}
.part .n{font:600 11.5px 'DM Sans';letter-spacing:.06em;color:var(--forest)}
.part .fam{font:450 12px 'DM Sans';color:var(--muted);letter-spacing:.02em}
.part h3{font:650 clamp(21px,1.6vw,26px)/1.05 Manrope;letter-spacing:-.04em;margin-top:4px}
.part.core h3{font-size:clamp(26px,2.3vw,36px)}
.part p{font-size:14px;line-height:1.5;color:#53614e;max-width:36ch}
.part.core p{font-size:14.5px;max-width:44ch}
.part .st{display:inline-flex;align-items:center;gap:8px;font:600 11px 'DM Sans';letter-spacing:.05em;text-transform:uppercase;color:#3f4b42;margin-top:10px}
.part .st i{width:9px;height:9px;border-radius:50%;background:var(--forest);flex:none}
.part .go{position:absolute;right:18px;top:16px;font-size:20px;line-height:1;color:var(--muted);opacity:0;transform:translate(-6px,6px);transition:opacity .3s,transform .4s var(--out)}
.part:hover{background:#eef3e6}
.part:hover .go{opacity:1;transform:none;color:var(--forest)}
.part.door{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.part.door .fam{color:#b9c6ba}.part.door p{color:#c9d4ca}.part.door .st{color:var(--signal)}.part.door .go{color:var(--signal);opacity:1;transform:none}
.part.door:hover{background:#17221d}
/* stagger in */
.b-prod .part{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease),background .35s var(--ease)}
.b-prod.in .part{opacity:1;transform:none}
.b-prod.in .part:nth-child(1){transition-delay:.05s}.b-prod.in .part:nth-child(2){transition-delay:.1s}.b-prod.in .part:nth-child(3){transition-delay:.15s}.b-prod.in .part:nth-child(4){transition-delay:.2s}.b-prod.in .part:nth-child(5){transition-delay:.25s}.b-prod.in .part:nth-child(6){transition-delay:.3s}.b-prod.in .part:nth-child(7){transition-delay:.35s}.b-prod.in .part:nth-child(8){transition-delay:.4s}.b-prod.in .part:nth-child(9){transition-delay:.45s}.b-prod.in .part:nth-child(10){transition-delay:.5s}.b-prod.in .part:nth-child(11){transition-delay:.55s}
html.static .b-prod .part{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.b-prod .part{opacity:1;transform:none}}
@media(max-width:1100px){.part{grid-column:span 4}.part.core{grid-column:span 6}.part.door{grid-column:span 4}}
@media(max-width:760px){.shelf{grid-template-columns:1fr 1fr;border-left:0}.part,.part.core,.part.door{grid-column:span 1;min-height:0;padding:18px 16px 16px;border-right:0}.part:nth-child(odd){border-right:1px solid var(--line)}.part.core{grid-column:span 2}.part:nth-child(odd).core{border-right:0}.part h3{font-size:19px}.part.core h3{font-size:26px}.part p{font-size:13.5px}.part .go{display:none}.part.door{grid-column:span 2}}
/* contrast: forest as small text reads 4.4:1 on the pale band; a deeper forest for text only */
.rail5 li i,.part .n,.board .r i,.stop small,.mark{color:#476331}

/* enquiry.css · 5 Oct 2026 · the one form (Start a project · RFP · a product · a team), and the expanded footer */
html.enq-open{overflow:hidden}
.enq [hidden]{display:none!important}
.enq{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:16px;background:#fbfbf8;color:var(--ink);box-shadow:0 30px 80px rgba(16,26,20,.28),0 2px 6px rgba(16,26,20,.08);overflow:auto;overscroll-behavior:contain}
.enq::backdrop{background:rgba(15,22,19,.55);backdrop-filter:blur(3px)}
.enq[open]{animation:enqIn .38s cubic-bezier(.16,1,.3,1)}
@keyframes enqIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.enq-in{padding:30px 34px 28px}
.enq-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.enq-top .k{font:600 11px/1 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#476331;margin:0 0 10px}
.enq-top h2{font:700 clamp(26px,3.2vw,34px)/1.05 Manrope,sans-serif;letter-spacing:-.045em;margin:0}
.enq-top p{margin:8px 0 0;font-size:14.5px;color:#55605a;max-width:46ch}
.enq-x{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:20px;line-height:1}
.enq-x:hover{background:#f0f2ec}
.enq form{display:grid;gap:14px}
.enq fieldset{border:0;margin:0;padding:0}
.enq legend{font:600 12.5px 'DM Sans',sans-serif;color:#3a443d;margin:0 0 8px;padding:0}
.enq-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.enq-types label{position:relative;cursor:pointer}
.enq-types input{position:absolute;opacity:0;pointer-events:none}
.enq-types span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font:600 13.5px/1.2 'DM Sans',sans-serif;color:#3a443d;transition:border-color .2s,background .2s,color .2s}
.enq-types input:checked+span{border-color:var(--ink);background:var(--ink);color:#fbfbf8}
.enq-types input:focus-visible+span{outline:3px solid #6b8c23;outline-offset:2px}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.enq label.f{display:grid;gap:6px;font:600 12.5px 'DM Sans',sans-serif;color:#3a443d}
.enq label.f em{font-style:normal;font-weight:450;color:#7a837c}
.enq input[type=text],.enq input[type=email],.enq input[type=tel],.enq select,.enq textarea{width:100%;box-sizing:border-box;font:400 15px/1.4 'DM Sans',sans-serif;color:var(--ink);background:#fff;border:1px solid #d3d9d0;border-radius:9px;padding:11px 13px;transition:border-color .2s,box-shadow .2s}
.enq textarea{min-height:118px;resize:vertical}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:0;border-color:#527536;box-shadow:0 0 0 3px rgba(216,250,116,.55)}
.enq .bad input,.enq .bad textarea,.enq .bad select{border-color:#c2412d;box-shadow:0 0 0 3px rgba(194,65,45,.12)}
.enq-filebox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 13px;border:1px dashed #c5cdc2;border-radius:9px;background:#fff;font-size:13.5px;color:#55605a}
.enq-filebox input{position:absolute;opacity:0;width:1px;height:1px}
.enq-filebox .pick{cursor:pointer;font:600 13px 'DM Sans',sans-serif;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 11px;background:#f6f7f3}
.enq-filebox .pick:hover{background:#eef1e9}
.enq-filebox input:focus-visible+.pick{outline:3px solid #6b8c23;outline-offset:2px}
.enq-file-name{font-weight:600;color:var(--ink)}
.enq-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.enq-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.enq-foot small{font-size:12.5px;color:#7a837c;max-width:36ch;line-height:1.45}
.enq-send{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:22px;min-height:52px;padding:14px 22px;border-radius:8px;background:var(--signal);color:var(--ink);font:700 15px 'DM Sans',sans-serif;transition:transform .2s,background .2s}
.enq-send:hover{background:#c4e761;transform:translateY(-1px)}
.enq-send[disabled]{opacity:.65;cursor:progress;transform:none}
.enq-send.busy .arrow{animation:enqSpin .9s linear infinite;display:inline-block}
@keyframes enqSpin{to{transform:rotate(360deg)}}
.enq-status{min-height:1.2em;font-size:13.5px;color:#55605a;margin:0}
.enq-status.err{color:#a3341f}
.enq-status a{color:inherit;font-weight:600}
.enq-done{text-align:left;padding:8px 0 4px}
.enq-done .tick{width:54px;height:54px;border-radius:50%;background:var(--signal);display:grid;place-items:center;margin-bottom:18px}
.enq-done h3{font:700 28px/1.08 Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 10px}
.enq-done p{font-size:15px;color:#3c463f;margin:0 0 8px;max-width:48ch}
.enq-done .enq-ref{font:500 12px 'DM Sans',sans-serif;color:#7a837c;letter-spacing:.02em}
.enq-done button{margin-top:18px}
@media(max-width:640px){
  .enq{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:18px 18px 0 0}
  .enq[open]{animation:enqUp .38s cubic-bezier(.16,1,.3,1)}
  @keyframes enqUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .enq-in{padding:22px 18px 22px}
  .enq-types{grid-template-columns:1fr 1fr}
  .enq-grid{grid-template-columns:1fr}
  .enq-send{width:100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){.enq[open]{animation:none}}

/* --- the footer: kaam.cc is the enterprise door; kaam.com and the rest of the family hang off it --- */
.footer.kfx{background:var(--dark);color:#c9d4ca;padding-block:64px 34px}
.kfx-top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));gap:40px 32px;padding-bottom:40px;border-bottom:1px solid #2f3f35}
.kfx-brand .brand span{border-color:#637266}
.kfx-brand p{margin:18px 0 0;font-size:14px;line-height:1.55;color:#b7c4b9;max-width:34ch}
.kfx-brand .kfx-cta{margin-top:22px;display:inline-flex;align-items:center;gap:18px;min-height:46px;padding:11px 18px;border-radius:6px;background:var(--signal);color:var(--ink);font:700 14px 'DM Sans',sans-serif}
.kfx-brand .kfx-cta:hover{background:#c4e761}
.kfx-col b{display:block;font:600 11px/1 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8fa293;margin:4px 0 14px}
.kfx-col a{display:block;font-size:14px;line-height:1.35;color:#dbe4dc;padding:6px 0;transition:color .2s}
.kfx-col a:hover{color:var(--signal)}
.kfx-col a small{display:block;font-size:12px;color:#8fa293;margin-top:2px}
.kfx-col a .ext{font-size:11px;color:#8fa293;margin-left:4px}
.kfx-base{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-top:24px;font-size:12px;color:#9eafa1}
.kfx-base a{color:#c9d4ca}
.kfx-base a:hover{color:var(--signal)}
.kfx-base .kfx-home{margin-left:auto;font-weight:600;color:var(--signal)}
@media(max-width:1100px){.kfx-top{grid-template-columns:repeat(2,minmax(0,1fr))}.kfx-brand{grid-column:1/-1}}
@media(max-width:560px){.kfx-top{grid-template-columns:1fr 1fr;gap:30px 18px}.kfx-base .kfx-home{margin-left:0}}

/* Your team: the core roles in bold */
.centre-content p b{color:#fff;font-weight:600}

/* Kaam Labs: four cards, one anatomy. Rows line up across the cards (subgrid), so titles, lines, actions and rules sit level. */
.lab-grid.four.lcs{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.lab-grid.four.lcs .lab-card.lc{display:grid;grid-row:span 5;grid-template-rows:subgrid;grid-template-columns:1fr;gap:0;padding:0;min-height:0;background:#fbfcf9;border:1px solid #dde3d8;border-radius:14px;overflow:hidden}
.lab-grid.four.lcs .lab-card.lc:hover{transform:translateY(-3px);box-shadow:0 26px 44px -30px rgba(27,42,26,.35)}
.lc-fig{position:relative;height:156px;display:grid;place-items:center;background:linear-gradient(180deg,#f2f5ee,#eaefe4);border-bottom:1px solid #dde3d8}
.lc-n{position:absolute;top:14px;left:18px;font:600 10.5px/1 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#5d6f58}
.lab-grid.four.lcs .lc-h{margin:0;padding:22px 24px 0;font:700 20px/1.18 Manrope,sans-serif;letter-spacing:-.035em;color:var(--ink)}
.lab-grid.four.lcs .lc-p{margin:0;padding:10px 24px 0;max-width:none;font-size:14px;line-height:1.55;color:#5a655e}
.lc-act{padding:16px 24px 0;align-self:end}
.lc-a{display:inline-flex;gap:6px;align-items:baseline;font:600 13px/1.3 'DM Sans',sans-serif;color:var(--ink);border-bottom:1px solid #b9c4b5;padding-bottom:3px;transition:color .2s,border-color .2s}
.lc-a:hover{color:#3f6a28;border-color:currentColor}
.lab-grid.four.lcs .lc-r{margin:20px 24px 24px;padding:15px 0 0;border-top:1px solid #e1e6dc;font-size:12.5px;line-height:1.5;color:#55644f;max-width:none;align-self:start}
.lab-grid.four.lcs .lc-r b{color:var(--forest);font-weight:700;margin-right:7px}
/* the four pictures, one visual weight */
.lc-fig .wave{width:110px;height:66px;gap:5px;align-self:center}
.lc-fig .wave i{width:6px}
.lc-fig .lring{width:76px;height:76px;background:#fbfcf9}
.lc-fig .lring::before{inset:11px}
.sig{width:136px;height:82px}
.sig-l path{fill:none;stroke:#b6c4b0;stroke-width:1.2}
.sig-n circle{fill:#fbfcf9;stroke:#527536;stroke-width:1.3}
.sig-hot{fill:var(--signal);stroke:#527536;stroke-width:1.3}
.sig-ring{fill:none;stroke:#527536;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:sigPing 2.4s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes sigPing{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(3.6);opacity:0}}
.lc-ctr{display:grid;justify-items:center;gap:6px}
.lc-ctr b{font:700 38px/1 Manrope,sans-serif;letter-spacing:-.05em;color:var(--ink)}
.lc-ctr span{font:600 10.5px/1 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5d6f58}
@media(max-width:1100px){.lab-grid.four.lcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.lab-grid.four.lcs{grid-template-columns:1fr;gap:14px}.lc-fig{height:132px}}
@media(prefers-reduced-motion:reduce){.sig-ring{animation:none;opacity:0}}

/* Outcomes: three tiles, rows aligned (subgrid); one figure language, full width, one height */
.outcomes .tiles.ocs{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.outcomes .tiles.ocs .tile{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0;min-height:0;padding:28px 30px 24px;background:#fbfcf9;border:1px solid #dde3d8;border-radius:14px}
.outcomes .tiles.ocs .tile .tk{margin-bottom:18px}
.outcomes .tiles.ocs .tile h3.oc{max-width:none;margin:0 0 14px;font-size:clamp(22px,1.75vw,27px);line-height:1.12}
.outcomes .tiles.ocs .tile p{max-width:none;margin:0 0 26px}
.outcomes .tiles.ocs .go{margin-top:22px}
.ofig{align-self:end;display:grid;grid-template-rows:72px auto auto;gap:0}
.ofig .figcap{margin-top:12px}
.oaxis{display:flex;justify-content:space-between;margin-top:8px;font:500 10.5px/1 'DM Sans',sans-serif;color:#7a857c;letter-spacing:.02em}
/* the figures: one height, livelier, all drawn on arrival */
.ofig{grid-template-rows:96px auto auto}
/* 01: placements, an area that draws itself */
.oarea{position:relative;height:96px;background:repeating-linear-gradient(0deg,transparent 0 23px,#e6ebe1 23px 24px)}
.oarea svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.oa-line{fill:none;stroke:#3f6a28;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .1s}
.oa-fill{opacity:0;transition:opacity 1s ease 1s}
.in .oa-line{stroke-dashoffset:0}
.in .oa-fill{opacity:1}
.oa-dot{position:absolute;right:0;top:var(--y);width:14px;height:14px;margin:-7px -7px 0 0;border-radius:50%;background:var(--signal);border:2px solid #3f6a28;box-sizing:border-box;opacity:0;transform:scale(.3);transition:opacity .4s ease 1.6s,transform .5s cubic-bezier(.34,1.56,.64,1) 1.6s}
.oa-dot::before{content:'';position:absolute;inset:-7px;border-radius:50%;background:rgba(216,250,116,.55);animation:oaPing 2.2s ease-out 2.2s infinite}
.oa-dot em{position:absolute;right:-2px;bottom:18px;white-space:nowrap;font:700 10.5px/1 'DM Sans',sans-serif;font-style:normal;color:#fff;background:var(--ink);padding:5px 8px;border-radius:20px}
.in .oa-dot{opacity:1;transform:none}
@keyframes oaPing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
/* 02: the four-hour window (kept as it was) */
.osla{position:relative;height:72px;align-self:end}
.osla-win{position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:6px;background:linear-gradient(90deg,#dfe8d6,#eef2e8);box-shadow:inset 0 0 0 1px #cdd8c4}
.osla-win::after{content:'';position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:6px;background:var(--forest);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--out) .2s}
.in .osla-win::after{transform:none}
.osla-pt{position:absolute;bottom:0;left:var(--x);width:0}
.osla-pt::before{content:'';position:absolute;left:-7px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--forest);box-sizing:border-box}
.osla-pt.flag::before{border-color:#c2412d;background:#fdeee9}
.osla-pt.call::before{background:var(--signal)}
.osla-pt em{position:absolute;bottom:22px;left:0;white-space:nowrap;font:600 11px/1 'DM Sans',sans-serif;font-style:normal;color:var(--ink)}
.osla-pt.call em{transform:translateX(-50%)}
.osla-pt.flag em{color:#a3341f}
.osla-pt em::after{content:'';position:absolute;left:0;top:15px;width:1px;height:8px;background:currentColor;opacity:.5}
.osla-pt.call em::after{left:50%}
/* 03: the statutory month (kept as it was) */
.omonth{display:grid;grid-template-columns:repeat(31,1fr);gap:2px;align-items:end;height:72px;align-self:end}
.omonth i{display:block;height:22px;border-radius:2px;background:#dde4d6}
.omonth i.on{height:44px;background:var(--forest)}
.omonth i.pf{height:34px;background:var(--signal);box-shadow:inset 0 0 0 1px #8fae3e}
.omlbl{position:relative;height:14px;margin-top:8px;font:500 10.5px/1 'DM Sans',sans-serif;color:#5d6a60}
.omlbl span{position:absolute;left:var(--x);white-space:nowrap}
html.static .oa-line{stroke-dashoffset:0}html.static .oa-fill,html.static .oa-dot{opacity:1;transform:none}html.static .osla-win::after{transform:none}
@media(prefers-reduced-motion:reduce){.oa-line{stroke-dashoffset:0;transition:none}.oa-fill,.oa-dot{opacity:1;transform:none;transition:none}.osla-win::after{transform:none;transition:none}.oa-dot::before{animation:none}}
@media(max-width:1100px){.outcomes .tiles.ocs{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.outcomes .tiles.ocs{grid-template-columns:1fr;gap:14px}.outcomes .tiles.ocs .tile{padding:24px 22px 20px}}

/* Hero: three photographs behind one headline, a slow crossfade that runs once */
.line-hero .scene.alt{opacity:0!important;transition:opacity 1.4s cubic-bezier(.4,0,.2,1)!important}
.line-hero .scene.alt.on{opacity:1!important}
.scene-cap{position:absolute;right:max(var(--pad),24px);bottom:18px;z-index:3;margin:0;padding:0;list-style:none;display:grid}
.scene-cap li{grid-area:1/1;justify-self:end;font:600 11.5px/1 'DM Sans',sans-serif;letter-spacing:.02em;color:#fff;background:rgba(23,34,29,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 11px;border-radius:20px;opacity:0;transform:translateY(4px);transition:opacity .7s ease,transform .7s ease}
.scene-cap li.on{opacity:1;transform:none;transition-delay:.5s}
html.static .scene-cap li:not(.on),html.static .line-hero .scene.alt{opacity:0!important}
@media(min-width:901px){
  /* the training and office walls are narrower than the kitchen's: slide them right so the paragraph stays on clean paper */
  .line-hero .scene.alt[data-i="2"]{transform:translateX(3.5%) scale(1.09)!important}
  .line-hero .scene.alt[data-i="3"]{transform:translateX(6.5%) scale(1.09)!important}
}
@media(max-width:900px){
  .line-hero .scene.alt{position:absolute;top:auto;left:0;right:0;bottom:0;width:100%;height:94vw;margin:0;object-fit:cover;object-position:100% 50%;transform:none!important}
  .line-hero .scene.alt[data-i="2"]{object-position:80% 50%}
  .scene-cap{right:14px;bottom:12px}
}

/* polish pass, 6 Oct: the work legend keeps each mark beside its words; the phone shelf ends evenly; wrapped statuses keep their dot on the first line */
.work-note{gap:10px 22px}
.work-note .wn-i{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.work-note .wn-note{color:#7a857c}
.part .st{align-items:flex-start}
.part .st i{margin-top:2px}
@media(max-width:760px){.shelf .part:nth-child(10){grid-column:span 2;border-right:0}.work-note .wn-i{white-space:normal}}

/* the same form on the contact page (6 Oct): a panel on the page instead of a dialog */
.enq.enq-page{display:block;position:static;width:100%;max-width:none;max-height:none;margin:0;border:1px solid var(--line);border-radius:16px;background:#fbfbf8;box-shadow:0 30px 60px -44px rgba(27,42,26,.35)}
.enq.enq-page .enq-in{padding:clamp(22px,3vw,36px)}
@media(max-width:600px){.enq-types{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ═══════════════════════════════════════════════════════════════
   PAGES · 6 Oct 2026 · every kaam.cc page beyond the home page.
   Same paper, ink, lime and type as the home page; an editorial
   two-column rhythm (folio + heading on the left, the matter on
   the right), one dark band per page for the sentence that matters,
   hairlines instead of boxes. Everything here is prefixed pg-.
   ═══════════════════════════════════════════════════════════════ */
:root{--forest:#527536;--mono:'DM Sans',sans-serif}
.pg a.case{display:block;color:inherit}
a.case{display:block;color:inherit}
.case-go{display:inline-block;margin-left:8px;font-weight:600;color:var(--ink);border-bottom:1px solid currentColor}
.section-head .eyebrow a{border-bottom:1px solid transparent;transition:border-color .2s}.section-head .eyebrow a:hover{border-color:currentColor}
@media(max-width:1100px){.nav-links>a:nth-child(3){display:inline-block}.nav-links{gap:18px;font-size:13.5px}}
@media(max-width:760px){.nav-links>a:nth-child(3){display:block}}

/* ── page hero ─────────────────────────────────────────────── */
.pg-hero{padding:clamp(36px,6vh,72px) var(--pad) 0;position:relative}
.pg-hero::before{display:none}
.pg-crumb{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:clamp(26px,4vh,44px)}
.pg-crumb a{color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}.pg-crumb a:hover{color:var(--ink);border-color:currentColor}
.pg-crumb i{font-style:normal;color:#aab3ab}
.pg-tags{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:22px;font:600 11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#3f4b42}
.pg-tags .mark{text-transform:uppercase}
.pg-tags span.t{color:var(--muted)}
.pg-tags a.t{color:var(--muted);border-bottom:1px solid transparent}.pg-tags a.t:hover{color:var(--ink);border-color:currentColor}
.pg-hero .eyebrow{margin-bottom:22px}
.pg-hero h1{font:700 clamp(40px,5.6vw,92px)/.96 Manrope;letter-spacing:-.065em;max-width:15ch;text-wrap:balance}
.pg-hero h1 .mk{color:var(--ink)}
.pg-hero .pg-display{font:700 clamp(34px,4.6vw,76px)/.98 Manrope;letter-spacing:-.06em;margin-top:18px;max-width:18ch;color:#6b766c}
.pg-hero .pg-lede{margin-top:clamp(24px,3.5vh,38px);display:grid;grid-template-columns:minmax(0,760px) auto;gap:28px 48px;align-items:end}
.pg-hero .pg-lede p{font-size:clamp(17px,1.25vw,21px);line-height:1.5;color:#3c463f;max-width:62ch}
.pg-hero .pg-lede p b{color:var(--ink);font-weight:600}
.pg-hero .actions{gap:10px}
.pg-facts{margin-top:clamp(30px,5vh,52px);border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0}
.pg-facts div{padding:16px 22px 18px 0;border-right:1px solid var(--line);margin-right:22px}
.pg-facts div:last-child{border-right:0;margin-right:0}
.pg-facts dt{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.pg-facts dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.pg-facts dd b{font-weight:600}
.pg-facts dd .num{font:600 clamp(26px,2.4vw,36px)/1 Manrope;letter-spacing:-.04em;display:block;margin-bottom:4px;font-variant-numeric:tabular-nums}
.pg-facts dd .live{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--signal);color:var(--ink);border-radius:999px;padding:4px 7px;vertical-align:2px;margin-left:6px}
.pg-hero .pg-crumb,.pg-hero .pg-tags,.pg-hero h1,.pg-hero .pg-display,.pg-hero .pg-lede,.pg-hero .pg-facts{opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pg-hero.in .pg-crumb{opacity:1;transform:none;transition-delay:.05s}.pg-hero.in .pg-tags{opacity:1;transform:none;transition-delay:.1s}.pg-hero.in h1,.pg-hero.in .pg-display{opacity:1;transform:none;transition-delay:.15s}.pg-hero.in .pg-lede{opacity:1;transform:none;transition-delay:.55s}.pg-hero.in .pg-facts{opacity:1;transform:none;transition-delay:.85s}
html.static .pg-hero .pg-crumb,html.static .pg-hero .pg-tags,html.static .pg-hero h1,html.static .pg-hero .pg-display,html.static .pg-hero .pg-lede,html.static .pg-hero .pg-facts{opacity:1;transform:none}
/* the photograph: full bleed, sized by the picture, a caption chip, settles in */
.pg-band{position:relative;margin:clamp(36px,6vh,64px) calc(-1 * var(--pad)) 0;height:clamp(300px,46vw,700px);overflow:clip;background:#e9ede5;isolation:isolate}
.pg-band img{width:var(--bw,100%);max-width:none;height:100%;margin-left:var(--bl,0);object-fit:cover;object-position:var(--bp,50% 50%);transform:scale(1.06);transition:transform 1.8s var(--out);display:block}
.pg-hero.in .pg-band img,html.static .pg-band img{transform:none}
.pg-band .cap{position:absolute;right:max(var(--pad),24px);bottom:18px;z-index:2;font:600 11.5px/1 var(--mono);letter-spacing:.02em;color:#fff;background:rgba(23,34,29,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 11px;border-radius:20px}
.pg-band.tall{height:clamp(320px,52vw,760px)}
.pg-band.portrait{display:none}
/* a drawn figure in the hero where no photograph explains (wellbeing, sustainability, trust…) */
.pg-fig{margin-top:clamp(36px,6vh,64px);border-top:1px solid var(--line);padding-top:28px}

/* ── sections ───────────────────────────────────────────────── */
.pg-sec{padding:clamp(56px,8vh,104px) var(--pad);border-top:1px solid var(--line)}
.pg-sec.first{border-top:0}
.pg-grid{display:grid;grid-template-columns:minmax(200px,.85fr) minmax(0,2.15fr);gap:clamp(24px,5vw,88px);align-items:start}
.pg-grid>aside{position:sticky;top:110px}
.pg-grid>aside small{display:block;font:600 11.5px var(--mono);letter-spacing:.06em;color:var(--forest);margin-bottom:12px}
.pg-grid>aside h2{font:650 clamp(26px,2.6vw,40px)/1.02 Manrope;letter-spacing:-.045em;max-width:12ch}
.pg-grid>aside p{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:30ch}
.pg-body{min-width:0}
.pg-body>p{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:#2f3833;max-width:66ch;margin:0 0 18px}
.pg-body>p:last-child{margin-bottom:0}
.pg-body>p.lede{font-size:clamp(19px,1.5vw,24px);line-height:1.42;color:var(--ink);letter-spacing:-.01em;max-width:30ch;font-family:Manrope;font-weight:500}
.pg-body h3{font:650 clamp(17px,1.3vw,21px)/1.25 Manrope;letter-spacing:-.025em;margin:34px 0 10px}
.pg-body h3:first-child{margin-top:0}
.pg-body .note{font-size:13.5px;color:var(--muted);max-width:60ch;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.pg-body a:not(.button){border-bottom:1px solid #b9c1b9;transition:border-color .2s}.pg-body a:not(.button):hover{border-color:var(--ink)}
/* the ledger: hairline rows, a lime point */
.pg-ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.pg-ledger li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:#2f3833}
.pg-ledger li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--signal);border:1.5px solid var(--forest);margin-top:.5em;box-sizing:border-box}
.pg-ledger li b,.pg-ledger li strong{color:var(--ink);font-weight:600}
.pg-ledger.two{column-count:2;column-gap:40px;border-top:0}
.pg-ledger.two li{break-inside:avoid;border-top:1px solid var(--line);border-bottom:0}
.pg-ledger.nums{counter-reset:row}
.pg-ledger.nums li{grid-template-columns:34px minmax(0,1fr)}
.pg-ledger.nums li::before{content:counter(row,decimal-leading-zero);counter-increment:row;width:auto;height:auto;border:0;background:none;border-radius:0;font:600 12px/1.9 var(--mono);color:var(--forest);letter-spacing:.04em}
/* grouped ledgers (what we built, what it handles) */
.pg-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}
.pg-groups h3{margin:0 0 6px}
.pg-groups .pg-ledger{margin-bottom:20px}
/* three facts in a row: built for the field */
.pg-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pg-trio div{border-top:1px solid var(--ink);padding-top:16px;font-size:15px;line-height:1.5;color:#2f3833}
.pg-trio div b{display:block;font:650 17px/1.25 Manrope;letter-spacing:-.025em;color:var(--ink);margin-bottom:8px}
.pg-trio div small{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--forest);margin-bottom:12px}
/* chips: specialists, links to themes and products */
.pg-chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-chips a,.pg-chips span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fbfbf8;color:var(--ink);transition:background .2s,transform .4s var(--spring),border-color .2s}
.pg-chips a:hover{background:#e9ede5;transform:translateY(-2px);border-color:#b9c1b9}
.pg-chips .mark{font-size:10.5px}
.pg-chips b{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
/* the three outcome sentences */
.pg-outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:o}
.pg-outs div{border-top:1px solid var(--ink);padding-top:16px}
.pg-outs div::before{content:'Outcome ' counter(o,decimal-leading-zero);counter-increment:o;display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--forest);margin-bottom:14px}
.pg-outs p{font:600 clamp(18px,1.5vw,23px)/1.22 Manrope;letter-spacing:-.03em;color:var(--ink);max-width:18ch}
/* tables */
.pg-tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.pg-tbl th{text-align:left;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 18px 12px 0;border-bottom:1px solid var(--ink)}
.pg-tbl td{vertical-align:top;padding:14px 18px 14px 0;border-bottom:1px solid var(--line);color:#2f3833}
.pg-tbl td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.pg-tbl tr:last-child td{border-bottom:0}
.pg-tbl.plain td:first-child{white-space:normal}
/* steps: the five, the four ways, what happens next */
.pg-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.pg-steps div{border-top:1px solid var(--ink);padding-top:18px}
.pg-steps b.n{display:block;font:700 clamp(34px,3.2vw,52px)/1 Manrope;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--ink);margin-bottom:18px}
.pg-steps h3{margin:0 0 8px;font-size:clamp(17px,1.3vw,20px)}
.pg-steps p{font-size:14.5px;line-height:1.5;color:#3c463f}
.pg-steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-steps.wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
.pg-steps div{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.in .pg-steps div{opacity:1;transform:none}
.in .pg-steps div:nth-child(2){transition-delay:.08s}.in .pg-steps div:nth-child(3){transition-delay:.16s}.in .pg-steps div:nth-child(4){transition-delay:.24s}.in .pg-steps div:nth-child(5){transition-delay:.32s}
html.static .pg-steps div{opacity:1;transform:none}
/* the dark band: the sentence that matters */
.pg-dark{background:var(--dark);color:var(--paper);padding:clamp(64px,9vh,120px) var(--pad);position:relative;overflow:clip;border-top:0}
.pg-dark::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='22'%3E%3Cpath d='M0 0L38 22M38 0L0 22' fill='none' stroke='%23d8fa74' stroke-width='.5'/%3E%3C/svg%3E");opacity:.07;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000);mask-image:linear-gradient(90deg,transparent 40%,#000)}
.pg-dark .pg-grid{position:relative}
.pg-dark aside small{color:var(--signal)}
.pg-dark aside h2{color:#fff}
.pg-dark aside p{color:#bac8be}
.pg-quote{font:500 clamp(28px,3.4vw,56px)/1.1 Manrope;letter-spacing:-.045em;color:#fff;max-width:22ch;text-wrap:balance}
.pg-quote .mk{color:#fff;background-image:linear-gradient(rgba(216,250,116,.28),rgba(216,250,116,.28))}
.pg-dark .pg-ind{margin-top:30px;padding-top:18px;border-top:1px solid #3d5043;font-size:15px;line-height:1.55;color:#d2dcd3;max-width:60ch}
.pg-dark .pg-ind b{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--signal);margin-bottom:10px}
.pg-dark .pg-ledger{border-top-color:#8a988c}.pg-dark .pg-ledger li{border-bottom-color:#2f3f35;color:#d2dcd3}.pg-dark .pg-ledger li b{color:#fff}
.pg-dark .pg-body>p{color:#d2dcd3}
.pg-dark .pg-cert{font:600 clamp(22px,2.4vw,36px)/1.2 Manrope;letter-spacing:-.035em;color:#fff;max-width:26ch}
.pg-dark .pg-cert b{color:var(--signal);font-weight:700}
.pg-dark .pg-certrow{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font-size:13.5px;color:#bac8be}
.pg-dark .pg-certrow span b{color:#fff;font-weight:600}
/* the FAQ */
.pg-faq{border-top:1px solid var(--ink)}
.pg-faq details{border-bottom:1px solid var(--line)}
.pg-faq summary{display:flex;gap:22px;align-items:baseline;list-style:none;padding:20px 0;cursor:pointer;font:600 clamp(16px,1.2vw,19px)/1.3 Manrope;letter-spacing:-.02em;transition:padding-left .35s var(--ease)}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:'+';margin-left:auto;font-size:24px;font-weight:400;line-height:1;transition:transform .4s var(--spring)}
.pg-faq details[open] summary::after{content:'−'}
.pg-faq details[open] summary,.pg-faq summary:hover{padding-left:6px}
.pg-faq details>p{padding:0 48px 22px 0;font-size:15.5px;line-height:1.6;color:#3c463f;max-width:66ch}
@supports (interpolate-size: allow-keywords){.pg-faq details::details-content{height:0;overflow:clip;transition:height .5s var(--out),content-visibility .5s allow-discrete}.pg-faq details[open]::details-content{height:auto}}
/* the links row at the foot of a case: what we'd bring to yours */
.pg-bring{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pg-bring div{border-top:1px solid var(--ink);padding-top:14px}
.pg-bring small{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pg-bring .pg-chips a{font-size:13px;padding:8px 12px}
/* cards: the work */
.pg-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.pg-filters button{font:600 12.5px var(--mono);letter-spacing:.02em;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fbfbf8;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.pg-filters button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pg-filters button:hover{background:#e9ede5}.pg-filters button[aria-pressed=true]:hover{background:#354d3a}
.pg-filters i{display:block;width:100%;height:0}
.pg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pg-card{display:grid;grid-template-rows:auto auto auto 1fr auto;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fbfbf8;color:inherit;transition:transform .5s var(--spring),box-shadow .5s;min-height:100%}
.pg-card:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px #1b2a1a55}
.pg-card.hide{display:none}
.pg-card .ph{aspect-ratio:16/10;background:#e6ebe2;overflow:hidden;position:relative}
.pg-card .ph img{width:var(--bw,100%);max-width:none;height:100%;margin-left:var(--bl,0);object-fit:cover;object-position:var(--bp,50% 50%);transform:scale(1.06);transition:transform 1.4s var(--out)}
.pg-card:hover .ph img{transform:scale(1.02)}
.pg-card .ph.fig{display:grid;place-items:center;background:var(--dark)}
.pg-card .tk{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:18px 22px 0;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pg-card h3{font:650 clamp(20px,1.6vw,25px)/1.12 Manrope;letter-spacing:-.04em;padding:12px 22px 0;color:var(--ink)}
.pg-card p{padding:10px 22px 0;font-size:14.5px;line-height:1.5;color:#526050}
.pg-card .ft{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px 20px;margin-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.pg-card .ft em{font-style:normal;max-width:34ch;line-height:1.4}
.pg-card .ft b{font-weight:600;color:var(--ink);white-space:nowrap;transition:transform .35s var(--spring);display:inline-block}
.pg-card:hover .ft b{transform:translate(3px,-3px)}
.pg-cards.big{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-legend{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px;font-size:13.5px;color:var(--muted)}
.pg-legend span{display:inline-flex;align-items:center;gap:10px}
/* products */
.pg-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);position:relative;counter-reset:f}
.pg-flow>div{padding:26px 22px 26px 0;position:relative}
.pg-flow>div+div{padding-left:26px}
.pg-flow>div+div::before{content:'→';position:absolute;left:-7px;top:30px;font:400 20px/1 Manrope;color:var(--forest)}
.pg-flow small{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--forest);margin-bottom:12px}
.pg-flow b{display:block;font:700 clamp(26px,2.6vw,40px)/1 Manrope;letter-spacing:-.05em;margin-bottom:10px}
.pg-flow span{font-size:14px;color:var(--muted)}
.pg-flow span a{border-bottom:1px solid #b9c1b9}
.pg-under{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;padding:16px 0 0;font-size:14px;color:var(--muted)}
.pg-under b{color:var(--ink);font-weight:600}
.pg-core{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.pg-core>a,.pg-core>div{display:grid;grid-template-rows:auto auto auto 1fr auto;padding:26px 26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:inherit;min-height:320px;transition:background .3s}
.pg-core>a:hover{background:#eef1e9}
.pg-core .n{font:600 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.pg-core .fam{font:600 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--forest);margin-top:10px}
.pg-core h3{font:650 clamp(26px,2.4vw,40px)/1 Manrope;letter-spacing:-.05em;margin:18px 0 12px}
.pg-core p{font-size:14.5px;line-height:1.5;color:#526050;max-width:34ch}
.pg-core .st{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.pg-core .st b{color:var(--ink);font-weight:600;transition:transform .35s var(--spring);display:inline-block}
.pg-core>a:hover .st b{transform:translate(3px,-3px)}
.pg-core.seven{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-core.seven>a,.pg-core.seven>div{min-height:200px;padding:20px 22px 18px}
.pg-core.seven h3{font-size:clamp(20px,1.5vw,24px);margin:12px 0 8px}
.pg-core.seven p{font-size:13.5px}
.pg-core.seven .st{justify-content:flex-end}
.pg-core .st b{white-space:nowrap}
.pg-trio div .pl{font:600 17px/1.3 Manrope;letter-spacing:-.025em;color:var(--ink)}
/* about: numbers, founders, press */
.pg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pg-stats div{border-top:1px solid var(--ink);padding-top:14px}
.pg-stats b{display:block;font:700 clamp(34px,3.6vw,60px)/1 Manrope;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.pg-stats span{display:block;margin-top:8px;font-size:14px;color:var(--muted)}
.pg-founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.pg-founders>div{border-top:1px solid var(--ink);padding-top:18px}
.pg-founders h3{font:650 clamp(22px,1.9vw,28px)/1.1 Manrope;letter-spacing:-.04em;margin:0}
.pg-founders .role{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--forest);margin:10px 0 16px}
.pg-founders p{font-size:15.5px;line-height:1.55;color:#2f3833;max-width:44ch}
.pg-founders blockquote{margin:0 0 16px;font:500 clamp(19px,1.6vw,24px)/1.3 Manrope;letter-spacing:-.03em;color:var(--ink);max-width:22ch}
.pg-founders .pg-ledger{margin-top:16px}
.pg-founders .pg-ledger li{font-size:14.5px;padding:10px 0}
.pg-press{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.pg-press li{display:grid;grid-template-columns:minmax(150px,.5fr) minmax(0,2fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.pg-press li b{font-weight:600}
.pg-press li small{display:block;font-size:12.5px;color:var(--muted)}
/* contact */
.pg-contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.pg-next{list-style:none;margin:0;padding:0;counter-reset:n}
.pg-next li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:#2f3833}
.pg-next li::before{content:counter(n,decimal-leading-zero);counter-increment:n;font:700 22px/1.2 Manrope;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--ink)}
.pg-next li b{color:var(--ink);font-weight:600}
.pg-addr{margin-top:28px;padding-top:18px;border-top:1px solid var(--ink);font-size:14.5px;line-height:1.6;color:#2f3833}
.pg-addr p{margin:0}.pg-addr p+p{margin-top:18px}.pg-addr a{border-bottom:1px solid #b9c1b9}.pg-addr a:hover{border-color:var(--ink)}
.pg-addr b{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
/* the themes index */
.pg-themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.pg-themes a{display:grid;grid-template-rows:auto auto 1fr auto;padding:24px 24px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:250px;color:inherit;transition:background .3s}
.pg-themes a:hover{background:#eef1e9}
.pg-themes .n{font:600 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--forest)}
.pg-themes h3{font:650 clamp(22px,1.9vw,30px)/1.05 Manrope;letter-spacing:-.045em;margin:14px 0 10px}
.pg-themes p{font-size:14px;line-height:1.5;color:#526050}
.pg-themes b{margin-top:18px;font-size:13px;font-weight:600;display:inline-block;transition:transform .35s var(--spring)}
.pg-themes a:hover b{transform:translate(3px,-3px)}
/* the closing band (reuses the home page's .contact look) */
.pg-close{background:var(--signal);padding:clamp(56px,8vh,90px) var(--pad)}
.pg-close .contact-grid{display:flex;justify-content:space-between;align-items:center;gap:50px}
.pg-close h2{font:600 clamp(40px,5.4vw,84px)/1.02 Manrope;letter-spacing:-.065em;max-width:14ch}
.pg-close p{max-width:40ch;margin-bottom:24px;color:#43512b;font-size:16px}
.pg-close .text-link{margin-left:22px}
/* the drawn figures */
.pg-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:center}
.pg-art svg{width:100%;height:auto}
.pg-art .caption{font-size:13px;color:var(--muted);margin-top:12px}
.pg-rollup{display:grid;gap:10px;max-width:520px}
.pg-rollup div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;font-size:14px;color:#2f3833}
.pg-rollup div span{height:38px;border:1px solid var(--forest);border-radius:5px;background:linear-gradient(90deg,rgba(216,250,116,.55),rgba(216,250,116,.1))}
.pg-rollup div:nth-child(1) span{width:100%}.pg-rollup div:nth-child(2) span{width:72%}.pg-rollup div:nth-child(3) span{width:48%}.pg-rollup div:nth-child(4) span{width:26%}
.pg-rollup b{font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
/* general reveals inside sections */
.pg-sec .pg-body{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s}
.pg-sec.in .pg-body,html.static .pg-sec .pg-body{opacity:1;transform:none}
.pg-sec aside{opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pg-sec.in aside,html.static .pg-sec aside{opacity:1;transform:none}

@media(max-width:1100px){
  .pg-groups{grid-template-columns:1fr}
  .pg-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-core.seven{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-themes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-flow{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pg-flow b{font-size:22px}
}
@media(max-width:900px){
  .pg-grid{grid-template-columns:1fr;gap:22px}
  .pg-grid>aside{position:static}
  .pg-grid>aside h2{max-width:20ch}
  .pg-hero .pg-lede{grid-template-columns:1fr}
  .pg-cards,.pg-cards.big{grid-template-columns:1fr 1fr}
  .pg-core{grid-template-columns:1fr}
  .pg-core>a,.pg-core>div{min-height:0}
  .pg-trio,.pg-outs,.pg-bring,.pg-stats{grid-template-columns:1fr 1fr}
  .pg-founders{grid-template-columns:1fr}
  .pg-contact{grid-template-columns:1fr}
  .pg-art{grid-template-columns:1fr}
  .pg-flow{grid-template-columns:1fr;border-bottom:0}
  .pg-flow>div{padding:18px 0;border-bottom:1px solid var(--line)}
  .pg-flow>div+div{padding-left:0}
  .pg-flow>div+div::before{content:'↓';left:auto;right:0;top:14px}
}
@media(max-width:760px){
  .pg-hero h1{font-size:clamp(38px,10.5vw,64px);max-width:none}
  .pg-hero .pg-display{font-size:clamp(28px,8vw,48px)}
  .pg-hero .pg-lede p{font-size:16.5px}
  .pg-facts{grid-template-columns:1fr 1fr}
  .pg-facts div{border-right:0;margin-right:0;padding-right:12px}
  .pg-band{height:clamp(220px,62vw,420px);margin-top:28px}
  .pg-band .cap{right:14px;bottom:12px}
  .pg-sec{padding-block:44px}
  .pg-ledger.two{column-count:1}
  .pg-trio,.pg-outs,.pg-bring,.pg-stats,.pg-cards,.pg-cards.big,.pg-steps,.pg-steps.four,.pg-steps.three,.pg-steps.wide,.pg-themes,.pg-core.seven{grid-template-columns:1fr}
  .pg-steps b.n{font-size:30px;margin-bottom:10px}
  .pg-tbl{font-size:14px}
  .pg-tbl td:first-child{white-space:normal}
  .pg-tbl th,.pg-tbl td{padding-right:12px}
  .pg-quote{font-size:clamp(26px,7.4vw,38px)}
  .pg-close .contact-grid{display:block}
  .pg-close h2{font-size:clamp(36px,10vw,52px);margin-bottom:24px;max-width:none}
  .pg-close .text-link{margin-left:12px}
  .pg-press li{grid-template-columns:1fr;gap:4px}
  .pg-flow b{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.pg-hero .pg-crumb,.pg-hero .pg-tags,.pg-hero h1,.pg-hero .pg-display,.pg-hero .pg-lede,.pg-hero .pg-facts,.pg-steps div,.pg-sec .pg-body,.pg-sec aside{opacity:1;transform:none}.pg-band img{transform:none}}

/* ── the photo hero (6 Oct, Rishi: "why can't images be in the top, otherwise the page is unnecessarily long") ── */
.pg-hero.photo{padding:0 var(--pad) 0}
.pg-stage{position:relative;margin-inline:calc(-1 * var(--pad));min-height:clamp(500px,min(50vw,calc(100svh - 88px - 96px)),760px);display:grid;align-items:center;overflow:clip;background:var(--paper);isolation:isolate}
.pg-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--bp,60% 50%);transform:scale(1.08);transform-origin:70% 50%;transition:transform 1.8s var(--out),opacity .9s var(--ease);opacity:0}
.pg-hero.in .pg-scene,html.static .pg-scene{opacity:1;transform:scale(1.03)}
.pg-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 26%,rgba(247,248,245,.9) 38%,rgba(247,248,245,.45) 50%,rgba(247,248,245,0) 62%)}
.pg-stage.blended .pg-veil{background:linear-gradient(90deg,var(--paper) 0%,rgba(247,248,245,.75) 22%,rgba(247,248,245,.25) 36%,rgba(247,248,245,0) 46%)}
.pg-copy{position:relative;z-index:2;padding:clamp(30px,5vh,56px) var(--pad);width:min(46%,680px)}
.pg-copy .pg-crumb{margin-bottom:clamp(18px,3vh,32px)}
.pg-hero.photo h1{font-size:clamp(36px,4.3vw,70px);max-width:13ch}
.pg-hero.photo .pg-display{font-size:clamp(26px,3.2vw,52px);max-width:16ch}
.pg-hero.photo .pg-lede{grid-template-columns:1fr;gap:18px;margin-top:clamp(20px,3vh,32px)}
.pg-hero.photo .pg-lede p{font-size:clamp(16px,1.2vw,19.5px);max-width:44ch}
.pg-stage .cap{position:absolute;right:max(var(--pad),24px);bottom:18px;z-index:2;font:600 11.5px/1 var(--mono);letter-spacing:.02em;color:#fff;background:rgba(23,34,29,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 11px;border-radius:20px}
.pg-hero.photo .pg-facts{margin-top:0;border-top:1px solid var(--ink)}
.pg-sec{padding-block:clamp(44px,6.5vh,88px)}
@media(max-width:900px){
  .pg-stage{min-height:0;display:grid;background:none}
  .pg-scene{position:static;height:68vw;order:2;opacity:1;transform:none!important;object-position:var(--mp,70% 50%)}
  .pg-stage.blended .pg-scene{width:var(--bw,100%);max-width:none;margin-left:var(--bl,0);object-position:50% 50%}
  .pg-veil{display:none}
  .pg-copy{position:static;width:auto;order:1;padding:26px var(--pad) 22px}
  .pg-stage .cap{right:14px;bottom:12px}
  .pg-hero.photo h1{font-size:clamp(36px,10vw,60px);max-width:none}
}

/* dark photo heroes (the night office, the dusk skyline, the dark renders) */
.pg-stage.dark{background:var(--dark);color:var(--paper)}
.pg-stage.dark .pg-veil{background:linear-gradient(90deg,var(--dark) 0%,rgba(23,34,29,.75) 22%,rgba(23,34,29,.25) 36%,rgba(23,34,29,0) 46%)}
.pg-stage.dark .pg-crumb,.pg-stage.dark .pg-crumb a,.pg-stage.dark .pg-crumb i{color:#a9b5ad}
.pg-stage.dark .pg-crumb a:hover,.pg-stage.dark .pg-crumb span{color:#fff}
.pg-stage.dark .eyebrow{color:#dfe6dc}.pg-stage.dark .eyebrow .dot{background:var(--signal)}
.pg-stage.dark .pg-tags,.pg-stage.dark .pg-tags .mark,.pg-stage.dark .pg-tags span.t,.pg-stage.dark .pg-tags a.t{color:#dfe6dc}
.pg-stage.dark .pg-tags .mark i{border-color:var(--signal)}.pg-stage.dark .pg-tags .mark.run i{background:var(--signal)}.pg-stage.dark .pg-tags .mark.built i{background:linear-gradient(90deg,var(--signal) 50%,transparent 50%)}
.pg-stage.dark h1{color:#fff}
.pg-stage.dark h1 .mk{color:#fff;background-image:linear-gradient(rgba(216,250,116,.32),rgba(216,250,116,.32))}
.pg-stage.dark .pg-display{color:#9eafa1}
.pg-stage.dark .pg-lede p{color:#d2dcd3}.pg-stage.dark .pg-lede p b{color:#fff}
.pg-stage.dark .button{background:var(--signal);color:var(--ink)}.pg-stage.dark .button:hover{background:#c4e761}
.pg-stage.dark .cap{background:rgba(247,248,245,.14);color:#fff}
@media(max-width:900px){.pg-stage.dark{background:var(--dark);padding-bottom:0}.pg-stage.dark .pg-scene{height:62vw}}
/* the certification statement on paper (the trust page's hero is dark, so its first section stays light) */
.pg-light-cert .pg-cert{font:600 clamp(22px,2.4vw,36px)/1.2 Manrope;letter-spacing:-.035em;color:var(--ink);max-width:26ch}
.pg-light-cert .pg-cert b{color:var(--ink);background-image:linear-gradient(var(--signal),var(--signal));background-repeat:no-repeat;background-size:100% .42em;background-position:0 86%;padding:0 .04em;margin:0 -.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* ── widescreen (6 Oct, Rishi: "the sides of the top nav bar crop off on the left and right on widescreen, it needs to fit the width") ──
   the bar, the footer and the lime band run edge to edge; their content, and every page section, aligns to one gutter that grows past 1800px */
:root{--gut:max(var(--pad),calc((100% - 1800px) / 2 + var(--pad)))}
.site-nav.wrap,.footer.kfx.wrap,.contact.wrap{max-width:none;margin:0;padding-inline:var(--gut)}
.pg-sec,.pg-hero:not(.photo){padding-inline:var(--gut)}
.pg-hero.photo{padding:0}
.pg-stage{margin-inline:0}
.pg-copy{padding-inline:var(--gut)}
.pg-stage .cap{right:var(--gut)}
.pg-hero.photo .pg-facts{margin-inline:var(--gut)}
.pg-hero:not(.photo) .pg-fig{margin-inline:0}
.pg-copy{width:calc(min(46%,680px) + 2 * (var(--gut) - var(--pad)))}
/* long headlines (Kaam LMS, the Antone case): a wider column and a step down in size, so they hold three lines */
.pg-hero.photo.long h1{font-size:clamp(32px,3.6vw,58px);max-width:none}
.pg-hero.photo.long .pg-copy{width:calc(min(56%,820px) + 2 * (var(--gut) - var(--pad)))}
.pg-hero.photo.long .pg-lede p{max-width:60ch}
/* bundle 6 Oct 22:10 */

/* ── the line on /themes/ (6 Oct, Rishi: "stunningly designed so it's not so blah") ── */
.pg-linesec .section-head{margin-bottom:clamp(36px,5vh,64px)}
.pg-linesec .section-head h2{font-size:clamp(34px,4.2vw,64px)}
.pg-line{position:relative}
.pg-line ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 22px;position:relative}
.pg-line ol::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:var(--track,#dfe5d9)}
.pg-line ol::after{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:var(--forest);transform-origin:left;transform:scaleX(0);transition:transform 2.2s var(--out) .3s}
.pg-linesec.in .pg-line ol::after,html.static .pg-line ol::after{transform:scaleX(1)}
.pg-line li{position:relative;padding:34px 0 0;opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pg-linesec.in .pg-line li,html.static .pg-line li{opacity:1;transform:none}
.pg-line li:nth-child(2){transition-delay:.25s}.pg-line li:nth-child(3){transition-delay:.5s}.pg-line li:nth-child(4){transition-delay:.75s}.pg-line li:nth-child(5){transition-delay:1s}.pg-line li:nth-child(6){transition-delay:1.25s}
.pg-line .stop{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid var(--forest);box-sizing:border-box;z-index:1;transition:background .5s,box-shadow .5s}
.pg-linesec.in .pg-line .stop,html.static .pg-line .stop{background:var(--signal);box-shadow:0 0 0 6px rgba(216,250,116,.35)}
.pg-line .n{display:block;font:600 11.5px/1 var(--mono);letter-spacing:.08em;color:var(--forest);margin-bottom:12px}
.pg-line li h3{font:700 clamp(20px,1.9vw,30px)/1.02 Manrope;letter-spacing:-.045em;margin:0 0 12px;max-width:10ch}
.pg-line li p{font-size:14px;line-height:1.5;color:#526050;margin:0 0 14px;max-width:26ch}
.pg-line .th{display:flex;flex-wrap:wrap;gap:6px}
.pg-line .th a{font:600 12px/1 var(--mono);letter-spacing:.02em;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#fbfbf8;color:var(--ink);transition:background .2s,transform .4s var(--spring)}
.pg-line .th a:hover{background:#e9ede5;transform:translateY(-2px)}
.pg-line li.end{background:var(--dark);color:var(--paper);border-radius:14px;padding:48px 22px 24px;margin:-16px -12px 0 -8px;z-index:2}
.pg-line li.end .stop{left:22px;top:16px}
.pg-line li.end .n{color:var(--signal)}.pg-line li.end h3{color:#fff;max-width:11ch}.pg-line li.end p{color:#bac8be}
.pg-line li.end .th a{background:transparent;color:#fff;border-color:#3d5043}.pg-line li.end .th a:hover{background:#243129}
.pg-line-ai{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-top:clamp(28px,4vh,44px);padding:18px 0;border-top:1px dashed #b9c1b9;border-bottom:1px dashed #b9c1b9}
.pg-line-ai .ai{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--signal);font:800 13px Manrope;letter-spacing:.04em;color:var(--ink)}
.pg-line-ai p{margin:0;font-size:15px;color:#2f3833;max-width:none}
.pg-line-ai a{border-bottom:1px solid #b9c1b9}.pg-line-ai a:hover{border-color:var(--ink)}
.pg-line-note{margin:22px 0 0;font-size:14px;color:var(--muted);max-width:60ch}
@media(max-width:1100px){.pg-line ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px}.pg-line ol::before,.pg-line ol::after{display:none}.pg-line li{padding-top:0}.pg-line .stop{position:static;display:block;margin-bottom:12px}.pg-line li.end{margin:0;padding:22px}.pg-line li.end .stop{position:static;margin-bottom:12px}}
@media(max-width:640px){.pg-line ol{grid-template-columns:1fr;gap:0}.pg-line li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 16px;padding:18px 0;border-top:1px solid var(--line)}.pg-line li .stop{grid-row:1/span 4;margin:0;position:relative;top:4px}.pg-line li .n,.pg-line li h3,.pg-line li p,.pg-line li .th{grid-column:2}.pg-line li h3{max-width:none}.pg-line li p{max-width:none}.pg-line li.end{grid-template-columns:20px minmax(0,1fr);padding:22px 18px;margin-top:8px;border-top:0}.pg-line li.end .stop{left:0;top:4px}}

/* ── phones (6 Oct, Rishi: "mobile optimise every one of the internal pages") ──
   one layer, last in the file, so no earlier rule (the widescreen block above set .pg-copy to 46%) can override it */
@media(max-width:900px){
  /* the photo hero reads: where you are · what it is · the headline · the picture · the words */
  .pg-hero.photo .pg-copy,.pg-hero.photo.long .pg-copy{display:contents;width:auto}
  .pg-stage,.pg-stage.dark{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:20px 0 0;overflow:clip}
  .pg-stage .pg-copy>*{padding-inline:var(--gut)}
  .pg-stage .pg-crumb{order:1;margin-bottom:18px}
  .pg-stage .pg-tags,.pg-stage .eyebrow{order:2}
  .pg-stage h1{order:3}
  .pg-stage .pg-display{order:4;margin-top:10px}
  .pg-stage .pg-scene{order:5;position:relative;height:58vw;max-height:420px;margin-top:22px;flex:none}
  .pg-stage .cap{order:6;position:relative;right:auto;bottom:auto;align-self:flex-end;margin:-40px 12px 12px 0;font-size:10.5px;padding:6px 10px}
  .pg-stage .pg-lede{order:7;margin-top:10px;padding-bottom:26px}
  .pg-hero.photo h1{font-size:clamp(31px,8.4vw,46px);line-height:1.04;max-width:none}
  .pg-hero.photo.long h1{font-size:clamp(28px,7.4vw,40px)}
  .pg-hero.photo .pg-display{font-size:clamp(22px,6.2vw,32px);max-width:none}
  .pg-hero.photo .pg-lede p,.pg-hero.photo.long .pg-lede p{font-size:16px;line-height:1.6;max-width:none}
  .pg-hero.photo .pg-lede .button{width:100%}
  .pg-hero.photo .pg-facts{margin-top:0}
  .pg-hero:not(.photo) h1{font-size:clamp(31px,8.4vw,46px);max-width:none}
  /* small taps get a real target without moving the type */
  .pg-crumb{font-size:13px;gap:2px 10px}
  .pg-crumb a{display:inline-block;padding:11px 0;margin:-11px 0}
  .pg-tags{gap:8px 14px;margin-bottom:16px}
  .pg-tags a.t{display:inline-block;padding:11px 0;margin:-11px 0}
  .pg-line .th a{padding:10px 12px}
  .pg-core a,.pg-core b{scroll-margin-top:90px}
  .kfx-col a{padding:9px 0}
  .kfx-base a{display:inline-block;padding:10px 0;margin:-10px 0}
  /* the work filters: one swipeable row instead of four stacked rows */
  .pg-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:2px var(--gut) 6px;scroll-snap-type:x proximity}
  .pg-filters::-webkit-scrollbar{display:none}
  .pg-filters button{flex:none;min-height:42px;scroll-snap-align:start}
  .pg-filters i{flex:none;width:1px;height:24px;align-self:center;background:#c9d1c8;margin:0 4px}
  /* tables with three or more columns become one block per row, each cell under its column's name */
  .pg-tbl.stack,.pg-tbl.stack tbody,.pg-tbl.stack tr,.pg-tbl.stack td{display:block;width:auto}
  .pg-tbl.stack thead{display:none}
  .pg-tbl.stack tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .pg-tbl.stack tr:first-child{border-top:1px solid var(--ink)}
  .pg-tbl.stack td{padding:0 0 8px;border:0}
  .pg-tbl.stack td:last-child{padding-bottom:0}
  .pg-tbl.stack td:first-child{font:600 17px/1.3 Manrope,sans-serif;letter-spacing:-.02em;padding-bottom:10px}
  .pg-tbl.stack td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .pg-tw{overflow-x:visible}
  /* iOS zooms into any field under 16px */
  .enq input[type=text],.enq input[type=email],.enq input[type=tel],.enq select,.enq textarea{font-size:16px}
}
@media(max-width:480px){
  .pg-stage .pg-scene{height:62vw}
  .pg-facts{grid-template-columns:1fr 1fr}
  .pg-facts div{padding:14px 12px 14px 0}
  .pg-facts dd{font-size:14px}
}
@media(max-width:760px){
  /* the phone menu: same rhythm, a 46px target per line, a soft edge over the page */
  .menu-button{min-height:44px;padding:10px 14px}
  .nav-links{gap:0;padding:10px var(--gut) 22px;box-shadow:0 26px 34px -22px rgba(23,34,29,.28);max-height:calc(100svh - 74px);overflow-y:auto}
  .nav-links>a:not(.button){padding:12px 0;font-size:16.5px}
  .nav-links>a:not(.button):after{bottom:7px}
  .nav-links .button{margin-top:16px}
}
@media(max-width:900px){
  .pg-flow span a{display:inline-block;padding:10px 0;margin:-10px 0}
  .pg-core .st b a{display:inline-block;padding:12px 0 12px 12px;margin:-12px 0}
  .pg-line .th a{display:inline-flex;align-items:center;min-height:40px}
}
@media(min-width:761px) and (max-width:1000px){
  /* tablets: the desktop bar stays, on one line */
  .site-nav{gap:16px}
  .brand span{white-space:nowrap;max-width:none}
  .nav-links{gap:16px;font-size:13.5px}
  .nav-links>a{white-space:nowrap}
  .nav-links .button{gap:12px;padding:10px 14px;min-height:44px}
}
@media(max-width:900px){
  /* the 4-hour clock: labels sized for a phone; the long note is the caption under it */
  .pg-fig svg text,.pg-art svg text{font-size:21px}
  .pg-fig svg .far,.pg-art svg .far{display:none}
}
@media(min-width:901px){
  /* the hero text column, evened out (7 Oct, Rishi: "this page text on the left needs better spacing and balance") */
  .pg-copy .pg-tags{margin-bottom:26px}
  .pg-hero.photo h1{text-wrap:balance}
  .pg-hero.photo .pg-lede{margin-top:clamp(24px,3.4vh,36px)}
  /* Antone: the device sits right of centre, so the text keeps to the left half */
  .pp-work-antone .pg-copy,.pg-hero.photo.long.pp-work-antone .pg-copy{width:calc(min(48%,700px) + 2 * (var(--gut) - var(--pad)))}
  .pp-work-antone h1{font-size:clamp(34px,3.9vw,62px)}
  .pp-work-antone .pg-lede p{max-width:46ch}
}
@media(max-width:900px){.pp-work-antone .pg-stage .cap{align-self:flex-start;margin:-40px 0 12px 12px}}
/* a figure under a photo hero (the school case's 4-hour clock) */
.pg-hero.photo .pg-fig{margin:clamp(28px,4vh,44px) var(--gut) 0;border-top:0;padding-top:0}
@media(min-width:901px){
  /* the school case: the room sits right of centre, so the text keeps to the left half */
  .pp-work-school-wellbeing .pg-copy,.pg-hero.photo.long.pp-work-school-wellbeing .pg-copy{width:calc(min(48%,700px) + 2 * (var(--gut) - var(--pad)))}
  .pp-work-school-wellbeing h1{font-size:clamp(32px,3.5vw,56px)}
  .pp-work-school-wellbeing .pg-lede p{max-width:46ch}
}

/* ── kaam.cc/gcc/ · Your India GCC, run by Kaam (8 Oct 2026) ── */
.nav-links a[data-new]::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(216,250,116,.38);margin-right:8px;vertical-align:2px}
.gc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:4px}
.gc-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
.gc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.gc-stats div{padding:22px 22px 24px 0;border-right:1px solid var(--line);margin-right:22px}
.gc-stats div:last-child{border-right:0;margin-right:0}
.gc-stats b{display:block;font:600 clamp(34px,3.6vw,60px)/1 Manrope;letter-spacing:-.055em;color:var(--ink);margin-bottom:12px;font-variant-numeric:tabular-nums}
.gc-stats b{background-image:linear-gradient(var(--signal),var(--signal));background-repeat:no-repeat;background-size:100% .2em;background-position:0 92%;padding-bottom:2px;width:fit-content}
.gc-stats span{font-size:14.5px;line-height:1.45;color:#526050}
.gc-src{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.gc-lead{margin:30px 0 0;font:500 clamp(18px,1.5vw,22px)/1.45 Manrope;letter-spacing:-.02em;color:var(--ink);max-width:52ch}
/* the turnkey line: four stops, drawn like the themes line */
.gc-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px;position:relative}
.gc-track::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:#dfe5d9}
.gc-track::after{content:'';position:absolute;left:0;right:12%;top:9px;height:2px;background:var(--forest);transform-origin:left;transform:scaleX(0);transition:transform 2s var(--out) .2s}
.pg-sec.in .gc-track::after,html.static .gc-track::after{transform:scaleX(1)}
.gc-track>li{position:relative;padding-top:36px}
.gc-track .stop{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--signal);border:2px solid var(--forest);box-sizing:border-box;box-shadow:0 0 0 6px rgba(216,250,116,.32);z-index:1}
.gc-track>li.end .stop{background:var(--paper);border-style:dashed;box-shadow:none}
.gc-track .n{display:block;font:600 11.5px/1 var(--mono);letter-spacing:.08em;color:var(--forest);margin-bottom:12px}
.gc-track h3{font:700 clamp(24px,2.2vw,34px)/1 Manrope;letter-spacing:-.05em;margin:0 0 12px}
.gc-track p{font-size:14.5px;line-height:1.55;color:#526050;margin:0 0 16px}
.gc-track ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gc-track ul li{font-size:13.5px;line-height:1.35;color:var(--ink);padding:9px 0 9px 18px;border-bottom:1px solid var(--line);position:relative}
.gc-track ul li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--forest)}
/* three ways: the first is the one bold thing on the page */
.gc-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gc-ways article{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:28px 26px 24px;background:#fbfbf8}
.gc-ways h3{font:700 clamp(22px,1.9vw,28px)/1.05 Manrope;letter-spacing:-.045em;margin:0 0 14px}
.gc-ways p{font-size:15px;line-height:1.55;color:#3c463f;margin:0 0 12px}
.gc-ways p.best{color:var(--muted);font-size:14px}
.gc-ways dl{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line)}
.gc-ways dt{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.gc-ways dd{margin:0;font-weight:600;font-size:15px}
.gc-ways article.lead{background:var(--dark);border-color:var(--dark);color:#fff}
.gc-ways article.lead h3{color:#fff}.gc-ways article.lead p{color:#d2dcd3}.gc-ways article.lead p.best{color:#a9b5ad}
.gc-ways article.lead dl{border-color:#2f3f35}.gc-ways article.lead dt{color:var(--signal)}.gc-ways article.lead dd{color:#fff}
/* sectors: a hairline ledger, roles as small chips */
.gc-sectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.gc-sectors>div{padding:22px 22px 26px 0;border-bottom:1px solid var(--line)}
.gc-sectors>div:not(:nth-child(3n)){border-right:1px solid var(--line);margin-right:22px}
.gc-sectors .n{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--forest);margin-bottom:10px}
.gc-sectors h3{font:700 clamp(20px,1.7vw,26px)/1.05 Manrope;letter-spacing:-.045em;margin:0 0 14px}
.gc-sectors ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gc-sectors li{font-size:12.5px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fbfbf8;color:#2f3833}
/* where you'll sit: the city names are the design */
.gc-cities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.gc-cities .c{padding:24px 26px 28px 0;border-right:1px solid var(--line);margin-right:26px}
.gc-cities .c:last-child{border-right:0;margin-right:0}
.gc-cities .gc-tag{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.gc-cities .now .gc-tag{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.gc-cities h3{font:600 clamp(34px,3.2vw,54px)/1 Manrope;white-space:nowrap;letter-spacing:-.065em;margin:18px 0 6px}
.gc-cities .any h3{color:#9aa59c}
.gc-cities .where{font-weight:600;color:var(--ink);margin:0 0 12px}
.gc-cities p{font-size:14.5px;line-height:1.55;color:#526050;margin:0;max-width:40ch}
.gc-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;border-top:1px solid var(--ink)}
.gc-why>div{padding:20px 0 22px;border-bottom:1px solid var(--line)}
.gc-why b{display:block;font:650 19px/1.25 Manrope;letter-spacing:-.025em;margin-bottom:8px}
.gc-why p{font-size:14.5px;line-height:1.55;color:#526050;margin:0}
@media(max-width:1100px){.gc-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px}.gc-track::before,.gc-track::after{display:none}.gc-track>li{padding-top:30px}.gc-ways{grid-template-columns:1fr}.gc-sectors{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-sectors>div:not(:nth-child(3n)){border-right:0;margin-right:0}.gc-sectors>div:nth-child(odd){border-right:1px solid var(--line);margin-right:22px}.gc-stats,.gc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-stats div:nth-child(2){border-right:0;margin-right:0}}
@media(max-width:700px){.gc-track,.gc-sectors,.gc-cities,.gc-why{grid-template-columns:1fr}.gc-sectors>div:nth-child(odd){border-right:0;margin-right:0}.gc-cities .c{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}.gc-stats div{padding:18px 12px 18px 0}.gc-stats b{font-size:clamp(28px,8vw,40px)}.gc-acts .button{width:100%}}
/* the home page band for the GCC service */
.gcc-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(56px,8vh,96px);border-bottom:1px solid var(--line)}
.gcc-band .eyebrow{margin-bottom:18px}
.gcc-band .dot.new{background:var(--signal);box-shadow:0 0 0 4px rgba(216,250,116,.4)}
.gcc-band h2{font-size:clamp(38px,4.4vw,72px);margin:0 0 22px}
.gcc-band h2 .mk{background-image:linear-gradient(var(--signal),var(--signal));background-repeat:no-repeat;background-size:100% .34em;background-position:0 88%}
.gcc-band p{font-size:17px;line-height:1.6;color:#3c463f;max-width:50ch;margin:0}
.gb-line{list-style:none;display:flex;gap:0;margin:26px 0 28px;padding:0;max-width:520px}
.gb-line li{flex:1;position:relative;padding-top:20px;font:600 13px/1 var(--mono);letter-spacing:.04em;color:var(--ink)}
.gb-line li::before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:var(--forest)}
.gb-line li::after{content:'';position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--signal);border:2px solid var(--forest);box-sizing:border-box}
.gb-line li:last-child::before{background:repeating-linear-gradient(90deg,var(--forest) 0 6px,transparent 6px 11px)}
.gb-line li:last-child::after{background:var(--paper);border-style:dashed}
.gcc-band .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.gb-pic{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:16/11;background:#e6ebe2}
.gb-pic img{position:absolute;inset:0;width:200%;max-width:none;height:100%;margin-left:-100%;object-fit:cover;object-position:50% 55%;transition:transform 1.6s var(--out)}
.gb-pic:hover img{transform:scale(1.03)}
.gb-pic .cap{position:absolute;right:14px;bottom:12px;font:600 11px/1 var(--mono);color:#fff;background:rgba(23,34,29,.72);padding:7px 11px;border-radius:20px}
@media(max-width:900px){.gcc-band{grid-template-columns:1fr}.gb-pic{order:-1}.gcc-band h2{font-size:clamp(32px,8.6vw,48px)}.gcc-band .actions .button{width:100%}}
.ways .gcc-way{font-size:13px;font-weight:600;padding:8px 13px;border:1px solid var(--signal);border-radius:5px;background:var(--signal);color:var(--ink)}
.ways .gcc-way:hover{background:#c4e761}
@media(min-width:761px) and (max-width:900px){.site-nav .brand span{display:none}.nav-links{gap:13px}}
@media(min-width:901px){
  /* the themes index: the team sits right of centre, so the text keeps to the left */
  .pp-themes .pg-copy{width:calc(min(42%,620px) + 2 * (var(--gut) - var(--pad)))}
  .pp-themes .pg-lede p{max-width:44ch}
}