/* Shared service-page scale. Website Design & Development is the reference. */
:is(.website-page,.ai-page){
 --service-gutter:clamp(24px,5vw,100px);
 --service-space:110px;
 --service-heading:clamp(40px,4.9vw,78px);
 --service-faq-heading:clamp(38px,4vw,65px);
 --service-hero-title:clamp(52px,5.5vw,88px);
 --service-hero-min-height:790px;
 --service-hero-top:135px;
 --service-hero-bottom:80px;
 --service-hero-gap:32px;
 --service-hero-art-height:535px;
 --service-hero-lead:23px;
 --service-body:14px;
 --service-label:11px;
 --service-label-gap:25px;
 --service-heading-gap:55px;
 --service-muted:#737373;
 --service-rule:#dce2eb;
 --service-paper:#f1f5fc;
 --service-art:#edf3ff;
}
:is(.website-page,.ai-page) :is(.website-wrap,.ai-wrap){margin-inline:var(--service-gutter)}
:is(.website-page,.ai-page) :is(.website-section,.ai-section){padding-block:var(--service-space)}
:is(.website-page,.ai-page) :is(.website-kicker,.ai-eyebrow){font-size:var(--service-label);line-height:1.5;margin-bottom:var(--service-label-gap)}
:is(.website-page,.ai-page) :is(.website-section-title,.ai-heading h2,.ai-report-copy>h2,.ai-why-copy>h2){font-weight:400;font-size:var(--service-heading);line-height:1.04;letter-spacing:-.055em}
:is(.website-page,.ai-page) :is(.website-heading,.ai-heading){gap:40px;margin-bottom:var(--service-heading-gap)}
:is(.website-page,.ai-page) :is(.website-heading,.ai-heading)>p{font-size:14px;line-height:1.7;padding-bottom:5px;color:var(--service-muted)}
.ai-page .ai-together .ai-heading>p{color:#a3a3a3}
:is(.website-page,.ai-page) :is(.website-hero,.ai-hero){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--service-hero-gap);align-items:center;min-height:var(--service-hero-min-height);padding-top:var(--service-hero-top);padding-bottom:var(--service-hero-bottom)}
:is(.website-page,.ai-page) :is(.website-hero-copy,.ai-hero-copy){display:block;position:relative;z-index:2;min-width:0}
:is(.website-page,.ai-page) :is(.website-hero,.ai-hero) h1{font-size:var(--service-hero-title);font-weight:400;line-height:1.01;letter-spacing:-.06em;white-space:nowrap}
:is(.website-page,.ai-page) :is(.website-hero-copy>p:not(.website-kicker):not(.website-hero-detail),.ai-hero-copy>h2){font-size:var(--service-hero-lead);font-weight:400;line-height:1.4;letter-spacing:-.02em;margin-top:30px}
:is(.website-page,.ai-page) :is(.website-hero-copy .website-hero-detail,.ai-hero-copy>p:not(.ai-eyebrow)){font-size:var(--service-body);line-height:1.75;color:var(--service-muted);max-width:350px;margin-top:17px}
:is(.website-page,.ai-page) :is(.website-hero-copy,.ai-hero-copy)>.button{margin-top:28px;font-size:12px;padding:18px 22px;gap:32px;white-space:nowrap}
:is(.website-page,.ai-page) .website-hero-down{font-size:11px;display:flex;align-items:center;gap:30px;width:max-content;margin:30px 0 0;color:#6c6c6c}
:is(.website-page,.ai-page) .website-hero-down .ui-arrow{width:15px;height:15px}
:is(.website-page,.ai-page) :is(.website-hero-scene,.ai-hero-scene){position:relative;width:100%;height:var(--service-hero-art-height);min-width:0;max-width:none;margin:0;background:var(--service-art);overflow:hidden;isolation:isolate}
.ai-page .ai-platforms{margin-top:0;padding-top:0}
.website-page .website-types,.ai-page .ai-examples{padding-top:45px}
/* One stable canvas keeps the AI artwork proportional inside the shared frame. */
.ai-hero-canvas{position:absolute;inset:0}
.ai-hero-canvas.is-fitted{inset:auto;left:50%;top:50%;width:600px;height:535px;transform:translate(-50%,-50%) scale(var(--ai-art-scale,1));transform-origin:center}
.ai-hero-canvas.is-fitted .ai-scene-top{top:25px;left:27px;right:27px;font-size:10px;gap:15px}
.ai-hero-canvas.is-fitted .ai-scene-top>span{max-width:none}
.ai-hero-canvas.is-fitted .ai-scene-top button{font-size:10px;gap:8px}
.ai-hero-canvas.is-fitted .ai-hero-prompt{top:80px;left:7%;right:7%;gap:17px;padding:24px 23px}
.ai-hero-canvas.is-fitted .ai-hero-prompt p{font-size:17px;line-height:1.4}
.ai-hero-canvas.is-fitted .ai-prompt-avatar{width:41px;height:41px}
.ai-hero-canvas.is-fitted .ai-prompt-avatar svg{width:24px;height:24px}
.ai-hero-canvas.is-fitted .ai-prompt-send{width:32px;height:32px}
.ai-hero-canvas.is-fitted .ai-prompt-send .ui-arrow{width:18px;height:18px}
.ai-hero-canvas.is-fitted .ai-hero-answer{top:200px;left:11%;right:5%;padding:22px 30px 20px}
.ai-hero-canvas.is-fitted .ai-hero-answer-top{font-size:10px}
.ai-hero-canvas.is-fitted .ai-featured-business{gap:20px;margin:20px 0 15px}
.ai-hero-canvas.is-fitted .ai-featured-business>span{width:58px;height:58px}
.ai-hero-canvas.is-fitted .ai-featured-business>span>svg{width:32px;height:32px}
.ai-hero-canvas.is-fitted .ai-featured-business small{font-size:10px}
.ai-hero-canvas.is-fitted .ai-featured-business strong{font-size:36px}
.ai-hero-canvas.is-fitted .ai-hero-answer>p{font-size:12px;line-height:1.7}
.ai-hero-canvas.is-fitted .ai-hero-citation{font-size:10px;margin-top:18px;padding-top:14px}
.ai-hero-canvas.is-fitted .ai-source-notes{left:7%;bottom:17px;gap:10px;font-size:9px}
.ai-hero-canvas.is-fitted .ai-source-notes>span{padding:10px 11px;gap:7px}
.ai-hero-canvas.is-fitted .ai-source-notes svg{width:14px;height:14px}
.ai-hero-canvas.is-fitted .ai-scene-caption{bottom:58px;right:5%;font-size:8px}
/* Matching section copy, controls and shared content patterns. */
:is(.website-page,.ai-page) :is(.website-type-copy>p,.website-foundation-copy>p:not(.website-kicker),.website-process-panels p,.ai-work-copy>p,.ai-example-answer>p,.ai-report-copy>p:not(.ai-eyebrow):not(.ai-report-limit)){font-size:var(--service-body);line-height:1.8;color:var(--service-muted)}
:is(.website-page,.ai-page) :is(.website-process-panels h3,.ai-work-copy h3){font-size:30px;line-height:1.15;font-weight:400;letter-spacing:-.035em}
:is(.website-page,.ai-page) :is(.website-feature-grid h3,.ai-process-step h3){font-size:23px;line-height:1.15;font-weight:400;letter-spacing:-.035em}
.ai-page .ai-tab-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;border-color:var(--service-rule);margin-bottom:40px}
.ai-page .ai-tab-row button{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:17px;line-height:1.4;padding:18px 0}
.ai-page .ai-tab-row button>span{font-size:23px;line-height:1;transition:transform .25s}
.ai-page .ai-tab-row button[aria-selected=true]>span{transform:rotate(45deg)}
.ai-page .ai-work,.ai-page .ai-why-section{background:var(--service-paper)}
.ai-page .ai-work-art{background:var(--service-art)}
:is(.website-page,.ai-page) :is(.website-why-layout,.ai-why){grid-template-columns:1.1fr 1fr;column-gap:8vw;align-items:center}
.ai-page .ai-why-photo{position:static;background:transparent}
.ai-page .ai-why-photo>span{font-size:10px;color:#798394;padding:15px 0 0}
.ai-page .ai-why-photo img{max-height:none}
:is(.website-page,.ai-page) :is(.website-why-copy,.ai-why-copy)>h2{margin-bottom:30px}
:is(.website-page,.ai-page) :is(.website-why-copy,.ai-why-copy)>div{padding:20px 0;border-color:#d7dfeb}
:is(.website-page,.ai-page) :is(.website-why-copy,.ai-why-copy) h3{font-size:18px;font-weight:400;line-height:1.3;letter-spacing:-.02em}
:is(.website-page,.ai-page) :is(.website-why-copy,.ai-why-copy)>div p{font-size:13px;line-height:1.7;color:#737d8b;margin-top:8px;max-width:380px}
:is(.website-page,.ai-page) :is(.website-why-copy,.ai-why-copy)>.text-link{font-size:12px;margin-top:10px}
:is(.website-page,.ai-page) :is(.website-client-quotes,.ai-client-quote) blockquote{font-size:clamp(27px,2.8vw,43px);font-weight:400;line-height:1.2;letter-spacing:-.04em;color:#171717}
:is(.website-page,.ai-page) :is(.website-client-quotes,.ai-client-quote) figcaption{font-size:11px}
:is(.website-page,.ai-page) :is(.website-client-quotes,.ai-client-quote) figcaption strong{font-weight:500}
:is(.website-page,.ai-page) :is(.website-client-quotes,.ai-client-quote) figcaption span{font-size:10px;color:#798394}
:is(.website-page,.ai-page) :is(.website-faq,.ai-faq){grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8vw;align-items:start;border-top:0}
:is(.website-page,.ai-page) :is(.website-faq,.ai-faq)>div:first-child{position:sticky;top:125px}
:is(.website-page,.ai-page) :is(.website-faq .website-section-title,.ai-faq>div>h2){font-size:var(--service-faq-heading);font-weight:400;line-height:1.04;letter-spacing:-.055em}
.ai-page .ai-faq>div>h2>span{color:inherit}
:is(.website-page,.ai-page) :is(.website-faq,.ai-faq) .text-link{font-size:12px;margin-top:25px}
:is(.website-page,.ai-page) :is(.website-faq,.ai-faq) .answer-item summary{font-size:clamp(16px,1.3vw,21px);line-height:1.4;padding:27px 0;gap:28px}
:is(.website-page,.ai-page) :is(.website-faq,.ai-faq) .answer-body>p{font-size:14px;line-height:1.8;color:#666}
:is(.website-page,.ai-page) :is(.website-faq,.ai-faq) .answer-item:first-child{border-color:#d9d9d9}
@media(min-width:1700px){:is(.website-page,.ai-page){--service-hero-min-height:920px;--service-hero-art-height:650px}}
@media(max-width:1100px){
 :is(.website-page,.ai-page){--service-space:80px;--service-hero-min-height:700px;--service-hero-top:130px;--service-hero-gap:25px;--service-hero-title:5.35vw;--service-hero-lead:20px;--service-hero-art-height:460px}
 :is(.website-page,.ai-page) :is(.website-why-layout,.ai-why){column-gap:5vw}
}
@media(max-width:850px){
 :is(.website-page,.ai-page){--service-heading:clamp(37px,6vw,55px);--service-faq-heading:clamp(38px,6vw,55px);--service-hero-top:135px;--service-hero-bottom:45px;--service-hero-gap:50px;--service-hero-title:clamp(56px,8.7vw,76px);--service-hero-art-height:540px}
 :is(.website-page,.ai-page) :is(.website-hero,.ai-hero){grid-template-columns:1fr}
 :is(.website-page,.ai-page) :is(.website-hero-copy .website-hero-detail,.ai-hero-copy>p:not(.ai-eyebrow)){max-width:420px}
 :is(.website-page,.ai-page) :is(.website-hero-scene,.ai-hero-scene){max-width:650px;margin-inline:auto}
 :is(.website-page,.ai-page) .website-hero-down{display:inline-flex;margin-left:30px}
 :is(.website-page,.ai-page) :is(.website-heading,.ai-heading){gap:25px}
 :is(.website-page,.ai-page) :is(.website-heading,.ai-heading)>p{font-size:12px}
 :is(.website-page,.ai-page) :is(.website-process-panels h3,.ai-work-copy h3){font-size:26px}
 :is(.website-page,.ai-page) :is(.website-why-layout,.ai-why){grid-template-columns:1fr;gap:45px}
 :is(.website-page,.ai-page) :is(.website-why-copy,.ai-why-copy)>div p{max-width:550px}
 :is(.website-page,.ai-page) :is(.website-why-layout>figure img,.ai-why-photo img){max-height:none;object-fit:contain}
 :is(.website-page,.ai-page) :is(.website-faq,.ai-faq){grid-template-columns:1fr;gap:35px}
 :is(.website-page,.ai-page) :is(.website-faq,.ai-faq)>div:first-child{position:static}
}
@media(max-width:650px){
 :is(.website-page,.ai-page){--service-space:65px;--service-label:10px;--service-label-gap:20px;--service-heading-gap:35px;--service-heading:clamp(37px,9.5vw,57px);--service-faq-heading:clamp(37px,9.5vw,57px);--service-hero-top:120px;--service-hero-bottom:50px;--service-hero-gap:38px;--service-hero-title:clamp(35px,9.6vw,61px);--service-hero-art-height:360px;--service-body:13px}
 :is(.website-page,.ai-page) :is(.website-heading,.ai-heading)>p{font-size:13px;margin-top:23px}
 :is(.website-page,.ai-page) :is(.website-hero,.ai-hero) h1{letter-spacing:-.055em;white-space:normal}
 :is(.website-page,.ai-page) :is(.website-hero-copy>p:not(.website-kicker):not(.website-hero-detail),.ai-hero-copy>h2){margin-top:25px}
 :is(.website-page,.ai-page) :is(.website-hero-copy .website-hero-detail,.ai-hero-copy>p:not(.ai-eyebrow)){max-width:320px}
 :is(.website-page,.ai-page) :is(.website-hero-copy,.ai-hero-copy)>.button{font-size:11px;padding:17px 19px;gap:23px}
 :is(.website-page,.ai-page) .website-hero-down{display:flex;margin:23px 0 0;font-size:10px}
 .website-page .website-types,.ai-page .ai-examples{padding-top:15px}
 .ai-page .ai-tab-row{gap:16px;margin-bottom:28px}
 .ai-page .ai-tab-row button{font-size:12px;padding:16px 0;gap:9px}
 .ai-page .ai-tab-row button>span{font-size:18px}
 :is(.website-page,.ai-page) :is(.website-process-panels h3,.ai-work-copy h3){font-size:32px}
 :is(.website-page,.ai-page) :is(.website-feature-grid h3,.ai-process-step h3){font-size:22px}
 :is(.website-page,.ai-page) :is(.website-why-copy,.ai-why-copy)>h2{margin-bottom:25px}
 .ai-page .ai-why-photo>span{font-size:9px;line-height:1.5}
 :is(.website-page,.ai-page) :is(.website-client-quotes,.ai-client-quote) blockquote{font-size:30px}
 :is(.website-page,.ai-page) :is(.website-faq,.ai-faq) .answer-item summary{font-size:16px;padding:23px 0;gap:20px}
 :is(.website-page,.ai-page) :is(.website-faq,.ai-faq) .answer-body>p{font-size:13px}
}
@media(max-width:360px){
 :is(.website-page,.ai-page){--service-hero-art-height:320px}
 .ai-page .ai-tab-row{gap:10px}.ai-page .ai-tab-row button{font-size:11px}
 .ai-page .ai-hero-copy>.button{white-space:normal;text-align:left}
}
@media(prefers-reduced-motion:reduce){.ai-page .ai-tab-row button>span{transition:none}}