/* RoxArt / studio edition. Type, inspection and transformation. */
img{height:auto}.site-header{border-bottom-color:#272b25}.header-inner{height:82px}.wordmark{letter-spacing:-1.9px}.brand-art{color:var(--lime);font-weight:400}.brand-caption{letter-spacing:.13em;font-size:10px}.ticker{padding:17px 0}.ticker-track{font-size:21px}.ticker span{font-size:28px}.sample-cta{border:0;cursor:pointer}.sample-cta:hover{filter:brightness(1.15)}
.studio-hero{position:relative;height:calc(165svh - 82px);min-height:1080px;background:#101112;isolation:isolate}.hero-sticky{position:sticky;top:0;height:calc(100svh - 82px);min-height:655px;max-height:1000px;overflow:clip}.hero-stage{height:100%;display:flex;flex-direction:column;padding-top:34px;gap:15px;--story-progress:0;--mark-opacity:1;--mark-shift:0px;--card-scale:.76;--card-rotate:8deg;--card-x:0%;--card-y:8%;--lens-x:41%;--lens-y:53%;--lens-radius:100px}.studio-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:85px;align-items:end;flex-shrink:0;position:relative;z-index:4}.studio-intro .eyebrow{color:#9ba394;font-size:11px;letter-spacing:.17em;margin-bottom:21px}.studio-intro h1{font-size:clamp(45px,4.9vw,72px);line-height:1.03;font-weight:400;letter-spacing:-.06em;max-width:800px}.studio-intro h1 em{font-style:normal;color:var(--lime)}.studio-intro-right{padding-bottom:6px;max-width:340px;justify-self:end}.studio-intro-right>p{font-size:15px;color:#aeb6a8;line-height:1.65;margin-bottom:22px}.studio-intro-right .button{min-height:48px;padding:10px 20px;font-size:13px;gap:44px}.hero-canvas{position:relative;flex:1;min-height:280px;margin-top:4px;touch-action:pan-y;isolation:isolate}.hero-mark{position:absolute;left:-.025em;top:46%;transform:translateY(calc(-54% + var(--mark-shift))) scale(calc(1 - var(--story-progress)*.1));transform-origin:35% 50%;font-size:clamp(235px,27vw,395px);font-weight:500;letter-spacing:-.09em;line-height:.85;white-space:nowrap;opacity:var(--mark-opacity);color:#eef1e9;user-select:none;pointer-events:none}.mark-o{color:var(--lime)}.mark-art{display:inline-block;font-size:.16em;letter-spacing:-.07em;vertical-align:top;margin:0 0 0 .34em;line-height:1.2;transform:translateY(.4em);color:#b3bcaa}.hero-mini-site{position:absolute;width:42%;max-width:510px;right:0;top:50%;transform:translate(var(--card-x),calc(-50% + var(--card-y))) rotate(var(--card-rotate)) scale(var(--card-scale));transform-origin:center;background:#e9eee0;color:#274132;border:1px solid #8f9f78;border-radius:3px;aspect-ratio:1.5;overflow:hidden;box-shadow:0 20px 60px #0005;opacity:calc(.75 + var(--story-progress)*.25);pointer-events:none}.mini-topline{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #27413222;padding:12px 18px;font-size:9px}.mini-topline>span:first-child{font-size:19px;font-weight:700;letter-spacing:-1px}.mini-body{position:relative;z-index:1;padding:20px 22px;max-width:78%}.mini-kicker{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.1em}.mini-body strong{display:block;font-size:clamp(25px,2.9vw,43px);font-weight:500;letter-spacing:-.055em;line-height:1.05;margin:10px 0}.mini-copy{display:block;font-size:9px;line-height:1.5;max-width:195px}.mini-button{display:inline-block;margin-top:12px;padding:5px 11px;background:#274132;color:#e9eee0;border-radius:50px;font-size:8px}.mini-monogram{position:absolute;right:14px;bottom:29px;font-size:85px;font-weight:700;line-height:1;letter-spacing:-9px;transform:rotate(-9deg);color:#65734c44}.mini-foot{position:absolute;bottom:8px;left:22px;font-size:7px;text-transform:uppercase;letter-spacing:.1em;opacity:.65}.hero-stage[data-step="0"] .hero-mini-site{filter:saturate(.4)}.hero-stage[data-step="1"] .hero-mini-site{filter:saturate(.7)}.hero-stage[data-step="2"] .hero-mini-site{filter:saturate(1)}.hero-stage[data-step="1"] .mini-copy{opacity:.7}.hero-stage[data-step="2"] .mini-topline{border-bottom-color:#27413244}.inspection-layer{position:absolute;inset:0;clip-path:circle(var(--lens-radius) at var(--lens-x) var(--lens-y));opacity:0;pointer-events:none;background:#182013;z-index:2;transition:opacity .25s}.hero-canvas.is-inspecting .inspection-layer{opacity:1}.inspection-grid{position:absolute;inset:0;background-image:linear-gradient(#c4ed3428 1px,transparent 1px),linear-gradient(90deg,#c4ed3428 1px,transparent 1px);background-size:25px 25px}.outline-mark{color:transparent;-webkit-text-stroke:1px var(--lime);opacity:1}.outline-mark .mark-art{color:transparent}.wire-mini{position:absolute;width:42%;right:0;top:50%;aspect-ratio:1.5;border:1px solid #c9ee69;transform:translate(var(--card-x),calc(-50% + var(--card-y))) rotate(var(--card-rotate)) scale(var(--card-scale));padding:18px}.wire-mini>span{display:block;width:100%;height:18px;border-bottom:1px solid #c9ee6999;margin-bottom:27px}.wire-mini>div{border:1px solid #c9ee69;width:65%;height:27px;margin-bottom:9px}.wire-mini>div:nth-child(3){width:48%}.wire-mini>i{display:block;margin-top:19px;border:1px solid #c9ee69;width:24%;height:18px}.wire-mini footer{display:flex;gap:10px;position:absolute;bottom:20px;left:18px;right:18px}.wire-mini footer i{border:1px solid #c9ee6966;flex:1;height:21px}.inspection-label{position:absolute;left:10px;bottom:25px;color:var(--lime);font-size:10px;letter-spacing:.15em}.hero-lens{position:absolute;z-index:3;left:var(--lens-x);top:var(--lens-y);width:calc(var(--lens-radius)*2);height:calc(var(--lens-radius)*2);transform:translate(-50%,-50%);border:1px solid #d5ff4588;border-radius:50%;background:#d5ff4504;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--lime);box-shadow:inset 0 0 35px #d5ff4508;transition:background .2s,border-color .2s;cursor:crosshair}.hero-lens:hover,.hero-lens[aria-pressed=true]{border-color:var(--lime);background:#d5ff4509}.lens-cross{font-size:26px;line-height:1;font-weight:400}.lens-word{font-size:10px;text-transform:uppercase;letter-spacing:.17em}.canvas-caption{position:absolute;left:0;bottom:10px;font-size:11px;letter-spacing:.05em;color:#b4bdae}.canvas-hint{position:absolute;right:0;bottom:10px;font-size:11px;color:#788370;max-width:250px;text-align:right}.hero-story-bar{display:flex;gap:22px;align-items:center;padding:19px 0 18px;border-top:1px solid #30382c;position:relative;flex-shrink:0;z-index:4}.story-steps{display:flex;gap:24px;flex-shrink:0}.story-steps button{border:0;background:none;font-size:13px;color:#89927f;padding:4px 0;display:flex;gap:8px;align-items:center}.story-steps button span{font-size:9px}.story-steps button[aria-pressed=true]{color:var(--lime)}.story-caption{font-size:12px;color:#8e9985;margin-left:auto}.story-replay{border:0;background:none;color:#c4cdbb;font-size:12px;display:flex;align-items:center;gap:8px;padding:4px}.story-replay>span:first-child{font-size:21px}.hero-skip{font-size:24px;color:var(--lime);padding-inline:10px}.story-progress{height:2px;background:#2f352b;flex-shrink:0}.story-progress>span{display:block;height:100%;width:calc(var(--story-progress)*100%);background:var(--lime)}
/* Open a service, then explore what it means. */
.service-entry{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}.service-entry>.service-row{border:0;list-style:none;cursor:pointer;margin:0;transition:color .2s,background .2s}.service-entry>.service-row::-webkit-details-marker{display:none}.service-entry>.service-row:hover h3{color:var(--lime)}.service-entry>.service-row:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}.service-entry .service-arrow{transition:transform .35s var(--ease);transform-origin:center}.service-entry[open] .service-arrow{transform:rotate(90deg);color:#f5f8ef}.service-entry[open] summary h3{color:var(--lime)}.service-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;padding:3px 0 40px 103px;animation:panel-in .45s var(--ease)}@keyframes panel-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.service-example{background:#20271c;border:1px solid #45543a;border-radius:8px;min-width:0;overflow:hidden}.example-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 17px;border-bottom:1px solid #45543a;font-size:10px;letter-spacing:.03em;color:#a1ae94}.example-top span:last-child{font-size:9px;white-space:nowrap}.service-detail-copy{align-self:center}.service-detail-copy>.eyebrow{color:#8b9b7c;font-size:10px;margin-bottom:17px}.service-detail-copy h4{font-size:27px;line-height:1.15;letter-spacing:-.04em;font-weight:500;margin:0 0 20px}.service-detail-copy>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.8;max-width:400px}.service-detail-copy .deliverables{font-size:12px!important;color:#819372!important;margin-top:20px}.service-cta{display:inline-flex;gap:25px;font-size:13px;color:var(--lime);border-bottom:1px solid #6d833f;margin-top:27px;padding-bottom:7px}.service-cta:hover{color:#f2ffcb}.service-secondary{display:block;font-size:12px;margin-top:18px;color:#a9b69c;text-decoration:underline;text-underline-offset:4px}.build-canvas{margin:18px;min-height:242px;background:#e9eee0;position:relative;padding:18px;color:#274132;overflow:hidden;border:1px solid #61764b;transition:background .5s,color .5s}.build-nav{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.8px;padding-bottom:17px;border-bottom:1px solid #27413233}.build-nav i{height:4px;width:25px;background:#27413255}.build-nav i:first-of-type{margin-left:auto}.build-headline{font-size:36px;line-height:1.02;letter-spacing:-1.8px;margin-top:20px;position:relative;z-index:1}.build-lines{margin-top:12px;display:grid;gap:5px}.build-lines i{height:4px;background:#27413244;width:44%}.build-lines i:last-child{width:32%}.build-cta{display:inline-block;background:#274132;color:#e9eee0;font-size:9px;border-radius:50px;padding:6px 12px;margin-top:18px}.build-mark{position:absolute;right:15px;bottom:20px;font-size:85px;letter-spacing:-9px;line-height:1;transform:rotate(-9deg);opacity:.6}.build-demo[data-build-stage="0"] .build-canvas{background:transparent;color:transparent}.build-demo[data-build-stage="0"] .build-nav{border-color:#748764;color:transparent}.build-demo[data-build-stage="0"] .build-headline{border:1px solid #8a9c74;max-width:78%}.build-demo[data-build-stage="0"] .build-lines i{background:#7b8b6866}.build-demo[data-build-stage="0"] .build-cta{background:transparent;color:transparent;border:1px solid #8a9c74}.build-demo[data-build-stage="0"] .build-mark{opacity:0}.build-demo[data-build-stage="1"] .build-canvas{background:#292c27;color:#e5eadc}.build-demo[data-build-stage="1"] .build-cta{color:#f5f6f1;background:#5c6a50}.build-demo[data-build-stage="1"] .build-mark{opacity:.15;transform:rotate(0deg)}.build-controls{display:flex;gap:4px;padding:0 17px 16px}.build-controls button{border:1px solid #4e6041;background:none;border-radius:50px;padding:6px 12px;font-size:11px;color:#99aa8c;transition:background .2s}.build-controls button[aria-pressed=true]{background:var(--lime);color:#182013;border-color:var(--lime)}.build-controls .build-play{margin-left:auto;font-size:18px;padding:1px 13px;color:var(--lime)}.audit-canvas{position:relative;background:#e9eee0;color:#274132;margin:18px;padding:20px;min-height:228px}.audit-nav{display:flex;align-items:center;justify-content:space-between;font-size:20px;font-weight:700;letter-spacing:-1px}.audit-mobile{font-size:20px;font-weight:400}.audit-headline{font-size:33px;line-height:1.05;letter-spacing:-1.5px;max-width:220px;margin-top:24px}.audit-lines{display:grid;gap:5px;margin-top:11px}.audit-lines i{height:4px;width:48%;background:#71806055}.audit-lines i:last-child{width:36%}.audit-cta{font-size:10px;padding:5px 0;color:#829175;margin-top:17px}.hotspot{border:1px solid var(--lime);background:#1c2b15;color:var(--lime);width:30px;height:30px;border-radius:50%;position:absolute;font-size:12px;z-index:2;box-shadow:0 0 0 5px #9ac34b33;transition:transform .2s,background .2s}.hotspot[aria-pressed=true]{background:var(--lime);color:#172211;transform:scale(1.12)}.hotspot-one{top:86px;right:20px}.hotspot-two{bottom:15px;left:155px}.hotspot-three{top:10px;right:47px}.audit-demo[data-audit="1"] .audit-headline{outline:1px dashed #809457;outline-offset:5px}.audit-demo[data-audit="2"] .audit-cta{background:#274132;color:#e9eee0;border-radius:50px;padding:7px 13px;width:max-content}.audit-demo[data-audit="3"] .audit-mobile{outline:1px dashed #809457;outline-offset:7px}.audit-observation{margin:0 18px 19px;min-height:106px}.audit-observation strong{font-size:14px;font-weight:500;color:var(--lime)}.audit-observation p{font-size:12px;line-height:1.7;color:#a5b39a;margin-top:7px}/* A photographic portrait; an explicit control works without hovering. */
.about-grid{grid-template-columns:.95fr 1.05fr;gap:75px}.portrait-block{min-width:0}.portrait-stage{position:relative;aspect-ratio:3/4;overflow:hidden;background:#141612;border:1px solid #313b29;isolation:isolate;--portrait-x:50%;--portrait-y:43%;--portrait-radius:100px;touch-action:pan-y}.portrait-stage>img,.portrait-original-layer,.portrait-original-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.portrait-original-layer{clip-path:circle(0 at var(--portrait-x) var(--portrait-y));transition:clip-path .45s var(--ease);z-index:2}.portrait-original-layer img{transform:translateY(-4%) scale(1.1);transform-origin:center}.portrait-stage[data-portrait-mode="lens"] .portrait-original-layer{clip-path:circle(var(--portrait-radius) at var(--portrait-x) var(--portrait-y));transition:none}.portrait-stage[data-portrait-mode="original"] .portrait-original-layer{clip-path:circle(150% at 50% 50%)}.portrait-lens-ring{position:absolute;left:var(--portrait-x);top:var(--portrait-y);width:calc(var(--portrait-radius)*2);height:calc(var(--portrait-radius)*2);transform:translate(-50%,-50%);border:1px solid var(--lime);border-radius:50%;z-index:3;pointer-events:none;display:none;box-shadow:0 0 0 5px #d5ff4511}.portrait-lens-ring span{position:absolute;bottom:13px;left:0;right:0;text-align:center;color:white;font-size:9px;letter-spacing:.15em;text-shadow:0 1px 8px #000}.portrait-stage[data-portrait-mode="lens"] .portrait-lens-ring{display:block}.portrait-credit{position:absolute;bottom:0;left:0;right:0;z-index:4;background:linear-gradient(transparent,#0e100dcc);padding:40px 24px 22px;display:flex;align-items:center;justify-content:space-between;font-size:13px}.portrait-credit span:last-child{color:var(--lime)}.portrait-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:15px}.portrait-toolbar>span{font-size:11px;color:#87967b;max-width:160px}.portrait-modes{display:flex;gap:4px;background:#232b1e;border:1px solid #445238;padding:3px;border-radius:50px}.portrait-modes button{background:none;border:0;color:#9daa91;font-size:11px;padding:7px 11px;border-radius:50px}.portrait-modes button[aria-pressed=true]{background:var(--lime);color:#192111}.about-copy h2{font-weight:400}.about-copy .signature{font-size:21px}.footer-brand span{color:inherit}.footer-brand{position:relative}.footer-brand:after{content:"";display:inline-block;width:10px;height:10px;background:var(--lime);border-radius:50%;margin-left:6px}.service-cta:focus-visible,.flow-action:focus-visible,.hotspot:focus-visible,.portrait-modes button:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
@media(min-width:1600px){.hero-mark{font-size:405px}.hero-canvas{min-height:360px}.hero-mini-site{max-width:510px}.studio-intro h1{font-size:76px}}
@media(max-width:1150px){.hero-stage{padding-top:30px}.studio-intro{gap:50px;grid-template-columns:1.35fr 1fr}.studio-intro h1{font-size:54px}.studio-intro-right>p{font-size:14px}.hero-mark{font-size:30vw}.hero-stage{--lens-radius:80px}.hero-story-bar{gap:13px}.story-steps{gap:17px}.story-caption{font-size:11px;max-width:175px}.replay-label{display:none}.hero-mini-site{width:44%}.service-panel{padding-left:61px;gap:30px}.service-detail-copy h4{font-size:24px}.service-detail-copy>p:not(.eyebrow){font-size:13px}.about-grid{gap:45px}.portrait-toolbar{align-items:flex-start;flex-direction:column}.mini-body{padding:17px}.mini-body strong{font-size:30px}.mini-copy{font-size:8px}.mini-button{margin-top:9px}.mini-topline{padding:10px 15px}.mini-topline>span:first-child{font-size:16px}.mini-monogram{font-size:70px}}
@media(max-width:850px){.studio-hero{height:calc(155svh - 82px);min-height:990px}.hero-sticky{min-height:660px}.studio-intro{grid-template-columns:1.3fr 1fr;gap:30px}.studio-intro h1{font-size:46px}.studio-intro .eyebrow{font-size:9px;letter-spacing:.13em}.studio-intro-right>p{font-size:13px}.studio-intro-right .button{gap:19px;font-size:12px}.hero-mark{font-size:32vw}.hero-mini-site{width:47%;right:-1%}.hero-stage{--lens-radius:65px}.canvas-hint{font-size:10px;max-width:205px}.canvas-caption{font-size:10px}.story-steps{gap:14px}.story-steps button{font-size:12px}.story-caption{display:none}.story-replay{margin-left:auto}.service-panel{padding-left:0;grid-template-columns:1fr 1fr;gap:25px}.service-entry .service-row h3{font-size:25px}.service-entry .service-row p{font-size:13px}.build-headline{font-size:29px}.build-mark{font-size:68px}.build-controls{gap:3px;padding-inline:12px}.build-controls button{font-size:10px;padding:6px 8px}.audit-headline{font-size:28px}.audit-canvas{padding:16px}.hotspot-one{right:10px;top:74px}.hotspot-two{left:125px}.about-grid{gap:33px}.flow-screen{padding-inline:18px}.flow-choices{gap:6px}.flow-choices button{font-size:11px;padding:8px 10px}}
@media(max-width:600px){.header-inner{height:77px}.brand-caption{font-size:8px}.studio-hero{height:calc(150svh - 77px);min-height:990px}.hero-sticky{height:calc(100svh - 77px);min-height:650px;max-height:900px}.hero-stage{padding-top:25px;gap:11px;--lens-radius:53px}.studio-intro{display:block}.studio-intro .eyebrow{font-size:9px;letter-spacing:.08em;margin-bottom:17px}.studio-intro h1{font-size:clamp(36px,9.4vw,54px);letter-spacing:-.06em;line-height:1.06}.studio-intro-right{display:flex;gap:18px;align-items:center;max-width:none;justify-content:space-between;margin-top:20px;padding:0}.studio-intro-right>p{font-size:12px;line-height:1.6;max-width:215px;margin:0}.studio-intro-right .button{font-size:0;min-width:48px;width:48px;height:48px;min-height:48px;gap:0;padding:0;flex-shrink:0}.studio-intro-right .button .arrow{font-size:24px}.hero-canvas{min-height:280px;margin-top:8px}.hero-mark{font-size:53vw;top:39%;left:-.02em}.mark-art{font-size:.12em}.hero-mini-site{width:68%;right:-5%;top:67%;aspect-ratio:1.5;max-width:350px}.mini-topline{padding:8px 12px;font-size:6px}.mini-topline>span:first-child{font-size:13px}.mini-body{padding:12px}.mini-kicker{font-size:6px}.mini-body strong{font-size:25px;margin:7px 0}.mini-copy{font-size:6px;max-width:132px}.mini-button{font-size:6px;padding:4px 7px;margin-top:8px}.mini-monogram{font-size:52px;right:12px;bottom:17px;letter-spacing:-6px}.mini-foot{font-size:5px;left:13px;bottom:6px}.hero-lens{width:106px;height:106px}.lens-word{font-size:8px}.lens-cross{font-size:21px}.canvas-caption{font-size:9px;bottom:6px;max-width:165px}.canvas-hint{display:none}.hero-story-bar{padding:13px 0 14px;gap:12px;flex-wrap:nowrap}.story-steps{gap:14px}.story-steps button{font-size:11px;gap:5px}.story-steps button span{font-size:8px}.hero-skip{font-size:20px;padding-inline:2px}.story-replay{padding:3px}.story-replay>span:first-child{font-size:21px}.wire-mini{width:68%;right:-5%;top:67%;padding:12px}.wire-mini>span{margin-bottom:12px;height:12px}.wire-mini>div{height:17px;margin-bottom:5px}.wire-mini>i{height:10px;margin-top:10px}.wire-mini footer{bottom:10px;left:12px;right:12px;gap:5px}.wire-mini footer i{height:13px}.inspection-grid{background-size:18px 18px}.ticker{padding:13px 0}.ticker-track{font-size:16px}.ticker span{font-size:22px}.interactive-services{margin-top:4px}.service-panel{grid-template-columns:1fr;padding:0 0 30px;gap:24px}.service-entry>.service-row{grid-template-columns:25px 1fr 24px;padding:24px 0;gap:10px 12px}.service-entry>.service-row h3{font-size:25px}.service-entry>.service-row p{font-size:13px}.service-entry>.service-row .sr-only{grid-column:1}.service-example{border-radius:6px}.example-top{font-size:10px;padding:12px 16px}.build-canvas{min-height:242px}.build-headline{font-size:36px}.build-mark{font-size:86px}.build-controls{padding:0 16px 16px;gap:5px}.build-controls button{font-size:12px;padding:6px 11px}.service-detail-copy h4{font-size:27px;margin-bottom:15px}.service-detail-copy>p:not(.eyebrow){font-size:14px;max-width:100%}.service-detail-copy .deliverables{font-size:12px!important}.service-cta{font-size:13px;margin-top:20px;gap:15px}.service-detail-copy>.eyebrow{font-size:9px;margin-bottom:12px}.audit-canvas{min-height:237px;padding:19px}.audit-headline{font-size:34px}.hotspot-one{right:20px;top:83px}.hotspot-two{left:155px;bottom:18px}.audit-observation{min-height:110px}.audit-observation p{font-size:13px}.flow-screen{min-height:240px}.flow-choices button{font-size:13px;padding:9px 14px}.flow-screen>p{font-size:14px}.flow-action{font-size:14px}.about-grid{grid-template-columns:1fr;gap:36px}.portrait-stage{max-width:100%;--portrait-radius:82px}.portrait-toolbar{flex-direction:row;align-items:center;gap:10px}.portrait-toolbar>span{font-size:10px;max-width:120px}.portrait-modes button{font-size:11px;padding:7px 10px}.portrait-credit{font-size:12px;padding:30px 20px 19px}.about-copy h2{font-size:42px}.about-copy p{font-size:15px}.service-secondary{font-size:13px}}
@media(max-width:360px){.studio-intro h1{font-size:34px}.studio-intro-right>p{font-size:11px}.story-steps{gap:8px}.story-steps button{font-size:10px}.hero-story-bar{gap:8px}.mini-body strong{font-size:22px}.mini-copy{max-width:110px}.portrait-toolbar{flex-direction:column;align-items:flex-start}.portrait-toolbar>span{max-width:none}.service-entry>.service-row h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.studio-hero{height:auto;min-height:0}.hero-sticky{position:relative;height:auto;min-height:0;max-height:none}.hero-stage{padding-bottom:25px}.hero-canvas{height:350px;flex:auto}.hero-lens{transition:none}.inspection-layer{transition:none}.portrait-original-layer{transition:none}.service-panel{animation:none}.build-canvas{transition:none}.hero-story-bar{flex-wrap:wrap}}

.compare-cta{cursor:inherit}.compare-cta:hover{filter:none}
@media(max-height:720px){.studio-hero{height:auto;min-height:0}.hero-sticky{position:relative;height:auto;min-height:0;max-height:none}.hero-stage{padding-bottom:16px}.hero-canvas{height:350px;flex:auto}.hero-story-bar{flex-wrap:wrap}}

/* Advertise the already-authored dark palette at the root, keep light surfaces
   explicit. Browser-enforced filters may still override these declarations. */
.playground-section,.sample,.comparison,.contact-section{color-scheme:only light}

/* One heading in the document: right of the portrait on desktop, first on mobile. */
.about-grid{grid-template-areas:"portrait ." "portrait heading" "portrait copy" "portrait .";grid-template-rows:1fr auto auto 1fr;row-gap:0}
.about-heading{grid-area:heading;min-width:0}
.about-heading .eyebrow{margin-bottom:22px;color:var(--muted)}
.about-heading h2{font-size:clamp(37px,4vw,56px);line-height:1.08;letter-spacing:-.05em;font-weight:400;margin-bottom:27px}
.about-grid>.portrait-block{grid-area:portrait}
.about-grid>.about-copy{grid-area:copy;align-self:start}
.portrait-stage{--portrait-y:36%}
.portrait-stage>.portrait-art,.portrait-original-layer img{object-position:31% 50%}
.portrait-original-layer img{transform:none}

/* A complete visitor-to-business enquiry example. Nothing is submitted. */
.flow-demo{container-type:inline-size;color:#eef3e8}
.flow-demo .example-top{font-size:12px;align-items:start}
.flow-demo .example-top span:first-child{max-width:290px}
.flow-trail{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:22px 20px 25px;counter-reset:flow}
.flow-trail li{display:flex;flex-direction:column;align-items:start;gap:8px;position:relative;min-width:0;color:#a5b399}
.flow-trail li:not(:last-child):after{content:"";position:absolute;left:37px;right:1px;top:14px;height:1px;background:#516147}
.flow-trail b{font-weight:500;font-size:11px;border:1px solid #708160;border-radius:50%;height:29px;width:29px;display:grid;place-items:center}
.flow-trail span{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.flow-trail li.active b{color:#172110;background:var(--lime);border-color:var(--lime)}
.flow-trail li[aria-current=step] span{color:#f0f5e9}
.flow-screen{padding:0 20px 20px;min-height:0}
.flow-demo [hidden]{display:none!important}
.flow-screen h5{font-size:24px;font-weight:500;line-height:1.15;letter-spacing:-.035em;margin:0 0 13px}
.flow-screen>p{font-size:14px;line-height:1.65;color:#b0bfa4;min-height:0;margin:0 0 20px}
.flow-choices{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 20px}
.flow-choices button{border:1px solid #71845e;border-radius:50px;background:transparent;color:#dce6d2;padding:8px 12px;font-size:14px;min-height:42px}
.flow-choices button[aria-pressed=true]{background:var(--lime);color:#172110;border-color:var(--lime)}
.flow-form{display:grid;gap:15px;margin-bottom:22px}
.flow-input-row{display:grid;grid-template-columns:1fr;gap:15px}
.flow-form label{font-size:14px;display:grid;gap:6px;color:#d8e2ce;min-width:0}
.flow-form input,.flow-form textarea{display:block;width:100%;min-width:0;border:1px solid #71845e;border-radius:5px;padding:10px 11px;background:#151c12;color:#eef3e8;font-size:16px;line-height:1.5;box-shadow:none;caret-color:var(--lime)}
.flow-form textarea{resize:vertical;min-height:120px}
.flow-form input:focus-visible,.flow-form textarea:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.flow-action{border:1px solid #98b576;border-radius:5px;background:#c5ed7420;padding:12px 13px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;line-height:1.5;text-align:left;color:var(--lime);min-height:48px}
.flow-action:hover{background:#c5ed7433}
.flow-check{display:grid;place-items:center;font-size:30px;color:var(--lime);border:1px solid #7c9d52;background:#a1d95812;border-radius:50%;width:57px;height:57px;margin:0 0 20px}
.flow-screen>.flow-perspective{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#c2d1b5;margin-bottom:24px}
.flow-screen>.flow-receipt-name{font-size:17px;color:#f0f5e9;margin-bottom:10px}
.flow-address{background:#151c12;padding:14px;border:1px solid #485b3c;border-radius:5px;margin:20px 0 25px;overflow-wrap:anywhere}
.flow-address span,.flow-next-step>span{display:block;font-size:12px;color:#b0bfa4;margin-bottom:4px}
.flow-address strong{font-size:14px;font-weight:500;color:#eff4e9}
.flow-edit,.flow-reset{border:0;border-bottom:1px solid #80946d;background:none;color:var(--lime);padding:8px 0;margin-top:17px;display:flex;gap:25px;font-size:14px;min-height:42px}
.flow-inbox{background:#151c12;border:1px solid #485b3c;border-radius:5px;padding:16px;overflow-wrap:anywhere}
.flow-inbox dl{margin:0;padding:0;display:grid;gap:14px}
.flow-inbox dl>div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px}
.flow-inbox dt,.flow-message-label{font-size:12px;color:#b0bfa4}
.flow-inbox dd{font-size:14px;margin:0;color:#eff4e9}
.flow-inbox dd strong{font-weight:500;display:block}
.flow-inbox dd span{display:block;font-size:13px;color:#bac8af}
.flow-message-label{margin:19px 0 7px}
.flow-inbox-message{font-size:14px;line-height:1.7;color:#e0e9d6;white-space:pre-wrap}
.flow-next-step{padding:16px 0 0}
.flow-result-copy{font-size:14px;line-height:1.65;color:#d0e4b9}
.flow-disclaimer{padding:0 20px 20px;font-size:12px;color:#b0bfa4;line-height:1.6;margin:0}
@container(min-width:430px){.flow-input-row{grid-template-columns:1fr 1fr}.flow-trail span{font-size:13px}}
@media(max-width:850px){.about-heading h2{font-size:40px}}
@media(max-width:600px){
  .about-grid{grid-template-areas:"heading" "portrait" "copy";grid-template-rows:auto auto auto;gap:26px}
  .about-heading h2{font-size:42px;max-width:400px;margin-bottom:0}
  .about-heading .eyebrow{margin-bottom:18px;font-size:12px}
  .portrait-toolbar{flex-wrap:wrap;row-gap:12px}
  .portrait-toolbar>span{font-size:12px;max-width:165px}
  .portrait-modes button{min-height:40px;font-size:12px}
}

/* Mouse inspection and touch comparison use different, visible controls. */
.hero-touch-views,.portrait-comparison{display:none}
.hero-touch-views{position:absolute;right:0;top:0;z-index:5;gap:3px;padding:3px;border:1px solid #667a51;border-radius:50px;background:#182013}
.hero-touch-views button{border:0;border-radius:50px;background:transparent;color:#d7e3c9;padding:8px 15px;font-size:14px;line-height:1.4;min-height:44px;touch-action:manipulation}
.hero-touch-views button[aria-pressed=true]{background:var(--lime);color:#172110}
.touch-ui .hero-touch-views{display:flex}
.touch-ui .hero-lens,.touch-ui .portrait-lens-ring,.touch-ui .portrait-modes{display:none}
.touch-ui .hero-canvas.is-touch-structure .inspection-layer{clip-path:none;opacity:1;background:#101112}
.touch-ui .hero-canvas.is-touch-structure .outline-mark{opacity:var(--mark-opacity)}
.touch-ui .inspection-label{display:none}
.touch-ui .portrait-comparison{display:block}
.touch-ui .portrait-toolbar>span{max-width:none;font-size:13px}
.portrait-stage{--portrait-split:50%}
.portrait-stage[data-portrait-mode=compare] .portrait-original-layer{clip-path:inset(0 0 0 var(--portrait-split));transition:none}
.portrait-comparison{position:absolute;inset:0;z-index:5;pointer-events:none}
.portrait-side-labels{position:absolute;top:15px;left:15px;right:15px;display:flex;justify-content:space-between;gap:10px}
.portrait-side-labels span{background:#101112e6;border:1px solid #d8e9c888;color:#f5f8f0;border-radius:50px;padding:5px 12px;font-size:12px}
.portrait-divider{position:absolute;left:var(--portrait-split);top:0;bottom:0;width:2px;background:#e6ffc5;box-shadow:0 0 6px #0008}
.portrait-divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;height:52px;width:52px;border:2px solid #e6ffc5;border-radius:50%;background:#101112ed;color:#e6ffc5;box-shadow:0 3px 20px #0006;font-size:25px;line-height:1}
.portrait-compare-input{position:absolute;top:50%;left:0;transform:translateY(-50%);margin:0;width:100%;height:64px;opacity:0;pointer-events:auto;touch-action:pan-y pinch-zoom;cursor:ew-resize}
.portrait-stage:has(.portrait-compare-input:focus-visible){outline:3px solid var(--lime);outline-offset:5px}
.portrait-stage:has(.portrait-compare-input:focus-visible) .portrait-divider>span{background:var(--lime);color:#101112}
@media(hover:none),(pointer:coarse){
  /* These defaults avoid briefly showing a mouse-only control before JS starts. */
  .hero-lens,.portrait-modes{display:none}
  .hero-touch-views{display:flex}
}

/* Guided enquiries: choose a starting point, then answer only relevant questions. */
.contact-form{min-width:0}
.contact-form>fieldset{border:0;padding:0;margin:0 0 34px;min-width:0}
.contact-form>fieldset>legend{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;padding:0;margin-bottom:18px}
.contact-path{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) 18px;align-items:start;gap:13px;border:1px solid #687b2b;border-radius:12px;padding:18px;margin-bottom:10px;cursor:pointer;touch-action:manipulation;background:#d5ff45;color:#101112;transition:background .18s,color .18s}
.contact-path input,.website-state input{width:18px;height:18px;flex:0 0 auto;accent-color:#101112;margin:3px 0 0}
.contact-path strong{display:block;font-size:17px;line-height:1.35;font-weight:500}
.contact-path small{display:block;font-size:13px;line-height:1.6;margin-top:6px}
.contact-path .path-arrow{font-size:21px;line-height:1}
.contact-path:has(input:checked){background:#101112;color:#d5ff45;border-color:#101112}
.contact-path:has(input:checked) input{accent-color:#d5ff45}
.contact-path:focus-within{outline:2px solid #101112;outline-offset:3px}
.contact-panel[hidden],.brief-review[hidden]{display:none}
.contact-panel .field{font-size:14px;line-height:1.5;margin-bottom:22px}
.contact-panel .field:last-child{margin-bottom:0}
.contact-panel textarea{line-height:1.6;min-height:115px}
.contact-form textarea::placeholder,.contact-form input::placeholder{color:#475520;opacity:1}
.website-state{border:0;padding:0;margin:0 0 26px;min-width:0}
.website-state legend{padding:0;margin-bottom:7px;font-size:14px}
.website-state label{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;cursor:pointer}
.website-state input{margin:0}
.contact-form .contact-details{margin-bottom:22px}
.brief-review{border-top:1px solid #687b2b;border-bottom:1px solid #687b2b;margin:20px 0 10px}
.brief-review summary{padding:16px 0;cursor:pointer;font-size:14px}
.brief-review pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;line-height:1.7;padding:0 0 20px;margin:0}
@media(max-width:600px){
  .contact-path{padding:16px;gap:11px}
  .contact-path strong{font-size:16px}
  .contact-path small{font-size:13px}
  .contact-form .form-row{grid-template-columns:1fr;gap:0}
  .contact-panel textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.contact-path{transition:none}}
@media(forced-colors:active){.contact-path:has(input:checked){outline:2px solid Highlight}.contact-path input{appearance:auto}}

/* Conditional browser help, not an assertion that forced dark mode is active. */
.colour-notice[hidden]{display:none}
.colour-notice{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px;background:#e8ece2;color:#213c29;border:1px solid #a6b19b;border-radius:12px;margin:0 0 28px;padding:8px 8px 8px 0}
.colour-notice details{min-width:0}
.colour-notice summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px 8px 18px;font-size:14px;font-weight:500;line-height:1.4;list-style:none;cursor:pointer;touch-action:manipulation}
.colour-notice summary::-webkit-details-marker{display:none}
.colour-notice summary small{display:block;font-size:11px;font-weight:400;line-height:1.5;margin-top:3px}
.colour-notice-icon{font-size:23px;flex:0 0 auto}
.colour-notice-chevron{margin-left:auto;font-size:22px;font-weight:400}
.colour-notice details[open] .colour-notice-chevron{transform:rotate(45deg)}
.colour-notice-body{font-size:13px;line-height:1.7;padding:8px 18px 12px}
.colour-notice-body p{margin:0 0 12px}
.colour-notice-body p:last-child{margin:16px 0 0}
.colour-notice-body ol{margin:0;padding-left:21px}
.colour-notice-body li+li{margin-top:7px}
.colour-notice-dismiss{display:grid;place-items:center;align-self:start;width:44px;height:44px;margin-top:4px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:25px;line-height:1;cursor:pointer;touch-action:manipulation}
.colour-notice-dismiss:hover{background:#d8dfd0}
.colour-notice summary:focus-visible,.colour-notice-dismiss:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.captcha-block[hidden],.captcha-retry[hidden]{display:none}
.captcha-block{padding:18px 0;margin:8px 0 15px;border-top:1px solid #687b2b;border-bottom:1px solid #687b2b}
.captcha-title{font-size:14px;font-weight:500;margin:0 0 14px}
.captcha-status,.captcha-note{font-size:12px;line-height:1.6;max-width:430px;margin:10px 0 0;overflow-wrap:anywhere}
.captcha-note a{text-decoration:underline;text-underline-offset:2px}
.captcha-retry{background:transparent;color:inherit;border:1px solid currentColor;border-radius:6px;padding:10px 13px;min-height:44px;font-size:13px;margin-top:12px}