/* Shared primary action marker, with a consistent 45-degree square. */
.cta-primary .square,.form-submit .square{transform:rotate(45deg)}
/* Two actions share one exact grid, font, padding and height on both breakpoints. */
.hero .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;width:min(100%,620px);gap:14px}
.hero .hero-actions>a{display:flex;width:100%;height:100%;min-height:56px;box-sizing:border-box;margin:0;padding:16px 20px;font-size:14px;font-weight:550;line-height:1.5;justify-content:space-between}
/* The model supplies the lighting. Remove the separate section-sized tints and shadows. */
.hero>.light,.hero:after,.hero .hero-sculpture:after{display:none}
.hero .hero-content h1,.hero .hero-business-label,.hero .hero-business-label *{text-shadow:none;filter:none}
#verybrand .profile-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#verybrand .profile-facts h3{max-width:none}
/* Method: the same restrained cards and geometry as the studio facts. */
.method-refined-heading{display:grid;grid-template-columns:1.25fr 1fr;gap:9%;align-items:end;margin-top:44px}
.method-refined-heading h2{margin:0;font-size:clamp(38px,4.4vw,72px);line-height:1.12}
.method-refined-heading .method-definition{font-size:17px;line-height:1.85;color:#aaa;margin:0;max-width:620px}
.method-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:42px}
.method-stages article{padding:28px;border:1px solid #ffffff20;border-radius:8px;background:linear-gradient(135deg,#ffffff04,transparent)}
.method-stage-top{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:24px;color:#ffffff55}
.method-stage-top>span{font-size:11px;letter-spacing:1px;color:var(--yellow);padding-top:9px}
.method-stage-top svg{width:96px;height:72px}
.method-stages h3{font-size:27px;line-height:1.3;margin:0 0 15px;letter-spacing:-.7px}
.method-stages p{font-size:16px;line-height:1.8;color:#aaa;margin:0}
.method-decision{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start;margin-top:32px;padding:24px 0 0}
.method-decision h3{font-size:27px;line-height:1.35;margin:0;max-width:400px}
.method-decision p{font-size:16px;line-height:1.8;color:#aaa;margin:0;max-width:620px}
/* Process illustrations retain their geometry without enclosing horizontal lines. */
#process .steps article{border-top:0;padding-top:0}
#process .step-art{border:0;background:transparent}
/* Short illustrated technology points. */
#technology .technology-refined{gap:24px;margin-top:36px}
#technology .technology-refined article{border:0;padding-top:0}
#technology .technology-refined .technology-art{height:76px;margin:0 0 20px;color:#ffffff55}
#technology .technology-refined .technology-art svg{display:block;width:96px;height:72px}
#technology .technology-refined h3{font-size:25px;line-height:1.35;margin:16px 0 12px}
#technology .technology-refined p{font-size:15px;line-height:1.8;margin:0}
#technology .mvp-launch{padding:24px 28px;border:1px solid #ffffff20;border-radius:8px;background:#ffffff03;margin-top:32px}
/* Case studies have enough space to read as a featured project on desktop. */
@media(min-width:901px){
 .case-feature{padding-top:88px;padding-bottom:88px}
 .case-feature-heading{margin-bottom:40px}
 .case-feature-heading h2{font-size:clamp(42px,3.8vw,64px)}
 .case-feature-card{grid-template-columns:1.25fr 1fr;min-height:clamp(480px,34vw,650px)}
 .case-feature-image img{min-height:100%;height:100%;object-position:50% 50%}
 .case-feature-copy{padding:clamp(32px,3.3vw,64px)}
 .case-feature h3{font-size:clamp(48px,4.4vw,78px);margin:28px 0 24px}
 .case-feature-copy>span:first-child{font-size:12px}
 .case-feature-copy p[data-case-subtitle]{font-size:clamp(24px,2vw,34px);line-height:1.4;letter-spacing:-.6px}
 .case-feature-copy p[data-case-description]{font-size:17px;line-height:1.8;margin-bottom:32px;max-width:41ch}
 .case-feature-open{font-size:14px;min-height:44px}
}
@media(max-width:900px){#verybrand .profile-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.method-stages{gap:16px}.method-stages article{padding:22px}.method-stages h3{font-size:24px}}
@media(max-width:600px){
 .hero .hero-actions{grid-template-columns:1fr;width:100%;gap:12px}
 .hero .hero-actions>a{min-height:50px;padding:14px 16px;font-size:13px}
 #verybrand .profile-facts{grid-template-columns:1fr}
 .method-refined-heading{grid-template-columns:1fr;gap:24px;margin-top:32px}
 .method-refined-heading h2{font-size:38px}
 .method-refined-heading .method-definition{font-size:16px;line-height:1.8}
 .method-stages{grid-template-columns:1fr;margin-top:28px}
 .method-stages article{padding:24px}
 .method-stage-top{margin-bottom:18px}
 .method-stage-top svg{height:58px;width:78px}
 .method-stages h3{font-size:25px}
 .method-stages p{font-size:15px}
 .method-decision{grid-template-columns:1fr;gap:16px;margin-top:24px;padding-top:0}
 .method-decision h3{font-size:25px}
 .method-decision p{font-size:15px}
 #technology .technology-refined{gap:30px}
 #technology .technology-refined .technology-art{margin-bottom:14px;height:62px}
 #technology .technology-refined .technology-art svg{height:60px;width:80px}
 #technology .mvp-launch{padding:22px;margin-top:28px}
}

/* Portfolio thumbnails have no decorative frame; keyboard focus remains visible. */
.preview-image,.preview-image img,.home-work-card img{border:0;box-shadow:none}
.preview-card:not(:focus-visible),.home-work-card:not(:focus-visible){outline:none}
body .studio-work-card:not(.portfolio-teaser-more)>div{border:0;box-shadow:none}
@media(min-width:601px){
 .preview-grid>.preview-more{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;justify-self:center;align-self:center;aspect-ratio:auto;width:max-content;min-width:0;height:auto;min-height:44px;margin:30px auto 0;padding:10px 0;border:0;border-bottom:1px solid var(--yellow);border-radius:0;background:transparent;font-size:14px;line-height:1.5;color:var(--yellow)}
 .preview-grid>.preview-more:hover{color:var(--ink);border-bottom-color:var(--ink)}
}

@media(min-width:601px){#portfolio.home-work{padding-top:85px}}

/* Method is an editorial process, distinct from the preceding studio cards. */
.method-refined-heading{grid-template-columns:1.25fr 1fr;align-items:start}
.method-refined-heading h2{font-size:clamp(38px,3.8vw,62px);max-width:850px}
.method-refined-heading .method-definition{padding-top:8px}
.method-stages{display:block;margin-top:48px}
.method-stages article{display:grid;grid-template-columns:110px 1fr 1.15fr;align-items:center;gap:5%;padding:30px 0;border:0;border-bottom:1px solid #ffffff20;border-radius:0;background:transparent}
.method-stage-top{margin:0;justify-content:flex-start;align-items:center;gap:20px}
.method-stage-top>span{font-size:12px;padding:0}
.method-stage-top svg{width:64px;height:48px}
.method-stages h3{font-size:clamp(28px,2.4vw,38px);margin:0;letter-spacing:-1px}
.method-stages p{font-size:17px;max-width:490px}
.method-decision{margin-top:36px;padding-top:0}
.hero .hero-terms{margin-top:30px}
@media(min-width:601px){.hero .hero-actions{width:min(100%,560px);gap:14px}.hero .hero-actions>a{padding:15px 18px;min-height:54px;font-size:13px;gap:18px}}
@media(max-width:900px) and (min-width:601px){.method-refined-heading{grid-template-columns:1fr;gap:24px}.method-stages article{grid-template-columns:90px 1fr 1.2fr;gap:4%}.method-stages p{font-size:15px}}
@media(max-width:600px){
 .method-refined-heading{grid-template-columns:1fr;gap:24px}
 .method-refined-heading h2{font-size:38px}
 .method-refined-heading .method-definition{padding:0}
 .method-stages{margin-top:24px}
 .method-stages article{grid-template-columns:48px minmax(0,1fr);align-items:start;gap:12px 16px;padding:26px 0}
 .method-stage-top{grid-column:1;grid-row:1/3;display:block}
 .method-stage-top>span{display:block;font-size:11px;margin-bottom:12px}
 .method-stage-top svg{width:44px;height:36px}
 .method-stages h3{grid-column:2;font-size:26px;line-height:1.3}
 .method-stages p{grid-column:2;font-size:15px;line-height:1.8}
 .method-decision{margin-top:28px}
 .hero .hero-terms{margin-top:26px}
}

/* Technology: an asymmetric editorial composition, with practical points beside the story. */
#technology{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:7%;row-gap:0}
#technology>.section-label{grid-column:1/-1;margin-bottom:44px}
#technology .technology-heading{grid-column:1;grid-row:2;display:block;margin:0;align-self:start}
#technology .technology-heading h2{font-size:clamp(38px,3.4vw,58px);line-height:1.13;max-width:650px}
#technology .technology-heading>p{font-size:17px;line-height:1.85;margin:28px 0 0;max-width:560px}
#technology .technology-refined{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;gap:16px;margin:0;align-self:stretch}
#technology .technology-refined article{display:grid;grid-template-columns:76px minmax(0,1fr);gap:24px;align-items:start;flex:1;padding:28px;border:1px solid #ffffff1c;border-radius:8px;background:linear-gradient(125deg,#ffffff04,transparent)}
#technology .technology-refined .technology-art{height:64px;margin:0;color:#ffffff55}
#technology .technology-refined .technology-art svg{width:76px;height:58px}
#technology .technology-refined .technology-copy>span{font-size:10px;letter-spacing:1px;color:#999}
#technology .technology-refined h3{font-size:26px;line-height:1.35;margin:13px 0 10px;letter-spacing:-.6px}
#technology .technology-refined p{font-size:15px;line-height:1.8;max-width:48ch}
#technology .mvp-launch{grid-column:1;grid-row:3;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;align-self:end;margin:36px 0 0;padding:24px;border:0;border-left:2px solid var(--yellow);border-radius:0;background:#ffbf0007}
#technology .technology-mvp-label{display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);color:#080808;padding:8px 9px;min-height:34px;font-size:11px;line-height:1;letter-spacing:1px;font-weight:600}
#technology .mvp-launch>p{font-size:15px;line-height:1.8;margin:0;max-width:520px;color:#bbb}
@media(max-width:1000px){
 #technology{grid-template-columns:1fr}
 #technology>.section-label{margin-bottom:32px}
 #technology .technology-heading{grid-column:1;grid-row:2}
 #technology .technology-heading h2,#technology .technology-heading>p{max-width:760px}
 #technology .technology-refined{grid-column:1;grid-row:3;margin-top:32px}
 #technology .mvp-launch{grid-column:1;grid-row:4;margin-top:24px}
}
@media(max-width:600px){
 #technology .technology-heading h2{font-size:38px}
 #technology .technology-heading>p{font-size:16px;line-height:1.8;margin-top:22px}
 #technology .technology-refined{gap:14px;margin-top:28px}
 #technology .technology-refined article{grid-template-columns:54px minmax(0,1fr);gap:16px;padding:22px 18px}
 #technology .technology-refined .technology-art{height:48px}
 #technology .technology-refined .technology-art svg{width:54px;height:44px}
 #technology .technology-refined h3{font-size:23px;line-height:1.35;margin:12px 0 10px}
 #technology .technology-refined p{font-size:14px;line-height:1.8}
 #technology .mvp-launch{grid-template-columns:1fr;gap:14px;padding:22px;margin-top:20px}
 #technology .technology-mvp-label{justify-self:start}
 #technology .mvp-launch>p{font-size:14px}
}

#technology .technology-heading h2{text-wrap:balance}

/* Desktop actions size to their contents rather than stretching an empty grid cell. */
@media(min-width:601px){
 .hero .hero-actions{display:flex;flex-direction:row;align-items:stretch;flex-wrap:wrap;width:max-content;max-width:100%;gap:14px}
 .hero .hero-actions>a{flex:0 0 auto;width:auto;height:auto;min-height:54px;padding:15px 18px;justify-content:center;gap:18px}
}
/* Method: story on the left, a connected sequence of cards on the right. */
#metoda.method-refined{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8%;row-gap:0}
#metoda>.section-label{grid-column:1/-1;margin-bottom:44px}
#metoda .method-refined-heading{grid-column:1;grid-row:2;display:block;margin:0;align-self:start}
#metoda .method-refined-heading h2{font-size:clamp(38px,3.5vw,60px);line-height:1.13;max-width:720px;text-wrap:balance}
#metoda .method-refined-heading .method-definition{font-size:17px;line-height:1.85;padding:0;margin:28px 0 0;max-width:600px}
#metoda .method-stages{grid-column:2;grid-row:2/4;position:relative;display:flex;flex-direction:column;gap:18px;margin:0;padding:0 0 0 28px;align-self:stretch}
#metoda .method-stages:before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:1px;background:#ffbf0060}
#metoda .method-stages article{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto;gap:10px 22px;align-items:start;flex:1;padding:26px;border:1px solid #ffffff20;border-radius:8px;background:linear-gradient(125deg,#ffffff04,transparent)}
#metoda .method-stages article:before{content:"";position:absolute;left:-33px;top:32px;width:9px;height:9px;background:var(--yellow);transform:rotate(45deg)}
#metoda .method-stage-top{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:start;gap:14px;margin:0}
#metoda .method-stage-top>span{margin:0;font-size:11px}
#metoda .method-stage-top svg{width:64px;height:48px}
#metoda .method-stages h3{grid-column:2;font-size:28px;line-height:1.3;margin:0;letter-spacing:-.7px}
#metoda .method-stages p{grid-column:2;font-size:16px;line-height:1.8;margin:0}
#metoda .method-decision{grid-column:1;grid-row:3;display:block;align-self:end;margin:32px 0 0;padding:22px 0 0}
#metoda .method-decision h3{font-size:25px;line-height:1.35;max-width:500px;margin:0 0 16px}
#metoda .method-decision p{font-size:16px;line-height:1.8;max-width:600px}
@media(max-width:1000px){
 #metoda.method-refined{grid-template-columns:1fr}
 #metoda .method-refined-heading{grid-column:1;grid-row:2}
 #metoda .method-stages{grid-column:1;grid-row:3;margin-top:32px}
 #metoda .method-decision{grid-column:1;grid-row:4;margin-top:28px;padding-top:0}
}
@media(max-width:600px){
 #metoda>.section-label{margin-bottom:32px}
 #metoda .method-refined-heading h2{font-size:38px}
 #metoda .method-refined-heading .method-definition{font-size:16px;line-height:1.8;margin-top:24px}
 #metoda .method-stages{gap:14px;padding-left:20px;margin-top:28px}
 #metoda .method-stages:before{top:26px;bottom:26px}
 #metoda .method-stages article{grid-template-columns:46px minmax(0,1fr);gap:10px 14px;padding:22px 18px}
 #metoda .method-stages article:before{left:-25px;top:28px;width:7px;height:7px}
 #metoda .method-stage-top{gap:12px}
 #metoda .method-stage-top svg{width:44px;height:36px}
 #metoda .method-stages h3{font-size:25px}
 #metoda .method-stages p,#metoda .method-decision p{font-size:15px}
 #metoda .method-decision h3{font-size:25px}
}

/* Decorative symbols align with the full content, rather than the first text line. */
#technology .technology-refined article{grid-template-columns:88px minmax(0,1fr);align-items:center}
#technology .technology-refined .technology-art{display:flex;align-items:center;justify-content:center;align-self:center;width:88px;height:76px;margin:0}
#technology .technology-refined .technology-art svg{width:88px;height:70px}
#technology .mvp-launch{align-items:center}
#technology .technology-mvp-label{font-size:16px;font-weight:800;letter-spacing:-.5px;line-height:1;min-width:62px;min-height:48px;padding:12px 10px;align-self:center;justify-self:center;cursor:default}
@media(max-width:600px){
 #technology .technology-refined article{grid-template-columns:62px minmax(0,1fr);align-items:center}
 #technology .technology-refined .technology-art{width:62px;height:54px}
 #technology .technology-refined .technology-art svg{width:62px;height:50px}
 #technology .mvp-launch{grid-template-columns:62px minmax(0,1fr);gap:16px;align-items:center;padding:22px 18px}
 #technology .technology-mvp-label{justify-self:center;font-size:16px;min-height:46px;min-width:60px}
}
/* One readable eyebrow system throughout the site; no decorative top dividers. */
body main :is(.section-label,.section-label>span:not(.quote-disclosure),.eyebrow:not(.hero-audience),.case-feature-kicker,.case-chapter-label,.case-chapter-label>span,.blog-kicker,.studio-mini,.profile-index,.plan-mode,.service-category,.service-category>span,.pk-referral>span,.founder-about>span,.fixed-project-heading>span,.case-callout>span,.case-feature-copy>span:first-child,.founder-extension>span,.technology-copy>span,.steps article>span,.case-quote-label,.article-toc>span){color:#f4f4ef!important;font-weight:500!important;font-size:11px!important;line-height:1.6!important;letter-spacing:1.2px!important;text-transform:uppercase;opacity:1}
/* Preserve contrast against the yellow contact surface. */
body main .contact :is(.section-label,.section-label>span,.eyebrow){color:#080808!important}
@media(max-width:600px){body main :is(.section-label,.section-label>span:not(.quote-disclosure),.eyebrow:not(.hero-audience),.case-feature-kicker,.case-chapter-label,.case-chapter-label>span,.blog-kicker,.studio-mini,.profile-index,.plan-mode,.service-category,.service-category>span,.pk-referral>span,.founder-about>span,.fixed-project-heading>span,.case-callout>span,.case-feature-copy>span:first-child,.founder-extension>span,.technology-copy>span,.steps article>span,.case-quote-label,.article-toc>span){font-size:10px!important;letter-spacing:1px!important}}

/* Quiet timeline: numbers lead the text, geometry becomes a secondary detail. */
#metoda .method-stages{padding-left:24px;gap:16px}
#metoda .method-stages:before{left:0;top:32px;bottom:32px;background:#ffffff24}
#metoda .method-stages article{grid-template-columns:minmax(0,1fr) 72px;grid-template-rows:auto auto auto;gap:10px 28px;padding:28px 30px;border-color:#ffffff16;background:#ffffff02;border-radius:6px}
#metoda .method-stages article:before{left:-27px;top:34px;width:5px;height:5px;border-radius:50%;transform:none}
#metoda .method-stage-top{display:contents}
#metoda .method-stage-top>span{grid-column:1;grid-row:1;font-size:10px;line-height:1.5;letter-spacing:1.5px;color:var(--yellow)}
#metoda .method-stage-top svg{grid-column:2;grid-row:1/4;align-self:center;justify-self:end;width:72px;height:54px;opacity:.65}
#metoda .method-stages h3{grid-column:1;grid-row:2;font-size:28px;line-height:1.3;letter-spacing:-.7px}
#metoda .method-stages p{grid-column:1;grid-row:3;font-size:15px;line-height:1.8;max-width:44ch}
/* A supporting note, visually separate from the main explanation. */
#metoda .method-decision{position:relative;margin-top:36px;padding:22px 24px 22px 44px;background:#ffffff03;border-left:1px solid #ffffff35;border-radius:0 6px 6px 0}
#metoda .method-decision:before{content:"";position:absolute;left:21px;top:30px;width:5px;height:5px;background:var(--yellow);transform:rotate(45deg)}
#metoda .method-decision h3{font-size:19px;line-height:1.45;letter-spacing:-.4px;margin:0 0 10px;max-width:none}
#metoda .method-decision p{font-size:14px;line-height:1.85;color:#aaa;margin:0}
/* Cooperation stages: balanced, compact illustration panels and a clear reading order. */
#process .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
#process .steps article{display:flex;flex-direction:column;min-width:0;padding:28px;border:1px solid #ffffff16;border-radius:8px;background:linear-gradient(145deg,#ffffff04,transparent)}
#process .step-art{flex:0 0 110px;height:110px;aspect-ratio:auto;margin:0 0 26px;border:0;background:transparent;justify-content:flex-start;align-items:center}
#process .step-art svg{width:150px;height:110px;max-height:110px;max-width:100%}
#process .steps article>span{display:block;margin:0 0 18px}
#process .steps h3{font-size:27px;line-height:1.35;letter-spacing:-.7px;margin:0 0 18px;text-wrap:balance}
#process .steps p{font-size:15px;line-height:1.85;color:#aaa;margin:auto 0 0;padding-top:8px}
@media(max-width:1000px){#process .steps{gap:18px}#process .steps article{padding:24px}#process .steps h3{font-size:24px}}
@media(max-width:600px){
 #metoda .method-stages{padding-left:18px;gap:14px}
 #metoda .method-stages article{grid-template-columns:minmax(0,1fr) 44px;gap:10px 14px;padding:23px 20px}
 #metoda .method-stages article:before{left:-21px;top:30px}
 #metoda .method-stage-top svg{width:44px;height:36px}
 #metoda .method-stages h3{font-size:25px}
 #metoda .method-stages p{font-size:14px}
 #metoda .method-decision{padding:20px 20px 20px 38px;margin-top:26px}
 #metoda .method-decision:before{left:17px;top:28px}
 #metoda .method-decision h3{font-size:19px}
 #metoda .method-decision p{font-size:14px}
 #process .steps{grid-template-columns:1fr;gap:18px}
 #process .steps article{padding:25px}
 #process .step-art{height:86px;flex-basis:86px;margin-bottom:22px}
 #process .step-art svg{width:128px;height:86px}
 #process .steps h3{font-size:26px;max-width:25ch;margin-bottom:14px;text-wrap:initial}
 #process .steps p{font-size:15px;padding-top:0}
}

/* One navigation trail: short names, real parents, comfortable wrapping. */
body main .site-breadcrumb{position:relative;z-index:3;display:block;width:100%;margin:0 0 28px;padding:0;color:#f4f4ef;font-size:12px;font-weight:500;line-height:1.7;letter-spacing:0;text-transform:none}
body main .site-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;list-style:none;margin:0;padding:0}
body main .site-breadcrumb li{display:flex;align-items:baseline;min-width:0;max-width:100%;margin:0;padding:0}
body main .site-breadcrumb li+li::before{content:"";display:block;flex:none;width:4px;height:4px;border-top:1px solid #ffffff70;border-right:1px solid #ffffff70;transform:rotate(45deg);margin:0 13px;align-self:center}
body main .site-breadcrumb a{color:#c8c8c4;text-decoration:none;white-space:nowrap;padding:4px 0;text-underline-offset:5px}
body main .site-breadcrumb a:hover{color:var(--yellow);text-decoration:underline}
body main .site-breadcrumb a:focus-visible{outline:2px solid var(--yellow);outline-offset:5px;border-radius:2px}
body main .site-breadcrumb [aria-current]{color:#f4f4ef;overflow-wrap:anywhere;padding:4px 0}
body main>section:first-child:has(>.site-breadcrumb),body main>article>section:first-child:has(>.site-breadcrumb){padding-top:40px}
body main .site-breadcrumb+.section-label{margin-top:0}
.portfolio-page #intro.portfolio-hero{padding-bottom:28px;min-height:0}
.portfolio-page #intro .studio-intro-grid{display:block;margin-top:28px;min-height:0}
.portfolio-page #intro .studio-intro-grid>div:first-child{max-width:100%}
.portfolio-page #intro .studio-intro-art{position:absolute;right:0;top:0;width:42%;height:100%;min-height:0;margin:0;aspect-ratio:auto}
.portfolio-page #intro .studio-intro-lead{margin:22px 0 0}
.portfolio-page #intro [data-analytics-id="portfolio_hero_projects"]{display:none}
.portfolio-page #portfolio{padding-top:22px}
@media(max-width:600px){
body main .site-breadcrumb{font-size:11px;line-height:1.7;margin-bottom:24px}
body main .site-breadcrumb li+li::before{margin:0 10px}
body main>section:first-child:has(>.site-breadcrumb),body main>article>section:first-child:has(>.site-breadcrumb){padding-top:24px}
.portfolio-page #intro.portfolio-hero{padding-bottom:18px}
.portfolio-page #intro .studio-intro-grid{margin-top:24px}
.portfolio-page #intro .studio-intro-lead{margin-top:20px}
.portfolio-page #portfolio{padding-top:16px}
}
body.portfolio-page main #intro.portfolio-hero{padding-top:40px}
body main .site-breadcrumb+.article-header-grid{margin-top:28px}
@media(max-width:600px){body.portfolio-page main #intro.portfolio-hero{padding-top:24px}body main .site-breadcrumb+.article-header-grid{margin-top:24px}}

#top .hero-business-message .hero-value-accent{color:var(--yellow);background:none}

/* Give the hero sentence readable word spaces and a clear vertical rhythm. */
#top h1.hero-business .hero-business-message{letter-spacing:-.045em;word-spacing:.04em}
#top h1.hero-business{margin-bottom:30px}
#top .hero-bottom>.hero-proposition{margin-top:0;margin-bottom:0}
#top .hero-actions{margin-top:30px}
@media(max-width:600px){
 #top h1.hero-business{line-height:1.12;margin-top:22px;margin-bottom:28px}
 #top h1.hero-business .hero-business-label{margin-bottom:10px}
 #top .hero-actions{margin-top:28px;gap:12px}
}
#top h1.hero-business .hero-business-message{letter-spacing:inherit;overflow-wrap:normal;word-break:normal}
#top h1.hero-business .hero-value-accent{letter-spacing:-.045em;overflow-wrap:normal;word-break:normal}
@media(min-width:601px){#top h1.hero-business .hero-business-label{display:table;margin-bottom:12px}}

/* Supporting note is separate from the three-step sequence on phones. */
@media(max-width:600px){
 #metoda .method-decision{margin-top:40px;padding:24px 0 0;border:0;border-top:1px solid #ffffff20;border-radius:0;background:none}
 #metoda .method-decision::before{display:none}
 #metoda .method-decision h3{font-size:19px;line-height:1.45;margin:0 0 12px}
 #metoda .method-decision p{margin:0;line-height:1.8}
}

/* Breadcrumbs sit closer to navigation, with more air before the hero copy. */
body main>section:first-child:has(>.site-breadcrumb),body main>article>section:first-child:has(>.site-breadcrumb),body.portfolio-page main #intro.portfolio-hero{padding-top:24px}
body main .site-breadcrumb{margin-bottom:44px}
body main .site-breadcrumb+.article-header-grid{margin-top:44px}
#technology .technology-mvp-label{font-weight:800;-webkit-text-stroke:.35px currentColor}
@media(max-width:600px){
body main>section:first-child:has(>.site-breadcrumb),body main>article>section:first-child:has(>.site-breadcrumb),body.portfolio-page main #intro.portfolio-hero{padding-top:16px}
body main .site-breadcrumb{margin-bottom:36px}
body main .site-breadcrumb+.article-header-grid{margin-top:36px}
}

body main h1 .hero-title-accent{color:var(--yellow)!important;font-style:normal}
@media(min-width:601px){
 .contact-step>.contact-person,.contact-drawer .contact-step>.contact-person{border:0;background:none;border-radius:0;padding:0;margin:28px 0 0;gap:14px}
 .contact-step>.contact-person .contact-avatar,.contact-drawer .contact-step>.contact-person .contact-avatar{width:48px;height:48px;flex-basis:48px}
 .contact-step>.contact-person strong,.contact-drawer .contact-step>.contact-person strong{font-size:15px}
 .contact-step>.contact-person>div:last-child{grid-template-columns:1fr;gap:2px}
 .contact-step>.contact-person>div:last-child>span{font-size:11px}
 .contact-step>.contact-person a{font-size:12px}
}
@media(min-width:601px){.contact-step>.contact-person>div:last-child>*{grid-column:1;grid-row:auto}}
/* A dark title panel keeps white/yellow readable on the yellow contact page. */
body.contact-page main h1{color:#f4f4ef;background:#080808;padding:18px 22px}
body.contact-page main .site-breadcrumb,body.contact-page main .site-breadcrumb a,body.contact-page main .site-breadcrumb [aria-current]{color:#080808}
body.contact-page main .site-breadcrumb li+li::before{border-color:#08080880}
@media(max-width:600px){body.contact-page main h1{padding:14px 16px}}

/* Report round 3: workshops and verified client evidence carry more weight. */
.workshop-focus{background:#111211}
.workshop-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:end;margin:40px 0}
.workshop-heading h2{font-size:clamp(38px,4.4vw,66px);line-height:1.1;letter-spacing:-.05em;font-weight:500;margin:0}
.workshop-heading>p,.workshop-grid p,.measurement-note{font-size:16px;line-height:1.8;color:#aaa}
.workshop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-bottom:32px}
.workshop-grid article{border-top:1px solid #ffbf0060;padding-top:24px}
.workshop-grid article>span{font-size:11px;color:#f4f4ef;font-weight:500;letter-spacing:1px}
.workshop-grid h3{font-size:25px;line-height:1.35;letter-spacing:-.035em;font-weight:500;margin:18px 0 14px}
.workshop-grid p{font-size:15px;margin:0}
.founder-more-grid:has(>.founder-about:only-child){grid-template-columns:1fr}
.real-client-voice{background:#10110f}
.real-voice-inner{max-width:1080px;margin:auto}
.real-voice-inner blockquote{font-size:clamp(30px,3.5vw,52px);font-weight:500;line-height:1.3;letter-spacing:-.04em;margin:36px 0}
.real-voice-credit{display:flex;align-items:center;justify-content:space-between;gap:24px}
.real-voice-credit p{margin:0;font-size:15px;line-height:1.7}
.real-voice-credit strong,.real-voice-credit span{display:block}
.real-voice-credit span{color:#aaa;font-size:13px}
#technology .technology-heading h2{font-size:clamp(36px,3.1vw,48px)}
#technology .technology-refined article{padding-top:24px;padding-bottom:24px}
.portfolio-proof{max-width:700px;font-size:16px;color:#aaa;line-height:1.7;margin:22px 0 30px}
.service-measurement .measurement-note{max-width:850px;margin-top:28px}
.studio-decisions .measurement-note,.studio-location-section .measurement-note{max-width:900px;margin:28px 0}
@media(max-width:1000px){.workshop-heading{grid-template-columns:1fr;gap:22px}.workshop-grid{gap:20px}.workshop-grid h3{font-size:22px}}
@media(max-width:600px){
 .workshop-heading{margin:28px 0}.workshop-heading h2{font-size:38px;line-height:1.12}
 .workshop-grid{grid-template-columns:1fr;gap:28px}.workshop-grid h3{font-size:24px}
 .real-voice-inner blockquote{font-size:30px;margin:28px 0}.real-voice-credit{align-items:flex-start;flex-direction:column;gap:20px}
 #technology .technology-heading h2{font-size:36px}.portfolio-proof{font-size:15px}
}

/* The service name uses a quiet underline instead of a filled highlight. */
#top h1.hero-business .hero-business-label{background:transparent;color:#f4f4ef;padding:0 0 .09em;border-bottom:2px solid var(--yellow);box-decoration-break:clone;-webkit-box-decoration-break:clone}
#top h1.hero-business .hero-business-label .hero-business-term{color:inherit}

/* Match the Zelvo credit: a yellow marker across the bottom 17% of the text box. */
#top h1.hero-business .hero-business-label{border:0;padding:0;background:linear-gradient(transparent 83%,var(--yellow) 83%);color:#f4f4ef}

/* Keep the marker weight, with six pixels of air below the lettering. */
#top h1.hero-business .hero-business-label{position:relative;background:none}
#top h1.hero-business .hero-business-label::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:17%;background:var(--yellow);pointer-events:none}

/* One line rhythm; the absolutely positioned marker never reserves a row gap. */
#top h1.hero-business .hero-business-label{display:table;margin-bottom:0;line-height:inherit}

/* Original marker position, painted behind glyphs without changing line layout. */
#top h1.hero-business .hero-business-label{isolation:isolate}
#top h1.hero-business .hero-business-label::after{bottom:0;z-index:-1}

#top h1.hero-business .hero-business-label::after{bottom:2px}

/* Shared information tags, based on the Zelvo project credit. */
body main :is(.hero-audience,.tags>span,.plan-scope-tags>span,.cooperation-pill,.fixed-project-copy li){display:inline-block;color:#ffdb70;background:#ffbf0012;border:1px solid #ffdb7035;border-radius:30px;padding:6px 12px;font-size:10px;font-weight:600;line-height:1.5;letter-spacing:.08em}
#top .hero-audience{font-size:11px;font-weight:600;letter-spacing:.08em;line-height:1.5;padding:6px 12px;color:#ffdb70;background:#ffbf0012;border-color:#ffdb7035}
@media(max-width:600px){#top .hero-audience{font-size:10px;letter-spacing:.06em}}

/* Latest hero: category in yellow, client-facing promise in white. */
#top h1.hero-business .hero-business-label,#top h1.hero-business .hero-business-label .hero-business-term{color:var(--yellow)}
#top h1.hero-business .hero-business-label::after{display:none}
#top h1.hero-business .hero-business-message{color:#f4f4ef}
#top h1.hero-business .hero-client-underline{color:inherit;background:linear-gradient(transparent 83%,var(--yellow) 83%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
#top h1.hero-business .hero-client-underline{white-space:nowrap;background:linear-gradient(transparent calc(83% - 2px),var(--yellow) calc(83% - 2px),var(--yellow) calc(100% - 2px),transparent calc(100% - 2px))}
@media(max-width:360px){#top h1.hero-business .hero-client-underline{white-space:normal}}

/* Reserve the longest word so typing never shifts the surrounding copy. */
#top .hero-rotating-word{display:inline-grid;grid-template-areas:"word";vertical-align:baseline;white-space:nowrap;line-height:inherit}
#top .hero-word-size,#top .hero-rotating-text{grid-area:word;line-height:inherit}
#top .hero-word-size{visibility:hidden;pointer-events:none;padding-right:5px}
#top .hero-rotating-text{position:relative;justify-self:start;isolation:isolate;min-height:1em}
#top .hero-rotating-text::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:17%;background:var(--yellow);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.22,1,.36,1)}
#top .hero-rotating-text.is-underlined::before{transform:scaleX(1)}
#top .hero-rotating-text::after{content:"";position:absolute;left:calc(100% + 3px);top:.16em;width:2px;height:.72em;background:currentColor;animation:hero-word-blink 1s step-end infinite}
@keyframes hero-word-blink{50%{opacity:0}}
#metoda .method-stages article{background:rgba(0,0,0,.72)}
#metoda .method-decision{padding:24px 0 0;border:0;border-top:1px solid #ffffff20;border-radius:0;background:none;margin-top:40px}
#metoda .method-decision::before{display:none}
#metoda .method-decision h3{font-size:19px;line-height:1.45;margin:0 0 12px}
#metoda .method-decision p{margin:0;line-height:1.8}
@media(prefers-reduced-motion:reduce){#top .hero-rotating-text::before{transition:none}#top .hero-rotating-text::after{display:none}}

#top h1.hero-business .hero-rotating-word,#top h1.hero-business .hero-rotating-text{color:#f4f4ef}

/* Static client-language promise: underline wraps without changing line spacing. */
#top h1.hero-business .hero-client-underline{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Raise the marker behind the glyphs; keep each wrapped line independent. */
#top h1.hero-business .hero-client-underline{background:linear-gradient(transparent calc(83% - 6px),var(--yellow) calc(83% - 6px),var(--yellow) calc(100% - 6px),transparent calc(100% - 6px))}
.studio-page main>.studio-capabilities{background:transparent!important}

/* Quiet decorative pulse at the start of the home audience tag. */
#top .hero-audience::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;border-radius:50%;background:var(--yellow);vertical-align:middle;animation:hero-tag-pulse 2.4s ease-in-out infinite}
@keyframes hero-tag-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 #ffbf0030}50%{opacity:.65;box-shadow:0 0 0 4px #ffbf0000}}
@media(prefers-reduced-motion:reduce){#top .hero-audience::before{animation:none}}

/* Owner readability and home finishing pass. */
#top h1.hero-business .hero-client-underline{text-shadow:0 2px 12px #00000024}
@media(min-width:601px){#top h1.hero-business .hero-client-underline{background:linear-gradient(transparent calc(83% - 10px),var(--yellow) calc(83% - 10px),var(--yellow) calc(100% - 10px),transparent calc(100% - 10px))}}
#top .hero-audience{display:inline-flex;align-items:center;gap:5px}
#top .hero-audience::before{flex:0 0 5px;margin-right:0;animation:hero-tag-pulse-visible 2s ease-in-out infinite}
@keyframes hero-tag-pulse-visible{0%,100%{opacity:1;box-shadow:0 0 0 0 #ffbf0055;transform:scale(1)}50%{opacity:.45;box-shadow:0 0 0 5px #ffbf0000;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){#top .hero-audience::before{animation:none}}
body main section:not(.contact) :is(p,li){color:#f4f4ef!important}
body main .fixed-project-copy li{color:#ffdb70!important}
body main .contact :is(p,li){color:#15130d!important}
#founder{padding-top:100px}
@media(max-width:600px){#founder{padding-top:64px}}

body main #top .hero-audience{color:#ffdb70!important}

.home-work-more{display:none}
@media(max-width:600px){
 #portfolio .home-work-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:4px 0 14px;scrollbar-width:thin;scrollbar-color:#ffbf0066 transparent}
 #portfolio .home-work-grid>a{scroll-snap-align:start}
 #portfolio .home-work-more{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;align-self:start;aspect-ratio:4/3;padding:24px;border:1px solid #ffffff30;color:var(--yellow);text-decoration:none;font-size:24px;line-height:1.25}
 #portfolio .home-work-more:focus-visible{outline:2px solid var(--yellow);outline-offset:-3px}
}

/* Mobile founder follow-up: separate blocks with space rather than a line beside socials. */
@media(max-width:600px){
 #founder .founder-more-grid{margin-top:48px;gap:0}
 #founder .founder-about{border-top:0;padding-top:0}
 #founder .founder-about>span{display:block}
 #founder .founder-about h3{margin-top:20px}
 #founder .founder-socials{align-items:center;flex-wrap:wrap;row-gap:12px}
}

@media(max-width:600px){#portfolio .home-work-more{align-items:center;text-align:center;gap:0}}

/* Shared package scope and clear comparison with two Standard subscriptions. */
.plan-value-comparison{margin:28px 0 0;padding:24px;border:1px solid #ffbf0040;border-radius:6px;background:#ffbf0008;max-width:100%}
.plan-value-comparison strong{font-size:20px;font-weight:600;line-height:1.45;color:var(--yellow)}
.plan-value-comparison p{font-size:15px;line-height:1.75;margin:10px 0 0}
@media(max-width:600px){.plan-value-comparison{padding:20px}.plan-value-comparison strong{font-size:18px}}

/* Concrete deliverables immediately after the home hero. */
#konkretny-zakres{padding-top:72px;padding-bottom:76px;background:transparent}
#konkretny-zakres .section-label{margin-bottom:34px}
#konkretny-zakres .scope-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:8%;align-items:end;margin-bottom:45px}
#konkretny-zakres h2{font-size:clamp(36px,4.2vw,64px);font-weight:600;line-height:1.08;letter-spacing:-.06em;margin:0}
#konkretny-zakres h2 span{color:var(--yellow)}
#konkretny-zakres .scope-intro{font-size:16px;line-height:1.8;margin:0;max-width:410px}
#konkretny-zakres .scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:0}
#konkretny-zakres .scope-item{padding:26px 0 30px;border-top:1px solid #ffffff29;position:relative}
#konkretny-zakres .scope-item-top{display:flex;align-items:center;gap:13px;margin-bottom:13px}
#konkretny-zakres .scope-item svg{height:26px;width:26px;stroke:var(--yellow);stroke-width:1.3;fill:none;flex:none}
#konkretny-zakres h3{font-size:24px;font-weight:500;letter-spacing:-.045em;line-height:1.25;margin:0}
#konkretny-zakres .scope-item p{font-size:14px;line-height:1.85;margin:0;max-width:340px}
#konkretny-zakres .scope-closing{margin-top:8px;padding:22px 0 0;border-top:1px solid #ffffff29;display:flex;align-items:baseline;justify-content:space-between;gap:30px}
#konkretny-zakres .scope-closing p{font-size:16px;line-height:1.7;margin:0}
#konkretny-zakres .scope-closing span{font-size:12px;line-height:1.6;color:#c7c7bf;max-width:310px}
@media(max-width:700px){
 #konkretny-zakres{padding-top:44px;padding-bottom:48px}
 #konkretny-zakres .section-label{margin-bottom:26px}
 #konkretny-zakres .scope-heading{display:block;margin-bottom:30px}
 #konkretny-zakres h2{font-size:38px}
 #konkretny-zakres .scope-intro{font-size:14px;margin-top:22px;line-height:1.75}
 #konkretny-zakres .scope-grid{grid-template-columns:1fr;gap:0}
 #konkretny-zakres .scope-item{padding:21px 0 23px}
 #konkretny-zakres .scope-item-top{margin-bottom:9px;gap:12px}
 #konkretny-zakres h3{font-size:23px}
 #konkretny-zakres .scope-item p{font-size:14px;padding-left:38px;max-width:none}
 #konkretny-zakres .scope-closing{display:block;margin-top:5px;padding-top:24px}
 #konkretny-zakres .scope-closing p{font-size:16px}
 #konkretny-zakres .scope-closing span{display:block;margin-top:12px;font-size:12px}
}

/* Scroll-led change from recognizable pain to concrete value. */
#studio.value-transformation{padding-top:90px;padding-bottom:90px}
.value-transform-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start;margin-top:52px}
.value-transform-heading{position:sticky;top:130px}
.value-transform-heading h2{font-size:clamp(36px,4.2vw,64px);line-height:1.1;letter-spacing:-.055em}
.value-transform-heading>p{max-width:440px;font-size:16px;line-height:1.85;margin:28px 0 0}
.value-shifts{list-style:none;padding:0;margin:0;min-width:0}
.value-shift{padding:28px 0 32px;border-top:1px solid #ffffff24;min-height:175px}
#studio .value-pain{font-size:18px;line-height:1.55;margin:0 0 15px;letter-spacing:-.025em}
.value-pain span{background:linear-gradient(var(--yellow),var(--yellow)) left 55%/100% 2px no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#studio .value-gain{font-size:clamp(22px,2vw,30px);line-height:1.4;letter-spacing:-.04em;margin:0;max-width:570px;font-weight:500}
.value-animation .value-pain span{background-size:0% 2px;transition:background-size .55s cubic-bezier(.22,1,.36,1),opacity .55s}
.value-animation .value-gain{opacity:0;transform:translateY(8px);transition:opacity .6s ease .22s,transform .6s ease .22s}
.value-animation .is-resolved .value-pain span{background-size:100% 2px;opacity:.58}
.value-animation .is-resolved .value-gain{opacity:1;transform:none}
@media(max-width:700px){#studio.value-transformation{padding-top:56px;padding-bottom:56px}.value-transform-grid{display:block;margin-top:32px}.value-transform-heading{position:static}.value-transform-heading h2{font-size:38px}.value-transform-heading>p{font-size:15px;margin-top:24px}.value-shifts{margin-top:36px}.value-shift{min-height:195px;padding:25px 0 32px}#studio .value-pain{font-size:16px;margin-bottom:16px}#studio .value-gain{font-size:24px}}
@media(prefers-reduced-motion:reduce){.value-animation .value-gain{opacity:1;transform:none;transition:none}.value-animation .value-pain span{background-size:100% 2px;transition:none}}

/* Five compact pains: scrolling strikes first, then opens space for each gain. */
.value-scroll-track{min-width:0}
#studio .value-pain{font-size:23px;font-weight:500;color:#f4f4ef!important;line-height:1.45}
#studio .value-pain span{opacity:1;background:none;position:relative}
#studio .value-pain span::after{content:"";position:absolute;left:0;right:0;top:55%;height:3px;background:var(--yellow);transform-origin:left;transform:scaleX(1);pointer-events:none}
.value-scroll-animation .value-scroll-track{min-height:calc(100svh + 560px)}
.value-scroll-animation .value-shifts{position:sticky;top:110px}
.value-scroll-animation .value-shift{min-height:0;padding-top:18px;padding-bottom:calc(18px + 16px * var(--reveal,0))}
#studio.value-scroll-animation .value-pain{margin:0}
.value-scroll-animation .value-pain span::after{transform:scaleX(var(--strike,0))}
#studio.value-scroll-animation .value-gain{display:grid;grid-template-rows:1fr;max-height:calc(160px * var(--reveal,0));overflow:hidden;opacity:var(--reveal,0);margin-top:calc(16px * var(--reveal,0));transform:translateY(calc(8px * (1 - var(--reveal,0))));transition:none}
@media(max-width:700px){
 #studio .value-pain{font-size:21px;line-height:1.4}
 #studio .value-gain{font-size:25px;line-height:1.4}
 .value-scroll-track{margin-top:32px}
 .value-scroll-animation .value-shifts{margin-top:0;top:96px}
 .value-scroll-animation .value-scroll-track{min-height:calc(100svh + 700px)}
 .value-scroll-animation .value-shift{padding-top:16px;padding-bottom:calc(16px + 12px * var(--reveal,0))}
}
@media(prefers-reduced-motion:reduce){.value-scroll-animation .value-scroll-track{min-height:0}.value-scroll-animation .value-shifts{position:static}#studio.value-scroll-animation .value-gain{max-height:none;opacity:1;margin-top:16px;transform:none}}
#studio .value-pain span{background:linear-gradient(var(--yellow),var(--yellow)) left 55%/100% 3px no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#studio .value-pain span::after{display:none}
#studio.value-scroll-animation .value-pain span{background-size:calc(100% * var(--strike,0)) 3px}

/* Reversible scroll: completed strike dims the pain; replacement gently reduces it. */
#studio.value-scroll-animation .value-pain{color:rgb(calc(244 - 94 * var(--dim,0)),calc(244 - 94 * var(--dim,0)),calc(239 - 89 * var(--dim,0)))!important;font-size:calc(23px - 3px * var(--reveal,0))}
@media(max-width:700px){#studio.value-scroll-animation .value-pain{font-size:calc(21px - 2px * var(--reveal,0))}}

/* Text alone dims; the strike keeps the full brand yellow throughout. */
#studio.value-scroll-animation .value-pain span{opacity:1;background-image:linear-gradient(#ffbf00,#ffbf00)}

/* Keep the currently unfolding row inside the viewport as the list grows. */
.value-scroll-animation .value-shifts{transform:translateY(calc(-1 * var(--list-lift,0px)))}
@media(prefers-reduced-motion:reduce){.value-scroll-animation .value-shifts{transform:none}}

/* Opaque strike is painted above the glyphs, independently of the text color. */
#studio .value-pain{position:relative}
#studio .value-pain>span:first-child{background:none!important;text-decoration:line-through;text-decoration-color:#ffbf00;text-decoration-thickness:3px;text-decoration-skip-ink:none}
#studio.value-scroll-animation .value-pain>span:first-child{text-decoration:none}
#studio .value-pain .value-strike-layer{position:absolute;inset:0;z-index:2;pointer-events:none;background:none!important;opacity:1!important}
.value-strike-layer i{position:absolute;display:block;height:3px;background:#ffbf00;opacity:1;transform-origin:left center}
#studio .value-gain,#studio.value-scroll-animation .value-gain{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start}
#studio .value-gain-icon{color:#ffbf00;stroke:#ffbf00;opacity:1;width:20px;height:20px;margin-top:.25em;flex:none}
@media(prefers-reduced-motion:reduce){#studio.value-scroll-animation .value-pain>span:first-child{text-decoration:line-through}.value-strike-layer{display:none}}

/* Stable sticky window: content expands inside it; the following section keeps its place. */
.value-scroll-animation .value-scroll-track{height:var(--scroll-track,1400px);min-height:0}
.value-scroll-animation .value-shifts{height:var(--scroll-window,650px);overflow:visible}
#studio.value-scroll-animation .value-pain{font-size:23px}
#studio.value-scroll-animation .value-pain>span:first-child{display:block;transform:scale(calc(1 - .09 * var(--reveal,0)));transform-origin:left center}
@media(max-width:700px){
 .value-scroll-animation .value-scroll-track{height:var(--scroll-track,1400px);min-height:0}
 #studio.value-scroll-animation .value-pain{font-size:21px}
 #studio.value-transformation{padding-bottom:40px}
}
@media(prefers-reduced-motion:reduce){.value-scroll-animation .value-scroll-track,.value-scroll-animation .value-shifts{height:auto}#studio.value-scroll-animation .value-pain>span:first-child{transform:none}}

@media(max-width:700px){.value-scroll-animation .value-shifts{top:36px}}
/* Minimal package comparison: shared scope once, both plans visible on mobile. */
.minimal-plans{display:grid;grid-template-columns:1.15fr 1fr 1fr;border:1px solid #ffffff35;border-radius:12px;overflow:hidden;background:#101010;margin-top:30px}
.minimal-plans .mp-cell{padding:22px 24px;border-bottom:1px solid #ffffff24;min-width:0}
.minimal-plans .mp-standard,.minimal-plans .mp-priority{border-left:1px solid #ffffff24}
.minimal-plans .mp-priority{background:#ffbf000a;color:var(--yellow)}
.minimal-plans .mp-heading h3{font-size:22px;font-weight:500;letter-spacing:-.04em;margin:0 0 18px;line-height:1.3}
.minimal-plans .mp-priority h3,.minimal-plans .mp-priority .mp-price,.minimal-plans .mp-priority.mp-capacity,.minimal-plans .mp-priority.mp-delivery{color:var(--yellow)}
.minimal-plans .mp-price{font-size:35px;letter-spacing:-.05em;line-height:1.2;white-space:nowrap}
.minimal-plans .mp-price small{font-size:14px;letter-spacing:0}
body main .minimal-plans p.mp-period{font-size:11px;line-height:1.5;color:#babbb3!important;margin:8px 0 0}
.minimal-plans .mp-includes{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 24px;border-bottom:1px solid #ffffff24;font-size:12px}
.minimal-plans .mp-includes .plan-scope-tags{margin:0;gap:5px;display:flex;flex-wrap:wrap}
.minimal-plans .mp-includes .plan-scope-tags>span{font-size:10px;padding:4px 8px;letter-spacing:.03em;line-height:1.5}
.minimal-plans .mp-label{font-size:13px;color:#c9c9c2;display:flex;align-items:center}
.minimal-plans .mp-capacity{font-size:28px;letter-spacing:-.04em;line-height:1.4}
.minimal-plans .mp-delivery{font-size:14px;line-height:1.6}
.minimal-plans .mp-bottom{border-bottom:0}
.minimal-plans .mp-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:15px 12px;border:1px solid var(--yellow);border-radius:4px;background:var(--yellow);color:#080808;font-size:13px;font-weight:600;line-height:1.4;text-decoration:none;text-align:center}
.minimal-plans .mp-cta-secondary{background:none;color:#f4f4ef;border-color:#ffffff55}
.minimal-plans .mp-cta:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.mp-common{border-top:1px solid #ffffff25;margin-top:28px;padding-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mp-common h3{font-size:15px;font-weight:500;line-height:1.6;letter-spacing:0;margin:0}
.mp-common p{font-size:13px;line-height:1.8;margin:9px 0 0;max-width:460px}
body main p.mp-note{font-size:11px;line-height:1.7;color:#babbb3!important;margin:24px 0 0;max-width:950px}
.mp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){
 .minimal-plans{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:10px;margin-top:26px}
 .minimal-plans .mp-blank{display:none}
 .minimal-plans .mp-cell{padding:18px 12px}
 .minimal-plans .mp-standard{border-left:0}
 .minimal-plans .mp-heading h3{font-size:19px;margin-bottom:18px}
 .minimal-plans .mp-price{font-size:27px}
 .minimal-plans .mp-price small{font-size:12px}
 body main .minimal-plans p.mp-period{font-size:10px}
 .minimal-plans .mp-includes{padding:16px 12px;gap:10px;flex-wrap:nowrap}
 .minimal-plans .mp-includes>span{font-size:10px;white-space:nowrap}
 .minimal-plans .mp-includes .plan-scope-tags{flex-wrap:nowrap;gap:4px}
 .minimal-plans .mp-includes .plan-scope-tags>span{font-size:9px;padding:3px 6px}
 .minimal-plans .mp-label{grid-column:1/-1;border-bottom:0;padding:16px 12px 0;font-size:11px;background:#ffffff03}
 .minimal-plans .mp-label+.mp-standard{background:#ffffff03}
 .minimal-plans .mp-capacity{font-size:25px}
 .minimal-plans .mp-delivery{font-size:12px}
 .minimal-plans .mp-cta{font-size:12px;padding:13px 6px}
 .mp-common{grid-template-columns:1fr;gap:15px;margin-top:24px;padding-top:20px}
 .mp-common h3{font-size:14px}.mp-common p{font-size:12px}
 body main p.mp-note{font-size:10px;margin-top:20px}
}

/* Shared principles below pricing, with a clear hierarchy and no repeated introduction. */
.mp-support{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:28px;padding-top:28px;border-top:1px solid #ffffff25}
.mp-support article{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start}
.mp-support svg{color:var(--yellow);margin-top:2px;width:24px;height:24px}
.mp-support h3{font-size:16px;line-height:1.5;letter-spacing:-.025em;font-weight:500;margin:0 0 9px}
.mp-support p{font-size:13px;line-height:1.8;margin:0;max-width:310px}
body main p.mp-queue-note{font-size:11px;line-height:1.7;color:#babbb3!important;margin:25px 0 0}
.mp-support~.plans-details{font-size:13px;gap:14px;margin-top:18px;max-width:100%;width:max-content}
@media(max-width:700px){
 .mp-support{grid-template-columns:1fr;gap:24px;margin-top:24px;padding-top:25px}
 .mp-support article{grid-template-columns:22px minmax(0,1fr);gap:12px}
 .mp-support svg{width:22px;height:22px}
 .mp-support h3{font-size:15px;margin-bottom:6px}
 .mp-support p{font-size:12px;line-height:1.8;max-width:none}
 body main p.mp-queue-note{margin-top:24px;padding-top:18px;border-top:1px solid #ffffff18;font-size:10px}
 .mp-support~.plans-details{font-size:12px;margin-top:12px;white-space:nowrap}
}
