:root{--paper:#f8f8f5;--ink:#101713;--green:#00875c;--deep:#063e30;--light:#dbf4e9;--hair:rgba(16,23,19,.21)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:22px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a{font:inherit}button{cursor:pointer}a{color:inherit}::selection{background:#00b47a;color:white}.shell{width:min(92%,1600px);margin:auto}.tiny{font-size:clamp(10px,.86vw,13px);font-weight:850;letter-spacing:.14em;text-transform:uppercase}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hair);position:relative;z-index:10}.brand{font-size:clamp(24px,2.3vw,34px);font-weight:950;letter-spacing:-.105em;text-decoration:none;white-space:nowrap}.brand i{font-style:normal;color:var(--green)}.navlinks{display:flex;align-items:center;gap:clamp(18px,3vw,48px)}.navlinks a{text-decoration:none;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.navlinks a:hover{text-decoration:underline;text-underline-offset:6px}.navlinks .navcontact{border:1px solid currentColor;padding:12px 17px}.menubtn{display:none;border:1px solid currentColor;background:transparent;padding:9px 13px}
/* One stage: the same word moves from an observation to a manifesto */
.opening{height:173svh;position:relative}.opening-sticky{height:100svh;min-height:580px;position:sticky;top:0;overflow:hidden;background:var(--paper);isolation:isolate}.opening-sticky:after{content:"";position:absolute;left:4%;right:4%;bottom:65px;border-bottom:1px solid var(--hair);pointer-events:none}.hero-head{position:absolute;left:4%;top:8%;max-width:min(1000px,81vw);z-index:4;will-change:transform,opacity}.hero-head .tiny{color:var(--deep);margin-bottom:25px}.hero-head h1{font-size:clamp(60px,8vw,162px);font-weight:950;letter-spacing:-.096em;line-height:.88;margin:0}.hero-head h1 span{display:block}.hero-head h1 .outline{-webkit-text-stroke:2px var(--ink);color:transparent}.hero-head h1 .solid{color:var(--green)}.hero-bottom{position:absolute;left:4%;bottom:10%;z-index:4;max-width:460px;will-change:opacity,transform}.hero-bottom p{font-size:clamp(17px,1.42vw,23px);line-height:1.42;letter-spacing:-.025em}.hero-bottom a{display:inline-flex;gap:32px;font-size:13px;text-decoration:none;font-weight:850;padding:13px 0;border-bottom:2px solid var(--green)}.hero-bottom a span{font-size:22px;line-height:14px}.word-field{position:absolute;right:-6%;top:27%;width:63%;height:56%;z-index:1;pointer-events:none;display:grid;place-items:center;will-change:transform,opacity}.word-giant{font-size:clamp(190px,30vw,590px);line-height:.7;font-weight:950;letter-spacing:-.13em;color:var(--green);transform:rotate(-9deg);white-space:nowrap;will-change:transform;opacity:.93}.word-super{position:absolute;bottom:8%;right:17%;font-size:clamp(14px,1.7vw,30px);font-weight:900;letter-spacing:-.05em;color:var(--ink);transform:rotate(-9deg)}.opening-count{position:absolute;right:4%;bottom:9%;font-size:11px;z-index:4;letter-spacing:.11em;font-weight:850}.opening-new{position:absolute;inset:0;display:grid;place-content:center;padding:8vw 5vw;z-index:5;pointer-events:none;opacity:0;transform:translateY(60px);color:var(--paper);text-align:center;will-change:opacity,transform}.opening-new .tiny{color:#aef0d4}.opening-new h2{font-size:clamp(75px,14vw,240px);line-height:.79;letter-spacing:-.105em;margin:20px 0;font-weight:950}.opening-new p{font-size:clamp(17px,2vw,30px);font-weight:500;max-width:760px;line-height:1.4;margin:24px auto 0}.opening-hint{position:absolute;right:4%;top:17%;font-size:12px;letter-spacing:.12em;font-weight:800;z-index:5;writing-mode:vertical-rl}
/* One visual grammar: number, oversized type, horizontal rule, interaction */
.section{position:relative;padding:clamp(100px,12vw,200px) 0}.introline{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid currentColor;padding-top:15px;font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.display{font-size:clamp(66px,10vw,190px);line-height:.84;letter-spacing:-.095em;font-weight:950;margin:45px 0 75px}.display em{font-style:normal;color:var(--green)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.prose{font-size:clamp(20px,2.1vw,34px);line-height:1.24;letter-spacing:-.045em;margin:0}.smallprose{font-size:clamp(16px,1.18vw,20px);line-height:1.58;max-width:560px;margin:0}.meaning{background:var(--deep);color:white;padding-top:clamp(100px,12vw,185px)}.meaning .display{margin-bottom:55px}.meaning .display em{color:#64e5b1}.meaning-demo{display:grid;grid-template-columns:1.4fr .6fr;gap:0;border-top:1px solid #ffffff88;border-bottom:1px solid #ffffff88;margin-top:100px}.meaning-sentence{padding:65px 45px 65px 0;font-size:clamp(48px,7vw,140px);font-weight:950;line-height:.91;letter-spacing:-.09em;min-height:320px;align-content:center}.meaning-sentence strong{color:#64e5b1}.meaning-controls{border-left:1px solid #ffffff88;padding:48px 0 48px clamp(25px,4vw,70px);display:flex;flex-direction:column;justify-content:space-between;gap:30px}.choice{display:flex;gap:9px;flex-wrap:wrap}.choice button{border:1px solid #c6ecd8;background:transparent;color:white;padding:13px 20px;font-weight:850;transition:background .2s,color .2s}.choice button[aria-pressed=true]{background:#64e5b1;color:#063e30}.meaning-note{font-size:16px;line-height:1.5;color:#d3e6dd}.meaning-lower{display:flex;justify-content:space-between;gap:30px;margin-top:75px;align-items:start}.meaning-lower strong{font-size:clamp(25px,3vw,49px);line-height:1.05;letter-spacing:-.055em;max-width:500px}.meaning-lower p{max-width:500px;font-size:18px;line-height:1.55;margin:0}
.attitude{background:var(--paper);overflow:hidden}.attitude .display{font-size:clamp(80px,14vw,250px);margin-bottom:55px}.attitude .display em{display:inline-block;color:var(--green)}.attitude .grid2{border-top:1px solid var(--hair);padding-top:35px}.attitude-note{font-size:clamp(18px,2vw,30px);line-height:1.4;letter-spacing:-.03em}.attitude-rail{height:1px;background:var(--hair);margin:80px 0 0}.attitude-rail span{height:5px;background:var(--green);display:block;width:0;transform:translateY(-2px)}
.practice{background:#e7f1eb}.practice .display{max-width:1350px}.service-row{border-top:1px solid #143e3180;display:grid;grid-template-columns:8% 48% 1fr 6%;gap:15px;padding:32px 0 45px;align-items:start;position:relative;overflow:hidden}.service-row:last-child{border-bottom:1px solid #143e3180}.service-row h3{font-size:clamp(35px,4.1vw,75px);letter-spacing:-.075em;line-height:1;margin:0}.service-row p{font-size:clamp(15px,1.3vw,20px);line-height:1.5;margin:4px 0 0}.service-row .plus{font-size:45px;line-height:.8;text-align:right;transition:transform .35s}.service-row:hover .plus{transform:rotate(90deg)}.service-row:hover h3{color:var(--green)}
.ethos{background:#101713;color:white}.ethos .display{max-width:1200px}.ethos .display em{color:#66e0aa}.ethos-lead{max-width:780px;font-size:clamp(18px,1.75vw,26px);line-height:1.55;color:#d0ddd6;margin:-18px 0 42px}.ethos-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4vw;margin-top:90px}.ethos-cols article{border-top:1px solid #ffffff80;padding-top:18px}.ethos-cols b{font-size:clamp(25px,3vw,49px);letter-spacing:-.06em;display:block;margin:23px 0}.ethos-cols p{font-size:17px;line-height:1.55;color:#d0ddd6}
.contact{background:#04a56f;color:#071c14;min-height:87svh;display:flex;align-items:center}.contact .display{font-size:clamp(78px,12vw,220px);margin:35px 0 55px}.contact-last{display:flex;gap:50px;align-items:end;justify-content:space-between;border-top:1px solid #082c2080;padding-top:30px}.contact-last p{font-size:clamp(17px,1.7vw,25px);max-width:550px;line-height:1.4}.contact-last a{background:#091a14;color:white;text-decoration:none;padding:22px 28px;font-weight:850;display:inline-flex;gap:65px;align-items:center;white-space:nowrap}.contact-last a:hover{background:white;color:#091a14}.footer{background:#101713;color:#e0eee7;padding:34px 0}.footer .shell{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer small{font-size:11px;line-height:1.5}.footer a{text-decoration:none}.enter{opacity:0;transform:translateY(38px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.15,1)}.enter.on{opacity:1;transform:none}
@media(max-width:1000px){.hero-head{top:12%;max-width:95%}.hero-head h1{font-size:clamp(70px,11vw,130px)}.word-field{right:-20%;top:38%;width:90%}.hero-bottom{bottom:12%;max-width:60%}.grid2{gap:5vw}.meaning-demo{grid-template-columns:1fr}.meaning-controls{border-left:0;border-top:1px solid #ffffff88;padding:30px 0}.service-row{grid-template-columns:7% 1fr 35px}.service-row p{grid-column:2/3}.service-row .plus{grid-column:3;grid-row:1}}
@media(max-width:680px){.nav{height:65px}.menubtn{display:block}.navlinks{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);padding:25px;flex-direction:column;align-items:stretch;box-shadow:0 20px 30px #0002}.navlinks.open{display:flex}.opening{height:165svh}.opening-sticky{min-height:0;height:100svh}.hero-head{top:12%;left:5%;max-width:93%}.hero-head h1{font-size:clamp(58px,15vw,98px)}.hero-head h1 .outline{-webkit-text-stroke:1.3px var(--ink)}.word-field{width:130%;right:-58%;top:38%;height:29%}.word-giant{font-size:60vw}.word-super{font-size:14px}.hero-bottom{max-width:88%;bottom:15%;left:5%}.hero-bottom p{font-size:17px}.opening-new h2{font-size:clamp(70px,19vw,132px)}.opening-new p{font-size:18px}.opening-hint{top:9%}.opening-count{bottom:5%}.section{padding:95px 0}.display{font-size:clamp(58px,13vw,100px);margin:35px 0 48px}.grid2{grid-template-columns:1fr;gap:32px}.meaning-sentence{padding:55px 0;font-size:clamp(53px,12vw,88px);min-height:240px}.meaning-lower{flex-direction:column}.attitude .display{font-size:clamp(73px,18vw,145px)}.service-row{grid-template-columns:32px 1fr 25px;padding:24px 0 29px}.service-row h3{font-size:clamp(31px,8vw,55px)}.service-row p{font-size:16px}.ethos-cols{grid-template-columns:1fr;gap:30px}.ethos-cols article{padding-top:5px}.contact{min-height:80svh}.contact .display{font-size:clamp(71px,15vw,132px)}.contact-last{flex-direction:column;align-items:stretch;gap:15px}.contact-last a{justify-content:space-between}.footer .shell{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.opening{height:100svh}.word-giant,.hero-head,.hero-bottom,.opening-new{will-change:auto}.opening-new{display:none}.enter{opacity:1;transform:none;transition:none}}

/* V2: page-wide motion grammar, no decorative ticker or floating discs */
html,body{overflow-x:clip}
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
.scroll-track{position:fixed;left:0;top:0;width:100%;height:3px;z-index:999;pointer-events:none}
.scroll-track span{display:block;background:var(--green);width:100%;height:100%;transform:scaleX(0);transform-origin:left;will-change:transform}
.opening-sticky{transition:background-color .07s linear}
.word-giant{transform-origin:center center}
.opening-new h2{transform:translateZ(0)}
/* Graphic continuity at section boundaries: page color, not a detached animated blob */
.meaning{background:linear-gradient(180deg,var(--deep) 0%,#064332 62%,#063e30 100%)}
.attitude{background:linear-gradient(180deg,var(--paper) 0%,#f2f7f1 100%)}
.practice{background:linear-gradient(180deg,#e7f1eb 0%,#dcf0e5 100%)}
.ethos{background:linear-gradient(180deg,#101713 0%,#102b20 100%)}
/* Precision timed scene entrances; same easing everywhere */
.enter{transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}
.display{transform-origin:left center}
.display.enter{transform:translate3d(0,62px,0) scale(.98)}
.display.enter.on{transform:translate3d(0,0,0) scale(1)}
.display em{transition:color .5s ease}
.service-row{transition:padding-left .55s var(--ease-out),background-color .45s ease}
.service-row:hover{padding-left:14px;background-color:rgba(0,135,92,.07)}
.service-row h3{transition:transform .6s var(--ease-out),color .3s ease}
.service-row:hover h3{transform:translateX(9px)}
.ethos-cols article{transition:transform .7s var(--ease-out)}
.ethos-cols article:hover{transform:translateY(-12px)}
.meaning-sentence strong{display:inline-block;transform-origin:50% 70%}
.meaning-sentence strong.changing{animation:wordFlip .5s var(--ease-out)}
@keyframes wordFlip{0%{opacity:.15;transform:translateY(22px) rotate(-4deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
.attitude .display span{display:block;transition:transform 1s var(--ease-out),opacity 1s ease}
.attitude .display.enter span{transform:translate3d(-35px,0,0);opacity:0}
.attitude .display.enter.on span{transform:translate3d(0,0,0);opacity:1}
.attitude .display.enter.on span:nth-child(2){transition-delay:.13s}
.attitude .display.enter.on span:nth-child(3){transition-delay:.26s}
@media(max-width:680px){.hero-head h1{font-size:clamp(54px,13.6vw,88px);letter-spacing:-.075em;line-height:1.02}.hero-head{top:13%}.word-field{top:43%;width:95%;right:-25%;height:27%}.word-giant{font-size:42vw}.word-super{right:23%}.hero-bottom{bottom:11%}.opening-hint{display:none}}
@media(hover:none){.service-row:hover{padding-left:0;background:transparent}.service-row:hover h3{transform:none}.ethos-cols article:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.scroll-track{display:none}.display.enter,.enter,.attitude .display.enter span{opacity:1;transform:none;transition:none}.meaning-sentence strong.changing{animation:none}.service-row,.service-row h3,.ethos-cols article{transition:none}}

/* V4 / curated motion: remove echoes, passive fills and decorative vertical shifts */
.meaning-sentence{position:relative;isolation:isolate;overflow:hidden}
.meaning-inner{position:relative;z-index:2}

.meaning-demo{transition:border-color .45s ease}
.meaning-sentence strong{position:relative}
.meaning-sentence strong:after{content:"";position:absolute;left:0;right:0;bottom:-.07em;height:.055em;background:currentColor;transform:scaleX(var(--underline,0));transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.attitude .display{overflow:visible}
.attitude .display em{position:relative}
.attitude .display em:after{content:"";display:block;position:absolute;bottom:-.065em;left:0;width:100%;height:.065em;background:currentColor;transform:scaleX(var(--strike,0));transform-origin:left;opacity:.8}
.service-row{cursor:default}


.practice .service-list{position:relative}

@media (max-width:680px){}
@media(prefers-reduced-motion:reduce){.attitude .display em:after{transform:scaleX(1)}}

/* V5: continuity is authored across sections, not animated as disconnected ornaments. */
.section{isolation:isolate}
.section>.shell{position:relative;z-index:1}
.section:not(.meaning)::before{content:"";position:absolute;top:0;left:0;right:0;height:clamp(120px,18vw,280px);pointer-events:none;z-index:0}
.attitude::before{background:linear-gradient(to bottom,#063e30 0%,#587c6e 28%,#afc7b9 60%,transparent 100%)}
.practice::before{background:linear-gradient(to bottom,#f2f7f1 0%,rgba(242,247,241,.84) 33%,transparent 100%)}
.ethos::before{background:linear-gradient(to bottom,#dcf0e5 0%,#718b7b 25%,#30473a 62%,transparent 100%)}
.contact::before{background:linear-gradient(to bottom,#102b20 0%,#066b50 40%,transparent 100%)}
/* Intro lines start below each scene handoff, without a blank screen. */
.attitude,.practice,.ethos,.contact{padding-top:clamp(145px,18vw,260px)}
/* Scroll-reading instead of hover-only: a brief colored rule marks the active service. */
.service-row{--read:0}
.service-row::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--green);transform:scaleX(var(--read));transform-origin:left;pointer-events:none}
/* An editorial handoff: content is always legible and animations never gate reading. */
.enter:not(.on){opacity:.65}
@media(max-width:680px){
 .attitude,.practice,.ethos,.contact{padding-top:145px}
 .section:not(.meaning)::before{height:165px}
 .attitude::before{background:linear-gradient(to bottom,#063e30 0%,#9fbbaa 48%,transparent 100%)}
 .ethos::before{background:linear-gradient(to bottom,#dcf0e5 0%,#30473a 52%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){.service-row::after{transform:none;display:none}.enter:not(.on){opacity:1}}

/* v8: optical tracking only; heading font-size and line-height remain those of v5. */
.hero-head h1{letter-spacing:-.055em}
.display{letter-spacing:-.055em}
.attitude .display{letter-spacing:-.055em}
.service-row h3{letter-spacing:-.045em}
.meaning-sentence{letter-spacing:-.055em}
.contact .display{letter-spacing:-.055em}
/* Contrast without moving the existing lettering or its caption. */
.word-super{color:var(--ink)}
/* Separate the supporting copy from the final hero line at constrained viewport heights. */
@media (min-width:1001px) and (max-height:820px){
 .hero-head{top:5%}
 .hero-head h1{font-size:min(8vw,calc((100svh - 305px)/3.6))}
 .hero-bottom{bottom:5%;max-width:490px}
 .word-field{top:26%}
}
@media (min-width:681px) and (max-width:1000px){
 .hero-head{top:8%}
 .hero-bottom{bottom:8%;max-width:48%}
}
@media (max-width:680px){
 .hero-head h1{letter-spacing:-.045em}
 .hero-head{top:10%}
 .word-field{top:43%}
 .hero-bottom{bottom:9%}
 .word-super{color:var(--ink)}
}
/* A controlled responsive grid: longer service descriptions get the room they need. */
.service-row p{max-width:590px;text-wrap:pretty}
/* Independent, restrained layers instead of a single decorative spinning object. */
.word-giant{will-change:transform}
.opening-hint{will-change:transform}
@media(prefers-reduced-motion:reduce){.word-giant,.opening-hint{will-change:auto}}

/* v9: Brand rationale and client results; shared typographic system */
.brand-story{background:#d7eee1;overflow:hidden}
.brand-story-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:5vw;align-items:end}
.brand-story .display{font-size:clamp(72px,9.5vw,180px);margin-bottom:35px;overflow-wrap:normal}
.brand-declaration{font-size:clamp(34px,4.3vw,78px);font-weight:900;line-height:1.08;letter-spacing:-.045em;max-width:950px;margin:0}
.brand-side{border-top:2px solid var(--ink);padding-top:21px}
.brand-side p{font-size:clamp(17px,1.45vw,23px);line-height:1.48;margin:25px 0 45px}
.brand-words{display:grid;gap:12px}
.brand-words span{font-size:clamp(15px,1.5vw,23px);font-weight:950;border-top:1px solid #10171355;padding-top:14px;letter-spacing:-.025em;transition:transform .4s ease}
.brand-words span:hover{transform:translateX(10px)}
.practice{background:#eef3ec}
.practice .display{font-size:clamp(62px,8.2vw,156px);max-width:1450px;text-wrap:balance}
.service-row{grid-template-columns:6% minmax(0,1.08fr) minmax(0,.92fr) 32px;align-items:start;gap:clamp(14px,2vw,32px);padding:36px 0 40px}
.service-row h3{font-size:clamp(32px,3.2vw,59px);line-height:1.08;letter-spacing:-.05em}
.service-row .outcome{font-size:clamp(17px,1.35vw,21px);max-width:590px;margin-top:16px;line-height:1.48}
.service-row .delivery{font-size:clamp(15px,1.12vw,19px);line-height:1.58;max-width:500px}
.service-row .delivery strong{font-weight:900}
@media(max-width:1000px){.brand-story-grid{grid-template-columns:1fr;gap:60px}.service-row{grid-template-columns:40px minmax(0,1fr) 34px}.service-row>div{grid-column:2;grid-row:1}.service-row .delivery{grid-column:2;grid-row:2;margin-top:0}.service-row .plus{grid-column:3;grid-row:1}}
@media(max-width:680px){.brand-story .display{font-size:clamp(61px,13vw,100px)}.brand-declaration{font-size:clamp(33px,7.6vw,48px)}.brand-story-grid{gap:45px}.practice .display{font-size:clamp(52px,11.5vw,76px)}.service-row{grid-template-columns:30px minmax(0,1fr) 22px;gap:12px}.service-row h3{font-size:clamp(29px,7.4vw,45px)}.service-row .delivery{font-size:16px}}

/* V10: layout safety and typography, with preserved original type scale. */
.section::before{display:none!important}
.hero-head h1{letter-spacing:-.065em;line-height:.88}
.hero-head{max-width:min(1120px,91vw)}
.word-super{color:#101713!important;text-shadow:none!important}
.hero-bottom{z-index:7}
.opening-new{z-index:8}
.meaning-sentence,.display,.service-row h3{overflow-wrap:normal}
/* Independent typographic depth in the first and brand scenes. */
.word-field{--pointer-x:0px;--pointer-y:0px}
.word-giant{filter:none!important;text-shadow:none!important}
.word-super{translate:var(--pointer-x) var(--pointer-y)}
.brand-words span{--dx:0px;transform:translateX(var(--dx));transition:transform .25s ease}
.brand-words span:hover{--dx:12px}
.service-row{--offset:0px}
.service-row .plus{transform:translateX(var(--offset)) rotate(0deg)}
.service-row:hover .plus{transform:translateX(var(--offset)) rotate(45deg)}
/* Provide responsive vertical zones rather than overlapping absolute elements. */
@media(min-width:1001px) and (max-height:900px){
 .hero-head{top:7%}
 .hero-head h1{font-size:clamp(60px, min(7.6vw, 10.6vh), 150px)}
 .hero-bottom{bottom:8%;max-width:420px}
 .word-field{top:29%;height:48%;right:-9%;width:60%}
}
@media(max-width:680px){
 .hero-head{top:9%;max-width:94%}
 .hero-head h1{font-size:clamp(55px,14vw,96px)}
 .word-field{top:39%;height:26%;right:-56%;width:125%}
 .word-giant{font-size:57vw}
 .hero-bottom{bottom:10%;max-width:90%}
 .hero-bottom p{font-size:16px;line-height:1.45}
 .opening-hint{display:none}
 .opening-new h2{font-size:clamp(57px,16vw,110px)}
 .brand-words span{overflow-wrap:anywhere}
}
@media(max-width:380px){.hero-head h1{font-size:13.6vw}.hero-bottom{bottom:8%}.hero-bottom p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.word-super{translate:none}.brand-words span{transform:none}}

/* V14: one benefit = one statement; no artificial column for a service catalog. */
.practice .service-row{grid-template-columns:6% minmax(0,1fr) 32px;align-items:start}
.practice .service-row>div{max-width:1000px}
.practice .service-row .outcome{max-width:760px;font-size:clamp(18px,1.5vw,23px);line-height:1.48;margin-top:19px}
.practice .service-row .plus{grid-column:3}
@media(max-width:1000px){.practice .service-row{grid-template-columns:40px minmax(0,1fr) 32px}.practice .service-row>div{grid-column:2;grid-row:1}}
@media(max-width:680px){.practice .service-row{grid-template-columns:30px minmax(0,1fr) 22px}.practice .service-row h3{overflow-wrap:break-word}.practice .service-row .outcome{font-size:17px}}

/* Final art direction: one manifest, three equal explanations, no nested headlines. */
.ethos .display{font-size:clamp(58px,8vw,154px);line-height:.94;letter-spacing:-.07em;max-width:1450px;margin-bottom:clamp(55px,7vw,112px);text-wrap:balance}
.ethos .display em{display:block;margin-top:.18em}
.ethos-cols{margin-top:0;gap:clamp(22px,4vw,75px)}
.ethos-cols article{border:0;padding:0}
.ethos-cols h3{font-size:clamp(24px,2.6vw,39px);letter-spacing:-.045em;line-height:1.08;margin:0 0 20px;font-weight:850;color:#66e0aa}
.ethos-cols p{font-size:clamp(16px,1.28vw,19px);line-height:1.6;margin:0;max-width:42ch}
.ethos .introline{margin-bottom:clamp(45px,6vw,92px)}
.attitude-rail{display:none!important}
@media(max-width:760px){.ethos .display{font-size:clamp(43px,10vw,78px);line-height:.98;margin-bottom:50px}.ethos-cols{gap:34px}.ethos-cols h3{margin-bottom:10px}.ethos-cols article{padding:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Targeted fixes: navigation, transition labels and hero typography. */
.navlinks{gap:clamp(12px,1.7vw,28px)}
.navlinks a{white-space:nowrap}
.word-giant{transform:rotate(-11deg);transform-origin:50% 55%;}
.word-super{transform:rotate(-9deg)}
.opening-new{text-align:left;place-content:center start;padding-left:clamp(24px,8vw,140px)}
.opening-new p{margin:24px 0 0}
@media(max-width:1100px){.navlinks a{font-size:10px;letter-spacing:.04em}}
@media(max-width:820px){.menubtn{display:block}.navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:22px;flex-direction:column;align-items:stretch;box-shadow:0 20px 30px #0002;z-index:40}.navlinks.open{display:flex}.navlinks a{font-size:14px;padding:8px 0}}
@media(max-width:680px){.opening-new{text-align:left;padding-left:6vw}.opening-new h2{font-size:clamp(58px,16vw,105px)}.opening-new p{max-width:90%;margin:18px 0 0}}
@media(prefers-reduced-motion:reduce){.word-giant{transform:rotate(-11deg)}.word-super{transform:rotate(-9deg)}}

/* Audyt: widoczny fokus i możliwość pominięcia nawigacji */
.skip-link{position:fixed;top:10px;left:10px;z-index:10000;background:#101713;color:#fff;padding:12px 18px;transform:translateY(-180%);text-decoration:none}
.skip-link:focus{transform:none}
:where(a,button):focus-visible{outline:3px solid #005d41;outline-offset:4px}
.meaning :where(a,button):focus-visible,.ethos :where(a,button):focus-visible{outline-color:#9af2c8}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Podziały redakcyjne: jeden akapit = jedna wyodrębniona myśl. */
.contact-last .copy-paragraphs{max-width:550px;min-width:0;}
.contact-last .copy-paragraphs p{max-width:none;margin:0;}
.contact-last .copy-paragraphs p+p{margin-top:0;}
.ethos-cols article p+p{margin-top:0;}

/* Rytm czterech zdań: wejście etapami, bez zmiany docelowej typografii. */
@media (prefers-reduced-motion: no-preference) {
  .attitude .display.sequence-active > span {
    transition: none !important;
  }
}

/* Motion consolidation: one scroll controller, no timed heading animation. */
#podejscie.attitude{height:auto!important;min-height:0!important;padding:var(--section-pad,clamp(100px,10vw,180px)) 0!important;overflow:visible!important}
#podejscie.attitude>.shell{position:relative!important;top:auto!important;height:auto!important;display:block!important}
#podejscie .display{margin:45px 0 75px!important;font-size:clamp(66px,10vw,190px)!important;line-height:.84!important;letter-spacing:-.095em!important;transform:none!important}
#podejscie .display>span{display:block!important;position:relative!important;transform:translate3d(var(--row-x,0px),0,0)!important;opacity:var(--row-opacity,1)!important;transition:none!important;animation:none!important}
@media(max-width:820px){#podejscie .display{font-size:clamp(50px,11vw,112px)!important;margin:40px 0 50px!important}#podejscie .display>span{transform:none!important;opacity:1!important}}
@media(prefers-reduced-motion:reduce){#podejscie .display>span{transform:none!important;opacity:1!important}.section .display{transform:none!important}.l24-orb{translate:none!important}}



/* v15: interaction and rendering hardening. Preserves the agreed design. */
.attitude .display > span:nth-child(2) em{font-size:inherit;letter-spacing:inherit;white-space:normal}
:focus-visible{outline:3px solid #00875c;outline-offset:5px}
.meaning :focus-visible,.ethos :focus-visible{outline-color:#64e5b1}
.navlinks.open{z-index:30}
@media(max-width:680px){.navlinks{max-height:calc(100dvh - 65px);overflow-y:auto}}
@media(prefers-reduced-motion:reduce){
 .opening{height:auto;min-height:0}
 .opening-sticky{position:relative;height:auto;min-height:100svh;overflow:hidden}
 .hero-head,.hero-bottom,.word-field{will-change:auto}
 .opening-new{display:none!important}
 .enter,.enter:not(.on),.display.enter,.attitude .display.enter span{opacity:1!important;transform:none!important;transition:none!important}
 .hero-head,.hero-bottom,.word-field{opacity:1!important;transform:none!important}
 .service-row:hover .plus{transform:none}
}
@media print{.opening{height:auto}.opening-sticky{position:relative;min-height:700px}.opening-new,.scroll-track{display:none!important}.enter,.enter:not(.on){opacity:1!important;transform:none!important}}

/* v16: scene handoffs, small screens and compositing boundaries */
html{overflow-x:clip}
.opening-sticky{contain:layout paint;backface-visibility:hidden}
.opening-new{max-width:100%;overflow-wrap:normal}
.opening-new h2{max-width:100%;text-wrap:balance}
.opening-new p{max-width:min(760px,90vw);text-wrap:pretty}
.service-row{contain:layout style}
.service-row .plus{pointer-events:none}
@media(hover:none),(pointer:coarse){.service-row:hover h3{color:inherit}.service-row:hover .plus{transform:none}}
@media(max-width:680px){
 .navlinks{z-index:40;overscroll-behavior:contain}
 .opening-new{padding:8vw 5vw 12vw}
 .opening-new h2{font-size:clamp(51px,15vw,98px);letter-spacing:-.075em}
 .opening-new p{font-size:clamp(16px,4vw,19px);line-height:1.4}
 .opening-sticky:after{bottom:32px}
 .contact-last{flex-wrap:wrap;align-items:start}
 .contact-last a{max-width:100%;justify-content:space-between;gap:18px}
}
@media(max-width:680px) and (max-height:690px){
 .hero-head{top:5%}
 .hero-head h1{font-size:clamp(39px,11.4vw,70px)}
 .hero-head .tiny{margin-bottom:12px}
 .word-field{top:37%;height:23%}
 .hero-bottom{bottom:6%}
 .hero-bottom p{font-size:clamp(13px,3.5vw,16px);line-height:1.38;margin-bottom:10px}
 .hero-bottom a{font-size:12px;padding:7px 0}
 .opening-count{display:none}
}
@media(max-width:680px) and (max-height:540px){
 .opening-sticky{overflow:auto}
 .hero-head{top:4%}
 .hero-head h1{font-size:9.8vw}
 .hero-bottom{bottom:3%}
 .hero-bottom p{font-size:12px}
 .word-field{opacity:.5}
}
@media(prefers-reduced-motion:reduce){
 .opening-sticky{contain:none}
 .opening-new{display:none!important}
 .scroll-track{display:none!important}
 .service-row{contain:none}
}


/* v17 - coordinated kinetic layers; no edits to font sizing or leading */
:root{--scene-progress:0;--scene-lift:0px;--scene-depth:0px}
body{overflow-wrap:normal}
.section{scroll-margin-top:0;overflow:clip}
.section .introline{position:relative}
.section .introline::after{display:none!important}
.section .display{translate:0 var(--scene-lift);transition:color .25s ease}
.brand-story .brand-declaration{translate:0 var(--brand-depth,0px)}
.brand-story .brand-words{translate:0 var(--brand-word-depth,0px)}
.ethos-cols article{translate:0 var(--ethos-depth,0px)}
.ethos-cols article:nth-child(2){translate:0 calc(var(--ethos-depth,0px)*-.55)}
.ethos-cols article:nth-child(3){translate:0 calc(var(--ethos-depth,0px)*.35)}
.practice .service-row .outcome{translate:0 var(--copy-drift,0px)}
.practice .service-row{--read:0}
.practice .service-row .plus{opacity:.5}
/* Optical letter spacing: no modifications to type scale or line-height. */
.service-row h3{letter-spacing:-.037em}
.brand-story .display{letter-spacing:-.047em}
/* Accessibility: don't hide readable content pending JS. */
.enter:not(.on){opacity:1;transform:none}
.js-motion .enter:not(.on){opacity:.72;transform:translateY(12px)}
.js-motion .enter.on{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.15,1)}
/* Keep hero copy in its own readable zone, including short displays. */
@media(max-width:680px){
 .opening-sticky{min-height:620px}
 .hero-head{max-width:94%}
 .hero-head h1{overflow-wrap:normal}
 .hero-bottom{background:var(--paper);padding:8px 12px 8px 0;max-width:92%}
 .practice .service-row h3{overflow-wrap:normal;hyphens:auto}
 .brand-story .brand-words span{overflow-wrap:break-word}
}
@media(max-width:380px){.practice .service-row{grid-template-columns:23px minmax(0,1fr) 15px;gap:8px}}
@media(prefers-reduced-motion:reduce){
 .section .display,.brand-story .brand-declaration,.brand-story .brand-words,.ethos-cols article,.practice .service-row .outcome{translate:none!important}
 .section .introline::after{display:none!important}
 .js-motion .enter:not(.on){opacity:1!important;transform:none!important}
}


/* v18: unobstructed headings and coordinated scene handoffs. Type sizes and line heights unchanged. */
.section .introline{border-top:0!important;padding-top:0!important;margin-bottom:clamp(42px,6vw,96px)}
.section .display{margin-top:0}
.section .introline::before{display:none!important}
/* Chromatic depth follows scroll without occupying text space. */
.section{--kinetic:0;--layer-far:0px;--layer-near:0px;--type-drift:0px;--reveal:1}
.section>.shell{position:relative;z-index:1}
.section .introline span:first-child{display:inline-block;transform:translate3d(0,var(--layer-far),0);opacity:calc(.75 + .25*var(--reveal))}
.section .introline span:last-child{display:inline-block;transform:translate3d(0,var(--layer-near),0)}
.section .display{translate:0 var(--type-drift);opacity:var(--reveal)}
.section .grid2,.brand-story-grid,.service-list,.ethos-cols,.contact-last{position:relative}
.meaning .meaning-demo{translate:0 var(--layer-near)}
.attitude .grid2{translate:0 var(--layer-near)}
.brand-story .brand-side{translate:0 var(--layer-near)}
.practice .service-list{translate:0 var(--layer-near)}
.contact .contact-last{translate:0 var(--layer-near)}
/* The hero word and copy travel independently; no blanket transition shadows. */
@media(prefers-reduced-motion:reduce){
 .section .introline span,.section .display,.meaning .meaning-demo,.attitude .grid2,.brand-story .brand-side,.practice .service-list,.contact .contact-last{transform:none!important;translate:none!important;opacity:1!important}
}


/* Final motion system: movement only on authored layers, no continuous bobbing. */
html{scroll-behavior:smooth}
body{overflow-x:clip}
.section .introline{border-top:0!important;padding-top:0!important;margin-bottom:clamp(42px,6vw,90px)}
.section .introline::before,.section .introline::after{display:none!important}
.enter,.enter.on,.js-motion .enter,.js-motion .enter.on,.js-motion .enter:not(.on){opacity:1!important;transform:none!important;transition:none!important}
.section .display,.brand-story .brand-words,.brand-story .brand-declaration,.ethos-cols article,.practice .service-row .outcome,.introline span{translate:none!important;animation:none!important}
/* Stage depth: one section progress, three gentle independent directions. */
.section .introline{position:relative;left:0;translate:var(--motion-x,0px) 0!important}
.section .display{position:relative;translate:0 var(--motion-near,0px)!important}
.section .grid2,.section .brand-side,.section .ethos-cols,.section .service-list{position:relative;translate:0 var(--motion-far,0px)!important}
.section .display em{display:inline-block;transform:none;vertical-align:baseline;overflow:visible;clip-path:none!important;will-change:transform}
.brand-declaration{display:block;transform:none;will-change:transform;overflow:visible}
.word-field{transform:none!important;opacity:1;will-change:auto}
.word-giant{transform:none;will-change:transform}
.word-super{will-change:transform}
.opening-new{transition:none!important}
.opening-new h2,.opening-new p{transform:none!important}
.ethos .display{max-width:1200px}
.synergy-heading{font-size:clamp(22px,2.4vw,32px);line-height:1.13;letter-spacing:-.045em;margin:0 0 18px;font-weight:850}
.ethos-cols{margin-top:clamp(44px,6vw,80px)}
.ethos-cols article{border-top:1px solid #ffffff66;padding-top:24px}
/* Foreground readability and glyph descenders */
.display,.display em,.brand-declaration{overflow:visible!important;clip-path:none!important}
.display{padding-bottom:.16em;margin-bottom:clamp(48px,6vw,86px)}
.section{overflow:clip;overflow-clip-margin:6px}
@media(max-width:699px){
 .section .introline,.section .display,.section .grid2,.section .brand-side,.section .ethos-cols,.section .service-list{translate:none!important}
 .section .display em,.brand-declaration{transform:none!important}
 .word-giant,.word-super,.hero-head,.hero-bottom{transform:none!important}
 .opening{height:100svh!important;min-height:680px}
 .opening-sticky{position:relative!important;height:100svh!important;min-height:680px}
 .opening-new{display:none!important}
 .word-field{top:43%!important;right:2%!important;width:57%!important;height:25%!important}.word-giant{font-size:39vw!important;opacity:.93!important}.word-super{right:0!important;bottom:-4%!important;font-size:12px!important;white-space:nowrap;opacity:1!important}
 .hero-head,.hero-bottom{opacity:1!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.section .introline,.section .display,.section .grid2,.section .brand-side,.section .ethos-cols,.section .service-list{translate:none!important}.section .display em,.brand-declaration,.word-giant,.word-super{transform:none!important}.opening-new{display:none!important}.opening{height:100svh!important}}


/* Navigation is tied to the actual sections and their reading start. */
:root{--site-header-height:78px}
body>header.shell{position:relative;z-index:20;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body>header.shell .nav{border-bottom:0}
.navlinks a[aria-current="location"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
.section{min-height:100svh;scroll-margin-top:0}
.section .introline{scroll-margin-top:0}
/* The sentence break is semantic, not extra leading or paragraph spacing. */
.contact-last .copy-paragraphs p+p,.ethos-cols article p+p{margin-top:0!important}
.contact-last .copy-paragraphs p,.ethos-cols article p{margin-bottom:0!important}
@media(max-width:820px){:root{--site-header-height:65px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Audit: avoid affordances that suggest links where none exist. */
.practice .service-row{grid-template-columns:clamp(32px,4vw,58px) minmax(0,1fr)!important}
/* Keep semantic sentence separation without changing line height or adding paragraph gaps. */
.contact-last .copy-paragraphs p,.ethos-cols article p{margin-top:0!important;margin-bottom:0!important}
/* Link visibility for keyboard navigation; no sticky navigation. */
.nav a:focus-visible,.hero-bottom a:focus-visible,.contact a:focus-visible,.footer a:focus-visible,.menubtn:focus-visible,.choice button:focus-visible{outline:3px solid #00875c;outline-offset:5px}
/* Do not leave offscreen content dimmed when system motion is disabled. */
@media(prefers-reduced-motion:reduce){.enter,.enter.on{opacity:1!important;transform:none!important}}


/* The opening statement remains available at small viewport sizes where the
   desktop's scroll-driven overlay is intentionally disabled. */
.mobile-opening-statement{display:none}
@media(max-width:699px){
 .mobile-opening-statement{display:flex;align-items:center;min-height:80svh;background:#063e30;color:#f8f8f5;padding:clamp(70px,12vw,120px) 0}
 .mobile-opening-statement .tiny{color:#aef0d4}
 .mobile-opening-statement h2{font-size:clamp(62px,16vw,106px);line-height:.86;letter-spacing:-.08em;margin:28px 0 32px;font-weight:950}
 .mobile-opening-statement p{font-size:clamp(17px,4.5vw,21px);line-height:1.42;max-width:540px}
}


/* Final positioning and paced opening: retain the approved font metrics. */
@media (min-width:700px) and (prefers-reduced-motion:no-preference){
 .opening{height:265svh}
 .opening-sticky{height:100svh}
}
/* Prevent the browser's own scroll padding from offsetting custom anchors. */
html{scroll-padding-top:0}


/* Single scroll-driven animation system; no competing CSS animation. */
@media(prefers-reduced-motion:no-preference){
.section .display{animation:none!important;transition:none!important;opacity:1!important;translate:none!important;scale:1!important;transform:translate3d(var(--motion-x,0px),var(--motion-y,0px),0) scale(var(--motion-scale,1))!important;transform-origin:26% 50%;will-change:transform}
.section .display em{animation:none!important;transition:none!important;transform:none!important;translate:var(--accent-x,0px) 0!important;scale:1!important}
#podejscie.attitude{height:auto!important;min-height:0!important;overflow:visible!important}
#podejscie.attitude>.shell{position:static!important;height:auto!important;display:block!important}
#podejscie .display{transform:none!important;translate:none!important;scale:1!important}
#podejscie .display>span{display:block!important;position:relative!important;opacity:var(--line-opacity,1)!important;transform:translate3d(var(--line-x,0px),0,0)!important;animation:none!important;transition:none!important}
#word-giant{transform:translate3d(var(--aa-x,0px),var(--aa-y,0px),0) rotate(-11deg) scale(var(--aa-scale,1))!important;transition:none!important}
.word-super{transform:translate3d(var(--logos-x,0px),var(--logos-y,0px),0) rotate(-9deg)!important;transition:none!important}
#opening-new{visibility:visible!important;opacity:var(--manifest-opacity,0)!important;transform:translate3d(0,var(--manifest-y,30px),0)!important;transition:none!important}
#hero-head,#hero-bottom{opacity:var(--hero-opacity,1)!important;transition:none!important}
.brand-declaration{transform:translate3d(var(--statement-x,0px),0,0)!important;transition:none!important}
}
@media(max-width:820px){#podejscie .display>span{opacity:1!important;transform:none!important}#podejscie .display{transform:none!important}#opening-new{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.section .display,.section .display em,#podejscie .display>span,#word-giant,.word-super{animation:none!important;transition:none!important;transform:none!important;translate:none!important;opacity:1!important}#opening-new{opacity:1!important;visibility:visible!important}}


/* Depth is composed behind real content. No changes to font sizes or document flow. */
.section:has(> .l24-ambient){position:relative;isolation:isolate}
.section > .shell{position:relative;z-index:2}
.l24-ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:paint}
.l24-orb{position:absolute;display:block;width:clamp(230px,29vw,560px);aspect-ratio:1;border-radius:50%;border:1.5px solid currentColor;opacity:.16;transform:translate3d(var(--orb-x,0px),var(--orb-y,0px),0);will-change:transform}
.l24-orb-a{right:-12%;top:6%;--orb-x:0px;--orb-y:0px}
.l24-orb-b{left:-14%;bottom:3%;width:clamp(175px,19vw,370px);opacity:.10;--orb-x:0px;--orb-y:0px}
#marka .l24-orb{color:#246249}
#charakter .l24-orb{color:#adf0cc;opacity:.23}
/* A second, low-amplitude plane; the approved header choreography stays unchanged. */
.brand-words{transform:translate3d(var(--depth-side-x,0px),0,0)}
#charakter .ethos-cols{transform:translate3d(var(--depth-side-x,0px),0,0)}
@media(max-width:820px){.l24-orb{opacity:.08;width:230px}.l24-orb-b{width:170px}.brand-words,#charakter .ethos-cols{transform:none}}
@media(prefers-reduced-motion:reduce){.l24-orb,.brand-words,#charakter .ethos-cols{transform:none!important;will-change:auto}}


.hero-head h1 .outline-svg{display:block;line-height:0;overflow:visible;-webkit-text-stroke:0;color:inherit}
.hero-head h1 .outline-svg svg{display:block;width:4.65em;height:auto;max-width:none;overflow:visible;transform:translateY(.06em)}
@media(max-width:680px){.hero-head h1 .outline-svg svg{width:4.65em}}


/* Keep the approved typography, SVG and line rhythm. Move the whole headline,
   rather than altering individual glyph baselines. */
.hero-head{top:3%}
@media (max-width:1000px){.hero-head{top:3%}}
@media (max-width:680px){.hero-head{top:5%}}
@media (max-width:380px){.hero-head{top:4%}}
/* Description stays in its own layer. Do not overlap the heading's painted area. */
.hero-bottom{isolation:isolate}


/* Place only the final line closer to the SVG, without changing glyph scale or leading. */
.hero-head h1 > .solid{position:relative;top:-.18em;}

/* Opis hero: zachowaj pięć zatwierdzonych podziałów, nie zmieniając interlinii. */
@media (min-width: 681px) {
  .hero-bottom { width: min(680px, 92vw); max-width: min(680px, 92vw); }
}


/* Final QA: keep the decorative LOGOS / FORMA label readable on narrow screens. */
@media(max-width:680px){.word-field .word-super{top:-25px!important;bottom:auto!important;right:0!important;z-index:3!important}}