:root{--paper:#faf8f4;--ink:#12243d;--blue:#c74435;--sky:#e7ecf2;--line:#c9d2d7;--mono:'IBM Plex Mono',monospace;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:'IBM Plex Sans',Arial,sans-serif}
*{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:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:6px}::selection{background:#f3c3b7;color:var(--ink)}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.blue{color:var(--blue)}.eyebrow{font:500 10px/1.6 var(--mono);letter-spacing:1.2px;margin:0 0 20px}.site-header{display:flex;align-items:center;justify-content:space-between;min-height:108px;border-bottom:1px solid var(--line);gap:24px}.wordmark{font-size:25px;font-weight:600;letter-spacing:-1.5px;display:inline-flex;align-items:baseline;white-space:nowrap}.wordmark-surname{font-weight:400}.wordmark-dot{color:var(--blue)}.wordmark-star{font-size:30px;color:var(--blue);padding-left:14px;align-self:center}.site-header nav{display:flex;align-items:center;gap:35px;font-size:13px;font-weight:500}.site-header nav a:hover,.footer a:hover{color:var(--blue)}.nav-about{border:1px solid var(--ink);padding:9px 16px}.nav-about span{padding-left:20px}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;padding-block:66px 75px;min-height:770px}.hero-copy>.eyebrow{letter-spacing:.7px;font-size:9px;display:flex;align-items:center;gap:9px}.status-dot{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;flex-shrink:0}h1,h2,h3,h4,p{margin-top:0}h1{font:700 clamp(65px,7.5vw,108px)/.94 var(--display);letter-spacing:-1.6px;margin-bottom:28px}.outlined{-webkit-text-stroke:1.5px var(--blue);color:transparent}.hero-intro{font-size:17px;line-height:1.6;margin-bottom:12px}.hero-intro strong{font-weight:500}.hero-description{font-size:14px;max-width:400px;color:#526373;margin-bottom:27px}.button{display:inline-flex;align-items:center;gap:42px;padding:14px 21px;background:var(--blue);color:#fff;font-size:13px;font-weight:500;transition:background .18s,transform .18s}.button:hover{background:#a33127;transform:translateY(-2px)}.button span{font-size:21px;line-height:1}.hero-note{display:block;font:9px var(--mono);letter-spacing:1px;margin-top:17px;color:#586b7b}.hero-art{margin:0;position:relative;background:var(--sky);border:1px solid #bdcfdf;transform:rotate(2deg);padding:18px 22px 12px;isolation:isolate}.hero-art:before{content:'';position:absolute;inset:10px -10px -10px 10px;border:1px solid #9aaec0;z-index:-1;pointer-events:none}.hero-art img{display:block;width:100%;height:auto}.art-top,figcaption{display:flex;justify-content:space-between;align-items:center;font:8px var(--mono);letter-spacing:1px;gap:12px}.art-top{padding-bottom:13px;border-bottom:1px solid #b2c8db}.hero-art figcaption{border-top:1px solid #b2c8db;padding-top:11px}.art-caption-arrow{font-size:24px}.art-stamp{position:absolute;right:-15px;bottom:72px;background:var(--paper);border:1px solid var(--blue);color:var(--blue);font:600 13px/1.2 var(--display);letter-spacing:.7px;padding:15px 17px;transform:rotate(-10deg);box-shadow:3px 4px 0 #b2cbe1}.principles-strip{border-block:1px solid var(--ink)}.strip-inner{display:flex;justify-content:space-between;align-items:center;gap:22px;min-height:65px;font:500 11px var(--mono);letter-spacing:1px}.strip-inner i{font-style:normal;font-size:23px;color:var(--blue)}.section{padding-block:96px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:48px}h2{font:600 clamp(44px,4.7vw,65px)/1.02 var(--display);letter-spacing:-.7px;margin-bottom:0}.section-heading>p{max-width:310px;font-size:14px;color:#526373;margin-bottom:4px}.case-list{border-top:1px solid var(--ink)}.case{border-bottom:1px solid var(--line)}.case summary{display:grid;grid-template-columns:48px 1fr 125px 36px;align-items:center;gap:24px;list-style:none;cursor:pointer;padding:31px 10px 31px 0}.case summary::-webkit-details-marker{display:none}.case summary:hover h3{color:var(--blue)}.case-number{font:12px var(--mono);align-self:start;padding-top:6px}.case-main .eyebrow{font-size:9px;color:#526373;margin-bottom:6px}.case h3{font:600 32px/1.1 var(--display);margin-bottom:9px;transition:color .15s}.case-main p{font-size:13px;color:#526373;margin-bottom:16px}.tags{display:flex;gap:7px;flex-wrap:wrap}.tags span{border:1px solid #cad3da;border-radius:2px;padding:3px 8px;font:9px/1.4 var(--mono)}.expand-mark{width:30px;height:30px;border:1px solid #b5c4d0;border-radius:50%;position:relative}.expand-mark:before,.expand-mark:after{content:'';position:absolute;background:var(--ink);width:10px;height:1px;left:9px;top:14px}.expand-mark:after{transform:rotate(90deg)}details[open] .expand-mark:after{transform:none}.case-symbol{width:100px;height:95px;color:var(--blue);display:flex;align-items:center;justify-content:center}.symbol-ai{transform:rotate(10deg)}.symbol-ai img{display:block;width:100%;height:100%;object-fit:contain}.symbol-product{position:relative;transform:rotate(-12deg)}.symbol-product span{position:absolute;width:51px;height:51px;border:1.5px solid var(--blue);background:var(--paper);transform:rotate(30deg) skew(-5deg,-5deg)}.symbol-product span:nth-child(1){top:37px}.symbol-product span:nth-child(2){top:23px;background:#e7ecf2}.symbol-product span:nth-child(3){top:9px}.symbol-data{align-items:flex-end;gap:7px;padding:16px;transform:rotate(8deg)}.symbol-data span{width:12px;border:1px solid var(--blue);height:25%;background:#e7ecf2}.symbol-data span:nth-child(2){height:50%}.symbol-data span:nth-child(3){height:70%}.symbol-data span:nth-child(4){height:100%;background:var(--blue)}.case-content{margin:0 46px 30px 72px;border-top:1px dashed #b8c8d4;padding-top:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.case-content h4{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.7px;margin-bottom:12px}.case-content p{font-size:13px;color:#526373;margin:0}.work-footnote{font:10px/1.7 var(--mono);color:#586b7b;margin-top:20px}.work-footnote span{color:var(--blue);font-size:18px;margin-right:8px}.method{background:var(--sky);border-block:1px solid #bdcfdf}.method .section-heading{margin-bottom:52px}.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.method-grid article{padding:0 28px;border-left:1px solid #a9c2d8}.method-grid article:first-child{border-left:none;padding-left:0}.method-grid article:last-child{padding-right:0}.step{display:flex;align-items:center;justify-content:space-between;font:11px var(--mono);margin-bottom:26px}.step span{font-size:24px;color:var(--blue)}.method-grid h3{font:600 36px var(--display);margin-bottom:10px}.method-grid p{font-size:13px;color:#40596f;margin-bottom:0}.toolbelt{border-top:1px solid #a9c2d8;padding-top:27px;margin-top:45px;display:flex;align-items:center;gap:30px}.toolbelt>.eyebrow{margin:0;white-space:nowrap}.toolbelt>div{display:flex;flex-wrap:wrap;gap:20px;font-size:13px;font-weight:500}.toolbelt>p{font:9px/1.5 var(--mono);margin:0 0 0 auto;text-align:right;max-width:150px}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.note-card{border:1px solid #c4d0da;padding:29px 33px;position:relative;background:linear-gradient(135deg,transparent 96%,#e7ecf2 96%)}.note-meta{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.6px;margin-bottom:26px}.note-meta span:last-child{font-size:20px;color:var(--blue);line-height:1}.note-card h3{font:600 42px/1.05 var(--display);margin-bottom:17px}.note-card p{font-size:14px;color:#526373;max-width:390px;margin-bottom:25px}.note-tag{font:9px var(--mono);color:var(--blue);letter-spacing:1px}.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px;padding-block:58px 90px;border-top:1px solid var(--ink);align-items:center}.about h2{font-size:52px;margin-bottom:24px}.about p:not(.eyebrow){max-width:580px;color:#526373;font-size:14px}.about-monogram{font:700 clamp(110px,15vw,210px)/1 var(--display);letter-spacing:-8px;position:relative;color:var(--blue);padding:40px 10px;text-align:center;border:1px solid #bdcfdf;background:repeating-linear-gradient(0deg,transparent,transparent 23px,#c6d8e74d 23px,#c6d8e74d 24px),repeating-linear-gradient(90deg,#e7f0f8,#e7f0f8 23px,#c6d8e74d 23px,#c6d8e74d 24px)}.about-monogram>span:first-child{font-weight:500;color:#93b9df}.monogram-star{position:absolute;right:13px;top:7px;font:32px Arial}.text-link{font-size:12px;display:inline-flex;gap:22px;font-weight:500;border-bottom:1px solid var(--ink);padding-block:9px}.text-link:hover{color:var(--blue)}.footer{border-top:1px solid var(--line);min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:22px}.footer>.wordmark{font-size:20px}.footer>span{font:9px var(--mono);letter-spacing:.8px;color:#586b7b}.footer>a:last-child{font-size:11px}.footer>a:last-child span{padding-left:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:-100px;z-index:20;background:var(--ink);color:white;padding:12px}.skip-link:focus{top:15px}
@media(min-width:1550px){.hero{gap:80px}h1{font-size:112px}.hero-art{max-width:525px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:30px;min-height:650px;padding-block:50px 65px}h1{font-size:clamp(58px,8vw,88px)}.hero-copy>.eyebrow{font-size:8px;letter-spacing:0}.hero-intro{font-size:15px}.hero-art{padding:14px}.art-top,figcaption{font-size:7px;letter-spacing:.3px}.strip-inner{font-size:9px;letter-spacing:.4px;gap:15px}.toolbelt{gap:20px}.toolbelt>div{gap:13px}.section{padding-block:72px}.about{gap:50px}.case summary{grid-template-columns:35px 1fr 95px 30px;gap:20px}.case-content{margin-left:55px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.site-header{min-height:83px;gap:15px}.wordmark{font-size:22px}.wordmark-star{display:none}.site-header nav{gap:16px;font-size:11px}.site-header nav>a:nth-child(2){display:none}.nav-about{border:0;padding:0}.nav-about span{padding-left:5px}.hero{grid-template-columns:1fr;gap:44px;padding-block:39px 50px}.hero-copy>.eyebrow{font-size:8px;letter-spacing:.2px;margin-bottom:20px}h1{font-size:clamp(65px,12.8vw,96px);letter-spacing:-1px;margin-bottom:25px}.hero-intro{font-size:16px}.hero-description{max-width:440px;font-size:14px}.hero-art{width:min(470px,calc(100% - 16px));justify-self:center;transform:rotate(1.5deg);padding:18px}.art-top,figcaption{font-size:8px;letter-spacing:.3px}.art-stamp{right:-10px}.hero-note{display:inline-block;margin:0 0 0 15px;font-size:8px}.strip-inner{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:17px 12px;padding-block:20px;font-size:9px}.strip-inner i{display:none}.section{padding-block:58px}.section-heading{display:block;margin-bottom:32px}.section-heading>p{margin-top:24px;max-width:390px;font-size:14px}h2{font-size:48px}.eyebrow{font-size:9px;margin-bottom:15px}.case summary{grid-template-columns:24px 1fr 28px;gap:12px;padding-block:25px}.case-symbol{display:none}.case-main .eyebrow{font-size:8px}.case h3{font-size:29px}.case-main p{font-size:12px;line-height:1.6}.case-number{font-size:10px}.tags{gap:5px}.tags span{font-size:8px;padding:3px 6px}.case-content{grid-template-columns:1fr;gap:22px;margin:0 10px 26px 36px}.case-content p{max-width:490px}.work-footnote{font-size:9px}.method-grid{grid-template-columns:1fr 1fr;gap:30px 0}.method-grid article{padding:0 20px}.method-grid article:nth-child(3){border:0;padding-left:0}.method-grid article:nth-child(2){padding-right:0}.method-grid h3{font-size:32px}.step{margin-bottom:15px}.method-grid p{font-size:12px}.toolbelt{flex-wrap:wrap;gap:16px;margin-top:35px}.toolbelt>div{gap:14px;font-size:12px}.toolbelt>p{max-width:none;text-align:left;margin:0;flex-basis:100%}.notes-grid{grid-template-columns:1fr;gap:18px}.note-card{padding:27px}.note-card h3{font-size:39px}.about{grid-template-columns:1fr;gap:32px;padding-block:40px 55px}.about-monogram{font-size:150px;min-height:230px;max-width:360px;width:100%}.about h2{font-size:46px}.footer{flex-wrap:wrap;padding-block:25px;min-height:110px;gap:20px}.footer>span{order:3;flex-basis:100%;font-size:8px}}
@media(max-width:380px){.wrap{width:calc(100% - 32px)}.site-header nav{gap:12px;font-size:10px}.wordmark{font-size:20px}.hero-note{display:block;margin:14px 0 0}.hero-copy>.eyebrow{font-size:7px;gap:6px}h1{font-size:61px}h2{font-size:42px}.art-top{font-size:6px}.case-main .eyebrow{letter-spacing:.4px}.case summary{gap:9px}.about h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Interactive drafting surface and portrait composition. */
body{isolation:isolate;background-image:linear-gradient(#9bb4cc20 1px,transparent 1px),linear-gradient(90deg,#9bb4cc20 1px,transparent 1px);background-size:40px 40px}
.interactive-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(220px circle at var(--cursor-x,70%) var(--cursor-y,30%),#d8584024,transparent 100%)}
.interactive-grid:after{content:'';position:absolute;inset:0;background-image:linear-gradient(#c7443580 1px,transparent 1px),linear-gradient(90deg,#c7443580 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(180px circle at var(--cursor-x,70%) var(--cursor-y,30%),#000,transparent)}
.interactive-grid.is-active{opacity:1}
.hero{position:relative;min-height:720px;padding-block:48px 65px;perspective:1100px}
.hero-copy{animation:hero-enter .9s cubic-bezier(.16,1,.3,1) both}
.hero h1{font-size:clamp(64px,6.5vw,99px)}
.hero-copy .blue{display:inline-block;animation:word-enter 1.1s cubic-bezier(.16,1,.3,1) both}
.portrait-art{max-width:450px;width:100%;justify-self:center;padding:15px;background:#e7ecf2;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(2deg);transition:transform .35s ease-out;box-shadow:0 26px 65px #1c47741a;animation:portrait-enter 1.1s cubic-bezier(.16,1,.3,1) both}
.portrait-window{position:relative;overflow:hidden;margin-block:12px;aspect-ratio:4/5;background:#101b2d}
.portrait-window img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;animation:portrait-drift 9s ease-in-out infinite alternate;transform-origin:50% 35%}
.portrait-scan{position:absolute;left:0;right:0;height:1px;top:0;background:#f0a18a;box-shadow:0 0 22px 4px #d8584035;opacity:.7;animation:scan-in 2.2s .3s both;pointer-events:none}
.portrait-art .art-stamp{bottom:75px;animation:label-float 5s ease-in-out infinite}
.floating-label{position:absolute;top:75px;left:-35px;background:var(--paper);border:1px solid #819fc3;padding:10px 14px;font:9px var(--mono);letter-spacing:.7px;box-shadow:4px 5px 0 #b5c2d1;animation:label-float 6s ease-in-out infinite reverse}
.floating-label>span{display:inline-block;color:var(--blue);font-size:19px;vertical-align:middle;margin-right:8px}
.motion-toggle{position:absolute;right:0;bottom:16px;border:0;border-bottom:1px solid #9db2c4;padding:7px 0;background:transparent;color:#40596f;font:9px var(--mono);cursor:pointer}
.motion-toggle[hidden]{display:none}.motion-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.note-card{background-color:#faf8f4dc;transition:transform .25s,box-shadow .25s}.note-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px #284f6e12}
.case-symbol{transition:transform .4s}.case summary:hover .case-symbol{transform:rotate(-8deg) translateY(-4px)}
.about-portrait{margin:0;max-width:400px;transform:rotate(-2deg);border:1px solid #9bb4cc;padding:12px;background:var(--sky);transition:transform .4s,box-shadow .4s}
.about-portrait:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 20px 40px #284f6e20}.about-portrait img{display:block;width:100%;height:auto}.about-portrait figcaption{font:8px/1.5 var(--mono);letter-spacing:.5px;padding:13px 3px 2px}
@keyframes hero-enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes word-enter{from{opacity:0;transform:translateX(-25px)}to{opacity:1;transform:translateX(0)}}
@keyframes portrait-enter{from{opacity:0;translate:25px 30px;scale:.95}to{opacity:1;translate:0 0;scale:1}}
@keyframes portrait-drift{from{transform:scale(1)}to{transform:scale(1.045) translateY(-3px)}}
@keyframes label-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes scan-in{0%{top:0;opacity:0}15%{opacity:.7}90%{opacity:.5}100%{top:100%;opacity:0}}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation:none!important;transition:none!important}.page-hidden *{animation-play-state:paused!important}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:30px;padding-block:30px 55px}.hero h1{font-size:clamp(58px,12vw,88px)}.hero-copy .eyebrow{margin-bottom:14px}.portrait-art{width:calc(100% - 22px);max-width:400px}.floating-label{left:-18px;font-size:8px;top:55px;padding:8px 10px}.portrait-window{aspect-ratio:1/1}.portrait-window img{object-position:50% 23%}.hero-description{margin-bottom:20px}.hero h1{margin-bottom:18px}.hero-intro{margin-bottom:8px}.about-portrait{width:calc(100% - 12px);justify-self:center}.motion-toggle{bottom:9px}.portrait-art .art-stamp{padding:10px 13px;font-size:11px;bottom:60px}}
@media(prefers-reduced-motion:reduce){.interactive-grid{display:none}*,*:before,*:after{animation:none!important;transition:none!important}.portrait-art{transform:rotate(2deg)}.portrait-scan{display:none}}
@media(max-width:760px){.hero{gap:18px}.hero-copy{display:contents}.hero-copy>.eyebrow{grid-row:1;margin:0}.hero-copy>h1{grid-row:2;margin:0}.portrait-art{grid-row:3;margin-block:8px 20px}.hero-intro{grid-row:4}.hero-description{grid-row:5;margin-bottom:0}.hero .button{grid-row:6;justify-self:start}.hero-note{grid-row:7;margin:0 0 12px}.hero .motion-toggle{bottom:8px}}
/* Keep decorative entrance transforms from widening the mobile viewport. */
body{overflow-x:clip}
/* Two equal tracks meet at the loop boundary without a visible restart. */
.principles-strip{overflow:hidden;background:#e7ecf2d9;position:relative;box-shadow:inset 0 1px 0 #fff}
.carousel-track{display:flex;width:max-content;animation:carousel-flow 30s linear infinite}
.carousel-group{display:flex;align-items:center;justify-content:space-around;flex-shrink:0;width:max(100vw,1450px);gap:28px;padding:20px 28px;font:500 12px var(--mono);letter-spacing:1.3px}
.carousel-group span{white-space:nowrap;transition:color .25s,text-shadow .25s}
.carousel-group span:hover{color:var(--blue);text-shadow:0 0 18px #d8584055}
.carousel-group i{display:inline-block;font:normal 30px/1 Arial;color:var(--blue);animation:carousel-spin 10s linear infinite}
.principles-strip:before,.principles-strip:after{content:'';position:absolute;top:0;bottom:0;width:65px;z-index:1;pointer-events:none}
.principles-strip:before{left:0;background:linear-gradient(90deg,#e7ecf2,transparent)}
.principles-strip:after{right:0;background:linear-gradient(-90deg,#e7ecf2,transparent)}
.principles-strip:hover .carousel-track,.principles-strip:hover i,.principles-strip:focus-within .carousel-track,.principles-strip:focus-within i{animation-play-state:paused}
.principles-strip:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.portrait-window img{object-position:50% 35%}
.about-portrait img{aspect-ratio:auto;object-fit:contain}
@keyframes carousel-flow{to{transform:translateX(-50%)}}
@keyframes carousel-spin{to{transform:rotate(360deg)}}
.motion-paused .carousel-track{width:100%}.motion-paused .carousel-group{width:100%;flex-wrap:wrap;justify-content:center;gap:18px 25px}.motion-paused .carousel-group[aria-hidden="true"]{display:none}.motion-paused .principles-strip:before,.motion-paused .principles-strip:after{display:none}
@media(prefers-reduced-motion:reduce){.carousel-track{width:100%}.carousel-group{width:100%;flex-wrap:wrap;justify-content:center;gap:18px 25px}.carousel-group[aria-hidden="true"]{display:none}.principles-strip:before,.principles-strip:after{display:none}}
/* Navy structure, warm vermilion accents, pale drafting paper. */
.site-header{border-bottom-color:#12243d45}.wordmark-dot{color:var(--blue)}
.button{background:var(--ink)}.button:hover{background:var(--blue)}
.portrait-art{background:#12243d;border-color:#314660;box-shadow:0 26px 65px #12243d25}
.portrait-art .art-top,.portrait-art figcaption{color:#f4eee5;border-color:#63738a}
.portrait-art:before{border-color:#c7443570}.floating-label{border-color:#c74435;box-shadow:4px 5px 0 #12243d30}
.art-stamp{border-color:#c74435;box-shadow:3px 4px 0 #12243d35}
.principles-strip{background:#12243d;color:#fff6eb;border-color:#12243d}
.carousel-group i{color:#f07860}.carousel-group span:hover{color:#ffac97}
.principles-strip:before{background:linear-gradient(90deg,#12243d,transparent)}.principles-strip:after{background:linear-gradient(-90deg,#12243d,transparent)}
.method{background:#12243d;color:#faf8f4;border-color:#12243d}.method .section-heading>p,.method-grid p{color:#c3cfdf}.method .step span{color:#f07860}.method-grid article,.toolbelt{border-color:#43546c}
.about-portrait{background:#12243d;border-color:#43546c;color:#faf8f4}

/* Dark navy edition: brighter vermilion keeps small accents readable. */
:root{color-scheme:dark;--paper:#0b1423;--ink:#f2eee7;--blue:#ff806b;--sky:#15243a;--line:#34445b;--muted:#b0bed0}
body{background-color:var(--paper);background-image:linear-gradient(#92abc413 1px,transparent 1px),linear-gradient(90deg,#92abc413 1px,transparent 1px)}
::selection{background:#ff806b;color:#0b1423}
.site-header{border-bottom-color:var(--line)}
.hero-description,.hero-note,.section-heading>p,.case-main .eyebrow,.case-main p,.case-content p,.work-footnote,.about p:not(.eyebrow),.footer>span,.motion-toggle{color:var(--muted)}
.button{background:var(--blue);color:#0b1423}.button:hover{background:#ff9c89}
.nav-about,.text-link,.case-list,.about{border-color:#75869a}
.portrait-art{background:#142238;border-color:#445771;box-shadow:0 26px 65px #0005}
.portrait-art .art-top,.portrait-art figcaption{color:#d6dfeb;border-color:#445771}
.portrait-art:before{border-color:#ff806b66}
.floating-label,.art-stamp{background:#15243a;color:var(--blue);border-color:#b86a5e;box-shadow:4px 5px 0 #050c1780}
.interactive-grid{background:radial-gradient(240px circle at var(--cursor-x,70%) var(--cursor-y,30%),#ff806b1c,transparent 100%)}
.interactive-grid:after{background-image:linear-gradient(#ff806b80 1px,transparent 1px),linear-gradient(90deg,#ff806b80 1px,transparent 1px)}
.principles-strip{background:#15243a;border-color:#445771;box-shadow:none}
.principles-strip:before{background:linear-gradient(90deg,#15243a,transparent)}.principles-strip:after{background:linear-gradient(-90deg,#15243a,transparent)}
.carousel-group i{color:var(--blue)}
.tags span,.expand-mark,.case-content{border-color:#506078}
.symbol-product span:nth-child(2),.symbol-data span{background:#24334a}.symbol-data span:nth-child(4){background:var(--blue)}
.method{background:#121f33;border-color:#34445b}.method .section-heading>p,.method-grid p{color:#bdc9d9}
.method .step span{color:var(--blue)}
.note-card{background:linear-gradient(135deg,transparent 96%,#34445b 96%),#121f33;border-color:#3e5068}
.note-card p{color:var(--muted)}.note-card:hover{border-color:#9c645e;box-shadow:0 14px 30px #0003}
.about-portrait{background:#15243a;border-color:#445771}.about-portrait:hover{box-shadow:0 20px 40px #0005}
.skip-link{background:#ff806b;color:#0b1423}
/* Product marks remain legible while the band moves; names distinguish related products. */
.carousel-group{width:max(100vw,1450px);gap:55px;padding:23px 42px}
.brand-item{display:inline-flex;align-items:center;gap:15px;font:500 19px/1.2 var(--body);letter-spacing:-.3px;flex-shrink:0}
.brand-icon{display:block;width:36px;height:36px;object-fit:contain;filter:brightness(0) invert(1);transition:transform .3s,filter .3s}
.brand-claude,.brand-claudecode{filter:brightness(0) saturate(100%) invert(65%) sepia(37%) saturate(891%) hue-rotate(326deg) brightness(102%) contrast(96%)}
.brand-n8n{filter:brightness(0) saturate(100%) invert(65%) sepia(65%) saturate(1728%) hue-rotate(312deg) brightness(104%) contrast(100%)}
.brand-figma-color{filter:none}
.roi-stat{margin:0 0 25px;padding:15px 0 15px 18px;border-left:2px solid var(--blue);background:linear-gradient(90deg,#ff806b0d,transparent)}
.roi-value{display:block;font:600 clamp(36px,3.4vw,49px)/1.1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.5px;color:var(--blue);min-height:54px}
.roi-caption{display:block;margin-top:7px;font:500 8px/1.6 var(--mono);letter-spacing:1px;color:var(--muted)}
.hero h1 .outlined{display:inline-block}
.decoding{position:relative}
.decode-source{opacity:0}
.decode-overlay{position:absolute;inset:0;overflow:hidden;white-space:nowrap;pointer-events:none;color:var(--blue);-webkit-text-stroke:0;filter:blur(var(--decode-blur,0));text-shadow:0 0 16px #ff806b55}
@media(prefers-reduced-motion:reduce){.decode-source{opacity:1}.decode-overlay{display:none}}
.motion-paused .decode-source{opacity:1}.motion-paused .decode-overlay{display:none}
@media(max-width:760px){.roi-stat{grid-row:3;margin:0;padding-block:10px}.roi-value{font-size:38px;min-height:42px}.roi-caption{font-size:7px;letter-spacing:.6px}.hero .portrait-art{grid-row:4}.hero .hero-intro{grid-row:5}.hero .hero-description{grid-row:6}.hero .button{grid-row:7}.hero .hero-note{grid-row:8}}
.brand-item:hover .brand-icon{transform:translateY(-3px) rotate(-5deg)}
.symbol-product-mind{width:120px;height:110px}.symbol-product-mind img{width:100%;height:auto}
@media(max-width:760px){.case-symbol{display:flex;grid-column:2;grid-row:2;width:76px;height:70px}.symbol-data{padding:12px}.case summary .expand-mark{grid-column:3;grid-row:1}}
@media(max-width:760px){.brand-item{font-size:17px}.brand-icon{width:32px;height:32px}.carousel-group{gap:38px}}

/* Outcomes lead the story; tools support the interactive product journey. */
.carousel-group{width:max(100vw,1750px);gap:40px}
.outcome-item{display:inline-flex;align-items:center;gap:19px;font:500 17px var(--body);letter-spacing:0}
.outcome-number{font:10px var(--mono);color:#a3b4cb}.outcome-arrow{color:var(--blue);font-size:22px}
.journey-scenario{display:flex;align-items:center;gap:25px;border:1px solid #42536d;background:#0b142388;padding:20px 25px}
.journey-scenario .eyebrow{margin:0;color:var(--blue);font-size:9px}.journey-scenario p{margin:0;font:500 25px var(--display)}
.scenario-note{margin-left:auto;font:9px/1.5 var(--mono);color:#a7b9d1}
.journey-nav{display:grid;grid-template-columns:repeat(5,1fr);margin-block:38px 28px;position:relative}
.journey-nav:before{content:'';position:absolute;left:10%;right:10%;top:23px;height:1px;background:#4d5c73}
.journey-nav button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:13px;border:0;background:transparent;color:#afbed1;font:500 17px/1.3 var(--body);cursor:pointer;padding:0 8px 13px;transition:color .2s}
.journey-node{display:grid;place-items:center;width:47px;height:47px;background:#121f33;border:1px solid #586a82;border-radius:50%;font:12px var(--mono);transition:background .2s,box-shadow .2s}
.journey-nav button[aria-pressed="true"]{color:#fff0e8}.journey-nav button[aria-pressed="true"] .journey-node{background:var(--blue);color:#0b1423;border-color:var(--blue);box-shadow:0 0 0 6px #ff806b12,0 0 24px #ff806b20}
.journey-nav button.is-complete .journey-node{border-color:var(--blue);color:var(--blue)}
.journey-nav button:hover{color:var(--blue)}.journey-nav button:focus-visible,.journey-controls button:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.journey-panels{border:1px solid #42536d;background:linear-gradient(130deg,#15243a,#0d192b)}
.journey-panel{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:38px;min-height:390px;animation:journey-enter .35s ease-out}
.journey-panel[hidden],.journey-nav[hidden],.journey-controls[hidden]{display:none}
.journey-explanation h3{font:600 39px/1.06 var(--display);margin:0 0 20px;letter-spacing:-.4px}.journey-explanation>p:not(.eyebrow){font-size:14px;color:#bdc9d9;max-width:480px}
.journey-explanation .eyebrow{font-size:9px;color:var(--blue)}.journey-explanation p.journey-question{padding-left:13px;border-left:2px solid var(--blue);color:#f2eee7;font-style:italic;margin-block:22px}
.journey-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:10px var(--body);color:#b1c2d8}.journey-tools>span{font:8px var(--mono);letter-spacing:1px;margin-right:8px}.journey-tools img{object-fit:contain;filter:brightness(0) invert(1);margin-left:8px}.journey-tools img.full-color{filter:none}
.journey-artifact{border:1px solid #41536b;background:#0a1525;padding:24px;align-self:stretch;position:relative}
.artifact-label{font:9px/1.6 var(--mono);letter-spacing:.6px;color:var(--blue);margin-bottom:18px}
.artifact-header{font:500 13px/1.5 var(--body);border-bottom:1px solid #34445b;padding-bottom:15px;margin-bottom:19px;display:flex;gap:9px;align-items:center}.artifact-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
.journey-artifact dl{margin:0}.journey-artifact dt{font:8px var(--mono);letter-spacing:1px;color:#9bacc4;margin-bottom:6px}.journey-artifact dd{font:13px/1.6 var(--body);margin:0 0 17px;color:#e2e8ef}.journey-artifact dd:last-child{margin-bottom:0}
.journey-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.journey-progress{font:10px/1.6 var(--mono);color:#b1c2d8}.journey-controls>div{display:flex;gap:10px}.journey-controls button{font:500 11px var(--body);padding:12px 17px;border:1px solid #566a85;background:transparent;color:#e7edf5;cursor:pointer}.journey-controls .journey-next{background:var(--blue);color:#0b1423;border-color:var(--blue)}.journey-controls button:disabled{opacity:.35;cursor:default}.journey-controls button:not(:disabled):hover{border-color:#ffa491}
@keyframes journey-enter{from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.flow-map{margin-bottom:36px;border:1px solid #42536d;background:#0b1423;overflow:hidden}
.flow-top{display:flex;align-items:center;gap:20px;padding:21px 26px;border-bottom:1px solid #293b53}.flow-top .eyebrow{margin:0;color:var(--blue);font-size:9px}.flow-phase{margin-left:auto;font:9px var(--mono);letter-spacing:1px;color:#d0dbea}
.flow-toggle{font:9px var(--mono);color:#d0dbea;background:none;border:1px solid #526780;padding:8px 11px;cursor:pointer}.flow-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:4px}.flow-toggle[hidden]{display:none}
.flow-diagram{display:block;width:100%;height:auto;padding:16px 20px 0}
.flow-node rect,.flow-node circle{fill:#142238;stroke:#ff806b;stroke-width:1.3}.flow-node text{fill:#e7edf6;font:500 12px var(--body)}.flow-node .flow-main-label{font:600 18px var(--display)}.flow-node .flow-small,.flow-zone{fill:#b2c1d5;font:8px var(--mono);letter-spacing:.9px}.flow-node .flow-result-title{font:600 23px var(--display);fill:var(--blue)}.flow-inner-line{stroke:#9eafc5;stroke-width:1.5;fill:none}
.flow-node .flow-result-ring{fill:none;stroke:#ff806b;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease}
.flow-node{transition:opacity .55s}.flow-enhanced .flow-node:not(.is-active){opacity:.24}.flow-enhanced .flow-node:not(.is-active) .flow-result-ring{stroke-dashoffset:1}
.flow-links path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s ease,opacity .4s}.flow-enhanced .flow-links [data-flow-edge]:not(.is-active),.flow-enhanced .flow-links [data-flow-edge]:not(.is-active) path{stroke-dashoffset:1;opacity:.2}
.flow-particles{display:none;fill:#ff806b}.flow-enhanced .flow-particles{display:block}.flow-particles circle:not(.is-active){visibility:hidden}
.flow-log{border-top:1px solid #293b53;padding:18px 26px;display:grid;gap:7px;background:#09111e}.flow-log p{margin:0;font:10px/1.6 var(--mono);color:#c3cfe0;transition:opacity .4s,transform .4s}.flow-log p span{color:var(--blue);margin-right:9px}.flow-enhanced .flow-log p:not(.is-active){opacity:0;transform:translateY(5px)}
.flow-footnote{margin:0;padding:10px 26px;font:8px/1.5 var(--mono);color:#9aabc1;border-top:1px solid #23344b}
/* The diagram follows the page vertically on narrow screens. */
.flow-viewport{min-width:0}
.flow-viewport:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}

.direction-icon{display:inline-block;width:1em;height:1em;min-width:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.flow-top{flex-wrap:wrap;padding:17px;gap:12px}.flow-phase{font-size:8px;flex-basis:100%;order:3;margin:0;min-height:26px}.flow-toggle{margin-left:auto;min-height:44px}.flow-diagram{display:block;width:100%;padding:12px 8px 0}.flow-node text{font-size:14px}.flow-node .flow-small,.flow-zone{font-size:9px;letter-spacing:.5px}.flow-log{padding:16px;gap:8px}.flow-log p{font-size:9px}.flow-footnote{padding:12px 16px}.site-header nav a,.footer>a:last-child{display:inline-flex;align-items:center;min-height:44px}.text-link{align-items:center;min-height:44px}.text-link>span[aria-hidden]{flex-shrink:0}.journey-toggle,.motion-toggle{min-height:44px}}
@media(prefers-reduced-motion:reduce){.flow-particles{display:none!important}}
@media(max-width:1000px){.journey-panel{gap:25px;padding:26px}.journey-explanation h3{font-size:34px}.journey-scenario{gap:15px}.scenario-note{max-width:170px}}
@media(max-width:760px){.journey-scenario{flex-wrap:wrap;padding:18px;gap:8px 15px}.journey-scenario p{font-size:25px}.scenario-note{flex-basis:100%;max-width:none;margin:0}.journey-nav{grid-template-columns:1fr;margin-block:26px;gap:0}.journey-nav:before{left:23px;top:23px;bottom:23px;right:auto;width:1px;height:auto}.journey-nav button{flex-direction:row;text-align:left;padding:0 0 16px;gap:16px;font-size:15px}.journey-nav button:last-child{padding-bottom:0}.journey-nav button br{display:none}.journey-node{flex-shrink:0}.journey-panel{grid-template-columns:1fr;gap:24px;padding:22px 18px;min-height:0}.journey-explanation h3{font-size:32px}.journey-explanation>p:not(.eyebrow){font-size:13px}.journey-artifact{padding:18px}.journey-controls{align-items:stretch;flex-direction:column;gap:12px}.journey-controls>div{justify-content:space-between}.journey-controls button{padding:12px 14px}.outcome-item{font-size:16px}}
.journey-playback{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 0 0}.journey-playback[hidden]{display:none}.journey-playback-status{font:8px/1.6 var(--mono);letter-spacing:.7px;color:#b6c6da}
.journey-toggle{font:10px var(--mono);color:var(--blue);border:1px solid #6b514f;background:#ff806b08;padding:9px 13px;cursor:pointer}.journey-toggle[hidden]{display:none}.journey-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.journey-timer{height:3px;background:#35445a;overflow:hidden}.journey-timer span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px #ff806b66}
.journey-nav:after{content:'';position:absolute;left:10%;top:23px;height:1px;width:var(--journey-completion,0%);background:var(--blue);transition:width .65s ease}
.journey-panel{min-height:430px;animation:journey-enter .55s ease-out}.journey-panel:not([hidden]) .journey-artifact{animation:artifact-enter .6s ease-out both}.journey-panel:not([hidden]) dd{animation:artifact-enter .55s ease-out both}.journey-panel:not([hidden]) dd:nth-of-type(2){animation-delay:.12s}.journey-panel:not([hidden]) dd:nth-of-type(3){animation-delay:.24s}
.journey-playing .journey-nav button[aria-pressed="true"] .journey-node{animation:journey-pulse 2.8s ease-in-out infinite}
@keyframes artifact-enter{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes journey-pulse{0%,100%{box-shadow:0 0 0 4px #ff806b12}50%{box-shadow:0 0 0 9px #ff806b08,0 0 25px #ff806b20}}
@media(max-width:760px){.journey-playback{align-items:flex-start}.journey-playback-status{max-width:150px;font-size:7px}.journey-toggle{font-size:9px;white-space:nowrap;padding:9px}.journey-nav:after{display:none}.journey-panel{min-height:690px}}
@media(prefers-reduced-motion:reduce){.journey-timer{display:none}}
.scroll-reveal{opacity:.08;translate:0 24px;transition:opacity .65s ease,translate .65s cubic-bezier(.2,.65,.3,1);transition-delay:0ms}
.scroll-reveal.is-visible{opacity:1;translate:0 0;transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal:focus-within{opacity:1;translate:0 0}
.motion-paused .scroll-reveal{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;translate:0 0}}
@media print{.scroll-reveal{opacity:1;translate:none}.journey-panel[hidden]{display:block}.journey-nav,.journey-controls,.journey-playback{display:none}}

/* The connection reaches its destination before the node lights up. */
.flow-enhanced .flow-links path{stroke-dashoffset:calc(1 - var(--edge-progress,0));transition:opacity .35s}
.flow-enhanced .flow-node .flow-result-ring{stroke-dashoffset:calc(1 - var(--result-progress,0));transition:none}
.flow-node.is-current>rect,.flow-node.is-current>circle:first-child{stroke:#ff806b;stroke-width:1.3}
.flow-links [data-flow-edge="3"],.flow-links [data-flow-edge="4"]{stroke:var(--blue)}
.flow-particles circle[data-flow-particle="3"],.flow-particles circle[data-flow-particle="4"]{fill:var(--blue)}
.flow-resetting .flow-node,.flow-resetting .flow-particles{opacity:0;transition:opacity .35s}
.flow-result-status{font-size:7px!important;letter-spacing:.3px!important}
@media(prefers-reduced-motion:reduce){.flow-enhanced .flow-links path{stroke-dashoffset:0}.flow-enhanced .flow-node .flow-result-ring{stroke-dashoffset:0}}
@property --portrait-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.about-portrait{position:relative;isolation:isolate;box-shadow:0 0 32px #ff806b12}
.about-portrait:before{content:'';position:absolute;inset:-3px;padding:2px;pointer-events:none;background:conic-gradient(from var(--portrait-angle),transparent 0deg,#ff806b 65deg,#f0bf7b 95deg,transparent 145deg,transparent 210deg,#a4d7ff 270deg,transparent 320deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:portrait-orbit 8s linear infinite}
.about-portrait:after{content:'';position:absolute;inset:-12px;border:1px solid #ff806b18;pointer-events:none;animation:portrait-aura 4s ease-in-out infinite}
.about-portrait.scroll-reveal:not(.is-visible):before,.about-portrait.scroll-reveal:not(.is-visible):after{animation-play-state:paused}
@keyframes portrait-orbit{to{--portrait-angle:360deg}}
@keyframes portrait-aura{0%,100%{opacity:.35;box-shadow:0 0 15px #ff806b08}50%{opacity:1;box-shadow:0 0 32px #ff806b20}}
.motion-paused .about-portrait:hover{transform:rotate(-2deg)}
@media(prefers-reduced-motion:reduce){.about-portrait:hover{transform:rotate(-2deg)}}
.brand-mark{display:inline-block;flex-shrink:0;width:32px;height:32px;vertical-align:middle;overflow:visible}.brand-mark path{stroke-dasharray:1;stroke-dashoffset:0;animation:brand-draw 6s ease-in-out infinite}.wordmark .brand-mark{align-self:center;margin-right:9px}.floating-label .brand-mark{width:25px;height:25px;margin-right:7px}.about-portrait figcaption .brand-mark{width:26px;height:26px}.footer .brand-mark{width:28px;height:28px}.wordmark:hover .brand-mark path,.wordmark:focus-visible .brand-mark path,.floating-label:hover .brand-mark path,.about-portrait:hover .brand-mark path{animation-duration:3s;filter:drop-shadow(0 0 3px #ff806b70)}.scroll-reveal:not(.is-visible) .brand-mark path{animation-play-state:paused}@keyframes brand-draw{0%{stroke-dashoffset:1;opacity:1}35%,85%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}@media(max-width:480px){.site-header{flex-wrap:wrap;gap:12px;padding-block:18px}.site-header .brand-mark{width:26px;height:26px;margin-right:7px}.site-header nav{gap:14px}.about-portrait figcaption{gap:8px}}

.social-link:hover{color:#ff806b}.social-link:focus-visible{outline:2px solid #ff806b;outline-offset:6px}
.language-switch{display:inline-flex;align-items:center;gap:4px;border:1px solid #42536d;padding:2px}.site-header .language-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:2px 5px;font:11px var(--mono)}.language-switch a[aria-current="page"]{background:#ff806b;color:#0b1423}@media(max-width:760px){.site-header{flex-wrap:wrap}.site-header nav{flex-wrap:wrap;gap:12px}.site-header .language-switch a{min-height:40px}.hero h1{overflow-wrap:normal}html[lang="en"] .hero h1{font-size:clamp(40px,10.5vw,76px)}}