@font-face{font-family:Barlow;src:url('/assets/barlow-condensed-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:DM;src:url('/assets/dm-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url('/assets/dm-sans-600.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root{--ink:#10242e;--paper:#f8f5ef;--orange:#ff9559;--lavender:#baa6f4;--mint:#91d5bd;--line:#d9ddd7;--muted:#526269;--white:#fff;--display:Barlow,'Arial Narrow',sans-serif;--body:DM,Arial,sans-serif;--gutter:clamp(22px,5vw,84px);--max:1320px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}p{margin:0 0 1.2em}h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;text-transform:uppercase;letter-spacing:-.015em;margin:0 0 .45em}h1{font-size:clamp(62px,8.6vw,128px)}h2{font-size:clamp(44px,5vw,74px)}h3{font-size:32px}img,svg{max-width:100%}img{display:block}button{border:0}button:disabled{opacity:.55;cursor:not-allowed}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #ed6025;outline-offset:5px}::selection{background:var(--lavender);color:var(--ink)}[hidden]{display:none!important}.wrap{width:min(calc(100% - var(--gutter)*2),var(--max));margin-inline:auto}.section{padding-block:112px}.compact{padding-top:16px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:42px;margin-bottom:46px}.section-heading h2{margin:0}.section-heading>p{max-width:370px;margin:0 0 5px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}.lead{font-size:20px;line-height:1.55}.small{font-size:13px;color:var(--muted)}.lavender-text{color:var(--lavender)}.mint-text{color:var(--mint)}.orange-text{color:var(--orange)}.blue-text{color:#62509a}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:56px;padding:14px 23px;border-radius:8px;background:var(--ink);color:white;font-weight:600;font-size:15px;line-height:1.3;transition:transform .2s,background .2s}.button span{font-size:24px;line-height:1}.button:hover{transform:translateY(-3px);background:#304754}.button.orange{background:var(--orange);color:var(--ink)}.button.orange:hover{background:#ffb284}.button.light{background:var(--paper);color:var(--ink)}.text-link{display:inline-flex;align-items:center;gap:18px;font-size:15px;font-weight:600;padding-block:12px;border-bottom:1px solid currentColor;line-height:1.4}.text-link span{font-size:22px;transition:transform .2s}.text-link:hover span{transform:translate(3px,-3px)}.pale{color:var(--paper)}.round-link{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid currentColor;border-radius:50%;font-size:26px;transition:background .2s,transform .2s}.round-link:hover{transform:rotate(15deg);background:#ffffff65}.skip-link{position:absolute;top:-100px;left:20px;background:var(--orange);padding:12px;z-index:100}.skip-link:focus{top:10px}.site-header{background:var(--ink);color:var(--paper)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:100px;gap:32px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:25px;letter-spacing:-1.2px}.brand svg{width:29px;height:32px;color:var(--orange)}#main-nav{display:flex;align-items:center;gap:30px;font-size:14px}#main-nav>a{padding-block:10px}#main-nav>a:not(.nav-cta){border-bottom:2px solid transparent}#main-nav>a:hover,#main-nav>a[aria-current]{border-bottom-color:var(--orange)}.nav-cta{margin-left:15px;display:flex;gap:25px;background:var(--paper);color:var(--ink);padding:12px 19px!important;border-radius:7px;font-weight:600}.nav-cta span{font-size:21px}.menu-toggle{display:none;background:transparent;color:inherit}.hero-shell{background:var(--ink);color:var(--paper);border-radius:0 0 64px 0;position:relative}.hero-v2{display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:8px;padding-top:46px;padding-bottom:46px;min-height:670px}.hero-copy{position:relative;z-index:2}.hero-copy h1{font-size:clamp(78px,8.4vw,128px);line-height:.92;margin:0 0 30px;letter-spacing:-.018em}.hero-copy h1>span{display:block}.hero-copy .lead{max-width:535px;color:#d1d9db;font-size:18px}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:30px}.hero-visual{position:relative;min-width:0;align-self:stretch;display:grid;align-items:center;padding-block:20px}.creative-kit{width:112%;max-width:112%;position:relative;left:-4%;z-index:1;filter:drop-shadow(0 30px 25px #00000030)}.hero-orbit{position:absolute;inset:19% 6% 10%;border:1px solid #a8b9ba30;border-radius:50%;transform:rotate(-26deg)}.hero-orbit:after{content:'';position:absolute;inset:20px -25px;border:1px solid #a8b9ba20;border-radius:50%}.floating-note{position:absolute;z-index:3;display:flex;align-items:center;gap:13px;font-size:12px;line-height:1.5;box-shadow:0 12px 26px #00000014}.note-top{right:6%;top:1%;background:var(--lavender);color:var(--ink);padding:13px 19px;border-radius:18px 18px 4px 18px;transform:rotate(5deg)}.note-bottom{left:0;bottom:6%;background:var(--paper);color:var(--ink);padding:14px 19px;border-radius:5px 18px 18px 18px;transform:rotate(-5deg)}.mini-spark{font-size:35px;line-height:1}.review-check{border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;width:31px;height:31px;font-size:20px}.sketch-arrow{position:absolute;right:0;bottom:5%;width:85px;fill:none;stroke:var(--orange);stroke-width:2;transform:rotate(-18deg)}.hero-bottom{border-top:1px solid #ffffff23;display:flex;justify-content:space-between;align-items:center;padding-block:27px 34px;gap:30px;font-size:13px;color:#bfcbcf}.hero-bottom p{margin:0}.hero-bottom strong{font-weight:400;color:var(--paper)}.hero-disciplines{display:flex;gap:32px}.hero-disciplines span:before{content:'↗';margin-right:9px;color:var(--orange)}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card{min-height:330px;border-radius:16px 54px 16px 16px;padding:28px 26px 24px;display:flex;flex-direction:column;position:relative;transition:transform .25s}.service-card:hover{transform:translateY(-7px)}.service-card:nth-child(1){background:var(--orange)}.service-card:nth-child(2){background:var(--lavender)}.service-card:nth-child(3){background:var(--mint)}.service-card:nth-child(4){background:var(--ink);color:var(--paper)}.service-card h3{font-size:34px;margin-top:28px;max-width:225px}.service-card p{font-size:14px;line-height:1.6;margin-bottom:30px}.service-card .round-link{align-self:flex-end;margin-top:auto;width:38px;height:38px;font-size:22px}.service-icon{height:32px;font-size:34px;line-height:1;display:block}.section-tail{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:30px;font-size:14px}.section-tail>span{max-width:500px;color:var(--muted)}.oversight-section{background:var(--ink);color:var(--paper);padding-block:98px;border-radius:48px 0 0 48px;margin-left:max(0px,calc((100vw - 1480px)/2))}.oversight-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.oversight-copy h2{font-size:clamp(52px,4.8vw,72px)}.oversight-copy>p:not(.eyebrow){color:#c4d2d5;max-width:440px;font-size:18px}.workflow-demo{background:var(--paper);color:var(--ink);padding:30px;border-radius:18px 45px 18px 18px;transform:rotate(1.2deg)}.workflow-head{font-size:12px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px;font-weight:600}.workflow-head>span:last-child{font-size:21px}.workflow-steps{padding:0;margin:0;list-style:none;display:grid;gap:18px}.workflow-steps>li{display:grid;grid-template-columns:40px 1fr;gap:0 15px;position:relative}.workflow-steps>li:not(:last-child):after{content:'';position:absolute;left:18px;top:42px;height:calc(100% - 29px);border-left:1px dashed #6b7e78}.workflow-steps strong{font-size:15px}.workflow-steps p{font-size:12px;line-height:1.5;margin:3px 0 0;color:#485b61}.step-icon{width:38px;height:38px;border-radius:9px;background:#ebe8e0;display:grid;place-items:center;font-size:25px}.step-icon.lilac{background:var(--lavender)}.step-icon.mint{background:var(--mint)}.review-step button{grid-column:2;text-align:left;background:transparent;text-decoration:underline;color:var(--ink);padding:5px 0;font-size:12px;justify-self:start}.review-step button span{margin-left:10px}.review-step #review-detail{grid-column:2;margin-block:6px}.workflow-caption{font-size:11px;margin:23px 0 0;border-top:1px solid var(--line);padding-top:12px;color:#536568}
.portfolio-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:55px;align-items:center}.portfolio-deck{height:525px;position:relative;perspective:1200px;touch-action:pan-y;cursor:grab;user-select:none;border-radius:28px;background:#e8e7e1;overflow:hidden}.portfolio-deck:active{cursor:grabbing}.portfolio-deck:before{content:'';position:absolute;width:520px;height:520px;border:1px solid #10242e1a;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.preview-card{position:absolute;left:50%;top:50%;width:78%;height:345px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 18px 45px #10242e30;transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .5s,filter .5s;transform-origin:center;pointer-events:none}.preview-card[data-position="0"]{z-index:3;transform:translate(-50%,-50%) rotate(-4deg);opacity:1}.preview-card[data-position="1"]{z-index:2;transform:translate(-33%,-20%) rotate(11deg) rotateY(-12deg) scale(.8);opacity:.55;filter:brightness(.85)}.preview-card[data-position="-1"]{z-index:1;transform:translate(-69%,-87%) rotate(-14deg) rotateY(12deg) scale(.8);opacity:.65;filter:brightness(.9)}.browser-bar{height:24px;background:#fafafa;border-bottom:1px solid #e2e2e2;display:flex;gap:4px;align-items:center;padding-left:10px}.browser-bar i{width:4px;height:4px;border-radius:50%;background:#abb4b6}.browser-bar span{font-size:7px;margin:auto;transform:translateX(-20px);color:#576265}.mini-web{height:calc(100% - 24px);position:relative;overflow:hidden}.mini-web header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;font-size:9px;line-height:1.3}.mini-web header b{font-size:15px;letter-spacing:-.5px}.mini-web h3{font-size:53px;line-height:.95;max-width:240px;margin:0;padding:17px 24px}.mini-web>p{font-size:8px;padding:15px 24px;max-width:220px;line-height:1.5}.mini-field{background:#153e2e;color:#e8efb6}.mini-field svg{position:absolute;right:-25px;bottom:-65px;width:57%;height:330px}.mini-signal{background:#f47744;color:#14262c}.mini-signal h3{font-size:62px;max-width:400px}.mini-signal .signal-lines{position:absolute;right:-160px;bottom:-30px;width:450px;opacity:.7}.mini-forma{background:#eee9df;color:#242b2b}.mini-forma h3{font-family:Georgia,serif;text-transform:none;font-weight:400;font-size:39px;width:56%;padding-top:27px}.architecture{position:absolute;right:20px;bottom:0;width:40%;height:225px;background:#b19e83;box-shadow:-8px 5px 30px #0002;transform:skewY(-8deg);border-radius:80px 0 0 0}.architecture:after{content:'';position:absolute;left:25%;bottom:0;width:52%;height:78%;background:#3b4a45;border-radius:65px 65px 0 0}.architecture:before{content:'';position:absolute;left:13%;top:7%;height:92%;width:3px;background:#d7c9b4}.deck-label{position:absolute;bottom:18px;left:20px;font-size:11px;z-index:4;color:#44545a}.deck-label span{margin-right:8px}.portfolio-detail .eyebrow{color:#615280}.portfolio-detail h3{font-size:56px}.portfolio-detail>p{font-size:16px;color:var(--muted)}.portfolio-detail .project-type{font-size:13px;color:var(--ink);font-weight:600;margin-bottom:22px}.portfolio-detail .concept-label{font-size:12px;line-height:1.5;border-left:3px solid var(--lavender);padding-left:13px;margin-top:27px}.portfolio-controls{display:flex;align-items:center;gap:12px;margin-top:30px}.portfolio-controls button{width:45px;height:45px;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:50%;font-size:23px}.portfolio-controls button:hover{background:var(--ink);color:var(--paper)}.portfolio-count{font-size:12px;min-width:65px;text-align:center}.project-selector{display:flex;gap:9px;margin-top:30px;flex-wrap:wrap}.project-selector button{background:transparent;font-size:12px;padding:9px 11px;border:1px solid #c7ccc9;border-radius:5px;color:var(--ink)}.project-selector button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.closing{background:var(--lavender);color:var(--ink);padding-block:78px;border-radius:0 58px 0 0}.closing-inner{display:flex;justify-content:space-between;align-items:center;gap:55px}.closing h2{max-width:720px;font-size:clamp(48px,5.4vw,78px)}.closing p:not(.eyebrow){max-width:560px}.closing .button{flex:none}.site-footer{background:var(--ink);color:var(--paper);padding-top:65px}.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:45px;padding-bottom:60px}.footer-top .brand{margin-bottom:25px}.footer-top p{color:#c3cdcf;font-size:15px}.footer-top h2{font-family:var(--body);text-transform:none;font-size:14px;letter-spacing:0;font-weight:600;margin-bottom:20px}.footer-top>div>a:not(.brand){display:block;font-size:14px;color:#c3cdcf;margin-block:9px}.footer-top a:hover{color:var(--orange)}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid #ffffff25;padding-block:22px;font-size:11px;color:#bcc9cc}.footer-bottom>div{display:flex;gap:25px;align-items:center}.footer-bottom button{background:transparent;color:inherit;font-size:11px;padding:4px;text-decoration:underline}.page-intro{padding-top:78px;padding-bottom:65px}.page-intro h1{max-width:1000px;line-height:.97}.page-intro .lead{max-width:650px;color:var(--muted);margin:26px 0 0}.page-intro .eyebrow{color:#765094}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px}.soft-section{background:#e9e9df;padding-block:80px}.soft-section p{max-width:600px}.service-feature{display:grid;grid-template-columns:1fr 1fr;gap:75px;padding-block:0 95px;align-items:stretch}.feature-statement{background:var(--lavender);padding:45px;border-radius:12px 70px 12px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:45px}.feature-statement h2{font-size:60px}.feature-statement svg{height:70px;width:70px}.feature-statement.coral{background:var(--orange)}.feature-statement.green{background:var(--mint)}.feature-content{padding-top:25px}.deliverable{border-top:1px solid var(--line);padding-top:22px}.deliverable h3{font-size:32px}.deliverable p{font-size:16px}.check-list{padding-left:23px;margin-bottom:32px}.check-list li{margin-block:12px;padding-left:5px}details{border-top:1px solid #c9cec8}summary{cursor:pointer;list-style:none;font-size:17px;font-weight:600;padding:23px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}summary::-webkit-details-marker{display:none}summary span{font-size:27px;font-weight:400}details[open] summary span{transform:rotate(45deg)}details>p{font-size:15px;max-width:580px;padding-bottom:12px}.related{padding-bottom:85px;display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--line);padding-top:26px}.related p{margin:0}.truth-note{padding:16px 20px;background:#e7e3f2;border-left:3px solid #776397;font-size:14px;margin-bottom:32px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.project-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}.project-caption .eyebrow{margin-bottom:6px;font-size:11px}.project-caption h3{font-size:40px;margin:0}.art{aspect-ratio:1.15;position:relative;overflow:hidden;padding:38px;border-radius:16px;font-family:var(--body)}.art-top{font-weight:600;font-size:52px;line-height:.95;letter-spacing:-2px;position:relative;z-index:1}.art-top small{display:block;font-size:13px;letter-spacing:0;margin-top:12px;font-weight:400}.art-bottom{position:absolute;bottom:27px;left:38px;right:38px;font-size:17px;display:flex;flex-direction:column}.art-bottom>span{font-size:10px;margin-top:5px}.fieldwork{background:#153e2e;color:#e8efb6}.plant{position:absolute;right:-12%;bottom:-13%;width:85%;height:100%}.signal{background:#f47744;color:var(--ink)}.signal-lines{position:absolute;width:100%;right:-18%;bottom:-3%;height:80%}.art-large{aspect-ratio:1.7;padding:70px}.art-large .art-top{font-size:100px}.art-large .art-bottom{left:70px;bottom:45px;font-size:24px}.art-large .plant{right:-5%;bottom:-14%;width:70%;height:112%}.project-story{display:grid;grid-template-columns:1.1fr 1fr;gap:100px}.project-story h2{font-size:53px}.project-story h3{margin-top:28px}.experiment-extension{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:center;padding-bottom:110px}.mini-site{padding:40px;background:var(--mint);border-radius:20px;box-shadow:12px 14px 0 #10242e}.mini-site>p:first-child{display:flex;justify-content:space-between;font-size:14px}.mini-site>p:first-child span{font-size:11px}.mini-site h2{margin-top:50px;font-size:60px}.mini-site-lines{display:flex;gap:12px;margin-top:35px}.mini-site-lines i{height:70px;background:#10242e24;flex:1;border-radius:4px}.mini-site .small{margin-top:25px}.approach-image{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding-bottom:65px}.approach-image img{background:var(--ink);border-radius:20px}.approach-image h2{font-size:65px}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px}.process-grid h2{font-size:42px}.process-icon{font-size:52px;display:block;margin-bottom:30px}.process-grid p{font-size:16px}.article-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px}.article-art{height:300px;border-radius:15px;padding:35px;display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;overflow:hidden}.article-art span{font-family:var(--display);font-size:74px;text-transform:uppercase;line-height:.95}.article-art b{font-size:140px;font-weight:400;line-height:1;transform:rotate(-12deg)}.article-art-0{background:var(--lavender)}.article-art-1{background:var(--orange)}.article-card h3{font-size:37px}.article-card .eyebrow{font-size:11px;margin-bottom:13px}.article-card>p:not(.eyebrow){font-size:15px;max-width:530px}.editorial-note{font-size:12px;color:var(--muted);margin-top:40px}.article-intro h1{max-width:960px}.article-meta{display:flex;gap:30px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-block:20px 40px}.article-layout{display:grid;grid-template-columns:260px 1fr;gap:80px;padding-bottom:100px}.article-layout aside{align-self:start;position:sticky;top:30px}.article-layout aside ol{padding-left:20px;font-size:13px}.article-layout aside li{padding-bottom:14px}.article-layout aside a:hover{text-decoration:underline}.prose{max-width:740px}.prose h2{font-size:42px;margin-top:36px}.prose section:first-child h2{margin-top:0}.prose p{font-size:17px;line-height:1.85}.article-end{margin-top:55px;background:#e9e4f3;padding:25px}.article-end p{font-size:14px;margin:0}.contact-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:95px;padding-bottom:110px}.contact-layout aside h2{font-size:49px}.contact-layout aside>p{max-width:310px;font-size:16px}.contact-note{background:#e9e3f2;padding:24px;border-radius:12px;margin-block:35px;font-size:14px}.contact-note p{font-size:13px;margin:8px 0 0}.form-area{background:white;padding:38px;border-radius:16px 50px 16px 16px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}.field{margin-bottom:25px}.field label,legend{font-size:14px;font-weight:600;display:block;margin-bottom:8px}.field label span{font-weight:400;color:var(--muted);font-size:12px}input,textarea{border:1px solid #b5c2c1;border-radius:5px;padding:12px 14px;max-width:100%;width:100%;background:#fff;color:var(--ink);font-size:16px}textarea{resize:vertical;min-height:150px}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#b63419}.field-help{font-size:12px;color:var(--muted);margin-bottom:9px}.field-error{display:block;color:#a12e18;font-size:12px;margin-top:5px}.field-error:empty{display:none}fieldset{border:0;padding:0;margin:0 0 25px;min-width:0}.interest-options{display:flex;flex-wrap:wrap;gap:9px}.interest-options label{position:relative}.interest-options input{position:absolute;opacity:0;width:1px;height:1px}.interest-options span{display:block;border:1px solid #b5c2c1;padding:10px 13px;font-size:13px;border-radius:5px;cursor:pointer}.interest-options input:checked+span{background:var(--ink);color:white;border-color:var(--ink)}.interest-options input:focus-visible+span{outline:3px solid #ed6025;outline-offset:3px}.form-disclosure{font-size:12px;line-height:1.6;color:var(--muted)}.form-disclosure a{text-decoration:underline}.form-area .button{margin-top:10px}#form-status{font-size:13px;color:#a12e18;margin-top:15px}#review-data{overflow-wrap:anywhere}#review-data dt{font-size:12px;font-weight:600;margin-top:23px}#review-data dd{margin:7px 0 0;font-size:16px;white-space:pre-wrap}.review-actions{display:flex;flex-wrap:wrap;align-items:center;gap:25px;margin-top:35px}.text-button{background:transparent;border-bottom:1px solid var(--ink);color:var(--ink);padding:10px 0;font-size:14px}#brief-review>.small{margin-top:25px}#download-status{font-size:13px}.legal-prose{max-width:780px;padding-bottom:110px}.legal-prose h2{font-size:36px;margin-top:38px}.legal-prose p{font-size:17px;line-height:1.8}.not-found-actions{display:flex;gap:30px;padding-bottom:110px;align-items:center}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.package-card{background:white;padding:30px;border-radius:13px 45px 13px 13px;border:1px solid var(--line)}.package-card:nth-child(2){background:#e8defb}.package-card h2{font-size:42px}.package-card>p{font-size:15px}.package-card .package-state{font-size:12px;color:var(--muted);margin-top:22px}.package-card summary{font-size:14px}.package-card ol{padding-left:19px;font-size:13px}.package-card li{margin-block:16px;padding-left:4px}.package-card li strong{display:block}.founder-module{border:1px solid #c6b7df;padding:32px;border-radius:10px;display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:45px}.founder-module h3{font-size:36px}.founder-module p{font-size:14px}.founder-module .pending{font-size:11px;color:#664d85;font-weight:600}.direction-board{padding-block:65px}.board-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-block:40px}.board-swatches div{padding:40px 14px 16px;border:1px solid #b6beb7;border-radius:12px;font-size:13px}.board-swatches span{display:block;font-weight:600}.board-ink{background:var(--ink);color:white}.board-orange{background:var(--orange)}.board-lavender{background:var(--lavender)}.board-mint{background:var(--mint)}.board-paper{background:var(--paper)}.direction-board .split{margin-block:50px}.board-sample{background:var(--ink);color:var(--paper);padding:45px;border-radius:20px 65px 20px 20px}.board-sample h2{font-size:80px}.board-sample p{font-size:15px}.direction-board .board-caption{font-size:13px;color:var(--muted)}
img{height:auto}.hero-copy,.hero-visual,.oversight-copy,.workflow-demo,.portfolio-detail,.service-card{min-width:0}.hero-shell{overflow:clip}.service-card h3{overflow-wrap:anywhere}.portfolio-deck{contain:paint}.hero-disciplines{flex-wrap:wrap}.workflow-head{gap:12px}
@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes settle{from{opacity:0;transform:translateY(28px) rotate(3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(prefers-reduced-motion:no-preference){.hero-copy h1>span{animation:rise .7s both}.hero-copy h1>span:nth-child(2){animation-delay:.1s}.hero-copy h1>span:nth-child(3){animation-delay:.2s}.hero-copy .entrance{animation:rise .65s .25s both}.hero-visual.entrance{animation:settle .9s .15s both}.js-motion .reveal.is-visible{animation:rise .7s both}}
html.motion-paused{scroll-behavior:auto}body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(min-width:1550px){.hero-v2{min-height:735px}.hero-copy h1{font-size:135px}}
@media(max-width:1100px){#main-nav{gap:18px}.nav-cta{margin-left:0}.hero-v2{grid-template-columns:1fr 1fr;min-height:600px;padding-top:40px}.hero-copy h1{font-size:8.7vw}.hero-copy .lead{font-size:16px}.hero-actions{gap:15px}.hero-actions .button{font-size:13px;gap:13px}.hero-actions .text-link{font-size:12px}.floating-note{font-size:10px}.note-top{right:0;top:6%}.note-bottom{bottom:10%;left:2%}.hero-disciplines{gap:18px;font-size:11px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card{min-height:280px}.service-card h3{max-width:none;font-size:39px}.oversight-grid{gap:40px}.portfolio-layout{grid-template-columns:1.3fr 1fr;gap:35px}.portfolio-deck{height:460px}.preview-card{height:300px;width:84%}.mini-web h3{font-size:44px}.mini-web>p{font-size:7px}.mini-signal h3{font-size:52px}.mini-forma h3{font-size:31px}.architecture{height:170px}.portfolio-detail h3{font-size:47px}.split,.service-feature,.contact-layout,.experiment-extension,.project-story{gap:45px}.feature-statement{padding:30px}.feature-statement h2{font-size:49px}.article-layout{gap:45px;grid-template-columns:220px 1fr}.package-grid{gap:15px}.package-card{padding:24px}.package-card h2{font-size:36px}}
@media(max-width:760px){:root{--gutter:22px}body{font-size:16px}.section{padding-block:70px}.compact{padding-top:5px}.header-inner{min-height:82px;position:relative;flex-wrap:wrap;gap:0}.brand{font-size:23px}.brand svg{width:26px}.menu-toggle{display:block;font-size:13px;padding:12px 0 12px 12px}.menu-toggle span{font-size:21px;margin-left:8px}.js #main-nav{display:none}.js #main-nav.open{display:flex}#main-nav{width:100%;flex-wrap:wrap;gap:8px 24px;padding-bottom:22px}#main-nav a{font-size:14px}.nav-cta{width:100%;justify-content:space-between;margin-top:10px}.hero-shell{border-radius:0 0 38px 0}.hero-v2{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:38px;padding-bottom:15px;gap:12px}.hero-copy h1{font-size:clamp(62px,16.8vw,108px);line-height:.94;margin-bottom:22px}.hero-copy .eyebrow{font-size:10px;margin-bottom:20px}.hero-copy .lead{font-size:16px;max-width:490px}.hero-actions{gap:15px;margin-top:23px}.hero-actions .button{font-size:13px;min-height:52px;gap:25px}.hero-actions .text-link{font-size:13px}.hero-visual{margin-top:28px;height:auto;min-height:370px;padding:18px 0 20px;align-self:stretch;width:min(100%,530px);margin-inline:auto}.creative-kit{width:95%;max-width:95%;left:2.5%}.note-top{right:0;top:0%;font-size:10px;padding:10px 13px}.note-bottom{bottom:5%;left:0;font-size:10px;padding:11px 13px}.mini-spark{font-size:26px}.sketch-arrow{width:60px;right:0;bottom:2%}.hero-bottom{display:block;padding-block:20px 27px;font-size:12px}.hero-disciplines{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:10px}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:20px;font-size:15px;max-width:440px}.section-heading>.text-link{margin-top:20px}h2{font-size:48px}.service-grid{grid-template-columns:1fr 1fr;gap:12px}.service-card{padding:23px 18px 18px;border-radius:12px 33px 12px 12px;min-height:300px}.service-card h3{font-size:29px;margin-top:23px}.service-card p{font-size:12px}.service-icon{font-size:27px}.section-tail{display:block;font-size:13px;margin-top:24px}.section-tail .text-link{margin-top:16px}.oversight-section{border-radius:32px 0 0 32px;padding-block:66px}.oversight-grid{display:block}.oversight-copy h2{font-size:49px}.oversight-copy>p:not(.eyebrow){font-size:16px}.workflow-demo{margin-top:36px;transform:none;padding:22px;border-radius:14px 32px 14px 14px}.workflow-steps strong{font-size:14px}.workflow-steps p{font-size:11px}.portfolio-layout{display:block}.portfolio-deck{height:430px}.preview-card{height:285px;width:82%}.mini-web header{padding:15px 18px}.mini-web h3{font-size:44px;padding:15px 18px}.mini-web>p{padding:12px 18px}.mini-signal h3{font-size:52px}.mini-forma h3{font-size:30px}.portfolio-detail{margin-top:34px}.portfolio-detail h3{font-size:44px}.portfolio-detail>p{font-size:15px}.portfolio-detail .eyebrow{margin-bottom:12px}.portfolio-detail .concept-label{margin-top:20px}.project-selector{margin-top:22px}.closing{padding-block:60px;border-radius:0 35px 0 0}.closing-inner{display:block}.closing h2{font-size:54px}.closing p:not(.eyebrow){font-size:15px}.closing .button{margin-top:15px}.footer-top{grid-template-columns:1fr 1fr;gap:30px;padding-bottom:35px}.footer-top>div:first-child{grid-column:1/-1}.footer-top p{font-size:14px}.footer-top h2{font-size:13px}.footer-top>div>a:not(.brand){font-size:12px}.footer-bottom{display:block;font-size:10px}.footer-bottom>div{gap:24px;margin-top:15px}.page-intro{padding-top:48px;padding-bottom:42px}.page-intro h1{font-size:clamp(55px,13vw,90px)}.page-intro .lead{font-size:17px;margin-top:23px}.page-intro .eyebrow{font-size:10px}.split,.service-feature,.project-story,.experiment-extension,.approach-image,.contact-layout{grid-template-columns:1fr;gap:32px}.service-feature{padding-bottom:65px}.feature-statement{padding:32px;min-height:360px}.feature-statement h2{font-size:50px;max-width:500px}.soft-section{padding-block:60px}.soft-section p,.check-list{font-size:15px}.related{display:block;padding-block:25px 60px}.related .text-link{margin-top:15px}.truth-note{font-size:12px;padding:14px 16px}.project-grid{grid-template-columns:1fr;gap:35px}.art{padding:28px;aspect-ratio:1.1}.art-top{font-size:45px}.art-bottom{left:28px;bottom:24px}.art-large{aspect-ratio:1.1}.art-large .art-top{font-size:54px}.art-large .art-bottom{left:28px;bottom:24px;font-size:17px}.project-story h2{font-size:43px}.experiment-extension{padding-bottom:75px;gap:50px}.mini-site{padding:28px}.mini-site h2{font-size:50px}.approach-image{padding-bottom:15px}.approach-image h2{font-size:50px}.process-grid{grid-template-columns:1fr;gap:35px}.process-icon{font-size:40px;margin-bottom:15px}.process-grid h2{font-size:40px}.article-grid{grid-template-columns:1fr;gap:45px}.article-art{height:260px;padding:28px}.article-art span{font-size:68px}.article-art b{font-size:120px}.article-card h3{font-size:34px}.article-meta{font-size:11px;gap:15px}.article-layout{display:block;padding-bottom:65px}.article-layout aside{position:static;border-bottom:1px solid var(--line);margin-bottom:35px;padding-bottom:20px}.prose h2{font-size:36px}.prose p{font-size:16px;line-height:1.8}.contact-layout{padding-bottom:70px}.contact-layout aside h2{font-size:45px}.contact-note{margin-block:22px}.form-area{padding:26px 20px;border-radius:12px 35px 12px 12px}.form-row{grid-template-columns:1fr;gap:0}.form-disclosure{font-size:11px}.legal-prose{padding-bottom:70px}.legal-prose p{font-size:16px}.legal-prose h2{font-size:34px}.not-found-actions{flex-wrap:wrap;padding-bottom:70px;gap:20px}.package-grid{grid-template-columns:1fr}.package-card{padding:28px}.package-card h2{font-size:43px}.founder-module{grid-template-columns:1fr;gap:15px;padding:25px}.board-swatches{grid-template-columns:repeat(2,1fr)}.direction-board .split{gap:30px}.board-sample{padding:30px}.board-sample h2{font-size:62px}}
@media(max-width:360px){.service-grid{grid-template-columns:1fr}.service-card{min-height:255px}.service-card h3{font-size:37px}.hero-copy h1{font-size:59px}.hero-actions .button{width:100%;gap:15px}.hero-visual{min-height:320px}.note-top{font-size:9px}.note-bottom{font-size:9px}.portfolio-deck{height:375px}.preview-card{height:245px}.mini-web h3{font-size:36px}.mini-signal h3{font-size:42px}.mini-forma h3{font-size:26px}.mini-web header b{font-size:12px}.mini-web header{padding:12px}.architecture{height:145px}.mini-web>p{font-size:6px;max-width:160px}.portfolio-detail h3{font-size:42px}}
@media(max-width:480px){.service-grid{grid-template-columns:1fr}.service-card{min-height:275px;padding:27px}.service-card h3{font-size:38px;max-width:260px;overflow-wrap:normal}.service-card p{font-size:15px;max-width:240px}.service-card .round-link{align-self:flex-end}}
.forma-preview-image{position:absolute;right:0;bottom:0;width:51%;height:75%;object-fit:cover;object-position:55% 50%;border-radius:60px 0 0 0}.mini-forma>p{max-width:49%;font-size:8px}.mini-forma h3{position:relative;z-index:1}.forma-art{overflow:hidden;background:#e8e0d1;border-radius:12px}.forma-art>div{padding:28px 32px;display:flex;gap:25px;align-items:end;justify-content:space-between}.forma-art>div>span{font-family:Georgia,serif;font-size:60px;letter-spacing:-4px;line-height:1}.forma-art>div>p{font-size:14px;max-width:160px;margin:0}.forma-art>img{width:100%;height:auto}.forma-art .image-caption{font-size:11px;margin:0;padding:12px 24px}.forma-large>div{padding:40px}.forma-large>div>span{font-size:90px}.forma-large>div>p{font-size:22px;max-width:300px}.project-grid>.project:last-child{grid-column:1/-1;max-width:950px;width:100%;margin-inline:auto}.founder-module{margin-bottom:90px}.approach-kit{padding:25px}.mini-forma h3{font-family:var(--body);font-size:32px;letter-spacing:-.06em;line-height:1.1;font-weight:400}
@media(max-width:760px){.forma-art>div{padding:24px}.forma-art>div>span,.forma-large>div>span{font-size:58px}.forma-art>div>p{font-size:13px;max-width:145px}.mini-forma h3{font-size:25px;padding-inline:18px}.mini-forma>p{font-size:6px}.forma-preview-image{height:67%}.founder-module{margin-bottom:65px}}
.article-grid>*,.project-grid>*,.service-feature>*,.split>*,.project-caption>div{min-width:0}.project-caption .eyebrow{overflow-wrap:anywhere}
@media(max-width:480px){.article-art{position:relative;overflow:hidden}.article-art span{font-size:60px;position:relative;z-index:1}.article-art b{position:absolute;right:18px;bottom:2px;font-size:105px;opacity:.35}}
@media(max-width:360px){.page-intro h1{font-size:48px}.hero-copy h1{font-size:55px}.feature-statement{padding:25px}.feature-statement h2{font-size:40px}.board-sample{padding:23px}.board-sample h2{font-size:47px}.article-art span{font-size:54px}.project-caption{gap:14px}.project-caption .eyebrow{font-size:10px}.forma-art>div{gap:12px}.forma-art>div>p{font-size:11px}.art-top{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Owner-directed refinement 02: shared surfaces, controls and editorial navigation. */
:root { --paper: #f5f7f4; --line: #d4ded9; }
body {
  background:
    radial-gradient(ellipse at 0 20%, #ede8fc 0, transparent 32%),
    radial-gradient(ellipse at 100% 52%, #deeee7 0, transparent 30%),
    radial-gradient(ellipse at 10% 87%, #fce7d9 0, transparent 28%), #f5f7f4;
}
.icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Soft depth and carefully contained background details. */
.hero-shell {
  isolation: isolate;
  background: radial-gradient(ellipse at 82% 40%, #5351748a, transparent 49%),
    radial-gradient(ellipse at 10% 95%, #28595375, transparent 57%),
    linear-gradient(118deg, #10242e 23%, #192d39 62%, #273442);
}
.hero-shell::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .15;
  background: repeating-linear-gradient(0deg, transparent 0 87px, #b8d2d62b 88px 89px),
    repeating-linear-gradient(90deg, transparent 0 87px, #b8d2d62b 88px 89px);
  mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
}
.hero-orbit { border-color: #ccbaff45; box-shadow: 0 0 90px #baa6f414, inset 0 0 70px #baa6f418; }
.hero-orbit::after { border-color: #baa6f428; }
.hero-bottom { position: relative; }
.hero-disciplines span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--orange); vertical-align: 2px; transform: rotate(25deg); }
.hero-disciplines span:nth-child(2)::before { background: var(--lavender); }
.hero-disciplines span:nth-child(3)::before { background: var(--mint); }
.mini-spark, .review-check { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 11px; background: #10242e0c; }
.mini-spark .icon, .review-check .icon { width: 29px; height: 29px; }
.note-top { background: linear-gradient(135deg, #d6c7ff, #b5a1f0); }
.note-bottom { background: linear-gradient(120deg, #fffefa, #e7f1e6); }
.oversight-section { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 5% 15%, #326a645c, transparent 60%), linear-gradient(130deg, #10242e, #18333d 60%, #31354a); }
.oversight-section::before { content: ''; position: absolute; z-index: -1; width: 720px; height: 720px; left: -390px; top: -230px; border-radius: 50%; border: 1px solid #91d5bd20; box-shadow: 0 0 0 55px #91d5bd07, 0 0 0 110px #91d5bd05; }
.workflow-demo { background: linear-gradient(135deg, #f9fbf7, #e9f0e9); box-shadow: 0 25px 50px #071c2238; }
.workflow-head > .icon { width: 22px; height: 22px; }
.step-icon .icon { width: 26px; height: 26px; }
.soft-section { background: radial-gradient(ellipse at 85% 15%, #d3eee085, transparent 58%), linear-gradient(115deg, #e8e6f4, #edf0e9 55%, #e2efe9); }
.closing { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 5% 100%, #ffd4b68c, transparent 65%), linear-gradient(110deg, #c7b4f1, #d2c4f5 60%, #b8c9e9); }
.closing::after { content: ''; position: absolute; pointer-events: none; z-index: -1; width: 420px; height: 420px; right: -85px; top: -160px; border: 1px solid #6050802b; border-radius: 90px; transform: rotate(-24deg); box-shadow: 0 0 0 30px #ffffff16, 0 0 0 62px #ffffff13; }
.page-intro { position: relative; isolation: isolate; }
.page-intro::before { content: ''; position: absolute; z-index: -1; width: min(60%, 620px); height: 80%; top: 10%; right: 0; background: radial-gradient(ellipse, #baa6f42b, transparent 68%); pointer-events: none; }
.site-footer { background: linear-gradient(130deg, #10242e, #18323b); }
.footer-bottom button { background: #ffffff12; border-radius: 8px; padding: 7px 10px; text-decoration: none; }

/* Three control weights: sculpted primary, softly filled secondary, compact directional. */
.button, .nav-cta { border: 0; border-radius: 16px; box-shadow: 0 3px 0 #05171e, 0 8px 20px #10242e12; }
.button { padding: 10px 12px 10px 22px; min-height: 57px; gap: 20px; background: linear-gradient(135deg, #254854, #10242e); }
.button:hover { transform: translateY(-2px); background: linear-gradient(135deg, #365d67, #19343e); }
.button.orange { background: linear-gradient(125deg, #ffb482, #ff965c 65%, #fb8950); box-shadow: 0 3px 0 #b8683e, 0 9px 26px #f38b5320; }
.button.orange:hover { background: linear-gradient(125deg, #ffc39b, #ffa36e); }
.button.light { background: linear-gradient(125deg, #fffdf8, #eceaf7); box-shadow: 0 3px 0 #8778a0, 0 10px 24px #56467c16; }
.button .button-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: #ffffff18; }
.button.orange .button-icon, .button.light .button-icon { background: #10242e10; }
.button .button-icon .icon { width: 23px; height: 23px; }
.text-link, .text-button {
  display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%;
  border: 0; border-radius: 12px; background: #e4e6ef; color: var(--ink); padding: 12px 18px;
  text-decoration: none; line-height: 1.45; font-size: 14px; font-weight: 600;
  box-shadow: inset 0 1px 0 #ffffff70; transition: background .2s, transform .2s, box-shadow .2s;
}
.text-link:hover, .text-button:hover { background: #d5cbea; transform: translateY(-2px); box-shadow: 0 5px 16px #3223420c; }
.text-link.pale { color: #eef2ec; background: #eff1ff12; box-shadow: inset 0 1px 0 #ffffff16; }
.text-link.pale:hover { background: #ffffff23; }
.round-link, .service-card .round-link, .portfolio-controls button { width: 44px; height: 44px; border: 0; border-radius: 14px; display: grid; place-items: center; background: #ffffff80; box-shadow: 0 3px 0 #10242e10; }
.round-link:hover, .portfolio-controls button:hover { transform: translateX(2px); color: var(--ink); background: #ffffffd9; }
.round-link .icon, .portfolio-controls .icon { width: 22px; height: 22px; }
.portfolio-controls button { background: #dfe9e4; color: var(--ink); }
.portfolio-controls button:hover { background: #c3dcd0; }
.review-step button { text-decoration: none; background: #d2e6da; border-radius: 8px; padding: 6px 10px; margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; }
.review-step button > .icon { width: 15px; height: 15px; transition: transform .2s; }
.review-step button[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.interest-options span { background: #ecedf5; border-color: transparent; border-radius: 10px; }
.interest-options input:checked + span { background: #d8c9f6; color: var(--ink); border-color: transparent; box-shadow: inset 0 -3px 0 #9381b0; }
.interest-options input:focus-visible + span { outline: 3px solid #ed6025; outline-offset: 3px; }
.faqs summary > .icon, .package-card summary > .icon { width: 22px; height: 22px; transition: transform .2s; }
.faqs details[open] summary > .icon, .package-card details[open] summary > .icon { transform: rotate(180deg); }
.service-card { box-shadow: inset 0 1px 0 #ffffff55, 0 16px 34px #10242e08; }
.service-card:nth-child(1) { background: radial-gradient(ellipse at top right, #ffd7b0, transparent 72%), #ff9a61; }
.service-card:nth-child(2) { background: radial-gradient(ellipse at top right, #dfd4ff, transparent 72%), #b9a4ee; }
.service-card:nth-child(3) { background: radial-gradient(ellipse at top right, #d1ebce, transparent 72%), #8bd0b6; }
.service-card:nth-child(4) { background: radial-gradient(ellipse at top right, #3a5961, transparent 75%), #10242e; }
.service-card:nth-child(4) .round-link { background: #ffffff18; color: #eff2ec; }
.service-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px 22px 18px 9px; background: #fff7; box-shadow: inset 0 1px 0 #ffffff80; transform: rotate(-5deg); }
.service-icon .icon { width: 38px; height: 38px; transform: rotate(5deg); }
.service-card:nth-child(4) .service-icon { color: #b9dfce; background: #ffffff12; box-shadow: inset 0 1px 0 #ffffff23; }
.process-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: #ded4f3; }
.process-icon .icon { width: 44px; height: 44px; }
.process-grid article:nth-child(2) .process-icon { background: #f7d5bd; }
.process-grid article:nth-child(3) .process-icon { background: #cce6d8; }
.article-art { overflow: hidden; }
.article-art-0 { background: radial-gradient(ellipse at top right, #fbe4c7, transparent 80%), #ffa575; }
.article-art-1 { background: radial-gradient(ellipse at top right, #e2ddff, transparent 80%), #b6a3ea; }
.article-art b { display: grid; place-items: center; transform: rotate(-10deg); }
.article-art b .icon { width: clamp(90px, 11vw, 170px); height: auto; }

/* Project tabs borrow the visual identity of each concept. */
.portfolio-deck { background: radial-gradient(ellipse at 20% 0, #e7dcfa, transparent 70%), radial-gradient(ellipse at 90% 100%, #d3e9dd, transparent 65%), #e9eee9; }
.portfolio-deck::before { border-color: #81779826; box-shadow: 0 0 0 55px #ffffff22, 0 0 0 110px #ffffff15; }
.project-selector { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.project-selector .project-tab { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 73px; padding: 10px; background: #fff9; border: 0; border-radius: 16px; text-align: left; position: relative; transition: transform .2s, background .2s, box-shadow .2s; box-shadow: 0 2px 4px #10242e05; }
.project-selector .project-tab:hover { transform: translateY(-3px); background: white; }
.tab-art { display: grid; place-items: center; flex: none; width: 42px; height: 48px; border-radius: 9px 18px 9px 9px; overflow: hidden; }
.tab-art .icon { width: 32px; height: 32px; transform: rotate(-12deg); }
.tab-fieldwork .tab-art { background: #153e2e; color: #e8efb6; }
.tab-signal .tab-art { background: #f47744; color: #14262c; }
.tab-forma .tab-art { background: linear-gradient(30deg, #b2a48e, #eee3ce); color: #38453b; }
.tab-name { font-size: 11px; font-weight: 600; line-height: 1.3; padding-right: 10px; }
.tab-selected { position: absolute; right: 7px; top: 7px; display: none; }
.tab-selected .icon { width: 14px; height: 14px; }
.project-selector button[aria-pressed="true"] { color: var(--ink); background: #e0e8e2; box-shadow: inset 0 -3px 0 #a4bdb0; }
.project-selector button[aria-pressed="true"] .tab-selected { display: block; }

/* An editorial dropdown surface, shared by every route. */
.site-header { position: relative; z-index: 20; background: linear-gradient(110deg, #10242e, #1b2e39); }
.header-inner { position: relative; gap: 20px; }
#main-nav { gap: 6px; }
#main-nav > a:not(.nav-cta) { border: 0; padding: 12px 15px; }
.nav-trigger, #main-nav > .nav-direct { display: flex; align-items: center; gap: 8px; color: #edf1ed; background: transparent; font-size: 14px; font-weight: 600; line-height: 1.4; border-radius: 11px; transition: background .2s, color .2s; }
.nav-trigger { list-style: none; cursor: pointer; padding: 12px 15px; }
.nav-trigger::-webkit-details-marker { display: none; }
.nav-trigger > .icon { width: 13px; height: 13px; color: #bdc9ce; transition: transform .2s; }
.nav-dropdown { padding: 0; margin: 0; border: 0; }
.nav-dropdown[open] > .nav-trigger, .nav-trigger:hover, #main-nav > .nav-direct:hover { background: #ffffff12; color: #e1d4ff; }
.nav-dropdown[open] > .nav-trigger > .icon { transform: rotate(180deg); }
.nav-section-active > .nav-trigger, #main-nav > .nav-direct[aria-current] { background: #baa6f41c; color: #ded0fc; }
#main-nav > .nav-cta { padding: 8px 9px 8px 18px !important; min-height: 49px; margin-left: 13px; gap: 17px; border-radius: 14px; background: linear-gradient(120deg, #ffb884, #ff995f); color: #142630; box-shadow: 0 3px 0 #a5603e, inset 0 1px 0 #ffd6b5; transition: transform .2s, box-shadow .2s; }
#main-nav > .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #a5603e, 0 8px 22px #0002; }
.nav-cta > span { font-size: 13px; }
.nav-cta .cta-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #10242e12; }
.nav-cta .icon { width: 21px; height: 21px; }
.nav-panel { position: absolute; top: calc(100% - 5px); right: 0; width: min(850px, 100%); max-height: calc(100dvh - 115px); overflow-y: auto; color: var(--ink); background: linear-gradient(140deg, #fbfcf9 20%, #f0edf7 70%, #e4eee7); border: 1px solid #ffffff; padding: 25px; border-radius: 23px; box-shadow: 0 25px 60px #04151e38, 0 4px 10px #04151e16; }
.nav-dropdown[open] > .nav-panel { animation: panel-in .18s ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.nav-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.nav-panel-heading .eyebrow { display: block; font-size: 9px; letter-spacing: .1em; color: #685982; margin: 0 0 5px; }
.nav-panel-heading p { font-size: 19px; line-height: 1.3; letter-spacing: -.5px; margin: 0; font-weight: 600; }
.panel-index { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; padding: 9px 12px; font-size: 11px; font-weight: 600; color: #293b40; background: #e3e7e2; transition: background .2s; }
a.panel-index:hover, .nav-package:hover .panel-index { background: #d3c6ec; }
.nav-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.nav-service { display: flex; align-items: center; gap: 15px; padding: 19px; border-radius: 14px 26px 14px 14px; transition: transform .2s, box-shadow .2s; }
.nav-service:hover { transform: translateY(-3px); box-shadow: 0 7px 12px #10242e0b; }
.nav-service-0 { background: linear-gradient(120deg, #ffd5b5, #ffe6cd); }
.nav-service-1 { background: linear-gradient(120deg, #ddd0fa, #ece4ff); }
.nav-service-2 { background: linear-gradient(120deg, #c4e6d7, #e0f0de); }
.nav-service-3 { background: linear-gradient(120deg, #253f49, #3c545b); color: #eff3eb; }
.nav-service-icon { display: grid; place-items: center; width: 47px; height: 47px; flex: none; background: #ffffff65; border-radius: 12px; }
.nav-service-icon .icon { width: 31px; height: 31px; }
.nav-service-3 .nav-service-icon { background: #ffffff13; color: #b1d8c4; }
.nav-service strong, .nav-package strong { display: block; font-size: 13px; line-height: 1.4; }
.nav-service small, .nav-package small { display: block; font-size: 10px; line-height: 1.5; margin-top: 5px; }
.nav-package { display: flex; align-items: center; gap: 14px; padding: 19px 4px 0; margin-top: 20px; border-top: 1px solid #10242e14; }
.nav-package-mark { display: grid; place-items: center; color: #796294; width: 43px; height: 43px; flex: none; }
.nav-package-mark .icon { width: 33px; height: 33px; }
.nav-package .panel-index { margin-left: auto; }
.nav-project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.nav-project { display: block; min-width: 0; }
.nav-project-art { display: block; position: relative; overflow: hidden; height: 154px; border-radius: 14px 28px 14px 14px; margin-bottom: 12px; transition: transform .2s, box-shadow .2s; }
.nav-project:hover .nav-project-art { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 8px 16px #10242e17; }
.nav-project-art > span { position: absolute; top: 17px; left: 17px; z-index: 1; font-family: var(--display); text-transform: uppercase; font-size: 24px; line-height: 1; max-width: 100px; }
.nav-project-art > .icon { position: absolute; right: -12px; bottom: -20px; width: 142px; height: 142px; transform: rotate(-20deg); }
.project-art-fieldwork { background: #194b36; color: #e8f0a8; }
.project-art-signal { background: #f59368; color: #192d35; }
.project-art-signal > .icon { transform: rotate(-30deg); }
.project-art-forma { background: #e6dece; color: #263e38; }
.project-art-forma > img { width: 100%; height: 100%; object-fit: cover; }
.project-art-forma > span { font-family: Georgia,serif; text-transform: none; font-size: 25px; background: #f8f5efd9; padding: 7px 10px; border-radius: 8px; top: 10px; left: 10px; }
.nav-project > strong { display: block; font-size: 13px; }
.nav-project > small { display: block; font-size: 10px; color: #536367; line-height: 1.5; margin-top: 3px; }
.nav-footnote { font-size: 10px; margin: 19px 0 0; color: #536367; }
.nav-insight-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.nav-featured-story { display: block; overflow: hidden; border-radius: 14px; background: #fff9; transition: background .2s; }
.nav-featured-story:hover { background: white; }
.nav-insight-art { position: relative; display: block; overflow: hidden; height: 153px; padding: 19px; background: linear-gradient(110deg, #f9ac78, #ffdcad); }
.nav-insight-art > span { position: relative; z-index: 1; font-family: var(--display); font-size: 51px; text-transform: uppercase; line-height: .94; }
.nav-insight-art > .icon { position: absolute; right: 15px; bottom: -8px; width: 132px; height: 132px; transform: rotate(-12deg); opacity: .75; }
.nav-story-copy { display: block; padding: 15px 18px 20px; }
.nav-story-copy small, .nav-second-story small { display: block; font-size: 10px; color: #5c5765; margin-bottom: 7px; }
.nav-story-copy strong, .nav-second-story strong { display: block; font-size: 15px; line-height: 1.4; }
.nav-second-story { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; background: linear-gradient(140deg, #e1d7f7, #eeebf5); border-radius: 14px 28px 14px 14px; transition: background .2s; }
.nav-second-story:hover { background: #dcd0f3; }
.nav-story-icon { display: grid; place-items: center; width: 53px; height: 53px; margin-bottom: 16px; border-radius: 15px; background: #fff6; }
.nav-story-icon .icon { width: 33px; height: 33px; }
.nav-second-story p { font-size: 11px; margin: 10px 0 0; line-height: 1.6; }
.menu-toggle .icon:last-child { display: none; }
.menu-toggle[aria-expanded="true"] .icon:nth-child(2) { display: none; }
.menu-toggle[aria-expanded="true"] .icon:last-child { display: inline-block; }

@media (max-width: 1150px) {
  .nav-trigger, #main-nav > a:not(.nav-cta) { padding: 11px; font-size: 13px; }
  #main-nav > .nav-cta { margin-left: 8px; }
  .project-selector { gap: 8px; }
  .project-selector .project-tab { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
  .tab-art { width: 100%; height: 43px; }
  .tab-selected { background: #fff; border-radius: 100%; width: 14px; height: 14px; }
}
@media (max-width: 1020px) {
  .header-inner { min-height: 82px; flex-wrap: wrap; gap: 0; }
  .menu-toggle { display: none; align-items: center; gap: 10px; color: #eef2ec; background: #ffffff12; border-radius: 12px; padding: 10px 13px; font-size: 13px; }
  .js .menu-toggle { display: flex; }
  .menu-toggle span { font-size: 13px; margin: 0; }
  .menu-toggle .icon { width: 20px; height: 20px; }
  .js #main-nav { display: none; }
  .js #main-nav.open, #main-nav { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 8px; padding: 5px 0 23px; }
  .nav-trigger, #main-nav > .nav-direct { font-size: 16px; justify-content: space-between; padding: 15px; }
  #main-nav > a:not(.nav-cta) { padding: 15px; font-size: 16px; }
  #main-nav > .nav-cta { margin: 8px 0 0; width: 100%; justify-content: space-between; padding: 10px 12px 10px 18px !important; }
  .nav-cta > span { font-size: 15px; }
  .nav-panel { position: static; width: 100%; max-height: none; margin-top: 8px; padding: 20px; border-radius: 18px; box-shadow: none; }
  #main-nav .panel-index { font-size: 11px; }
  .nav-panel-heading p { font-size: 17px; }
  .nav-service { padding: 16px; gap: 12px; }
  .nav-project-art { height: 145px; }
}
@media (max-width: 760px) {
  .hero-actions { gap: 17px; }
  .hero-actions .button { padding: 10px 11px 10px 18px; gap: 18px; }
  .hero-actions .text-link { padding: 12px 17px; }
  .service-icon { width: 54px; height: 54px; }
  .service-icon .icon { width: 34px; height: 34px; }
  .project-selector { gap: 10px; }
  .project-selector .project-tab { padding: 10px; }
  .project-selector .tab-art { height: 48px; }
  .tab-name { font-size: 11px; }
  .nav-panel-heading { gap: 12px; flex-wrap: wrap; }
  .nav-panel-heading p { font-size: 17px; }
  .nav-service-grid { grid-template-columns: 1fr; }
  .nav-service { padding: 15px; }
  .nav-service strong { font-size: 13px; }
  .nav-service small { font-size: 11px; }
  .nav-package { flex-wrap: wrap; gap: 10px; }
  .nav-package > span:nth-child(2) { flex: 1; }
  .nav-package .panel-index { margin: 4px 0 0 53px; }
  .nav-project-grid { grid-template-columns: 1fr; gap: 13px; }
  .nav-project { display: grid; grid-template-columns: 92px 1fr; gap: 0 13px; align-items: start; }
  .nav-project-art { grid-row: 1/3; height: 82px; margin: 0; border-radius: 10px 20px 10px 10px; }
  .nav-project-art > span { top: 10px; left: 9px; font-size: 14px; max-width: 65px; }
  .nav-project-art > .icon { width: 74px; height: 74px; bottom: -15px; right: -14px; }
  .project-art-forma > span { font-size: 17px; top: 5px; left: 5px; padding: 3px 6px; }
  .nav-project > strong { align-self: end; padding-top: 5px; font-size: 13px; }
  .nav-project > small { align-self: start; font-size: 10px; margin-top: 4px; }
  .nav-insight-grid { grid-template-columns: 1fr; gap: 13px; }
  .nav-insight-art { height: 140px; }
  .nav-second-story { padding: 18px; }
  .nav-story-icon { width: 42px; height: 42px; margin-bottom: 12px; }
  .nav-second-story p { font-size: 12px; }
  .mini-spark, .review-check { width: 30px; height: 30px; }
  .mini-spark .icon, .review-check .icon { width: 25px; height: 25px; }
}
@media (max-width: 360px) {
  .nav-panel { padding: 15px; }
  .nav-service { padding: 12px; gap: 10px; }
  .nav-service-icon { width: 38px; height: 42px; }
  .nav-service-icon .icon { width: 29px; height: 29px; }
  .nav-service strong { font-size: 12px; }
  .nav-service small { font-size: 10px; }
  .nav-package { align-items: start; }
  .nav-package strong { font-size: 12px; }
  .project-selector { gap: 7px; }
  .project-selector .project-tab { padding: 8px; border-radius: 12px; }
  .tab-name { font-size: 10px; padding: 0; }
  .hero-actions .button { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown[open] > .nav-panel { animation: none; }
}

/* Idea 41 — a contained, vector-only footer playground. */
.nav-cta, #main-nav > .nav-cta { align-items: center; }
.nav-cta > span:first-child { display: block; line-height: 1; padding-block: 1px; }
.button { align-items: center; }
#services .section-heading > .service-intro { max-width: 375px; text-wrap: balance; }
.service-intro > span { display: block; }

.physics-footer { padding-top: 52px; position: relative; isolation: isolate; }
.footer-shell { position: relative; z-index: 2; pointer-events: none; }
.footer-shell a, .footer-shell button { pointer-events: auto; }
.footer-shell a, .footer-shell h2, .footer-tagline, .footer-bottom span { text-shadow: 0 1px 5px #10242e, 0 0 12px #10242e; }
.footer-main { display: grid; grid-template-columns: minmax(310px, .8fr) minmax(0, 1.35fr); gap: 36px; position: relative; border-bottom: 1px solid #a9c6c22e; }
.footer-copy { padding: 22px 0 33px; position: relative; z-index: 2; }
.footer-copy .brand { margin-bottom: 24px; }
.footer-tagline { color: #c8d5d7; font-size: 15px; margin-bottom: 26px; }
.footer-links { display: grid; grid-template-columns: .85fr 1.3fr; gap: 25px; }
.footer-links h2 { font-family: var(--body); font-weight: 600; text-transform: none; font-size: 13px; letter-spacing: 0; margin: 0 0 12px; }
.footer-links a { display: block; font-size: 13px; color: #c8d5d7; margin: 8px 0; width: fit-content; }
.footer-links a:hover, .physics-footer .footer-bottom a:hover { color: var(--orange); }
.footer-play-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.footer-play-controls button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 12px; border-radius: 11px; color: #e2ece8; background: #263f47; font-size: 11px; line-height: 1.2; }
.footer-play-controls button:hover { background: #36515a; }
.footer-play-controls .icon { width: 16px; height: 16px; }
.footer-play-space { position: relative; min-width: 0; min-height: 430px; }
.footer-playground { position: absolute; inset: 0; z-index: 1; overflow: clip; pointer-events: none; isolation: isolate; contain: layout paint; }
.footer-playground::before { content: ''; position: absolute; pointer-events: none; inset: 20% 0 64px 0; background: radial-gradient(ellipse, #baa6f40a, transparent 70%); }
.physics-footer .footer-bottom { border: 0; padding-block: 22px; min-height: 65px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; color: #bcccce; font-size: 10px; }
.physics-footer .footer-bottom > div { margin: 0; gap: 22px; }
.footer-piece {
  position: absolute; bottom: 87px; padding: 0; margin: 0; border: 0; border-radius: 18%;
  width: 15%; height: 130px; background: transparent; color: var(--toy-color);
  display: block; pointer-events: auto; cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transform-origin: center; transition: none; z-index: 1;
}
.footer-piece:disabled { opacity: 1; cursor: default; }
.footer-piece:focus, .footer-piece:focus-visible { outline: none; }
.footer-playground.keyboard-focus .footer-piece:focus-visible { outline: 2px solid #c8d5d7; outline-offset: 5px; }
.footer-piece.is-dragged { cursor: grabbing; z-index: 3; }
.piece-skin { display: block; width: 100%; height: 100%; transform-origin: center; }
.piece-original, .piece-emoji { display: block; position: absolute; inset: 0; transform-origin: center; pointer-events: none; }
.piece-original > svg, .piece-emoji > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.piece-emoji { opacity: 0; transform: scale(.65); }
.footer-piece.is-emoji .piece-emoji { opacity: 1; transform: scale(1); }
.footer-piece.is-emoji .piece-original { opacity: 0; }
.piece-color-0 { --toy-color: #aa6bff; }
.piece-color-1 { --toy-color: #ff752b; }
.piece-color-2 { --toy-color: #39e49b; }
.piece-color-3 { --toy-color: #ffdb28; }
.piece-color-4 { --toy-color: #35bfff; }
.piece-color-5 { --toy-color: #ff55a1; }
.footer-piece[data-slot="0"] { left: 2%; transform: rotate(-12deg); }
.footer-piece[data-slot="1"] { left: 17%; transform: rotate(8deg); }
.footer-piece[data-slot="2"] { left: 32%; transform: rotate(-7deg); }
.footer-piece[data-slot="3"] { left: 45%; transform: rotate(12deg); }
.footer-piece[data-slot="4"] { left: 61%; transform: rotate(-9deg); }
.footer-piece[data-slot="5"] { left: 76%; transform: rotate(6deg); }
.footer-piece[data-slot="6"] { left: 9%; bottom: 225px; width: 13%; height: 92px; transform: rotate(-18deg); }
.footer-piece[data-slot="7"] { left: 34%; bottom: 220px; width: 13%; height: 92px; transform: rotate(14deg); }
.footer-piece[data-slot="8"] { left: 59%; bottom: 229px; width: 13%; height: 92px; transform: rotate(-11deg); }
.footer-piece[data-slot="9"] { left: 77%; bottom: 223px; width: 13%; height: 92px; transform: rotate(12deg); }
.footer-playground.physics-ready .footer-piece { top: 0; bottom: auto; left: 0; transform-origin: 0 0; will-change: transform; }
.footer-playground[data-state="sleeping"] .footer-piece, .footer-playground[data-state="paused"] .footer-piece, .footer-playground[data-state="offscreen"] .footer-piece { will-change: auto; }

@media (max-width: 1100px) {
  .footer-main { grid-template-columns: minmax(275px, .8fr) minmax(0, 1.2fr); gap: 25px; }
  .footer-links { gap: 16px; }
  .footer-links a { font-size: 12px; }
  .footer-piece { height: 105px; }
}
@media (max-width: 760px) {
  #services .section-heading > .service-intro { max-width: 360px; }
  .physics-footer { padding-top: 32px; }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-copy { padding-bottom: 0; }
  .footer-copy .brand { margin-bottom: 20px; }
  .footer-tagline { font-size: 14px; margin-bottom: 23px; }
  .footer-links { grid-template-columns: .85fr 1.2fr; gap: 20px; }
  .footer-links a { font-size: 12px; }
  .footer-play-controls { margin-top: 22px; }
  .footer-play-space { min-height: 310px; }
  .physics-footer .footer-bottom { padding-top: 73px; padding-bottom: 26px; }
  .footer-piece { height: 78px; bottom: 142px; }
  .footer-piece[data-slot="6"] { left: 38%; bottom: 233px; width: 21%; height: 80px; }
  .footer-piece[data-slot="7"], .footer-piece[data-slot="8"], .footer-piece[data-slot="9"] { display: none; }
}
@media (max-width: 360px) {
  .footer-links { gap: 14px; }
  .footer-links a { font-size: 11px; }
  .footer-play-space { min-height: 280px; }
  .footer-piece { height: 67px; }
}

/* Owner's fifth revision: agency voice, offer and footer details. */
.portfolio-section .section-heading > p { text-align: right; max-width: 440px; text-wrap: balance; }
.hero-v2 { padding-bottom: 68px; }
.package-card > .text-link { margin-bottom: 24px; }
.package-card details { margin-top: 0; }
.package-card ol { list-style: none; padding: 18px 0 0; }
.package-card li { display: flex; gap: 13px; align-items: flex-start; margin: 0 0 24px; }
.phase-icon { display: grid; place-items: center; flex: 0 0 37px; height: 37px; border-radius: 11px; color: #25464a; background: #dce9e3; }
.phase-icon .icon { width: 24px; height: 24px; }
.package-card:nth-child(2) .phase-icon { background: #d2c3ed; color: #513d73; }
.package-card:nth-child(3) .phase-icon { background: #f9d5bb; color: #885331; }
.package-card li p { margin: 5px 0 0; }
.footer-main { border-bottom-width: 2px; }
.physics-footer .footer-bottom { position: relative; padding-right: 62px; }
#footer-replay { position: absolute; right: 0; top: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--orange); box-shadow: 0 3px 0 #aa623c; }
#footer-replay:hover { background: #ffb37e; transform: rotate(-12deg); }
#footer-replay .icon { width: 22px; height: 22px; }
.footer-offer { display: inline-flex; align-items: center; gap: 14px; margin-top: 25px; padding: 10px 15px; border-radius: 12px; background: #d7cbf0; color: #10242e; font-size: 12px; font-weight: 600; }
.footer-offer .icon { width: 17px; height: 17px; }
.offer-is-open { overflow: hidden; }
.offer-dialog { border: 0; padding: 0; width: min(960px,calc(100% - 36px)); max-width: none; max-height: calc(100dvh - 36px); overflow: auto; background: var(--ink); color: #f5f7f4; border-radius: 22px 44px 22px 22px; box-shadow: 0 30px 110px #06121970; }
.offer-dialog::backdrop { background: #081a22b8; backdrop-filter: blur(7px); }
.offer-layout { display: grid; grid-template-columns: .95fr 1.05fr; }
.offer-art { display: flex; flex-direction: column; justify-content: center; background: #bba5ed; color: #10242e; overflow: hidden; }
.voucher-art { position: relative; width: 100%; }
.voucher-art > img { width: 100%; height: auto; }
.voucher-type { position: absolute; top: 22%; left: 25%; width: 50%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.voucher-type > span { font-size: clamp(8px,1vw,10px); font-weight: 600; letter-spacing: .04em; }
.voucher-type strong { font-family: var(--display); font-weight: 700; font-size: clamp(80px,10vw,116px); line-height: .98; letter-spacing: -.02em; }
.voucher-type strong span { font-size: .68em; vertical-align: top; line-height: 1.25; }
.voucher-type b { font-size: 12px; letter-spacing: .09em; }
.offer-art > p { margin: -6px 35px 30px; text-align: center; font-size: 18px; line-height: 1.35; font-weight: 600; }
.offer-copy { padding: 64px 42px 36px; }
.offer-copy .eyebrow { color: #c5b3ef; font-size: 10px; margin-bottom: 16px; }
.offer-copy h2 { font-size: clamp(48px,5.2vw,68px); margin-bottom: 20px; }
.offer-copy h2 > span { color: var(--orange); }
#offer-title:focus { outline: none; }
.offer-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.6; color: #d4dfe0; }
.offer-close { position: absolute; top: 16px; right: 17px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: #d6c8f1; z-index: 2; }
.offer-close .icon { width: 21px; height: 21px; }
#offer-form label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
#offer-email { display: block; width: 100%; min-height: 50px; border: 1px solid #74838b; border-radius: 10px; padding: 12px 14px; background: #203a45; color: #fff; font-size: 14px; }
#offer-email::placeholder { color: #a9babd; }
#offer-email[aria-invalid="true"] { border-color: #ffb283; }
.offer-email-error { color: #ffb283; font-size: 12px; margin: 6px 0 12px; min-height: 0; }
.offer-email-error:empty { display: none; }
#offer-form > .button { width: 100%; margin-top: 13px; justify-content: space-between; }
#offer-form .button .icon { width: 23px; height: 23px; }
.offer-preview-note { font-size: 11px; color: #b7c6c9; margin: 12px 0 0; }
.offer-copy > .offer-privacy { font-size: 11px !important; margin: 22px 0 0; color: #aebdc0 !important; }
.offer-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.offer-result h3 { font-size: 32px; }
.offer-result p { font-size: 14px; color: #c8d6d8; }
.offer-result-icon .icon { width: 36px; height: 36px; color: var(--orange); margin-bottom: 14px; }
@media(max-width:760px) {
  .hero-v2 { padding-bottom: 45px; }
  .offer-dialog { width: min(480px,calc(100% - 24px)); max-height: calc(100dvh - 24px); border-radius: 20px 34px 20px 20px; }
  .offer-layout { grid-template-columns: 1fr; }
  .offer-art { align-items: center; padding: 5px 0; }
  .voucher-art { width: 235px; }
  .voucher-type > span { font-size: 5.7px; }
  .voucher-type strong { font-size: 63px; }
  .voucher-type b { font-size: 7px; }
  .offer-art > p { display: none; }
  .offer-copy { padding: 27px 25px 25px; }
  .offer-copy h2 { font-size: 46px; }
  .offer-copy > p:not(.eyebrow) { font-size: 14px; }
  .offer-copy .eyebrow { margin-bottom: 10px; }
  .offer-close { background: #10242e; color: white; }
  .phase-icon { flex-basis: 32px; height: 32px; }
}
@media(max-width:360px) { .offer-copy { padding: 23px 20px; } .offer-copy h2 { font-size: 40px; } .voucher-art { width: 190px; } .voucher-type strong { font-size: 49px; } .voucher-type > span { font-size: 4.5px; } .voucher-type b { font-size: 6px; } }

/* Preserve the existing section background, spacing and typography. */
.project-start { position: relative; isolation: isolate; }
.project-start > .wrap { position: relative; z-index: 1; }
.project-pointer-layer { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.project-pointer-layer[hidden] { display: none; }
.project-pointer { position: absolute; top: 0; left: 0; width: 80px; height: 88px; transform-origin: 0 0; will-change: transform; }
@media(max-width:1023px),(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) {
  .project-pointer-layer { display: none; }
}

/* Connected process, founder story and owner-requested card behaviour. */
.package-grid { align-items: start; }
.service-grid { position: relative; }
.service-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at var(--glare-x,50%) var(--glare-y,35%), #fff9 0, #fff2 32%, transparent 65%), linear-gradient(115deg, transparent 30%, #ffffff3b 48%, transparent 67%);
  opacity: 0; transition: opacity .35s; z-index: 2;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .service-card.is-tiltable, .service-card.is-tiltable:hover {
    transform: perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--tilt-lift,0px));
    transform-style: preserve-3d; transition: transform .48s cubic-bezier(.2,.75,.25,1), box-shadow .4s;
  }
  .service-card.is-tilting { transition: transform .12s ease-out, box-shadow .25s; box-shadow: 0 24px 35px #10242e22, inset 0 1px 0 #fff8; }
  .service-card.is-tilting::after { opacity: .42; }
  .service-card.is-tiltable h3, .service-card.is-tiltable p, .service-card.is-tiltable .round-link { transform: translateZ(15px); }
  .service-card.is-tiltable .service-icon { transform: translateZ(24px) rotate(-5deg); }
}
/* Make space for About us while keeping the existing compact desktop menu. */
@media (min-width:1021px) and (max-width:1250px) {
  .header-inner { gap: 12px; }
  #main-nav { gap: 2px; }
  .nav-trigger, #main-nav > a:not(.nav-cta) { padding-inline: 8px; font-size: 12px; }
  #main-nav > .nav-cta { margin-left: 5px; gap: 10px; padding-left: 12px !important; }
  .brand { font-size: 23px; }
}
.story-hero { position: relative; isolation: isolate; overflow: clip; }
.story-hero h1 { font-size: clamp(67px,7.2vw,110px); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.story-hero .lead { font-size: clamp(18px,1.5vw,21px); }
.story-hero p:not(.eyebrow) { max-width: 510px; }
.story-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding-block: 70px 34px; }
.story-hero-copy { position: relative; z-index: 2; padding-block: 10px 30px; }
.story-hero-copy > p:not(.eyebrow):not(.lead) { font-size: 16px; color: #40565d; }
.story-hero-copy .button { margin-top: 8px; }
.approach-hero { background: radial-gradient(ellipse at 90% 36%,#d2eee0 0,transparent 55%), radial-gradient(ellipse at 5% 15%,#e5dcfa 0,transparent 60%), #f5f7f4; }
.approach-hero-art { position: relative; align-self: stretch; display: grid; align-items: end; min-width: 0; }
.approach-hero-art img { width: 117%; max-width: 117%; position: relative; left: -8%; z-index: 1; }
.art-orbit { position: absolute; border: 1px solid #6e6a9133; width: 84%; aspect-ratio: 1; border-radius: 50%; left: 4%; top: 6%; pointer-events: none; }
.orbit-two { width: 100%; top: -1%; left: -4%; border-color: #6e6a911a; }
.art-annotation { position: absolute; top: 0; right: 0; font-size: 12px; line-height: 1.5; font-weight: 600; transform: rotate(5deg); padding: 15px 22px; background: #dacbf2; border-radius: 20px 20px 4px 20px; z-index: 2; box-shadow: 0 8px 20px #2337440c; }
.approach-intro-strip { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid #10242e20; padding-block: 23px 27px; font-size: 13px; }
.approach-intro-strip span { display: flex; align-items: center; gap: 12px; }
.approach-intro-strip span::before { content: ''; width: 8px; height: 8px; background: #9c82d0; border-radius: 3px; transform: rotate(20deg); }
.approach-intro-strip span:nth-child(2)::before { background: #db8250; }
.approach-intro-strip span:nth-child(3)::before { background: #3e8a70; }
.process-story { padding-block: 105px; background: radial-gradient(ellipse at 95% 25%,#26434a 0,transparent 60%), linear-gradient(150deg,#10242e,#172f37); color: #f5f7f4; position: relative; border-radius: 0 56px 0 0; }
.process-heading { max-width: 790px; margin-bottom: 65px; }
.process-heading > p:last-child { color: #c5d3d5; max-width: 650px; }
.process-heading .eyebrow { color: #c9b9ed; }
.process-heading h2 { font-size: clamp(48px,5.6vw,82px); }
.process-layout { display: grid; grid-template-columns: minmax(210px,.7fr) minmax(0,2fr); gap: 65px; align-items: start; }
.process-rail { position: sticky; top: 32px; padding-top: 22px; }
.process-rail > .eyebrow { font-size: 10px; color: #a7bfc4; margin-bottom: 18px; }
.process-rail nav { display: flex; flex-direction: column; gap: 9px; }
.process-rail a { display: flex; align-items: center; gap: 16px; font-size: 15px; padding: 15px 17px; border-radius: 13px; color: #c5d3d5; background: #ffffff05; transition: background .25s,color .25s; }
.process-rail a > span { font-family: var(--display); font-size: 23px; line-height: 1; color: #a5bebd; }
.process-rail a > .icon { width: 18px; height: 18px; margin-left: auto; opacity: .3; }
.process-rail a:hover { background: #ffffff0e; color: #fff; }
.process-rail a[aria-current='step'] { background: #c7b6ef; color: #10242e; box-shadow: inset 0 1px 0 #ffffff80; }
.process-rail a[aria-current='step'] > span { color: #594577; }
.process-rail a[aria-current='step'] > .icon { opacity: 1; }
.process-rail-note { font-size: 12px; color: #a9bec3; padding: 26px 17px 0; }
.process-chapters { position: relative; isolation: isolate; }
.process-chapters::before, .process-chapters::after { content: ''; position: absolute; z-index: -1; top: 20px; bottom: 20px; width: 2px; left: 31px; background: #71898455; pointer-events: none; }
.process-chapters::after { background: linear-gradient(#bba6f4,#ffac78 45%,#91d5bd); transform: scaleY(var(--journey-progress,0)); transform-origin: top; }
.process-chapter { background: #f3f5ee; color: var(--ink); border-radius: 20px 58px 20px 20px; padding: 34px; margin-bottom: 48px; scroll-margin-top: 32px; box-shadow: 0 18px 44px #031a2020; }
.process-chapter:last-child { margin-bottom: 0; }
.chapter-explore { background: #e5dcf4; }
.chapter-develop { background: #e0ece3; }
.chapter-deliver { background: #f4e7dc; }
.chapter-topline { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.chapter-number { display: grid; place-items: center; width: 42px; height: 42px; background: #10242e; color: #eef4ef; border-radius: 12px; font-family: var(--display); font-size: 26px; line-height: 1; }
.chapter-topline > .eyebrow { margin: 0; font-size: 10px; }
.chapter-dash { height: 1px; flex: 1; background: #10242e23; margin-left: 10px; }
.chapter-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 27px; align-items: start; }
.chapter-copy h3 { font-size: clamp(34px,3vw,44px); margin-bottom: 20px; text-wrap: balance; }
.chapter-copy p { font-size: 14px; line-height: 1.7; color: #3e555b; }
.chapter-copy p:last-child { margin-bottom: 0; }
.chapter-art { min-width: 0; align-self: center; }
.artifact-kicker { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.brief-preview { padding: 23px 20px; background: #fffef9; border-radius: 7px 28px 7px 7px; box-shadow: 0 9px 18px #10242e0c; transform: rotate(3deg); }
.brief-preview h3 { font-size: 29px; margin: 19px 0; }
.brief-preview dl { margin: 0; }
.brief-preview dl > div { padding: 11px 0; border-top: 1px solid #10242e19; }
.brief-preview dt { font-size: 10px; color: #617077; }
.brief-preview dd { margin: 4px 0 0; font-size: 12px; font-weight: 600; }
.artifact-foot { display: block; font-size: 9px; margin-top: 19px; color: #65766e; }
.direction-preview { padding: 24px 22px; background: #10242e; color: #f4f5ef; border-radius: 10px 32px 10px 10px; transform: rotate(-3deg); box-shadow: 0 10px 18px #10242e18; }
.direction-preview .artifact-kicker { color: #cfc2e8; }
.direction-type { font-family: var(--display); font-size: clamp(32px,3.1vw,44px); text-transform: uppercase; line-height: 1; margin-block: 27px; }
.direction-type em { color: #c4acef; font-style: normal; }
.direction-swatches { display: flex; gap: 5px; }
.direction-swatches i { height: 42px; width: 25%; background: #ff9559; border-radius: 3px; }
.direction-swatches i:nth-child(2) { background: #baa6f4; }
.direction-swatches i:nth-child(3) { background: #91d5bd; }
.direction-swatches i:nth-child(4) { background: #f4f5ef; }
.direction-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.direction-labels span { font-size: 8px; color: #d2dedb; padding: 5px 7px; border-radius: 5px; background: #ffffff0a; }
.develop-preview { padding: 23px 17px; border-radius: 20px; background: #f8faf4; }
.journey-mini { margin-top: 23px; }
.journey-mini > div { display: grid; grid-template-columns: 33px 1fr; align-items: center; gap: 2px 10px; }
.journey-mini .icon { grid-row: span 2; width: 32px; height: 32px; color: #4b7167; }
.journey-mini strong { font-size: 12px; line-height: 1.5; }
.journey-mini span { font-size: 10px; color: #586c66; }
.journey-mini > i { display: block; width: 1px; height: 23px; background: #98b5a5; margin: 6px 16px; }
.handover-preview { position: relative; padding: 23px; background: #fffaf1; border-radius: 9px 35px 9px 9px; transform: rotate(2deg); box-shadow: 0 9px 18px #66504412; }
.handover-symbol { margin-block: 16px; display: grid; place-items: center; width: 49px; height: 49px; background: #f5c19e; border-radius: 14px; }
.handover-symbol .icon { width: 30px; height: 30px; }
.handover-preview h3 { font-size: 35px; margin-bottom: 18px; }
.handover-preview ul { list-style: none; margin: 0; padding: 0; }
.handover-preview li { font-size: 11px; margin-top: 7px; display: flex; align-items: center; gap: 8px; }
.handover-preview li::before { content: ''; width: 5px; height: 5px; background: #bc875e; border-radius: 50%; }
.chapter-output { display: flex; gap: 16px; margin-top: 30px; padding: 22px 0; border-top: 1px solid #10242e22; }
.output-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; background: #10242e0b; border-radius: 10px; }
.chapter-output .eyebrow { display: block; font-size: 9px; margin-bottom: 6px; color: #56696d; }
.chapter-output h4 { font-family: var(--body); font-size: 15px; text-transform: none; letter-spacing: 0; line-height: 1.4; margin-bottom: 4px; }
.chapter-output p { font-size: 13px; color: #3e555b; margin: 0; }
.your-part { border: 0; padding: 0; margin: 0; background: #ffffff70; border-radius: 11px; }
.your-part summary { padding: 13px 16px; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.your-part summary::-webkit-details-marker { display: none; }
.your-part summary .icon { width: 17px; height: 17px; transition: transform .2s; }
.your-part[open] summary .icon { transform: rotate(180deg); }
.your-part > div { padding: 5px 16px 16px; font-size: 13px; }
.your-part p { margin: 6px 0 0; color: #3e555b; }
.scope-story { background: radial-gradient(ellipse at 10% 60%,#ddd3f152,transparent 50%); }
.scope-story .section-heading > p { max-width: 390px; }
.scope-workbench { padding: 12px; border-radius: 24px 48px 24px 24px; background: #e1d7f2; box-shadow: 0 18px 40px #302d4610; }
.scope-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding-bottom: 12px; }
.scope-tabs button { display: flex; gap: 13px; align-items: center; justify-content: center; padding: 19px 12px; border-radius: 13px 23px 13px 13px; background: #ffffff25; color: #4c3f62; font-weight: 600; font-size: 14px; transition: background .2s,box-shadow .2s; }
.scope-tabs button:hover { background: #ffffff60; }
.scope-tabs button[aria-selected='true'] { background: #10242e; color: #f4f7f1; box-shadow: 0 3px 0 #5e557b; }
.scope-tabs .icon { width: 25px; height: 25px; }
.scope-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; padding: clamp(30px,4vw,62px); background: #f9fbf5; border-radius: 16px 36px 16px 16px; }
.scope-panel + .scope-panel { margin-top: 14px; }
.scope-workbench.tabs-ready .scope-panel { margin-top: 0; }
.scope-panel h3 { font-size: clamp(43px,4.6vw,64px); }
.scope-panel p { max-width: 420px; font-size: 16px; margin: 22px 0 0; }
.scope-panel .eyebrow { font-size: 10px; color: #6b5886; }
.scope-output { align-self: center; }
.scope-output > .eyebrow { display: block; }
.scope-output ul { margin: 16px 0 26px; padding: 0; list-style: none; }
.scope-output li { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid #10242e17; font-size: 14px; }
.scope-output li::before { content: ''; width: 7px; height: 7px; flex: none; background: #ac98ce; border-radius: 2px; transform: rotate(20deg); }
.scope-caption { font-size: 12px; color: #5e6d72; margin: 20px 0 0; }
.working-together { padding-block: 85px 100px; background: radial-gradient(ellipse at 95% 80%,#cfe8db80,transparent 65%), #ecf1ec; }
.working-together .split { align-items: start; }
.working-together .split > div:first-child > p:last-child { max-width: 420px; font-size: 16px; }
.story-faqs details { padding: 0; border: 0; margin: 0 0 12px; background: #ffffffa3; border-radius: 14px; }
.story-faqs summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; }
.story-faqs summary::-webkit-details-marker { display: none; }
.story-faqs summary .icon { width: 21px; height: 21px; }
.story-faqs details[open] summary .icon { transform: rotate(180deg); }
.story-faqs details > p { margin: 0; padding: 0 23px 23px; font-size: 14px; color: #4d6368; }
/* About: a real founder, selected experience and a transparent studio model. */
.about-hero { background: radial-gradient(ellipse at 93% 24%,#51456795,transparent 52%), radial-gradient(ellipse at 5% 100%,#30655755,transparent 52%), #10242e; color: #f4f7f1; border-radius: 0 0 55px 0; }
.about-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 70px; padding-block: 74px 64px; }
.about-hero h1 { font-size: clamp(63px,6.8vw,102px); }
.about-hero .eyebrow { color: #d5dedd; }
.about-hero-copy > p:not(.eyebrow) { color: #cbd8da; }
.about-hero-copy > p:not(.eyebrow):not(.lead) { font-size: 16px; }
.founder-portrait { position: relative; margin: 0; padding: 0 0 12px; isolation: isolate; }
.portrait-backplate { position: absolute; z-index: -1; inset: -14px 15px 0 -15px; background: #bba6f4; border-radius: 25px 95px 25px 25px; transform: rotate(-4deg); }
.founder-portrait > img { width: 100%; border-radius: 18px 82px 18px 18px; aspect-ratio: 1; object-fit: cover; box-shadow: 0 20px 60px #00101935; }
.founder-portrait figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; padding: 18px 21px; background: #f5f8ed; color: var(--ink); margin: -20px 18px 0; border-radius: 13px 23px 13px 13px; box-shadow: 0 10px 30px #071d2225; }
.founder-portrait figcaption strong { display: block; font-size: 16px; }
.founder-portrait figcaption span:not(.portrait-caption-icon) { display: block; font-size: 11px; margin-top: 3px; }
.portrait-caption-icon { display: grid; place-items: center; width: 37px; height: 37px; flex: none; background: #decff2; border-radius: 10px; }
.portrait-caption-icon .icon { width: 25px; height: 25px; }
.about-disciplines { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; padding-block: 25px 28px; border-top: 1px solid #ffffff1c; font-size: 12px; color: #c7d5d6; }
.about-disciplines i { width: 6px; height: 6px; background: #ffa568; border-radius: 2px; transform: rotate(20deg); }
.founder-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.founder-intro h2 { font-size: clamp(44px,5vw,70px); }
.founder-intro > div:last-child > p:not(.lead) { color: #40575f; font-size: 16px; }
.sheetsway-story { padding-block: 88px; background: radial-gradient(ellipse at 3% 0%,#f9d9bf70,transparent 50%), linear-gradient(120deg,#ded4f0,#e9e3f5 70%,#d8e4e6); border-radius: 48px 0 48px 0; overflow: clip; }
.sheetsway-heading { display: flex; justify-content: space-between; gap: 60px; align-items: center; padding-bottom: 38px; margin-bottom: 40px; border-bottom: 1px solid #6652812b; }
.sheetsway-heading h2 { font-size: clamp(45px,5vw,70px); }
.sheetsway-heading .eyebrow { font-size: 10px; color: #5d4c75; }
.sheetsway-wordmark { flex: none; font-size: clamp(28px,3vw,43px); font-weight: 600; letter-spacing: -.05em; line-height: 1.2; color: #3b3757; }
.sheetsway-wordmark > span { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.7; margin-top: 12px; }
.sheetsway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.sheetsway-narrative > p:not(.lead) { font-size: 16px; color: #4a4660; }
.sheetsway-narrative .text-link { background: #fff9; margin-top: 10px; }
.sheetsway-notes { display: flex; flex-direction: column; padding-inline: 15px 5px; }
.sheetsway-notes article { position: relative; background: #f6f8f1; padding: 24px 78px 23px 28px; border-radius: 14px 33px 14px 14px; box-shadow: 0 9px 28px #45395317; transform: rotate(-3deg); }
.sheetsway-notes article:nth-child(2) { background: #ffd2b0; margin: 8px -8px; transform: rotate(3deg); z-index: 1; }
.sheetsway-notes article:nth-child(3) { background: #c3e6d5; transform: rotate(-1deg); }
.sheetsway-notes article > span { display: block; font-size: 10px; margin-bottom: 9px; }
.sheetsway-notes h3 { font-size: 31px; }
.sheetsway-notes p { margin: 10px 0 0; font-size: 13px; max-width: 280px; }
.sheetsway-notes .icon { position: absolute; right: 24px; top: 28px; width: 36px; height: 36px; color: #435954; }
.experience-row { display: grid; grid-template-columns: 65px 1.5fr 1fr; align-items: center; gap: 35px; padding: 32px 0; border-top: 1px solid #10242e24; }
.experience-row:last-child { border-bottom: 1px solid #10242e24; }
.experience-icon { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 18px 24px 18px 18px; background: #dacbef; }
.experience-row:nth-child(2) .experience-icon { background: #f8d1b5; }
.experience-row:nth-child(3) .experience-icon { background: #c5e4d6; }
.experience-row:nth-child(4) .experience-icon { background: #d9e1e8; }
.experience-icon .icon { width: 38px; height: 38px; }
.experience-row h3 { font-size: 34px; }
.experience-row p { font-size: 14px; margin: 11px 0 0; color: #475e65; }
.experience-row .experience-takeaway { padding-left: 35px; border-left: 1px solid #10242e1a; max-width: 300px; margin: 0; font-size: 17px; color: var(--ink); }
.studio-model { padding-block: 90px; background: radial-gradient(ellipse at 90% 0,#33584d60,transparent 60%), linear-gradient(125deg,#10242e,#233744); color: #eff5ef; border-radius: 0 48px 0 0; }
.studio-model-intro { max-width: 720px; }
.studio-model-intro > .eyebrow { color: #c8b5ea; }
.studio-model-intro .lead { color: #bfd0d1; max-width: 640px; }
.studio-model-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; margin-top: 43px; }
.studio-model-grid > article { padding: 29px; border-radius: 17px 39px 17px 17px; background: #ffffff07; border: 1px solid #ffffff12; }
.studio-model-grid h3 { font-size: 33px; margin-top: 24px; }
.studio-model-grid p { font-size: 14px; color: #c4d5d4; margin-bottom: 0; }
.studio-model-icon { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 15px; color: #10242e; background: #c6b1ef; }
.studio-model-grid article:nth-child(2) .studio-model-icon { background: #f8b789; }
.studio-model-grid article:nth-child(3) .studio-model-icon { background: #a8d6c3; }
.studio-model-icon .icon { width: 30px; height: 30px; }
.tools-note { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-top: 29px; margin-top: 39px; border-top: 1px solid #ffffff21; }
.tools-note strong { font-size: 14px; color: #dbcff1; }
.tools-note p { font-size: 13px; color: #b8cccd; margin: 0; max-width: 740px; }
.about-beliefs { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; }
.belief-list > article { margin-bottom: 30px; }
.belief-list h3 { font-size: 32px; }
.belief-list p { color: #4b6267; font-size: 15px; }
.work-founder-bridge { margin-top: 65px; padding: 34px; border-radius: 18px 42px 18px 18px; background: linear-gradient(110deg,#e2d6f2,#dceade); display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.work-founder-bridge h2 { font-size: 39px; }
.work-founder-bridge p { font-size: 15px; max-width: 620px; margin-bottom: 0; }
.work-founder-bridge .text-link { flex: none; background: #f8faf2; }
@media (max-width:1100px) {
  .story-hero h1 { font-size: clamp(60px,7.8vw,85px); }
  .story-hero-grid { gap: 8px; }
  .approach-hero-art img { width: 121%; max-width: 121%; left: -9%; }
  .process-layout { grid-template-columns: 185px minmax(0,1fr); gap: 30px; }
  .process-chapter { padding: 27px; }
  .chapter-grid { grid-template-columns: 1fr; gap: 23px; }
  .chapter-art { width: min(100%,340px); margin-inline: auto; }
  .brief-preview { transform: rotate(2deg); }
  .scope-panel { gap: 40px; }
  .about-hero-grid, .founder-intro, .sheetsway-grid { gap: 45px; }
  .about-hero h1 { font-size: 7.7vw; }
  .founder-portrait figcaption { margin-inline: 8px; padding: 16px; }
  .founder-portrait figcaption span:not(.portrait-caption-icon) { font-size: 10px; }
  .experience-row { grid-template-columns: 55px 1.5fr 1fr; gap: 24px; }
  .experience-icon { width: 55px; height: 55px; }
  .experience-row .experience-takeaway { padding-left: 24px; font-size: 15px; }
  .studio-model-grid { gap: 18px; }
  .studio-model-grid > article { padding: 23px; }
  .about-beliefs { gap: 50px; }
}
@media (max-width:760px) {
  .story-hero-grid { grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 0; gap: 5px; }
  .story-hero h1 { font-size: clamp(55px,12.4vw,85px); }
  .story-hero-copy { padding-bottom: 20px; }
  .story-hero .eyebrow { font-size: 10px; }
  .story-hero p:not(.eyebrow) { max-width: 540px; }
  .approach-hero-art { width: min(100%,480px); margin-inline: auto; }
  .approach-hero-art img { width: 100%; max-width: 100%; left: 0; }
  .art-annotation { right: 0; top: 5px; font-size: 10px; padding: 11px 16px; }
  .approach-intro-strip { gap: 10px; font-size: 10px; padding-block: 20px; align-items: flex-start; }
  .approach-intro-strip span { display: block; flex: 1; }
  .approach-intro-strip span::before { display: block; margin-bottom: 9px; }
  .process-story { padding-block: 65px; border-radius: 0 34px 0 0; }
  .process-heading { margin-bottom: 30px; }
  .process-heading h2 { font-size: 48px; }
  .process-heading > p:last-child { font-size: 15px; }
  .process-layout { display: block; }
  .process-rail { position: static; padding: 0; margin-bottom: 30px; }
  .process-rail nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .process-rail > .eyebrow, .process-rail-note { display: none; }
  .process-rail a { gap: 10px; font-size: 12px; padding: 12px; }
  .process-rail a > span { font-size: 20px; }
  .process-rail a > .icon { width: 14px; height: 14px; }
  .process-chapter { padding: 25px 22px; margin-bottom: 30px; border-radius: 17px 39px 17px 17px; }
  .chapter-grid { gap: 32px; }
  .chapter-copy h3 { font-size: 39px; }
  .chapter-copy p { font-size: 14px; }
  .chapter-art { width: min(94%,330px); }
  .direction-type { font-size: 43px; }
  .chapter-topline { margin-bottom: 23px; }
  .chapter-output { margin-top: 30px; gap: 12px; }
  .scope-workbench { padding: 8px; border-radius: 17px 30px 17px 17px; }
  .scope-tabs { gap: 6px; padding-bottom: 8px; }
  .scope-tabs button { flex-direction: column; gap: 7px; font-size: 11px; padding: 14px 6px; border-radius: 11px 18px 11px 11px; }
  .scope-tabs .icon { width: 24px; height: 24px; }
  .scope-panel { grid-template-columns: 1fr; gap: 27px; padding: 28px 22px; border-radius: 12px 25px 12px 12px; }
  .scope-panel h3 { font-size: 45px; }
  .scope-panel p { font-size: 14px; }
  .scope-output .text-link { font-size: 12px; }
  .scope-caption { font-size: 11px; }
  .working-together { padding-block: 60px; }
  .story-faqs summary { font-size: 14px; padding: 20px; }
  .story-faqs details > p { padding: 0 20px 20px; }
  .about-hero { border-radius: 0 0 36px 0; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 43px; padding-block: 42px 33px; }
  .about-hero-copy .text-link { margin-top: 4px; }
  .founder-portrait { width: min(92%,480px); margin-inline: auto; }
  .founder-portrait > img { border-radius: 16px 62px 16px 16px; }
  .founder-portrait figcaption span:not(.portrait-caption-icon) { font-size: 11px; }
  .about-disciplines { gap: 12px; font-size: 10px; padding-block: 20px; }
  .about-disciplines i { width: 4px; height: 4px; }
  .founder-intro, .sheetsway-grid, .about-beliefs { grid-template-columns: 1fr; gap: 28px; }
  .founder-intro h2 { font-size: 48px; }
  .sheetsway-story { padding-block: 60px; border-radius: 30px 0 30px 0; }
  .sheetsway-heading { display: block; padding-bottom: 28px; margin-bottom: 28px; }
  .sheetsway-heading h2 { font-size: 48px; }
  .sheetsway-wordmark { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 25px; font-size: 28px; }
  .sheetsway-wordmark > span { font-size: 10px; margin: 0; }
  .sheetsway-narrative > p:not(.lead) { font-size: 15px; }
  .sheetsway-narrative .text-link { font-size: 12px; }
  .sheetsway-notes { padding: 8px 10px 0; }
  .sheetsway-notes article { padding: 23px 65px 23px 23px; }
  .sheetsway-notes h3 { font-size: 29px; }
  .sheetsway-notes .icon { width: 29px; height: 29px; right: 20px; }
  .experience-row { grid-template-columns: 48px 1fr; gap: 12px 19px; align-items: start; padding-block: 26px; }
  .experience-icon { width: 48px; height: 48px; border-radius: 13px 19px 13px 13px; }
  .experience-icon .icon { width: 29px; height: 29px; }
  .experience-row h3 { font-size: 30px; }
  .experience-row p { font-size: 13px; }
  .experience-row .experience-takeaway { grid-column: 2; max-width: none; padding-left: 0; border: 0; font-size: 13px; color: #6a528e; }
  .studio-model { padding-block: 65px; border-radius: 0 32px 0 0; }
  .studio-model-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 30px; }
  .studio-model-grid > article { padding: 26px; }
  .studio-model-grid h3 { font-size: 34px; margin-top: 22px; }
  .tools-note { grid-template-columns: 1fr; gap: 10px; }
  .work-founder-bridge { flex-direction: column; align-items: start; padding: 28px; gap: 22px; }
  .work-founder-bridge h2 { font-size: 35px; }
  .work-founder-bridge p { font-size: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .service-card:hover { transform: none; }
  .process-chapters::after { transform: none; opacity: .45; }
}

/* Owner direction: vivid orange, silver surfaces and connected motion. */
:root { --orange: #ff641f; --accent: #ff641f; --accent-dark: #b84012; --silver: #edf0f1; --paper: #f6f7f5; }
body { background: radial-gradient(ellipse at 0 15%,#fff0e4 0,transparent 32%),radial-gradient(ellipse at 100% 50%,#e3e8eb 0,transparent 37%),#f6f7f5; }
::selection { background: #ffbe95; color: #10242e; }
.lavender-text, .mint-text { color: #ff823d; }
.blue-text { color: #b84012; }
.hero-shell { background: radial-gradient(ellipse at 88% 38%,#52606a5c,transparent 54%),radial-gradient(ellipse at 3% 100%,#ac4c1b2b,transparent 57%),linear-gradient(120deg,#10242e,#22303a); }
.hero-orbit { border-color: #ff8c4942; box-shadow: 0 0 90px #ff641f08,inset 0 0 70px #ffffff06; }
.hero-orbit::after { border-color: #e4e8ee26; }
.note-top { background: linear-gradient(125deg,#fff7ee,#e7e9eb); }
.note-bottom { background: linear-gradient(125deg,#fff,#e0e5e5); }
.hero-changing { min-height: .94em; }
[data-hero-word] { display: inline-block; transition: opacity .21s ease,transform .3s cubic-bezier(.3,0,.2,1); }
[data-hero-word].word-leaving { opacity: 0; transform: translateY(-.12em); }
.button.orange, #main-nav > .nav-cta { background: linear-gradient(125deg,#ff9a4c,#ff641f 65%,#ff5214); box-shadow: 0 3px 0 #b54113,inset 0 1px 0 #ffc68f; }
.button.orange:hover, #main-nav > .nav-cta:hover { background: linear-gradient(125deg,#ffad6c,#ff762e); }
.text-link, .text-button { background: #e6e9eb; }
.text-link:hover, .text-button:hover { background: #ffdcc2; }
.text-link.pale { color: #f5f7f5; background: #ffffff12; }
.text-link.pale:hover { background: #ff7b3c2e; }
.nav-panel { background: linear-gradient(145deg,#fff 20%,#f1f2f2 65%,#f5e7dd); }
.nav-dropdown[open] > .nav-trigger, .nav-trigger:hover, #main-nav > .nav-direct:hover { color: #ffab72; }
.nav-section-active > .nav-trigger, #main-nav > .nav-direct[aria-current] { background: #ff7b301a; color: #ffa96d; }
.nav-panel-heading .eyebrow { color: #a44520; }
.nav-service-0 { background: linear-gradient(120deg,#ffb076,#ffd5b4); }
.nav-service-1 { background: linear-gradient(120deg,#ececec,#fcfcfa); }
.nav-service-2 { background: linear-gradient(120deg,#d5dfe3,#eff2f3); }
.nav-service-3 { background: linear-gradient(120deg,#172c35,#3d4951); }
.nav-service-3 .nav-service-icon { color: #ffaa72; }
.nav-package-mark { color: #a24620; }
a.panel-index:hover, .nav-package:hover .panel-index { background: #ffc79f; }
.nav-second-story { background: #eef0ef; }
.nav-insight-photo { padding: 0; }
.nav-insight-photo img { width: 100%; height: 100%; object-fit: cover; }
.nav-brief-photo { display: block; height: 108px; margin-bottom: 14px; overflow: hidden; border-radius: 10px 24px 10px 10px; }
.nav-brief-photo img { width: 100%; height: 100%; object-fit: cover; }
.service-card:nth-child(1) { background: radial-gradient(ellipse at top right,#ffbd80,transparent 72%),#ff7635; }
.service-card:nth-child(2) { background: linear-gradient(135deg,#fff,#e4e7e9 65%,#f5f7f6); }
.service-card:nth-child(3) { background: linear-gradient(135deg,#d7e0e3,#edf1f2 65%,#bac7cd); }
.service-card:nth-child(4) { background: radial-gradient(ellipse at top right,#46535d,transparent 75%),#10242e; }
.service-card:nth-child(4) .service-icon { color: #ff9b5c; }
.soft-section { background: radial-gradient(ellipse at 93% 10%,#ffdac159,transparent 60%),linear-gradient(120deg,#e8ecee,#f3f4f1 55%,#dde4e7); }
.closing { background: radial-gradient(ellipse at 5% 100%,#fff1dc85,transparent 65%),linear-gradient(110deg,#ffae72,#ffc798 60%,#edb799); }
.closing::after { border-color: #a440152b; }
.page-intro::before { background: radial-gradient(ellipse,#ffc49c36,transparent 68%); }
.process-icon, .process-grid article:nth-child(2) .process-icon, .process-grid article:nth-child(3) .process-icon { background: #ebded2; color: #a74217; }
.feature-statement.blue { background: linear-gradient(130deg,#e5ebed,#fff 55%,#d1dbe0); }
.feature-statement.coral { background: linear-gradient(130deg,#ff934e,#ffbd85); }
.feature-statement.green { background: linear-gradient(130deg,#d4dde1,#f4f5f3); }
.interest-options span { background: #edf0f0; }
.interest-options input:checked + span { background: #ffc89e; box-shadow: inset 0 -3px 0 #d47642; }
.package-card:nth-child(2) { background: linear-gradient(135deg,#f1f2f2,#e0e6e9); }
.phase-icon, .package-card:nth-child(2) .phase-icon, .package-card:nth-child(3) .phase-icon { background: #f4d5bc; color: #984018; }
.footer-offer { background: #ffa665; }
.offer-copy .eyebrow { color: #ffae74; }
.offer-close { background: #ffd3b1; }
/* Keep the work's own brand colours; remove the enclosing deck surface. */
.portfolio-section { position: relative; }
.portfolio-deck { background: none; border-radius: 0; overflow: visible; contain: none; isolation: isolate; }
.portfolio-deck::before { display: none; }
.preview-card { box-shadow: 0 24px 38px #10242e22,0 4px 8px #10242e0c; }
.project-selector { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.project-selector .project-tab { width: auto; min-height: 40px; flex-direction: row; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 24px; background: #ffffff70; box-shadow: none; }
.project-selector .project-tab:hover { background: #fff; transform: translateY(-2px); }
.project-selector .tab-art { width: 25px; height: 25px; border-radius: 50%; }
.project-selector .tab-art .icon { width: 18px; height: 18px; }
.project-selector .tab-name { padding: 0; font-size: 10px; }
.project-selector button[aria-pressed='true'] { background: #ffdfc9; box-shadow: none; color: #84340d; }
.portfolio-detail > .eyebrow { color: #b34716; }
.portfolio-detail .concept-label { border-color: #c8cfd0; }
.portfolio-controls { gap: 8px; }
.portfolio-controls button { width: 34px; height: 34px; min-height: 34px; border-radius: 50%; box-shadow: none; background: #e5e9e9; color: #233740; }
.portfolio-controls button:hover { background: #ffbf95; transform: translateX(0); }
.portfolio-controls .icon { width: 17px; height: 17px; }
.portfolio-count { font-size: 11px; margin-inline: 4px; }
/* Editorial images have the same natural proportions everywhere. */
.article-image { display: block; margin-bottom: 27px; border-radius: 16px 38px 16px 16px; overflow: hidden; background: #e4e6e7; }
.article-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s cubic-bezier(.2,.65,.2,1); }
.article-image:hover img { transform: scale(1.025); }
.article-hero-image { margin-bottom: 38px; }
.article-hero-image img { width: 100%; max-height: 640px; object-fit: cover; border-radius: 18px 55px 18px 18px; }
/* The Approach illustration dissolves at its sleeve edges, keeping the subject crisp. */
.approach-hero { background: radial-gradient(ellipse at 94% 30%,#ffceaa50,transparent 55%),radial-gradient(ellipse at 3% 0,#e0e5e9,transparent 60%),#f6f7f5; }
.approach-hero-art img { -webkit-mask-image: linear-gradient(to bottom,#000 0 64%,#000e 74%,#0008 87%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0 64%,#000e 74%,#0008 87%,transparent 100%); }
.art-annotation { background: linear-gradient(130deg,#ffe3ca,#ffb882); }
.art-orbit { border-color: #98634b2a; }
.orbit-two { border-color: #776b6417; }
.approach-intro-strip span::before, .approach-intro-strip span:nth-child(2)::before, .approach-intro-strip span:nth-child(3)::before { background: #ed631e; }
.process-story { background: radial-gradient(ellipse at 90% 20%,#34424b,transparent 60%),linear-gradient(145deg,#10242e,#202d34); }
.process-heading .eyebrow { color: #ffa364; }
.process-rail a[aria-current='step'] { background: linear-gradient(120deg,#ff9450,#ff641f); color: #10242e; }
.process-rail a[aria-current='step'] > span { color: #713312; }
.process-chapters::after { background: linear-gradient(#ff641f,#ffa15a 65%,#f1f5f5); }
.process-chapter, .chapter-explore, .chapter-develop, .chapter-deliver { background: radial-gradient(ellipse at 100% 0,#fff 0,transparent 68%),linear-gradient(120deg,#f4f6f6,#e1e6e9 62%,#f7f8f6); border: 1px solid #ffffffb0; box-shadow: inset 0 1px 0 #fff,0 18px 44px #031a2020; }
.chapter-number { background: #10242e; color: #ff954d; }
.brief-preview, .develop-preview, .handover-preview { background: linear-gradient(145deg,#fff,#eff2f2); }
.direction-preview .artifact-kicker { color: #c7d0d5; }
.direction-type em { color: #ff8c45; }
.direction-swatches i:nth-child(1) { background: #ff641f; }
.direction-swatches i:nth-child(2) { background: #c7d0d5; }
.direction-swatches i:nth-child(3) { background: #687f89; }
.direction-swatches i:nth-child(4) { background: #fff; }
.journey-mini .icon { color: #bd4f1d; }
.journey-mini > i { background: #d6a78c; }
.handover-symbol { background: linear-gradient(135deg,#ff954d,#ff641f); color: #10242e; }
.scope-story { background: radial-gradient(ellipse at 10% 60%,#dfe5e880,transparent 50%); }
.scope-workbench { background: linear-gradient(125deg,#dce3e7,#f2f4f3); }
.scope-tabs button { color: #435560; }
.scope-tabs button[aria-selected='true'] { background: #ff7e34; color: #10242e; box-shadow: 0 3px 0 #c65b24; }
.scope-panel { background: #fcfdfb; }
.scope-panel .eyebrow { color: #a0441b; }
.scope-output li::before { background: #e76425; }
.working-together { background: radial-gradient(ellipse at 95% 80%,#ffcfaa4d,transparent 65%),#eef1f2; }
.about-hero { background: radial-gradient(ellipse at 93% 24%,#47535f95,transparent 52%),radial-gradient(ellipse at 5% 100%,#703f2755,transparent 52%),#10242e; }
.portrait-backplate { background: #f58b4c; }
.portrait-caption-icon { background: #ffdbbf; }
.sheetsway-story { background: radial-gradient(ellipse at 3% 0%,#f9caa570,transparent 50%),linear-gradient(120deg,#dde4e7,#f2f4f2 70%,#d0dade); }
.sheetsway-heading .eyebrow { color: #a2461b; }
.sheetsway-wordmark, .sheetsway-narrative > p:not(.lead) { color: #3f535b; }
.sheetsway-notes article:nth-child(2) { background: #ffc096; }
.sheetsway-notes article:nth-child(3) { background: #d7e1e5; }
.experience-icon, .experience-row:nth-child(2) .experience-icon, .experience-row:nth-child(3) .experience-icon, .experience-row:nth-child(4) .experience-icon { background: #e7e9e8; color: #ac4519; }
.studio-model { background: radial-gradient(ellipse at 90% 0,#81522f28,transparent 60%),linear-gradient(125deg,#10242e,#233744); }
.studio-model-intro > .eyebrow, .tools-note strong { color: #ffa96f; }
.studio-model-icon, .studio-model-grid article:nth-child(2) .studio-model-icon, .studio-model-grid article:nth-child(3) .studio-model-icon { background: #ffb579; }
.work-founder-bridge { background: linear-gradient(110deg,#e2e7e9,#eee9e2); }
/* Shared local demo. Interactive controls never connect to an external service. */
.portal-window { color: #10242e; background: #fafcfb; border: 1px solid #fff; border-radius: 16px 30px 16px 16px; box-shadow: 0 28px 65px #061b2438,0 3px 8px #061b2410; overflow: hidden; min-width: 0; text-align: left; }
.portal-chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 19px; border-bottom: 1px solid #dce3e4; background: linear-gradient(125deg,#e8eef0,#fff); }
.portal-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portal-brand-token { width: 32px; height: 32px; display: grid; place-items: center; flex: none; color: #10242e; background: #ff7b2e; border-radius: 9px; }
.portal-brand-token .icon { width: 22px; height: 22px; }
.portal-brand strong { font-size: 14px; letter-spacing: -.4px; }
.portal-brand strong > span { color: #6a7c85; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.portal-demo-label { font-size: 9px; padding: 5px 8px; background: #e1e8ea; color: #485f68; border-radius: 6px; flex: none; }
.portal-project { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 22px 24px 18px; }
.portal-overline { display: block; color: #7a8991; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.portal-project h3 { font-family: var(--body); font-size: 19px; line-height: 1.35; text-transform: none; letter-spacing: -.6px; margin: 0; }
.portal-project-code { color: #87969c; font-size: 9px; }
.portal-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; padding: 0 18px 15px; border-bottom: 1px solid #e3e8e9; }
.portal-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 7px; border-radius: 8px; background: #eff2f2; color: #5a707b; font-size: 10px; font-weight: 600; transition: background .2s; }
.portal-tabs button:hover { background: #ffdfc8; }
.portal-tabs button[aria-selected='true'] { color: #10242e; background: #ffa265; box-shadow: inset 0 1px 0 #ffc48f; }
.portal-tabs .icon { width: 17px; height: 17px; }
.portal-panel { padding: 22px 24px 20px; }
.portal-ready .portal-panels { min-height: 300px; }
.portal-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.portal-panel h4 { font-size: 26px; margin: 0; }
.portal-status { flex: none; border-radius: 5px; background: #e9edef; padding: 4px 7px; font-size: 8px; color: #516873; }
.portal-intro { font-size: 12px; color: #4f646e; max-width: 470px; margin-bottom: 17px; }
.portal-brief { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; margin: 0 0 17px; }
.portal-brief > div { border-left: 2px solid #f2a276; padding-left: 11px; }
.portal-brief dt { font-size: 9px; font-weight: 600; margin-bottom: 4px; }
.portal-brief dd { margin: 0; font-size: 10px; color: #5a6c73; }
.portal-priorities { border: 0; margin: 0; padding: 0; display: flex; gap: 7px; flex-wrap: wrap; }
.portal-priorities legend { padding: 0; font-size: 9px; font-weight: 600; margin-bottom: 8px; }
.portal-priorities button, .portal-direction-options button, .portal-feedback-options button { padding: 6px 11px; color: #4c626d; background: #e9edef; border-radius: 7px; font-size: 10px; }
.portal-priorities button[aria-pressed='true'], .portal-direction-options button[aria-pressed='true'], .portal-feedback-options button[aria-pressed='true'] { background: #10242e; color: #fff; }
.portal-focus-note { font-size: 10px; color: #a04419; margin: 10px 0 0; }
.portal-direction { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: center; }
.portal-creative-sample { position: relative; overflow: hidden; background: #10242e; color: #fff; padding: 17px; border-radius: 9px 23px 9px 9px; min-height: 154px; }
.portal-creative-sample > span { display: block; font-size: 7px; letter-spacing: .07em; color: #b9c5ca; margin-bottom: 15px; }
.portal-creative-sample > strong { font-family: var(--display); font-size: 33px; text-transform: uppercase; line-height: .95; display: block; position: relative; z-index: 1; }
.portal-creative-sample em { color: #ff9650; font-style: normal; }
.portal-creative-sample > i { position: absolute; width: 80px; height: 80px; border: 14px solid #ff702f; border-radius: 50%; right: -32px; bottom: -35px; }
[data-direction-art='calm'] .portal-creative-sample { background: linear-gradient(125deg,#e4ebee,#fff); color: #10242e; }
[data-direction-art='calm'] .portal-creative-sample > span { color: #6b7d86; }
[data-direction-art='calm'] .portal-creative-sample em { color: #aa461c; }
.portal-direction-notes > strong { font-size: 12px; }
.portal-direction-notes p { font-size: 10px; line-height: 1.7; color: #5c727d; margin: 7px 0 10px; }
.portal-direction-options { display: flex; gap: 6px; flex-wrap: wrap; }
.portal-direction-options button { font-size: 9px; padding: 6px 9px; }
.portal-action { display: inline-flex; align-items: center; gap: 15px; color: #10242e; background: #ffad76; font-size: 10px; font-weight: 600; padding: 9px 13px; border-radius: 8px; margin-top: 17px; }
.portal-action .icon { width: 16px; height: 16px; }
.portal-action:hover { background: #ff9652; }
.portal-comment { display: flex; align-items: start; gap: 10px; background: #edf1f2; padding: 13px; border-radius: 9px; }
.portal-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: #152c36; color: #fff; border-radius: 8px; font-size: 11px; font-weight: 600; }
.portal-comment p { font-size: 10px; color: #516a74; margin: 0; }
.portal-comment strong { display: block; color: #273f4a; font-size: 10px; margin-bottom: 3px; }
.portal-feedback-options { display: flex; gap: 6px; margin-block: 15px; flex-wrap: wrap; }
.client-comment { background: #fff0e2; }
.client-comment .portal-avatar { background: #ff9b54; color: #10242e; }
.portal-feedback-empty { font-size: 11px; color: #77888f; margin: 17px 0 0; }
.portal-file-list { padding: 0; margin: 0; list-style: none; }
.portal-file-list li { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid #e2e7e8; }
.portal-file-list .icon { width: 25px; height: 25px; color: #ab481e; }
.portal-file-list strong { display: block; font-size: 10px; }
.portal-file-list small { display: block; font-size: 9px; color: #6d818a; margin-top: 2px; }
.file-kind { font-size: 8px; color: #839198; margin-left: auto; }
.portal-foot { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid #e0e6e8; color: #6c7e87; font-size: 9px; }
.portal-foot button { color: #526976; padding: 5px 8px; border-radius: 5px; background: #edf1f2; font-size: 9px; }
.portal-noscript { padding: 10px 20px; font-size: 11px; }
.portal-window:not(.portal-ready) .portal-panel button,
.portal-window:not(.portal-ready) .portal-foot button { display: none; }
.portal-window:not(.portal-ready) .portal-panel + .portal-panel { border-top: 1px solid #dfe5e7; }
.portal-optional { font-size: 12px; line-height: 1.7; }
.portal-stage-heading { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 25px; }
.portal-stage-heading h3 { font-size: 46px; }
.portal-stage-heading p { font-size: 14px; max-width: 430px; margin-bottom: 0; color: #4d6570; }
.portal-stage-symbol { display: grid; place-items: center; flex: none; width: 66px; height: 66px; background: linear-gradient(145deg,#fff,#d2dbdf); border-radius: 18px; color: #b34718; }
.portal-stage-symbol .icon { width: 40px; height: 40px; }
.chapter-portal > .portal-optional { color: #566b75; margin: 24px 0 0; max-width: 560px; }
.chapter-portal .portal-window { box-shadow: 0 12px 28px #15334016; }
.chapter-deliver { margin-bottom: 0; }
.handoff-bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; height: 150px; margin-left: 31px; width: 2px; }
.handoff-bridge > span { width: 2px; height: 40px; background: #ff955944; }
.handoff-bridge > i { width: 10px; height: 10px; border-radius: 3px; background: #ff7b2e; transform: rotate(45deg); box-shadow: 0 0 25px #ff7b2e70; }
.handoff-flying { display: none; position: absolute; left: 0; top: 0; width: 49px; height: 49px; border-radius: 14px; color: #10242e; background: linear-gradient(135deg,#ffab60,#ff641f); box-shadow: 0 12px 28px #061b2428; pointer-events: none; z-index: 5; transform-origin: 0 0; }
.handoff-flying .icon { width: 30px; height: 30px; }
.handoff-enabled .handoff-flying { display: grid; place-items: center; }
/* Homepage story: readable in normal flow, enhanced to a pinned sequence on desktop. */
.connected-scroll-story { position: relative; }
.scroll-story-stage.oversight-section { margin-left: max(0px,calc((100vw - 1480px)/2)); padding: 68px var(--gutter); overflow: clip; background: radial-gradient(ellipse at 0% 20%,#99533230,transparent 65%),linear-gradient(125deg,#10242e,#1c303a 60%,#323b43); }
.scroll-story-stage::before { border-color: #ff8f4720; box-shadow: 0 0 0 55px #e8f1f307,0 0 0 110px #e8f1f305; }
.story-scene-start { max-width: 1100px; margin: 0 auto 45px; text-align: center; }
.story-scene-start .eyebrow { color: #ffb77d; font-size: 11px; }
.story-scene-start h2 { font-size: clamp(43px,5vw,74px); }
.story-token-row { display: flex; justify-content: center; gap: 20px; margin-top: 35px; }
.story-token-origin, .story-token-flight { display: grid; place-items: center; width: 76px; height: 76px; flex: none; border-radius: 22px 29px 22px 14px; background: linear-gradient(130deg,#ffb573,#ff6723); color: #18303b; box-shadow: inset 0 1px 0 #ffdfac,0 14px 30px #05182230; }
.story-token-origin:nth-child(even), .story-token-flight:nth-child(even) { background: linear-gradient(145deg,#fff,#c3d0d6); box-shadow: inset 0 1px 0 #fff,0 14px 30px #05182230; }
.story-token-origin .icon, .story-token-flight .icon { width: 43px; height: 43px; }
.story-scene-message { max-width: 960px; margin: 0 auto 70px; text-align: center; }
.story-scene-message > .eyebrow { color: #a9bbc5; font-size: 10px; }
.story-message { font-family: var(--body); font-weight: 600; font-size: clamp(26px,3.3vw,48px); line-height: 1.5; letter-spacing: -.04em; text-wrap: balance; }
.story-phrase { display: inline; }
.story-phrase em { color: #ffa866; font-style: normal; }
.story-token-slot { display: inline-grid; place-items: center; width: 1.03em; height: 1.03em; vertical-align: -.08em; border-radius: .3em; color: #10242e; background: #ffa561; margin-inline: .05em; }
.story-token-slot .icon { width: .72em; height: .72em; }
.story-scene-final { max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: .78fr 1.22fr; gap: 55px; align-items: center; }
.story-final-copy .eyebrow { font-size: 10px; color: #ffad72; }
.story-final-copy h2 { font-size: clamp(42px,4.6vw,67px); }
.story-final-copy h2 > span { color: #ff833c; }
.story-final-copy > p:not(.eyebrow) { color: #c6d3d8; font-size: 15px; max-width: 410px; }
.story-final-copy > .story-final-secondary { font-size: 13px !important; }
.story-final-copy > .portal-optional { font-size: 11px !important; color: #a4b7c1 !important; }
.story-final-copy .text-link { margin-top: 5px; }
.story-token-layer { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.story-token-flight { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.story-skip { position: absolute; z-index: 10; top: 16px; left: var(--gutter); width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.story-skip:focus-visible { width: auto; height: auto; clip-path: none; padding: 12px 18px; background: #ffab72; color: #10242e; border-radius: 8px; font-size: 13px; }
.scroll-story-stage { isolation: isolate; }
.scroll-story-stage::before { z-index: -1; }
@media (min-width:1100px) and (min-height:700px) {
  .connected-scroll-story.is-scroll-scene { height: 280svh; }
  .is-scroll-scene .scroll-story-stage { position: sticky; top: 24px; height: calc(100svh - 48px); min-height: 652px; padding: 0; }
  .is-scroll-scene .story-scene-start, .is-scroll-scene .story-scene-message, .is-scroll-scene .story-scene-final { position: absolute; inset: 42px var(--gutter); margin: 0; max-width: none; }
  .is-scroll-scene .story-scene-start, .is-scroll-scene .story-scene-message { display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .is-scroll-scene .story-scene-message { padding-inline: 4%; }
  .is-scroll-scene .story-scene-message .story-message { max-width: 1040px; }
  .is-scroll-scene .story-scene-final { gap: clamp(30px,4vw,65px); }
  .is-scroll-scene .story-token-origin, .is-scroll-scene .story-token-slot { visibility: hidden; }
  .is-scroll-scene .story-token-layer { display: block; }
  .is-scroll-scene .story-scene-message, .is-scroll-scene .story-scene-final { opacity: 0; pointer-events: none; }
  .is-scroll-scene .story-final-copy h2 { font-size: clamp(43px,4.3vw,66px); }
  .is-scroll-scene .portal-project { padding-top: 16px; padding-bottom: 14px; }
  .is-scroll-scene .portal-ready .portal-panels { min-height: 280px; }
  .is-scroll-scene .portal-panel { padding: 17px 21px; }
}
@media (max-width:1100px) {
  .story-scene-final { gap: 32px; grid-template-columns: .8fr 1.2fr; }
  .portal-brand strong > span { display: none; }
  .portal-project-code { display: none; }
  .portal-project h3 { font-size: 17px; }
  .portal-tabs button { gap: 5px; padding-inline: 5px; }
  .portal-panel { padding-inline: 18px; }
  .portal-panel h4 { font-size: 23px; }
  .portal-status { font-size: 7px; }
  .portal-creative-sample > strong { font-size: 28px; }
  .chapter-portal { padding-inline: 20px; }
}
@media (max-width:760px) {
  .portfolio-deck { height: 420px; }
  .preview-card { width: 76%; height: 270px; }
  .project-selector { gap: 6px; margin-top: 8px; }
  .project-selector .project-tab { padding: 7px 9px 7px 6px; min-height: 42px; }
  .project-selector .tab-name { font-size: 9px; }
  .project-selector .tab-art { width: 23px; height: 23px; }
  .portfolio-controls button { width: 42px; height: 42px; }
  .portfolio-controls .icon { width: 18px; height: 18px; }
  .article-image { margin-bottom: 22px; border-radius: 13px 30px 13px 13px; }
  .article-hero-image { margin-bottom: 25px; }
  .article-hero-image img { border-radius: 13px 33px 13px 13px; }
  .experience-row .experience-takeaway { color: #a4461d; }
  .scroll-story-stage.oversight-section { padding-block: 57px; border-radius: 30px 0 0 30px; }
  .story-scene-start { margin-bottom: 38px; }
  .story-scene-start h2 { font-size: 44px; }
  .story-token-row { gap: 10px; margin-top: 26px; }
  .story-token-origin { width: 49px; height: 49px; border-radius: 15px 20px 15px 10px; }
  .story-token-origin .icon { width: 30px; height: 30px; }
  .story-scene-message { margin-bottom: 47px; }
  .story-message { font-size: clamp(22px,5.8vw,32px); line-height: 1.6; }
  .story-scene-final { grid-template-columns: 1fr; gap: 32px; }
  .story-final-copy h2 { font-size: 48px; }
  .story-final-copy > p:not(.eyebrow) { max-width: 520px; }
  .portal-window { border-radius: 13px 24px 13px 13px; }
  .portal-chrome { padding: 13px; gap: 8px; }
  .portal-brand { gap: 8px; }
  .portal-brand strong { font-size: 12px; }
  .portal-demo-label { font-size: 8px; padding-inline: 6px; }
  .portal-project { padding: 18px 15px 16px; }
  .portal-project h3 { font-size: 17px; }
  .portal-tabs { padding: 0 10px 12px; gap: 4px; }
  .portal-tabs button { font-size: 9px; flex-direction: column; gap: 5px; padding: 9px 3px; }
  .portal-tabs .icon { width: 20px; height: 20px; }
  .portal-panel { padding: 18px 15px; }
  .portal-ready .portal-panels { min-height: 310px; }
  .portal-panel-head { flex-wrap: wrap; gap: 7px; }
  .portal-panel h4 { font-size: 25px; }
  .portal-status { font-size: 8px; }
  .portal-intro { font-size: 11px; }
  .portal-brief { gap: 12px; }
  .portal-brief dd { font-size: 10px; }
  .portal-priorities button, .portal-direction-options button, .portal-feedback-options button { min-height: 36px; }
  .portal-direction { gap: 12px; }
  .portal-creative-sample { padding: 13px; min-height: 160px; }
  .portal-creative-sample > strong { font-size: 29px; }
  .portal-creative-sample > span { font-size: 6px; }
  .portal-foot { padding: 12px 13px; font-size: 8px; gap: 5px; }
  .portal-foot button { min-height: 34px; font-size: 9px; }
  .portal-action { min-height: 40px; }
  .file-kind { display: none; }
  .chapter-portal { padding-inline: 15px; }
  .portal-stage-heading { gap: 12px; }
  .portal-stage-heading h3 { font-size: 38px; }
  .portal-stage-heading p { font-size: 13px; }
  .portal-stage-symbol { width: 46px; height: 46px; border-radius: 13px; }
  .portal-stage-symbol .icon { width: 29px; height: 29px; }
  .chapter-portal .portal-chrome { padding-inline: 10px; }
  .chapter-portal .portal-brand-token { width: 26px; height: 26px; }
  .chapter-portal .portal-brand strong { font-size: 11px; }
  .chapter-portal .portal-demo-label { font-size: 7px; }
  .chapter-portal .portal-panel { padding-inline: 12px; }
  .chapter-portal .portal-direction { grid-template-columns: 1fr; }
  .chapter-portal .portal-creative-sample { min-height: 135px; }
  .chapter-portal .portal-ready .portal-panels { min-height: 365px; }
  .handoff-bridge { height: 88px; }
}
@media (max-width:360px) {
  .story-token-row { gap: 7px; }
  .story-token-origin { width: 43px; height: 43px; }
  .portfolio-deck { height: 365px; }
  .preview-card { height: 235px; }
  .project-selector .project-tab { gap: 5px; padding-right: 7px; }
  .project-selector .tab-name { font-size: 8px; }
  .portal-direction { grid-template-columns: 1fr; }
  .portal-ready .portal-panels { min-height: 380px; }
}
@media (prefers-reduced-motion:reduce) {
  .article-image:hover img { transform: none; }
  [data-hero-word] { transition: none; }
}

/* Second October 11 review: clear invitations, vivid service identities and breathing room. */
:root { --content-color: #c2a3f7; --journey-color: #87d6e5; --header-height: 100px; }
html { scroll-padding-top: calc(var(--header-height) + 24px); scrollbar-gutter: stable; }
.site-header { position: sticky; top: 0; z-index: 40; transition: transform .26s cubic-bezier(.2,.65,.25,1),box-shadow .26s; }
.site-header.nav-is-away { transform: translateY(calc(-100% - 2px)); pointer-events: none; }
.site-header.nav-is-raised { box-shadow: 0 6px 28px #071a2420; }
.nav-panel { max-height: calc(100dvh - var(--header-height) - 18px); }
.hero-changing { font-size: .92em; min-height: .96em; white-space: nowrap; }
.hero-changing.orange-text { color: #ff813b; }

/* The same colour identifies a service in cards, navigation and its own page. */
.service-card[data-service='content'] { background: linear-gradient(130deg,#d5bfff,#bc9aee); }
.service-card[data-service='connections'] { background: linear-gradient(130deg,#b0eaf0,#7acfdc); }
.nav-service-1 { background: linear-gradient(125deg,#cbb0f6,#e5d7ff); }
.nav-service-2 { background: linear-gradient(125deg,#92dbe7,#caeff2); }
body[data-page='services-websites'] { --service-color: #ff9656; --service-dark: #ad491a; --service-pale: #ffebdc; }
body[data-page='services-content'] { --service-color: #c2a3f7; --service-dark: #684199; --service-pale: #f0e7ff; }
body[data-page='services-connections'] { --service-color: #87d6e5; --service-dark: #126273; --service-pale: #e0f5f7; }
body[data-page='services-advertising'] { --service-color: #203945; --service-dark: #244452; --service-pale: #e1eaef; }
body[data-page^='services-'] .feature-statement { background: linear-gradient(135deg,var(--service-pale),var(--service-color)); }
body[data-page='services-advertising'] .feature-statement { background: linear-gradient(135deg,#203945,#3c5561); color: #fff; }
body[data-page^='services-'] .page-intro > .eyebrow,
body[data-page^='services-'] .feature-content > .eyebrow { color: var(--service-dark); }
body[data-page^='services-'] .soft-section { background: linear-gradient(120deg,var(--service-pale),#f7f8f5); }
body[data-page^='services-'] .check-list li::before { color: var(--service-dark); }
.nav-panel-services { background: #fff; }
.nav-package-start { margin: 0 0 23px; padding: 4px 0 23px; border: 0; border-bottom: 1px solid #d9e1e5; border-radius: 0; background: #fff; color: #17313c; transition: border-color .2s; }
.nav-package-start:hover, .nav-package-start:focus-visible { background: #fff; border-bottom-color: #ff8a46; }
.nav-package-start .nav-package-mark { width: 44px; height: 44px; border: 1px solid #f1d5c2; border-radius: 7px; background: #fff0e5; color: #b85020; }
.nav-package-start .nav-package-mark .icon { width: 28px; height: 28px; }
.nav-package-start strong { font-size: 22px; letter-spacing: -.6px; }
.nav-package-start .nav-start-label { color: #a4471c; margin: 0 0 4px; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
.nav-package-start small:not(.nav-start-label) { color: #5c727c; font-size: 11px; }
.nav-package-start .panel-index { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #17313c; padding: 12px 0 12px 14px; border-radius: 0; }
.nav-package-start:hover .panel-index, .nav-package-start:focus-visible .panel-index { background: transparent; color: #a4471c; }
.nav-package-start .panel-index .icon { width: 18px; height: 18px; }
.nav-panel-services .nav-panel-heading { margin-bottom: 15px; }
.nav-panel-services .nav-panel-heading p { font-size: 17px; }
.package-card .package-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0; margin: 25px 0 22px; }
.package-price > span:first-child { font-size: 13px; color: #576e78; }
.package-price > strong { font-family: var(--display); font-size: 56px; letter-spacing: -.03em; line-height: 1.1; }
.package-price > span:last-child { width: 100%; font-size: 11px; color: #69808a; margin-top: 5px; }
.package-card .package-fit { min-height: 3.2em; }
.package-card .package-scope { min-height: 6.4em; font-size: 14px; }
.package-card .package-state { min-height: 3.2em; margin-top: 0; }
.package-card:nth-child(2) { background: linear-gradient(135deg,#f5f0ff,#e5d8fb); }
.package-card:nth-child(3) { background: linear-gradient(135deg,#fff,#e2f4f5); }
.packages-after { display: flex; justify-content: space-between; align-items: center; gap: 36px; margin-top: 40px; padding: 28px 0; border-top: 1px solid #cfdbdf; }
.packages-after p { margin: 0 0 8px; max-width: 650px; }
.packages-after .button { flex: none; }

/* A circular edge follows the illustrated hands, without dissolving the sleeves. */
.approach-hero-art img { -webkit-mask-image: none; mask-image: none; clip-path: ellipse(60% 60% at 50% 35%); }

/* Keep the shaped scene, with an equal amount of breathing room on both sides. */
.scroll-story-stage.oversight-section { width: min(calc(100% - var(--gutter) * 2),var(--max)); margin-inline: auto; border-radius: 42px; }
.story-token-origin[data-token-origin], .story-token-flight[data-token-flight], .story-token-slot[data-token-slot] { background: var(--token-color); box-shadow: 0 9px 22px #031c2222; }
[data-token-origin='0'], [data-token-flight='0'], [data-token-slot='0'] { --token-color: #7bd5ed; }
[data-token-origin='1'], [data-token-flight='1'], [data-token-slot='1'] { --token-color: #c6a7ff; }
[data-token-origin='2'], [data-token-flight='2'], [data-token-slot='2'] { --token-color: #d4eb80; }
[data-token-origin='3'], [data-token-flight='3'], [data-token-slot='3'] { --token-color: #ff9fba; }
[data-token-origin='4'], [data-token-flight='4'], [data-token-slot='4'] { --token-color: #ff8948; }
.story-scene-final { grid-template-columns: .78fr 1.22fr; gap: 38px; }
.story-final-copy h2 { font-size: clamp(40px,4.2vw,63px); }
.story-final-copy > p:not(.eyebrow) { font-size: 14px; }
.story-scene-message { max-width: 100%; }
.story-message { font-size: clamp(26px,3.1vw,45px); }
.chapter-portal .portal-stage-heading { align-items: end; }

/* The inline preview is a project invitation; the full interaction lives in a native dialog. */
.portal-preview { position: relative; min-width: 0; border-radius: 19px 31px 19px 19px; color: #17333f; background: #fbfcfa; box-shadow: 0 20px 55px #03192330; border: 1px solid #ffffffb0; text-align: left; isolation: isolate; }
.portal-preview.can-open { cursor: pointer; transition: box-shadow .25s, border-color .25s; }
.portal-preview.can-open:hover { box-shadow: 0 24px 64px #03192344; border-color: #ffa66b; }
.portal-preview-chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #dde5e8; background: #f0f4f3; border-radius: 18px 30px 0 0; }
.portal-preview .portal-brand strong { font-size: 13px; }
.portal-preview .portal-brand strong > span { font-size: 9px; }
.preview-sample { font-size: 9px; color: #6c838d; white-space: nowrap; }
.portal-preview-body { padding: 23px; }
.preview-welcome { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.preview-welcome h3 { font-family: var(--body); text-transform: none; font-size: clamp(22px,2vw,29px); line-height: 1.2; letter-spacing: -.9px; margin: 0; }
.preview-welcome .portal-overline { font-size: 8px; margin-bottom: 9px; color: #788a90; }
.preview-spark { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: #f5ddc9; color: #bd4e1e; }
.preview-spark .icon { width: 26px; height: 26px; }
.preview-project-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 19px; }
.preview-creative { position: relative; background: #c9b1f0; min-height: 174px; padding: 18px 15px; border-radius: 10px 23px 10px 10px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 17px; }
.preview-creative > span { font-size: 6px; letter-spacing: .06em; position: relative; z-index: 1; }
.preview-creative > strong { font-family: var(--display); font-size: clamp(27px,2.5vw,38px); line-height: .97; text-transform: uppercase; position: relative; z-index: 1; }
.preview-creative em { font-style: normal; color: #593773; }
.preview-creative > i { position: absolute; width: 108px; height: 108px; border-radius: 50%; background: #e7daf9; right: -42px; bottom: 9px; }
.preview-creative > b { font-size: 7px; font-weight: 500; position: relative; z-index: 1; }
.preview-progress { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 8px 0; }
.preview-progress-title { font-size: 8px; font-weight: 600; color: #637a86; }
.preview-progress > div { display: flex; align-items: center; gap: 9px; }
.preview-progress p { margin: 0; font-size: 10px; line-height: 1.4; }
.preview-progress p > strong { display: block; font-weight: 600; }
.preview-progress p > span { display: block; font-size: 8px; color: #748892; margin-top: 3px; }
.preview-step { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; color: #7d929b; background: #ecf1f2; }
.preview-step .icon { width: 17px; height: 17px; }
.preview-step.is-done { background: #d5ebdd; color: #34614c; }
.preview-step.is-current { background: #ffd6b7; color: #8f411b; }
.preview-conversation { display: flex; align-items: center; gap: 12px; padding: 14px; background: #f0f4f4; border-radius: 10px; margin-top: 18px; }
.preview-message-icon { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 50%; background: #203b46; color: #fff; }
.preview-message-icon .icon { width: 18px; height: 18px; }
.preview-conversation p { margin: 0; font-size: 9px; line-height: 1.5; color: #617985; }
.preview-conversation strong { display: block; color: #23404c; font-size: 10px; margin-bottom: 3px; }
.portal-preview-footer { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #e1e8ea; }
.portal-preview-footer > span { font-size: 9px; color: #657b87; max-width: 150px; }
.portal-launch { display: inline-flex; align-items: center; justify-content: center; gap: 13px; border-radius: 10px; min-height: 43px; padding: 10px 13px; background: #ff8c48; color: #14303c; font-size: 11px; font-weight: 600; flex: none; }
.portal-launch:hover { background: #ffac74; }
.portal-launch .icon { width: 18px; height: 18px; transition: transform .2s; }
.portal-preview.can-open:hover .portal-launch .icon { transform: translateX(3px); }
.portal-launch::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 19px 31px 19px 19px; }
.portal-launch:focus-visible::after { outline: 3px solid #ff792e; outline-offset: 6px; }
.chapter-portal .portal-preview { box-shadow: 0 10px 35px #15334019; }
.chapter-portal .preview-project-grid { gap: 28px; grid-template-columns: 1.1fr 1fr; }
.chapter-portal .preview-welcome h3 { font-size: 32px; }
.chapter-portal .preview-creative { min-height: 208px; padding: 23px; }
.chapter-portal .preview-creative > strong { font-size: 43px; }
.chapter-portal .preview-progress p { font-size: 12px; }
.chapter-portal .preview-progress p > span { font-size: 10px; }
.chapter-portal .preview-progress-title { font-size: 10px; }
.chapter-portal .preview-step { width: 36px; height: 36px; }

body.portal-is-open { overflow: hidden; }
.portal-dialog { position: fixed; inset: 0; border: 0; padding: 30px; background: #eff2f1; color: #183440; border-radius: 24px; width: min(940px,calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; margin: auto; box-shadow: 0 35px 120px #04192366; }
.portal-dialog::backdrop { background: #0a1f2cbb; backdrop-filter: blur(8px); }
.portal-dialog { height: fit-content; }
.portal-dialog-top { position: sticky; top: -30px; z-index: 5; background: #eff2f1; display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 22px; padding-bottom: 10px; }
.portal-dialog-top .eyebrow { color: #a2491c; font-size: 10px; margin-bottom: 9px; }
.portal-dialog-top h2 { font-size: clamp(34px,4vw,47px); margin-bottom: 8px; }
.portal-dialog-top h2 span { color: #8a4e2c; margin-left: .2em; }
.portal-dialog-top p:last-child { font-size: 13px; color: #607984; margin: 0; }
.portal-dialog-close { display: grid; place-items: center; width: 43px; height: 43px; flex: none; background: #dce5e8; color: #24434f; border-radius: 50%; }
.portal-dialog-close:hover { background: #ffd4b4; }
.portal-dialog-close .icon { width: 22px; height: 22px; }
.portal-dialog .portal-window { box-shadow: 0 7px 22px #17323d0f; border-radius: 15px; }
.portal-dialog .portal-chrome { padding: 13px 24px; background: #17333e; color: #fff; border-color: #294a58; }
.portal-dialog .portal-brand strong > span { color: #bed0d8; }
.portal-dialog .portal-demo-label { background: #ffffff15; color: #ccdae0; }
.portal-dialog .portal-project { padding: 19px 26px; }
.portal-dialog .portal-project h3 { font-size: 22px; }
.portal-dialog .portal-tabs { padding: 0 22px 18px; gap: 9px; }
.portal-dialog .portal-tabs button { min-height: 43px; font-size: 12px; gap: 10px; }
.portal-dialog .portal-tabs .icon { width: 20px; height: 20px; }
.portal-dialog .portal-panel { padding: 24px 28px; }
.portal-dialog .portal-panel h4 { font-size: 34px; }
.portal-dialog .portal-panels { min-height: 325px; }
.portal-dialog .portal-intro { font-size: 14px; max-width: 650px; }
.portal-dialog .portal-brief { gap: 28px; margin-bottom: 22px; }
.portal-dialog .portal-brief dt { font-size: 11px; }
.portal-dialog .portal-brief dd { font-size: 12px; }
.portal-dialog .portal-priorities legend { font-size: 11px; }
.portal-dialog .portal-priorities button, .portal-dialog .portal-direction-options button, .portal-dialog .portal-feedback-options button { min-height: 38px; padding: 8px 14px; font-size: 12px; }
.portal-dialog .portal-focus-note { font-size: 12px; }
.portal-dialog .portal-direction { grid-template-columns: 1fr 1fr; gap: 30px; }
.portal-dialog .portal-creative-sample { padding: 23px; min-height: 184px; }
.portal-dialog .portal-creative-sample > strong { font-size: 41px; }
.portal-dialog .portal-direction-notes > strong { font-size: 15px; }
.portal-dialog .portal-direction-notes p { font-size: 12px; }
.portal-dialog .portal-action { min-height: 43px; padding: 11px 17px; font-size: 12px; }
.portal-dialog .portal-comment { padding: 17px; gap: 14px; }
.portal-dialog .portal-comment p { font-size: 12px; }
.portal-dialog .portal-comment strong { font-size: 12px; }
.portal-dialog .portal-avatar { width: 33px; height: 33px; }
.portal-dialog .portal-file-list strong { font-size: 13px; }
.portal-dialog .portal-file-list small { font-size: 11px; }
.portal-dialog .portal-file-list li { padding-block: 13px; }
.portal-dialog .portal-foot { font-size: 10px; }
.portal-dialog .portal-foot button { min-height: 36px; font-size: 11px; }
.portal-dialog-note { font-size: 11px; color: #607782; margin: 18px 2px 0; }

/* Preserve the deck interaction and artwork; give their composition more room. */
.portfolio-section > .section-heading { align-items: center; justify-content: center; text-align: center; margin-bottom: 65px; }
.portfolio-layout { grid-template-columns: minmax(0,1.45fr) minmax(280px,.9fr); gap: clamp(55px,6vw,95px); }
.portfolio-layout > div:first-child { min-width: 0; padding: 14px 14px 0; }
.portfolio-deck { height: 535px; }
.project-selector { margin-top: 30px; gap: 10px; }
.portfolio-detail { padding-block: 20px; }
.portfolio-detail > .eyebrow { margin-bottom: 17px; font-size: 10px; }
.portfolio-detail h3 { margin-bottom: 15px; }
.portfolio-detail #project-summary { max-width: 370px; margin-bottom: 23px; }
.portfolio-detail .concept-label { margin-block: 28px 25px; }
.portfolio-controls { margin-top: 4px; }

/* Extend the existing artwork's colour field behind the entire offer panel. */
.offer-art { position: relative; isolation: isolate; background: #b5a2e3; }
.offer-art::before { content: ''; position: absolute; inset: -35px; z-index: -1; background: url('/assets/offer-voucher.webp') center / cover no-repeat; filter: blur(35px); }
.voucher-art > img { -webkit-mask-image: linear-gradient(to bottom,transparent,#000 10%,#000 86%,transparent); mask-image: linear-gradient(to bottom,transparent,#000 10%,#000 86%,transparent); }
.offer-art > p { margin: -3px 28px 32px; position: relative; }

@media (min-width:1100px) and (min-height:700px) {
  .is-scroll-scene .story-scene-start, .is-scroll-scene .story-scene-message, .is-scroll-scene .story-scene-final { inset: 38px clamp(28px,3.3vw,55px); }
  .is-scroll-scene .story-scene-final { gap: 32px; }
  .is-scroll-scene .story-final-copy h2 { font-size: clamp(40px,4vw,60px); }
  .is-scroll-scene .story-scene-message { padding-inline: 1%; }
}
@media (max-width:1100px) {
  .portal-preview .portal-brand strong > span { display: none; }
  .portal-preview-body { padding: 19px; }
  .preview-project-grid { gap: 13px; }
  .portal-preview-footer { padding: 15px; }
  .portal-preview-footer > span { display: none; }
  .portal-launch { width: 100%; justify-content: space-between; }
  .portfolio-layout { gap: 50px; grid-template-columns: minmax(0,1.35fr) minmax(250px,1fr); }
  .portfolio-deck { height: 455px; }
  .portfolio-layout > div:first-child { padding-inline: 0; }
}
@media (max-width:1020px) {
  :root { --header-height: 82px; }
  #main-nav.open { max-height: calc(100dvh - 82px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-package-start { padding: 4px 0 22px; }
  .nav-package-start .panel-index { margin: 0 0 0 auto; }
  .packages-after { align-items: start; flex-direction: column; gap: 18px; }
}
@media (max-width:760px) {
  .scroll-story-stage.oversight-section { width: calc(100% - 28px); padding: 42px 22px; border-radius: 27px; }
  .story-scene-final { grid-template-columns: 1fr; gap: 30px; }
  .story-scene-start h2 { font-size: clamp(36px,8vw,46px); }
  .story-token-row { gap: 9px; }
  .story-token-origin { width: 43px; height: 43px; }
  .story-token-origin .icon { width: 27px; height: 27px; }
  .story-final-copy h2 { font-size: 46px; }
  .story-message { font-size: 25px; }
  .portal-preview-chrome { padding: 13px; gap: 7px; }
  .portal-preview .portal-brand { gap: 8px; }
  .portal-preview .portal-brand strong { font-size: 12px; }
  .preview-sample { font-size: 8px; }
  .portal-preview-body { padding: 16px; }
  .preview-welcome, .chapter-portal .preview-welcome { gap: 8px; }
  .preview-welcome h3, .chapter-portal .preview-welcome h3 { font-size: 24px; }
  .preview-welcome .portal-overline { font-size: 7px; }
  .preview-spark { width: 33px; height: 33px; }
  .preview-project-grid, .chapter-portal .preview-project-grid { grid-template-columns: 1fr 1fr; gap: 13px; }
  .preview-creative, .chapter-portal .preview-creative { min-height: 170px; padding: 14px 12px; }
  .preview-creative > strong, .chapter-portal .preview-creative > strong { font-size: 29px; }
  .preview-progress-title, .chapter-portal .preview-progress-title { font-size: 7px; }
  .preview-progress p, .chapter-portal .preview-progress p { font-size: 9px; }
  .preview-progress p > span, .chapter-portal .preview-progress p > span { font-size: 8px; }
  .preview-step, .chapter-portal .preview-step { width: 25px; height: 25px; border-radius: 7px; }
  .preview-step .icon { width: 15px; height: 15px; }
  .preview-progress > div { gap: 6px; }
  .preview-conversation { padding: 12px; gap: 9px; }
  .preview-conversation p > span { display: none; }
  .preview-conversation strong { margin: 0; }
  .portal-dialog { width: calc(100% - 22px); max-height: calc(100dvh - 22px); padding: 20px 12px 16px; border-radius: 20px; }
  .portal-dialog-top { top: -20px; padding-inline: 7px; gap: 10px; margin-bottom: 18px; }
  .portal-dialog-top h2 { font-size: 33px; }
  .portal-dialog-top h2 span { display: block; margin: 0; }
  .portal-dialog-top p:last-child { font-size: 11px; max-width: 240px; }
  .portal-dialog-close { width: 37px; height: 37px; }
  .portal-dialog .portal-chrome { padding: 13px; }
  .portal-dialog .portal-brand strong > span { display: none; }
  .portal-dialog .portal-project { padding: 17px 15px; }
  .portal-dialog .portal-project h3 { font-size: 18px; }
  .portal-dialog .portal-tabs { padding: 0 10px 13px; gap: 5px; }
  .portal-dialog .portal-tabs button { font-size: 10px; flex-direction: column; gap: 5px; padding-inline: 4px; }
  .portal-dialog .portal-panel { padding: 21px 16px; }
  .portal-dialog .portal-panel h4 { font-size: 29px; }
  .portal-dialog .portal-panel-head { gap: 8px; }
  .portal-dialog .portal-panels { min-height: 390px; }
  .portal-dialog .portal-intro { font-size: 13px; }
  .portal-dialog .portal-brief { gap: 15px; }
  .portal-dialog .portal-brief dd { font-size: 11px; }
  .portal-dialog .portal-priorities button, .portal-dialog .portal-direction-options button, .portal-dialog .portal-feedback-options button { font-size: 11px; min-height: 40px; }
  .portal-dialog .portal-direction { grid-template-columns: 1fr; gap: 17px; }
  .portal-dialog .portal-creative-sample { min-height: 170px; }
  .portal-dialog .portal-action { width: 100%; justify-content: space-between; }
  .portal-dialog .portal-foot { padding: 12px 14px; font-size: 9px; }
  .portal-dialog-note { margin-inline: 7px; font-size: 10px; }
  .nav-package-start { gap: 12px; }
  .nav-package-start strong { font-size: 19px; }
  .nav-package-start .nav-package-mark { width: 42px; height: 42px; }
  .nav-package-start .panel-index { margin: 7px 0 0 54px; padding: 5px 0; }
  .package-card .package-fit, .package-card .package-scope, .package-card .package-state { min-height: 0; }
  .package-price > strong { font-size: 58px; }
  .packages-after .button { width: 100%; justify-content: space-between; font-size: 13px; }
  .portfolio-section > .section-heading { margin-bottom: 39px; }
  .portfolio-layout { display: block; }
  .portfolio-layout > div:first-child { padding-top: 17px; }
  .portfolio-deck { height: 425px; }
  .portfolio-detail { margin-top: 38px; padding-block: 0; }
  .project-selector { margin-top: 30px; gap: 7px; }
  .portfolio-detail #project-summary { max-width: 500px; }
  .offer-art { padding: 10px 0; }
  .offer-art::before { inset: -40px; filter: blur(25px); }
}
@media (max-width:400px) {
  .story-token-origin { width: 37px; height: 37px; border-radius: 11px; }
  .story-token-row { gap: 7px; }
  .portal-preview-chrome { flex-wrap: wrap; }
  .preview-project-grid, .chapter-portal .preview-project-grid { grid-template-columns: 1fr; }
  .preview-progress, .chapter-portal .preview-progress { gap: 13px; padding-top: 4px; }
  .preview-creative, .chapter-portal .preview-creative { min-height: 160px; }
  .preview-creative > strong, .chapter-portal .preview-creative > strong { font-size: 36px; }
  .preview-progress-title, .chapter-portal .preview-progress-title { font-size: 9px; }
  .preview-progress p, .chapter-portal .preview-progress p { font-size: 11px; }
  .preview-progress p > span, .chapter-portal .preview-progress p > span { font-size: 9px; }
  .portfolio-deck { height: 370px; }
  .preview-card { height: 242px; }
}
@media (prefers-reduced-motion:reduce) {
  .site-header, .portal-preview, .portal-launch .icon { transition: none; }
}

/* A lighter pill with a single sweep of light on hover or keyboard focus. */
#main-nav > .nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 44px;
  padding: 6px 8px 6px 20px !important;
  gap: 13px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(115deg,#ffb37b 0%,#ff914b 48%,#ff7835 100%);
  color: #10242e;
  box-shadow: none;
  transform: none;
  transition: box-shadow .25s;
}
#main-nav > .nav-cta:is(:hover,:focus-visible) {
  background: linear-gradient(115deg,#ffb37b 0%,#ff914b 48%,#ff7835 100%);
  box-shadow: 0 0 20px #ff985529;
  transform: none;
}
#main-nav > .nav-cta::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -35% auto -35% -70%;
  width: 55%;
  background: linear-gradient(90deg,transparent,#fff6 50%,transparent);
  transform: skewX(-22deg);
  pointer-events: none;
}
#main-nav > .nav-cta:is(:hover,:focus-visible)::before {
  animation: nav-pill-shine .75s cubic-bezier(.2,.6,.3,1) both;
}
.nav-cta > span:first-child { font-size: 13px; line-height: 1; }
.nav-cta .cta-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: #10242e0d;
}
.nav-cta .cta-icon > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity .2s, transform .3s cubic-bezier(.2,.7,.25,1);
}
.nav-cta .cta-icon .icon { width: 20px; height: 20px; }
.nav-cta .cta-icon-rest { opacity: 1; transform: translateY(0) rotate(0); }
.nav-cta .cta-icon-hover { opacity: 0; transform: translateY(9px) rotate(-35deg); }
.nav-cta:is(:hover,:focus-visible) .cta-icon-rest { opacity: 0; transform: translateY(-9px) rotate(25deg); }
.nav-cta:is(:hover,:focus-visible) .cta-icon-hover { opacity: 1; transform: translateY(0) rotate(0); }
@keyframes nav-pill-shine {
  from { left: -70%; }
  to { left: 125%; }
}
@media (max-width:1020px) {
  #main-nav > .nav-cta { width: fit-content; min-width: 175px; margin-top: 15px; justify-content: center; }
}
@media (prefers-reduced-motion:reduce) {
  #main-nav > .nav-cta, .nav-cta .cta-icon > span { transition: none; }
  #main-nav > .nav-cta:is(:hover,:focus-visible)::before { animation: none; }
}

/* A continuous landing-page canvas beneath the navigation. */
.js body[data-page='home'] > .site-header {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
  box-shadow: none;
  transition: transform .26s cubic-bezier(.2,.65,.25,1), background-color .25s, box-shadow .25s;
}
.js body[data-page='home'] > .site-header.nav-is-solid {
  background: #142b35;
  box-shadow: 0 6px 28px #071a2420;
}
.hero-character-shell {
  border-radius: 0 0 54px 0;
  background: radial-gradient(ellipse at 82% 58%,#93634860 0,transparent 42%),
    radial-gradient(ellipse at 80% 100%,#67765c38,transparent 47%),
    linear-gradient(115deg,#10242e 22%,#1b3039 67%,#303a3d);
}
.hero-character-shell::before { opacity: .035; }
.hero-character-shell .hero-v2 {
  grid-template-columns: 1.05fr 1fr;
  align-items: end;
  gap: 30px;
  min-height: 760px;
  padding-top: 115px;
  padding-bottom: 0;
}
.hero-character-shell .hero-copy { padding: 40px 0 95px; align-self: center; }
.hero-character-shell .hero-copy h1 { font-size: clamp(78px,8.4vw,126px); }
.hero-character-shell .hero-copy .lead { max-width: 510px; color: #d5deda; }
.hero-character-shell .hero-character-visual {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 0;
  align-self: end;
}
/* A display crop preserves the approved pixels and discards the empty left half. */
.hero-character-frame { position: relative; width: 100%; aspect-ratio: .80; overflow: hidden; }
.hero-character {
  position: absolute;
  bottom: 0;
  right: -12%;
  height: 100%;
  width: auto;
  max-width: none;
}
@media (min-width:1600px) {
  .hero-character-shell .hero-v2 { min-height: 830px; }
}
@media (max-width:1100px) and (min-width:761px) {
  .hero-character-shell .hero-v2 { min-height: 680px; gap: 12px; }
  .hero-character-shell .hero-copy { padding-bottom: 70px; }
  .hero-character-shell .hero-copy h1 { font-size: 8.4vw; }
  .hero-character-frame { aspect-ratio: .69; }
}
@media (max-width:1020px) {
  .js body[data-page='home'] #main-nav.open {
    background: #142b35;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 18px 40px #06161d40;
  }
}
@media (max-width:760px) {
  .hero-character-shell { border-radius: 0 0 34px 0; }
  .hero-character-shell .hero-v2 { display: flex; padding-top: 122px; min-height: 0; gap: 0; }
  .hero-character-shell .hero-copy { padding: 0; width: 100%; }
  .hero-character-shell .hero-copy h1 { font-size: clamp(60px,15.6vw,108px); }
  .hero-character-shell .hero-copy .lead { max-width: 520px; }
  .hero-character-shell .hero-character-visual { width: min(100%,400px); margin: 32px auto 0; }
  .hero-character-frame { aspect-ratio: .89; }
  .hero-character { right: -6%; }
}
/* Keep the longest rotating phrase inside the copy column on narrow phones. */
@media (max-width:350px) {
  .hero-character-shell .hero-copy h1 { font-size: 16.8vw; }
}
@media (prefers-reduced-motion:reduce) {
  .js body[data-page='home'] > .site-header { transition: none; }
}

/* ScreenKit: real product material, a clear review story, and a small working example. */
.sk-feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; margin: 0 0 84px; padding: 46px; border-radius: 28px; background: linear-gradient(115deg,#172d38,#293f4b); color: #f7f8f3; overflow: hidden; }
.sk-feature-copy .eyebrow { color: #ffb384; font-size: 10px; }
.sk-feature-copy h3 { font-size: clamp(34px,3.9vw,57px); margin-bottom: 20px; }
.sk-feature-copy > p:not(.eyebrow) { color: #c9d6d9; font-size: 15px; }
.sk-feature-link { display: inline-flex; align-items: center; gap: 25px; margin-top: 10px; color: #ffb282; font-size: 13px; font-weight: 600; }
.sk-feature-link .icon { width: 20px; height: 20px; transition: transform .2s; }
.sk-feature:hover .sk-feature-link .icon { transform: translateX(5px); }
.sk-feature-art { position: relative; padding: 17px 12px 37px; min-width: 0; }
.sk-feature-app { border: 5px solid #dcdfea; border-radius: 14px; background: #f1f3f8; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 18px 38px #00121d50; transition: transform .35s; }
.sk-feature:hover .sk-feature-app { transform: rotate(-2deg) translateY(-3px); }
.sk-feature-app > div { display: flex; align-items: center; gap: 8px; padding: 9px; color: #24313c; }
.sk-feature-app > div > img { width: 24px; height: 24px; border-radius: 6px; }
.sk-feature-app strong { font-size: 11px; }
.sk-feature-app > div > span { margin-left: auto; font-size: 8px; color: #617180; }
.sk-editor-thumb { width: 100%; height: auto; }
.sk-feature-note { position: absolute; right: -3px; bottom: 0; display: flex; align-items: center; gap: 13px; padding: 16px 20px; background: #ebdef8; color: #24313c; border-radius: 13px 24px 13px 13px; transform: rotate(3deg); box-shadow: 0 8px 25px #0b1a2933; }
.sk-feature-note > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ff995a; font-size: 11px; font-weight: 700; }
.sk-feature-note p { font-size: 10px; line-height: 1.6; margin: 0; }
.sk-feature-note .icon { width: 26px; height: 26px; }
.portfolio-section .sk-feature { margin-top: -12px; }
.work-concept-heading { margin: 64px 0 30px; }
.work-concept-heading h2 { font-size: clamp(36px,4vw,51px); }
.work-concept-heading p { max-width: 640px; font-size: 14px; color: #536b76; }
.nav-screenkit { display: flex; align-items: center; gap: 15px; margin-bottom: 23px; padding: 18px; background: linear-gradient(120deg,#e6def7,#f1edf9); border-radius: 14px 25px 14px 14px; color: #203642; }
.nav-screenkit > img { width: 49px; height: 49px; border-radius: 12px; }
.nav-screenkit > span { display: flex; flex-direction: column; }
.nav-screenkit strong { font-size: 19px; letter-spacing: -.4px; }
.nav-screenkit small { font-size: 11px; color: #5b617c; }
.nav-screenkit > .icon { width: 23px; height: 23px; margin-left: auto; transition: transform .2s; }
.nav-screenkit:hover > .icon { transform: translateX(4px); }
.sk-case-hero { display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 35px; padding-block: 46px 72px; }
.sk-back { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 36px; color: #657781; }
.sk-back .icon { width: 16px; height: 16px; }
.sk-product-id { display: flex; align-items: center; gap: 13px; margin-bottom: 29px; }
.sk-product-id > img { width: 47px; height: 47px; border-radius: 12px; }
.sk-product-id strong { display: block; font-size: 17px; letter-spacing: -.6px; }
.sk-product-id small { display: block; font-size: 10px; color: #6a7185; }
.sk-case-copy h1 { font-size: clamp(61px,6.6vw,96px); line-height: .99; }
.sk-case-copy h1 > span { color: #795394; }
.sk-case-copy .lead { max-width: 490px; font-size: 18px; margin-top: 25px; }
.sk-case-copy > .button { margin-top: 6px; font-size: 13px; }
.sk-cover { position: relative; padding: 50px 0 60px 15px; min-width: 0; }
.sk-cover::before { content: ''; position: absolute; inset: -10px -55px -10px -15px; z-index: -1; background: radial-gradient(ellipse at 70% 30%,#d9c5fb,transparent 65%),radial-gradient(ellipse at 30% 80%,#ffcfac,transparent 61%); }
.sk-cover-kicker { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 12px 29px; font-size: 9px; font-weight: 600; letter-spacing: .16em; color: #725883; }
.sk-cover-kicker i { flex: 1; border-top: 1px solid #a890b8; }
.sk-cover-capture { border: 8px solid #fdfdfb; border-radius: 16px; background: #fdfdfb; box-shadow: 0 27px 55px #4d3b672a; overflow: hidden; transform: rotate(-4deg); }
.sk-cover-bar { display: flex; align-items: center; gap: 4px; padding: 3px 5px 10px; }
.sk-cover-bar > span { width: 5px; height: 5px; border-radius: 50%; background: #c9c5d1; }
.sk-cover-bar b { margin-left: 8px; color: #706b7a; font-size: 8px; font-weight: 500; }
.sk-cover-capture > img { width: 100%; height: auto; }
.sk-cover-comment { position: relative; margin: -10px 0 0 58px; padding: 22px; display: flex; align-items: center; gap: 16px; background: #203744; color: #f8f9f5; border-radius: 14px 27px 14px 14px; transform: rotate(3deg); box-shadow: 0 15px 27px #27384329; }
.sk-cover-comment > b { font-size: 14px; color: #ffb179; align-self: start; }
.sk-cover-comment span { display: block; font-size: 9px; color: #b7c9d0; margin-bottom: 5px; }
.sk-cover-comment strong { font-size: clamp(15px,1.55vw,22px); line-height: 1.3; }
.sk-cover-comment .icon { width: 33px; height: 33px; margin-left: auto; color: #ffc79f; }
.sk-cover-caption { margin: 27px 0 0 20px; font-size: 10px; color: #6d7081; }
.sk-project-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; padding-block: 26px; border-block: 1px solid #d4dcde; }
.sk-project-facts span { display: block; font-size: 10px; color: #667982; margin-bottom: 4px; }
.sk-project-facts strong { font-size: 13px; font-weight: 500; }
.sk-challenge { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px,9vw,140px); }
.sk-challenge h2 { font-size: clamp(47px,5.4vw,78px); }
.sk-challenge h2 > span { color: #ae512b; }
.sk-challenge .lead { margin-top: 30px; font-size: 22px; line-height: 1.5; }
.sk-challenge p:not(.lead):not(.eyebrow) { font-size: 16px; color: #4c636e; }
.sk-capabilities { padding-block: 85px; background: linear-gradient(120deg,#e5def1,#efedf4 60%,#f5e9de); }
.sk-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 45px; }
.sk-section-heading h2 { margin-bottom: 0; font-size: clamp(41px,4.7vw,65px); }
.sk-section-heading > p { max-width: 360px; margin: 0; font-size: 16px; color: #5b6c76; }
.sk-capability-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 27px; margin-top: 56px; }
.sk-capability-icon { display: grid; place-items: center; width: 48px; height: 48px; background: #fff8; border-radius: 14px; margin-bottom: 25px; color: #5c4274; }
.sk-capability-icon .icon { width: 29px; height: 29px; }
.sk-capability-grid h3 { font-size: 29px; }
.sk-capability-grid p { font-size: 13px; color: #536473; line-height: 1.8; margin: 15px 0 0; }
.sk-demo-section { padding-block: 95px; background: #142b35; color: #f4f7f5; }
.sk-demo-section .eyebrow { color: #ffb782; }
.sk-demo-section .sk-section-heading > p { color: #b7c9d0; }
.sk-demo { color: #223843; border: 1px solid #f3f5f8; border-radius: 20px; overflow: hidden; background: #f0f2f5; box-shadow: 0 28px 65px #05182138; }
.sk-demo-chrome { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 18px 24px; background: #fbfcfb; border-bottom: 1px solid #e0e2eb; }
.sk-demo-brand { display: flex; align-items: center; gap: 10px; }
.sk-demo-brand img { width: 30px; height: 30px; border-radius: 8px; }
.sk-demo-brand strong { font-size: 15px; }
.sk-demo-brand > span { margin-left: 15px; color: #73808c; font-size: 10px; }
.sk-reset { display: inline-flex; align-items: center; gap: 8px; background: #eeebf7; color: #564577; padding: 8px 12px; font-size: 10px; border-radius: 8px; }
.sk-reset .icon { width: 14px; height: 14px; }
.sk-demo-steps { display: grid; grid-template-columns: repeat(3,1fr); padding: 18px 24px; gap: 12px; background: #fbfcfb; }
.sk-demo-steps button { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 14px; background: #f0eff5; color: #617080; border-radius: 10px; font-size: 12px; font-weight: 500; }
.sk-demo-steps button > span { display: grid; place-items: center; width: 26px; height: 26px; background: #e1dfeb; border-radius: 50%; font-size: 10px; }
.sk-demo-steps button[aria-current='step'] { background: #e7dbf6; color: #4c306b; }
.sk-demo-steps button[aria-current='step'] > span { background: #7452a2; color: #fff; }
.sk-demo-workspace { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(275px,1fr); }
.sk-demo-canvas { min-width: 0; padding: 20px 23px 28px; background: #e3e7ed; }
.sk-canvas-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; color: #61737c; margin-bottom: 15px; }
.sk-canvas-label > span:first-child { display: flex; align-items: center; gap: 7px; }
.sk-canvas-label .icon { width: 16px; height: 16px; }
.sk-sample-site { background: #154b3b; color: #eef1c9; overflow: hidden; border-radius: 5px; box-shadow: 0 9px 25px #2338431c; text-align: left; }
.sk-sample-nav { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 22px; border-bottom: 1px solid #e5ecbb24; }
.sk-sample-nav strong { font-size: 12px; font-weight: 700; letter-spacing: -.4px; }
.sk-sample-nav > span { font-size: 7px; color: #bfd5b9; }
.sk-sample-content { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3px; padding: 38px 15px 38px 22px; min-height: 315px; }
.sk-sample-overline { font-size: 7px; text-transform: uppercase; letter-spacing: .12em; color: #c2d4ad; }
.sk-sample-copy > p { font-size: 9px; line-height: 1.7; margin: 15px 0 24px; }
.sk-target { position: relative; border: 2px solid transparent; color: inherit; background: none; border-radius: 5px; padding: 3px; text-align: left; }
.sk-target:disabled { opacity: 1; cursor: default; }
.sk-target:not(:disabled):hover { border-color: #ffb9869c; }
.sk-target[aria-pressed='true'] { border-color: #ffac6c; box-shadow: 0 0 0 3px #ffad731f; }
.sk-target > i { position: absolute; top: -10px; left: -10px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #25343c; background: #ffaf76; font-style: normal; font: 600 10px var(--body); }
.sk-target[aria-pressed='true'] > i { display: grid; }
.sk-target-headline { display: block; margin-top: 15px; }
.sk-target-headline > span { font-family: var(--display); font-size: clamp(33px,4.2vw,61px); line-height: .98; text-transform: uppercase; display: block; }
.sk-target-button { display: inline-block; background: #eaf1c0; color: #193e31; padding: 11px 13px; border-radius: 4px; font-size: 8px; font-weight: 600; }
.sk-target-button:not(:disabled):hover, .sk-target-button[aria-pressed='true'] { border-color: #ff8b3f; }
.sk-target-image { width: 100%; }
.sk-target-image > svg { width: 100%; height: auto; display: block; }
.sk-sample-foot { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid #e5ecbb24; padding: 13px 22px; font-size: 7px; color: #bfd5b9; }
.sk-target-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sk-target-choices button { font-size: 10px; padding: 9px 17px; border-radius: 999px; color: #546673; background: #f8f9fc; }
.sk-target-choices button[aria-pressed='true'] { background: #ffd1ad; color: #753911; }
.sk-demo-context { padding: 34px 29px; min-width: 0; min-height: 515px; background: #fcfcfa; }
.sk-context-icon { display: grid; place-items: center; width: 56px; height: 56px; color: #68478f; background: #e9dff6; border-radius: 16px; margin: 10px 0 27px; }
.sk-context-icon .icon { width: 31px; height: 31px; }
.sk-demo-context .eyebrow { color: #8a5975; font-size: 9px; margin-bottom: 15px; }
.sk-demo-context h3 { font-size: clamp(30px,3.1vw,42px); line-height: 1.06; margin-bottom: 19px; }
.sk-demo-context p { font-size: 13px; color: #677781; }
.sk-context-note { display: flex; flex-direction: column; gap: 5px; margin-top: 28px; padding: 18px; border-left: 2px solid #d1b5ed; background: #f0ebf6; font-size: 11px; }
.sk-context-note > span { color: #786c8a; }
.sk-note-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.sk-demo-context textarea { display: block; width: 100%; min-height: 143px; resize: vertical; padding: 12px; border: 1px solid #c9cdda; border-radius: 9px; background: #fff; color: #263b49; font-size: 13px; line-height: 1.6; }
.sk-note-meta { display: flex; justify-content: space-between; gap: 10px; color: #77838e; font-size: 9px; margin: 8px 0 19px; }
.sk-transcript { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; padding: 9px 10px; background: #ede7f5; color: #63497d; font-size: 10px; text-align: left; }
.sk-transcript .icon { width: 18px; height: 18px; }
.sk-demo-context .sk-transcript-note { font-size: 9px; margin: 9px 0 22px; color: #7b8390; }
.sk-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border-radius: 11px; background: #203d49; color: #fff; padding: 13px 15px; font-size: 12px; font-weight: 600; }
.sk-primary .icon { width: 19px; height: 19px; }
.sk-primary:hover { background: #365560; }
.sk-review-sheet { background: #fff; border: 1px solid #e6e2e8; border-radius: 2px 2px 25px 2px; box-shadow: 0 8px 18px #2337490b; padding: 20px; }
.sk-review-sheet .sk-review-overline { font-size: 8px; letter-spacing: .17em; color: #9e582e; margin-bottom: 20px; }
.sk-review-sheet h3 { font-size: 32px; }
.sk-review-sheet dl { margin: 0 0 23px; }
.sk-review-sheet dl > div { display: grid; grid-template-columns: 46px 1fr; gap: 8px; margin-top: 6px; }
.sk-review-sheet dt { font-size: 9px; color: #79858a; }
.sk-review-sheet dd { font-size: 10px; margin: 0; }
.sk-review-sheet .sk-review-note { border-top: 1px solid #e5dfdd; padding-top: 17px; color: #2c4551; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sk-review-source { font-size: 8px; color: #9b7463; }
.sk-demo-context .sk-handoff-caption { font-size: 10px; margin: 17px 0; }
.sk-edit { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; padding: 9px 12px; border-radius: 8px; color: #584470; background: #ede7f5; }
.sk-edit .icon { width: 17px; height: 17px; }
.sk-demo-footer { display: flex; justify-content: space-between; gap: 18px; padding: 13px 24px; border-top: 1px solid #e0e3eb; color: #6e7b85; font-size: 9px; }
.sk-demo-footer > span:last-child { color: #6a557f; text-align: right; }
.sk-noscript { padding: 25px; margin: 0; font-size: 13px; }
.sk-desktop figure { margin: 0; }
.sk-desktop figure > img { width: 100%; height: auto; border: 1px solid #d1d8df; border-radius: 15px; box-shadow: 0 22px 65px #3d49671a; }
.sk-desktop figcaption { font-size: 11px; color: #73818c; max-width: 760px; margin-top: 20px; }
.sk-desktop-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 45px; margin-top: 54px; }
.sk-desktop-details h3 { font-size: 28px; }
.sk-desktop-details p { font-size: 14px; color: #5e737d; margin: 16px 0 0; }
.sk-used-here { background: linear-gradient(120deg,#ded7ef,#f0e6ed 60%,#ffe1c7); padding-block: 85px; }
.sk-used-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.sk-used-grid h2 { font-size: clamp(49px,5.5vw,77px); margin: 0; }
.sk-used-grid h2 > span { color: #865b95; }
.sk-used-grid .lead { font-size: 23px; }
.sk-used-grid p:not(.lead):not(.eyebrow) { font-size: 15px; color: #5d6773; }
.sk-used-grid .text-link { background: #fff9; }
.sk-used-grid .text-link .icon { width: 19px; height: 19px; }
.sk-case-close { text-align: center; }
.sk-case-close h2 { font-size: clamp(47px,5.8vw,81px); }
.sk-case-close > p:not(.eyebrow) { max-width: 540px; margin: 26px auto; color: #5c707b; }
@media (max-width:1100px) {
  .sk-feature { padding: 33px; gap: 25px; }
  .sk-case-hero { gap: 25px; }
  .sk-case-copy h1 { font-size: clamp(57px,6.5vw,80px); }
  .sk-cover-comment { margin-left: 15px; padding: 17px; gap: 10px; }
  .sk-demo-workspace { grid-template-columns: minmax(0,1.2fr) minmax(285px,1fr); }
  .sk-demo-canvas { padding-inline: 15px; }
  .sk-sample-content { padding: 30px 12px 30px 16px; min-height: 285px; }
  .sk-target-headline > span { font-size: 40px; }
  .sk-demo-context { padding: 28px 22px; }
  .sk-capability-grid { gap: 22px; }
  .sk-capability-grid h3 { font-size: 26px; }
  .sk-used-grid { gap: 60px; }
}
@media (max-width:850px) {
  .sk-demo-workspace { grid-template-columns: 1fr; }
  .sk-demo-canvas { padding: 25px; }
  .sk-sample-content { min-height: 360px; padding: 32px; }
  .sk-target-headline > span { font-size: 63px; }
  .sk-sample-copy > p { font-size: 11px; }
  .sk-target-button { font-size: 10px; }
  .sk-demo-context { min-height: 380px; padding: 28px; }
  .sk-demo-context > div { max-width: 580px; margin-inline: auto; }
  .sk-demo-context textarea { min-height: 110px; }
  .sk-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px; }
}
@media (max-width:760px) {
  .sk-feature { grid-template-columns: 1fr; padding: 30px 24px; margin-bottom: 60px; gap: 16px; border-radius: 22px; }
  .sk-feature-copy h3 { font-size: 45px; }
  .sk-feature-art { padding: 20px 5px 36px; }
  .sk-feature-note { padding: 13px; right: 0; }
  .sk-feature-note .icon { display: none; }
  .sk-feature-app > div > span { font-size: 7px; }
  .nav-screenkit { padding: 14px; gap: 12px; }
  .nav-screenkit > img { width: 40px; height: 40px; border-radius: 10px; }
  .nav-screenkit strong { font-size: 16px; }
  .nav-screenkit small { font-size: 10px; }
  .sk-case-hero { grid-template-columns: 1fr; gap: 28px; padding-block: 26px 40px; }
  .sk-back { margin-bottom: 25px; }
  .sk-product-id { margin-bottom: 24px; }
  .sk-case-copy h1 { font-size: clamp(51px,10.3vw,77px); }
  .sk-case-copy .lead { font-size: 17px; }
  .sk-cover { padding: 22px 7px 15px; }
  .sk-cover::before { inset: 0; }
  .sk-cover-comment { margin-left: 25px; }
  .sk-cover-comment strong { font-size: 21px; }
  .sk-cover-caption { font-size: 9px; }
  .sk-project-facts { grid-template-columns: 1fr; gap: 15px; padding-block: 22px; }
  .sk-project-facts > div { display: grid; grid-template-columns: 80px 1fr; gap: 18px; }
  .sk-project-facts strong { font-size: 12px; }
  .sk-challenge { grid-template-columns: 1fr; gap: 15px; }
  .sk-challenge h2 { font-size: 56px; }
  .sk-challenge .lead { margin-top: 0; font-size: 21px; }
  .sk-section-heading { display: block; margin-bottom: 32px; }
  .sk-section-heading h2 { font-size: 43px; }
  .sk-section-heading > p { margin-top: 25px; max-width: 500px; font-size: 15px; }
  .sk-capabilities, .sk-demo-section, .sk-used-here { padding-block: 60px; }
  .sk-capability-grid { margin-top: 36px; gap: 30px 23px; }
  .sk-capability-grid h3 { font-size: 29px; }
  .sk-capability-grid p { font-size: 12px; }
  .sk-demo { border-radius: 13px; }
  .sk-demo-chrome { padding: 14px; }
  .sk-demo-brand { gap: 8px; flex-wrap: wrap; }
  .sk-demo-brand > span { display: none; }
  .sk-demo-brand strong { font-size: 13px; }
  .sk-demo-brand img { width: 25px; height: 25px; border-radius: 6px; }
  .sk-reset { font-size: 9px; padding: 8px; }
  .sk-demo-steps { padding: 12px; gap: 6px; }
  .sk-demo-steps button { flex-direction: column; align-items: start; gap: 8px; font-size: 10px; line-height: 1.35; padding: 10px 8px; }
  .sk-demo-steps button > span { width: 23px; height: 23px; font-size: 8px; }
  .sk-demo-canvas { padding: 15px 12px 20px; }
  .sk-canvas-label { font-size: 8px; }
  .sk-canvas-label > span:last-child { display: none; }
  .sk-sample-nav { padding: 16px 13px; }
  .sk-sample-nav strong { font-size: 10px; }
  .sk-sample-nav > span { font-size: 6px; }
  .sk-sample-content { padding: 25px 8px 25px 14px; min-height: 280px; grid-template-columns: 1.2fr .8fr; }
  .sk-sample-overline { font-size: 6px; }
  .sk-target-headline > span { font-size: clamp(30px,8.5vw,51px); }
  .sk-sample-copy > p { font-size: 8px; }
  .sk-target-button { font-size: 7px; padding: 9px 7px; }
  .sk-sample-foot { padding: 12px 14px; font-size: 6px; }
  .sk-target-choices { gap: 7px; margin-top: 17px; }
  .sk-target-choices button { flex: 1; padding: 9px; font-size: 10px; }
  .sk-demo-context { padding: 25px 19px; min-height: 410px; }
  .sk-demo-context h3 { font-size: 36px; }
  .sk-demo-context textarea { font-size: 16px; min-height: 140px; }
  .sk-demo-footer { display: block; padding: 13px 16px; line-height: 1.5; font-size: 8px; }
  .sk-demo-footer > span { display: block; }
  .sk-demo-footer > span:last-child { text-align: left; margin-top: 5px; }
  .sk-desktop figcaption { font-size: 10px; }
  .sk-desktop-details { grid-template-columns: 1fr; gap: 25px; margin-top: 33px; }
  .sk-desktop-details h3 { font-size: 30px; }
  .sk-desktop-details p { margin-top: 9px; }
  .sk-used-grid { grid-template-columns: 1fr; gap: 30px; }
  .sk-used-grid h2 { font-size: 56px; }
  .sk-used-grid .lead { font-size: 22px; }
  .sk-case-close h2 { font-size: 52px; }
  .sk-case-close > p:not(.eyebrow) { font-size: 16px; }
}
@media (max-width:370px) {
  .sk-case-copy h1 { font-size: 45px; }
  .sk-feature-copy h3 { font-size: 38px; }
  .sk-capability-grid { grid-template-columns: 1fr; }
  .sk-target-headline > span { font-size: 29px; }
  .sk-demo-brand img { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .sk-feature-app, .sk-feature-link .icon, .nav-screenkit > .icon { transition: none; }
}
.motion-paused .sk-feature-app, .motion-paused .sk-feature-link .icon { transition: none; }

/* Portfolio framing only; approved demo styles remain in separate documents. */
.pf-kitey { --pf-paper: #eaf5ff; }
.pf-fizzyfolk { --pf-paper: #fff0cd; }
.pf-morrow-property { --pf-paper: #f0e589; }
.portfolio-layout .mini-approved { background: #ecf1ee; display: grid; place-items: center; }
.mini-approved img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-selector .tab-art img { width: 100%; height: 100%; object-fit: cover; }
.project-selector .tab-kitey .tab-art { background: #eaf5ff; }
.project-selector .tab-fizzyfolk .tab-art { background: #ffe6a9; }
.project-selector .tab-morrow-property .tab-art { background: #f0e589; }
.nav-project-art.pf-nav-art { display: block; padding: 0; overflow: hidden; }
.pf-nav-art img { position: static; width: 100%; height: 100%; object-fit: cover; }
.nav-footnote a { text-decoration: underline; text-underline-offset: 3px; }
.pf-collection { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 55px 38px; }
.pf-card { min-width: 0; }
.pf-card-image { display: grid; place-items: center; aspect-ratio: 1.6; overflow: hidden; border-radius: 20px; background: var(--pf-paper); }
.pf-card-image img { width: 100%; height: 100%; object-fit: contain; }
.pf-card p { max-width: 560px; margin: 16px 0 0; font-size: 16px; }
.pf-card .pf-concept { color: var(--muted); font-size: 12px; margin-top: 10px; }
.pf-collection + .sk-feature { margin-top: 75px; }
.pf-sketchbook { margin-top: 70px; border-top: 1px solid var(--line); padding-top: 28px; }
.pf-sketchbook > p { max-width: 620px; }
.pf-sketchbook-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.pf-sketchbook-links a { display: flex; align-items: center; gap: 24px; padding: 15px 20px; border-radius: 12px; background: #e8ebe7; font-weight: 600; font-size: 15px; }
.pf-sketchbook-links svg { width: 18px; height: 18px; }
.pf-case-intro { padding-top: 45px; padding-bottom: 35px; }
.pf-back { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; margin-bottom: 45px; }
.pf-back svg { width: 18px; height: 18px; }
.pf-case-heading { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.pf-case-heading > div { min-width: 0; }
.pf-case-heading h1 { font-size: clamp(64px,8vw,115px); line-height: .96; margin: 0; }
.pf-case-heading .lead { margin: 20px 0 0; }
.pf-launch { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex-shrink: 0; }
.pf-desktop-note { font-size: 12px; color: var(--muted); }
.pf-truth { max-width: 700px; font-size: 13px; color: var(--muted); margin: 34px 0 0; }
.pf-cover { margin-block: 0; }
.pf-cover img { display: block; width: 100%; height: auto; border-radius: 20px; }
.pf-roles { display: flex; gap: 45px; align-items: baseline; padding-block: 28px; border-bottom: 1px solid var(--line); }
.pf-roles > span { color: var(--muted); font-size: 13px; }
.pf-roles ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px 32px; font-size: 14px; font-weight: 600; }
.pf-story { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; }
.pf-story > div, .pf-notes section { min-width: 0; }
.pf-story h2 { font-size: clamp(40px,4vw,58px); }
.pf-story p { font-size: 17px; }
.pf-notes section + section { margin-top: 32px; }
.pf-notes h3 { font-family: var(--body); text-transform: none; font-size: 20px; letter-spacing: -.4px; }
.pf-motion-section { background: var(--ink); color: var(--paper); padding-block: 75px; }
.pf-motion-section .section-heading { gap: 40px; }
.pf-motion-section .section-heading p:not(.eyebrow) { color: #c1d0d2; max-width: 340px; font-size: 16px; }
.pf-reel { margin: 0; }
.pf-reel video { display: block; width: 100%; height: auto; background: #0c1a22; border-radius: 14px; }
.pf-reel figcaption { font-size: 12px; color: #b5c3c6; padding-top: 16px; }
.pf-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
.pf-details figure { margin: 0; min-width: 0; }
.pf-details img { display: block; width: 100%; height: auto; border-radius: 14px; }
.pf-details figcaption { padding-top: 15px; font-size: 14px; color: var(--muted); }
.pf-build-note { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding-bottom: 65px; }
.pf-build-note h2 { font-size: clamp(36px,4vw,52px); }
.pf-build-note p:not(.eyebrow) { font-size: 16px; }
.pf-case-end { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding-block: 45px 80px; border-top: 1px solid var(--line); }
.pf-case-end h2 { margin-bottom: 25px; font-size: clamp(36px,4vw,54px); }
@media(max-width:1000px) {
  .pf-case-heading { align-items: flex-start; flex-direction: column; gap: 28px; }
  .pf-roles { flex-direction: column; gap: 15px; }
}
@media(max-width:760px) {
  .pf-collection, .pf-story, .pf-details, .pf-build-note { grid-template-columns: minmax(0,1fr); }
  .pf-collection { gap: 40px; }
  .pf-case-intro { padding-top: 28px; }
  .pf-back { margin-bottom: 30px; }
  .pf-case-heading h1 { font-size: clamp(57px,12vw,85px); }
  .pf-case-heading .lead { font-size: 21px; }
  .pf-launch { max-width: 100%; }
  .pf-launch .button { gap: 14px; font-size: 14px; padding-inline: 18px; }
  .pf-truth { margin-top: 28px; }
  .pf-story { gap: 30px; }
  .pf-motion-section { padding-block: 50px; }
  .pf-details { gap: 35px; }
  .pf-build-note { gap: 20px; padding-bottom: 40px; }
  .pf-case-end { flex-direction: column; align-items: flex-start; padding-bottom: 55px; }
}

/* Generated photography stays beneath the existing colour and readable copy. */
.service-card { isolation: isolate; }
.service-photo {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  z-index: 0; pointer-events: none;
  mask-image: linear-gradient(180deg,transparent 3%,#00000012 34%,#00000038 61%,#000000cc 83%,#000 100%);
  -webkit-mask-image: linear-gradient(180deg,transparent 3%,#00000012 34%,#00000038 61%,#000000cc 83%,#000 100%);
}
.service-photo img {
  position: absolute; width: 132%; max-width: none; height: auto;
  right: -19%; bottom: -3%; opacity: .72;
}
.service-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  z-index: 1; pointer-events: none; opacity: .52;
  background: radial-gradient(ellipse at top right,#ffbd80,transparent 72%),#ff7635;
}
.service-card[data-service='content']::before { background: linear-gradient(130deg,#d5bfff,#bc9aee); }
.service-card[data-service='connections']::before { background: linear-gradient(130deg,#b0eaf0,#7acfdc); }
.service-card:nth-child(4)::before { background: radial-gradient(ellipse at top right,#46535d,transparent 75%),#10242e; }
.service-card > :is(.service-icon,h3,p,.round-link) { position: relative; z-index: 3; }

/* Small props sit behind the character and copy, at different focal distances. */
.hero-character-shell { isolation: isolate; }
.hero-character-shell .hero-v2 { position: relative; z-index: 1; }
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-prop {
  position: absolute; display: block; width: 120px;
  transform: translate3d(var(--prop-x,0px),var(--prop-y,0px),0);
}
.hero-prop img { width: 100%; height: auto; transform: rotate(var(--prop-angle,0deg)); }
.hero-atmosphere.is-moving .hero-prop { will-change: transform; }
.prop-bulb { left: 51%; top: 17%; width: clamp(85px,8.5vw,150px); opacity: .45; filter: blur(3.2px); --prop-angle: -12deg; }
.prop-cursor { display: none; }
/* An oversized, defocused foreground cursor enters from outside the canvas. */
.prop-front { --front-size: clamp(240px,20vw,340px); left: calc(var(--front-size)*-.30); top: -70px; width: var(--front-size); opacity: .24; filter: blur(7px); --prop-angle: 180deg; }
.prop-spark { right: 4%; top: 27%; width: clamp(75px,7vw,125px); opacity: .29; filter: blur(3px); --prop-angle: 14deg; }
.prop-plane { left: 42%; bottom: 16%; width: clamp(100px,10vw,175px); opacity: .37; filter: blur(.5px); --prop-angle: -14deg; }
.prop-far { left: -2%; bottom: 18%; width: 125px; opacity: .16; filter: blur(5px); --prop-angle: 30deg; }
.prop-near { right: -3%; bottom: 5%; width: clamp(155px,15vw,240px); opacity: .19; filter: blur(7px); --prop-angle: 38deg; }

/* Same DM Sans 600 outlines as the wordmark, now using one common em size. */
.footer-playground:not(.physics-ready) { --footer-letter-em: clamp(125px,14vw,197px); }
.footer-playground:not(.physics-ready) .piece-letter[data-letter='s'] { width: calc(var(--footer-letter-em)*.45); height: calc(var(--footer-letter-em)*.54375); }
.footer-playground:not(.physics-ready) .piece-letter[data-letter='c'] { width: calc(var(--footer-letter-em)*.5125); height: calc(var(--footer-letter-em)*.54375); }
.footer-playground:not(.physics-ready) .piece-letter[data-letter='p'] { width: calc(var(--footer-letter-em)*.55); height: calc(var(--footer-letter-em)*.75); }
.footer-playground:not(.physics-ready) .piece-letter[data-letter='r'] { width: calc(var(--footer-letter-em)*.325); height: calc(var(--footer-letter-em)*.53125); }
.footer-playground:not(.physics-ready) .piece-letter[data-letter='k'] { width: calc(var(--footer-letter-em)*.49375); height: calc(var(--footer-letter-em)*.7375); }
.footer-playground:not(.physics-ready) .piece-letter[data-letter='t'] { width: calc(var(--footer-letter-em)*.35625); height: calc(var(--footer-letter-em)*.65625); }

@media (max-width:760px) {
  /* Stationary accents stay around the portrait, clear of the copy and controls. */
  .prop-plane, .prop-far, .prop-near, .prop-front { display: none; }
  .prop-bulb { left: max(0px,calc(50% - 225px)); top: auto; bottom: clamp(235px,64vw,320px); width: clamp(82px,23vw,110px); opacity: .45; filter: blur(2.4px); --prop-angle: -12deg; }
  .prop-cursor { display: block; left: max(2%,calc(50% - 215px)); top: auto; bottom: clamp(75px,21vw,100px); width: clamp(70px,20vw,105px); opacity: .35; filter: blur(1.2px); --prop-angle: -26deg; }
  .prop-spark { right: -1%; top: auto; bottom: clamp(200px,55vw,295px); width: clamp(65px,17vw,90px); opacity: .31; filter: blur(1.5px); }
  .hero-prop { transform: none; }
  .scroll-story-stage.oversight-section { display: flex; flex-direction: column; gap: 0; }
  .story-scene-start { display: none; }
  .story-scene-final { order: 1; width: 100%; margin: 0; }
  .story-final-copy { text-align: center; }
  .story-final-copy > p { margin-inline: auto; }
  .story-final-copy h2 { text-wrap: balance; }
  .story-scene-message { order: 2; width: 100%; margin: 40px auto 0; }
  .story-message { font-size: clamp(22px,5.8vw,28px); line-height: 1.65; }
  .story-scene-message > .eyebrow { margin-bottom: 16px; }
  .footer-playground:not(.physics-ready) { --footer-letter-em: clamp(85px,23vw,114px); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-prop { transform: none; }
}
body.motion-paused .hero-prop { transform: none; }

/* A red thread through Jean's original identity archive. */
.ptg-case { --ptg-red:#bb1e28; --ptg-charcoal:#262d30; --ptg-soft:#eeebe6; background:#f8f7f3; }
.ptg-case figure { margin:0; min-width:0; }
.ptg-case figcaption { font-size:12px; color:#657174; line-height:1.5; }
.ptg-case .eyebrow { color:var(--ptg-red); }
.ptg-case p { text-wrap:pretty; }
.ptg-case .icon { width:20px; height:20px; flex:none; }
.ptg-identity { position:relative; background:#fff; }
.ptg-stage { overflow:clip; background:#fff; }
.ptg-stage-inner { padding-block:32px 26px; }
.ptg-topline { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:25px; border-bottom:1px solid #23313a25; }
.ptg-topline > a { display:inline-flex; align-items:center; gap:10px; font-size:13px; }
.ptg-topline > span { font-size:10px; font-weight:600; letter-spacing:.1em; }
.ptg-intro-layout { display:grid; grid-template-columns:.94fr 1.06fr; gap:6%; align-items:center; padding-block:55px; }
.ptg-intro-copy h1 { font-size:clamp(60px,6.5vw,97px); line-height:.99; max-width:620px; }
.ptg-intro-copy h1 > span { display:block; color:var(--ptg-red); margin-top:12px; }
.ptg-intro-dek { max-width:370px; font-size:17px; color:#536165; margin-top:28px; }
.ptg-project-link { display:inline-flex; align-items:center; gap:20px; border-bottom:1px solid #778287; padding-block:12px; font-size:13px; font-weight:600; }
.ptg-project-link .icon { transform:rotate(90deg); }
.ptg-logo-transition { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:20px; min-width:0; align-items:center; }
.ptg-logo-transition figure { display:flex; flex-direction:column; align-items:center; text-align:center; gap:25px; }
.ptg-logo-transition img { width:100%; height:250px; object-fit:contain; }
.ptg-logo-before img { mix-blend-mode:multiply; }
.ptg-logo-after img { max-width:280px; }
.ptg-logo-transition figcaption span { display:block; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#23363e; font-size:10px; margin-bottom:8px; }
.ptg-orbit { display:none; }
.ptg-stage-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 28px; border-top:1px solid #23313a25; padding-top:22px; font-size:10px; letter-spacing:.02em; color:#627175; }
.ptg-scroll-hint { display:none; }
.ptg-project-facts { scroll-margin-top:115px; display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:25px; padding-block:34px; border-bottom:1px solid #cfd4d0; }
.ptg-project-facts span, .ptg-project-facts small { display:block; font-size:12px; color:#667276; }
.ptg-project-facts span { margin-bottom:8px; }
.ptg-project-facts strong { display:block; font-size:17px; font-weight:600; margin-bottom:3px; }
.ptg-context, .ptg-continuity { display:grid; grid-template-columns:1fr 1fr; gap:8%; }
.ptg-context h2, .ptg-continuity h2 { font-size:clamp(44px,5vw,70px); }
.ptg-context .lead, .ptg-continuity .lead { font-size:23px; line-height:1.5; }
.ptg-context p:not(.eyebrow):not(.lead), .ptg-continuity p:not(.eyebrow):not(.lead) { color:#536369; font-size:16px; }
.ptg-system { background:var(--ptg-soft); padding-block:80px; }
.ptg-section-heading { display:flex; justify-content:space-between; align-items:end; gap:45px; margin-bottom:45px; }
.ptg-section-heading h2 { margin:0; font-size:clamp(43px,4.8vw,68px); }
.ptg-section-heading > p { max-width:360px; margin:0 0 3px; color:#536369; font-size:16px; }
.ptg-stationery img { width:100%; height:auto; border-radius:15px; }
.ptg-stationery figcaption { margin-top:15px; }
.ptg-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6%; margin-top:55px; }
.ptg-principles > div > span { display:block; color:var(--ptg-red); font-size:12px; margin-bottom:16px; }
.ptg-principles h3 { font-family:var(--body); text-transform:none; letter-spacing:-.035em; font-size:23px; }
.ptg-principles p { font-size:15px; color:#536369; margin:16px 0 0; }
.ptg-road { background:var(--ptg-charcoal); color:#fff; padding-block:85px; overflow:hidden; }
.ptg-road .eyebrow { color:#ffaaaa; }
.ptg-road .ptg-section-heading > p { color:#c7cece; }
.ptg-van-main { padding:20px 4% 22px; border-radius:22px; background:#e5e4e1; }
.ptg-van-main img { width:100%; height:auto; }
.ptg-van-main figcaption { text-align:center; color:#536165; }
.ptg-van-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.ptg-van-pair figure { border-radius:20px; overflow:hidden; background:#d9d9d5; padding:12px 16px 20px; }
.ptg-van-pair img { width:100%; height:auto; }
.ptg-van-pair figcaption { text-align:center; color:#536165; }
.ptg-production-note { font-size:12px; color:#b6c1c3; margin:28px 0 0; }
.ptg-facade-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.ptg-facade-grid img { width:100%; height:auto; border-radius:14px; }
.ptg-facade-grid figcaption { margin-top:16px; }
.ptg-everyday { background:#eeebe6; padding-block:80px; }
.ptg-everyday-grid { display:grid; grid-template-columns:1.05fr 1fr 1fr; align-items:center; gap:35px; }
.ptg-everyday h2 { font-size:clamp(44px,4.5vw,65px); }
.ptg-everyday p:not(.eyebrow) { font-size:16px; color:#536369; max-width:320px; }
.ptg-everyday figure { align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.ptg-everyday figure img { width:100%; height:auto; max-height:510px; object-fit:contain; border-radius:12px; }
.ptg-everyday figcaption { margin-top:16px; }
.ptg-case p.ptg-small-note { font-size:12px; color:#68787d; }
.ptg-case-end { display:flex; align-items:end; justify-content:space-between; gap:40px; border-top:1px solid #cfd4d0; padding-block:45px 90px; }
.ptg-case-end h2 { font-size:clamp(39px,4.8vw,65px); margin-bottom:28px; }
.ptg-case-end .button { font-size:14px; gap:20px; }

/* Small portfolio entry points use the original livery, not a synthetic cover. */
.ptg-feature { display:grid; grid-template-columns:.85fr 1.15fr; gap:25px; align-items:center; margin-bottom:48px; background:#e9e6e0; border-radius:26px; overflow:hidden; }
.ptg-feature-copy { padding:42px 0 42px 44px; }
.ptg-feature-copy .eyebrow { color:#a81c25; font-size:10px; }
.ptg-feature h3 { font-size:clamp(37px,4.1vw,57px); }
.ptg-feature-copy > p:not(.eyebrow) { max-width:360px; font-size:15px; color:#52646b; }
.ptg-feature-credit { display:block; margin:23px 0 13px; font-size:10px; color:#63757b; }
.ptg-feature-link { display:inline-flex; align-items:center; gap:24px; color:#a81c25; font-size:13px; font-weight:600; }
.ptg-feature-link svg { width:20px; height:20px; transition:transform .2s; }
.ptg-feature:hover .ptg-feature-link svg { transform:translateX(5px); }
.ptg-feature-art { align-self:stretch; display:flex; flex-direction:column; justify-content:center; min-width:0; background:#d6d6d2; padding:25px 15px; }
.ptg-feature-art img { width:100%; height:auto; }
.ptg-feature-art > span { display:block; text-align:center; font-size:9px; letter-spacing:.12em; color:#627071; margin-top:5px; }
.nav-work-features { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
.nav-work-features > .nav-screenkit { margin:0; }
.nav-portughes { display:flex; align-items:center; gap:14px; padding:18px; border-radius:14px 25px 14px 14px; background:#eee6e1; color:#203642; }
.nav-portughes > img { width:49px; height:49px; object-fit:contain; }
.nav-portughes > span { display:flex; flex-direction:column; }
.nav-portughes strong { font-size:19px; letter-spacing:-.4px; }
.nav-portughes small { font-size:11px; color:#746261; }
.nav-portughes > svg { width:22px; height:22px; margin-left:auto; flex:none; }

/* Progressive enhancement: both originals remain readable when motion is off. */
@media(min-height:700px) and (prefers-reduced-motion:no-preference) {
  .ptg-identity.is-animated { height:235svh; }
  .ptg-identity.is-animated .ptg-stage { position:sticky; top:16px; height:calc(100svh - 32px); min-height:660px; }
  .is-animated .ptg-stage-inner { height:100%; display:flex; flex-direction:column; }
  .is-animated .ptg-intro-layout { flex:1; padding-block:25px; }
  .is-animated .ptg-logo-transition { display:block; height:390px; }
  .is-animated .ptg-logo-transition figure { position:absolute; inset:0; justify-content:center; gap:25px; }
  .is-animated .ptg-logo-before img { height:280px; max-width:470px; }
  .is-animated .ptg-logo-after img { height:290px; max-width:320px; }
  .is-animated .ptg-logo-before { opacity:var(--ptg-old,1); transform:translate3d(calc(var(--ptg-shift,0) * -34px),0,0) scale(var(--ptg-old-scale,1)); filter:blur(var(--ptg-blur,0px)); }
  .is-animated .ptg-logo-after { opacity:var(--ptg-new,0); transform:translate3d(0,var(--ptg-new-y,20px),0) scale(var(--ptg-new-scale,.93)); clip-path:inset(0 var(--ptg-wipe,100%) 0 0); }
  .is-animated .ptg-orbit { display:block; position:absolute; width:340px; height:340px; border:1px solid #bb1e2828; border-radius:50%; left:50%; top:42%; opacity:var(--ptg-orbit,0); transform:translate(-50%,-50%) scale(var(--ptg-orbit-scale,.7)); }
  .is-animated .ptg-scroll-hint { display:inline-flex; gap:12px; align-items:center; }
  .ptg-scroll-hint i { font-style:normal; color:var(--ptg-red); font-size:17px; }
  .is-animated .ptg-intro-copy h1 > span { opacity:var(--ptg-title,.32); }
}
@media(max-width:1000px) {
  .ptg-intro-layout { gap:3%; }
  .ptg-intro-copy h1 { font-size:65px; }
  .ptg-logo-transition img { height:185px; }
  .ptg-stage-foot { gap:10px 20px; }
  .ptg-section-heading { align-items:start; }
  .ptg-everyday-grid { gap:25px; }
  .ptg-feature-copy { padding:32px 0 32px 30px; }
}
@media(max-width:760px) {
  .ptg-stage-inner { padding-top:22px; }
  .ptg-topline { padding-bottom:18px; gap:10px; }
  .ptg-topline > span { font-size:8px; }
  .ptg-topline > a { font-size:12px; }
  .ptg-intro-layout { grid-template-columns:1fr; gap:26px; padding-block:32px; }
  .ptg-intro-copy { text-align:center; }
  .ptg-intro-copy .eyebrow { font-size:10px; margin-bottom:12px; }
  .ptg-intro-copy h1 { font-size:clamp(43px,10.8vw,64px); }
  .ptg-intro-copy h1 > span { margin-top:4px; }
  .ptg-intro-dek { margin:20px auto 8px; font-size:14px; max-width:300px; }
  .ptg-project-link { font-size:12px; padding-block:9px; }
  .ptg-logo-transition { gap:12px; }
  .ptg-logo-transition figure { gap:15px; }
  .ptg-logo-transition img { height:155px; }
  .ptg-logo-transition figcaption { font-size:10px; }
  .ptg-logo-transition figcaption span { font-size:9px; }
  .ptg-stage-foot { justify-content:center; text-align:center; font-size:9px; gap:9px; }
  .ptg-stage-foot > span:first-child { width:100%; }
  .ptg-project-facts { grid-template-columns:1fr; gap:21px; padding-block:28px; }
  .ptg-project-facts > div { display:grid; grid-template-columns:100px 1fr; gap:0 16px; }
  .ptg-project-facts span { grid-row:1/3; margin-top:2px; }
  .ptg-project-facts strong { font-size:15px; }
  .ptg-project-facts small { font-size:11px; }
  .ptg-context, .ptg-continuity { grid-template-columns:1fr; gap:26px; }
  .ptg-context .lead, .ptg-continuity .lead { font-size:20px; }
  .ptg-system, .ptg-road, .ptg-everyday { padding-block:55px; }
  .ptg-section-heading { display:block; margin-bottom:30px; }
  .ptg-section-heading > p { margin-top:24px; max-width:520px; }
  .ptg-principles { grid-template-columns:1fr; gap:30px; margin-top:34px; }
  .ptg-principles > div { padding-top:22px; border-top:1px solid #23313a20; }
  .ptg-principles > div > span { margin-bottom:12px; }
  .ptg-principles p { margin-top:12px; }
  .ptg-van-main { padding:12px 0 18px; }
  .ptg-van-pair { gap:12px; }
  .ptg-van-pair figure { border-radius:12px; padding:10px 0 14px; }
  .ptg-van-pair figcaption { padding-inline:8px; font-size:10px; }
  .ptg-facade-grid { grid-template-columns:1fr; gap:32px; }
  .ptg-everyday-grid { grid-template-columns:1fr 1fr; align-items:start; gap:30px 18px; }
  .ptg-everyday-grid > div { grid-column:1/-1; }
  .ptg-everyday p:not(.eyebrow) { max-width:500px; }
  .ptg-everyday figure { align-self:start; }
  .ptg-case-end { align-items:start; flex-direction:column; padding-block:35px 60px; }
  .ptg-feature { grid-template-columns:1fr; gap:0; margin-bottom:35px; }
  .ptg-feature-copy { padding:30px; }
  .ptg-feature-art { padding:18px 15px 23px; }
  .nav-work-features { grid-template-columns:1fr; gap:12px; }
}
@media(max-width:760px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
  .ptg-identity.is-animated { height:220svh; }
  .ptg-identity.is-animated .ptg-stage { min-height:660px; }
  .is-animated .ptg-intro-layout { gap:10px; align-content:center; padding-block:15px; }
  .is-animated .ptg-logo-transition { height:clamp(235px,33svh,315px); }
  .is-animated .ptg-logo-before img { height:180px; max-width:360px; }
  .is-animated .ptg-logo-after img { height:200px; max-width:225px; }
  .is-animated .ptg-orbit { width:220px; height:220px; }
  .is-animated .ptg-logo-transition figure { gap:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .ptg-feature-link svg { transition:none; }
}