/* Continuous, atmospheric art direction. */
:root{--ink:#edf0ef;--muted:#a8b1be;--blue:#c4cedc;--navy:#151c27;--yellow:#e9e3b0;--paper:#131922;--line:#c1cbd323;--heading:'Manrope',Arial,sans-serif}
html{background:#131922;scroll-padding-top:100px}body{background:transparent;isolation:isolate}body::before{content:'';position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 80% 12%,#39475c80,transparent 53%),radial-gradient(ellipse at 10% 80%,#55626738,transparent 55%),#131922;pointer-events:none}.wrap{max-width:1440px;width:calc(100% - 128px)}.header{height:95px;position:relative;border-bottom:0;z-index:10}.brand{color:#f0f1ed}.brand svg{fill:#17202a;stroke:#d1d9df}.brand-dot{color:var(--yellow)}nav{font-size:14px;gap:30px}.header-cta{border:1px solid #e9e3b055;border-radius:30px;padding:12px 20px;color:var(--yellow)}.header-cta:hover{background:#e9e3b016}.eyebrow{font-size:12px;letter-spacing:2.4px;color:#aebac8}.tiny-dot{background:var(--yellow)}.hero{min-height:calc(100svh - 95px);grid-template-columns:1.2fr 1fr;padding-block:80px 100px;position:relative;gap:0}.hero-copy{z-index:2}.hero .eyebrow{font-size:12px}.hero h1{font-size:clamp(56px,6.2vw,92px);line-height:1.06;letter-spacing:-4.8px;font-weight:500;margin:36px 0}.hero h1 span:not(.line){color:var(--yellow)}.hero-copy>p{font-size:17px;line-height:1.8;max-width:520px;color:#b7c0cb}.hero-actions{gap:27px;margin-top:40px}.button{border-radius:30px;padding:18px 25px;font-size:14px}.button-blue,.button-yellow{background:var(--yellow);color:#202732}.text-link{color:#e4e8eb}.hero-note{margin-top:48px;color:#95a2b2;font-size:12px}.hero-note>span{background:var(--yellow)}.graph-panel{height:650px;min-height:0;background:none;overflow:visible;position:absolute;width:57%;right:-5%;top:calc(50% + 80px);transform:translateY(-50%);pointer-events:none;border-radius:0;opacity:.85}.graph-panel:before{content:'';position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse,#8facc023,transparent 68%);filter:blur(35px)}#hero-tesseract{height:100%;width:100%;overflow:visible}.graph-top{top:15px;left:80px;right:40px;color:#b2bfca;font-size:12px}.graph-bottom{bottom:0;left:80px;right:40px;color:#b2bfca}.graph-edge{stroke:#b8c8d7;opacity:.35}.graph-edge.highlight{opacity:.75}.graph-labels rect{fill:#242e3b;stroke:#798899}.graph-labels text{fill:#e4e7eb}.graph-labels .core-label text{fill:#28313d}.experience{position:relative;z-index:1;border-top:1px solid var(--line);border-bottom:0;padding-block:38px 55px;gap:25px}.experience>p{color:#99a6b5}.client{color:#bdc6cd}.section{padding-block:135px}.section-heading{margin-bottom:65px;gap:65px}.section-heading h2,h2{font-size:clamp(38px,4.5vw,65px);letter-spacing:-2.6px;line-height:1.12;font-weight:500;margin-top:25px}.section-heading>p{font-size:16px;max-width:370px;color:#aeb8c5}.expertise{padding-top:150px;padding-bottom:100px;position:relative}.expertise::before{content:'';position:absolute;inset:-200px 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 5% 50%,#b1c5d013,transparent 65%)}.services{display:block;border:0}.service{display:grid;grid-template-columns:70px 1fr 1fr;column-gap:45px;padding:48px 0;border-top:1px solid var(--line);position:relative}.service+.service{border-left:0}.service-top{grid-column:1;grid-row:1 / 4;flex-direction:column;justify-content:flex-start;gap:26px;align-items:start;margin:0}.service-top svg{width:40px;height:40px;stroke:#bdcbd9;fill:#1c2530}.service h3{grid-column:2;font-size:30px;letter-spacing:-1px;color:#edf0ef;align-self:end}.service>p{grid-column:2;min-height:0;max-width:370px;font-size:16px;line-height:1.9}.service ul{grid-column:3;grid-row:1 / 4;margin:0;align-self:center}.service li{font-size:15px;padding:15px 0;border-color:#c1cbd31a}.service li:before{color:var(--yellow)}.service>a{grid-column:2;max-width:370px;margin-top:12px;color:var(--yellow)}#work{padding-top:100px}.case-grid{gap:80px 45px;align-items:start}.case-card{border:0;background:none;border-radius:0;overflow:visible}.case-card:nth-child(even){margin-top:120px}.case-art{border-radius:3px;background:#b7c5d416;color:#e5e9eb;height:330px;border:1px solid #c4cfdd20;overflow:hidden}.case-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,#d0dbe316,transparent 60%)}.case-art-top{font-size:12px;color:#cbd2d8}.route-art{height:185px;top:60px}.route-main{stroke:var(--yellow)}.route-art circle{fill:var(--yellow);stroke:#28333f}.route-faint{stroke:#9dabbc}.case-stat{font-size:69px;bottom:27px;left:29px;color:var(--yellow)}.case-stat>span{color:#d9dfe3;font-size:14px}.case-copy{padding:26px 0 0}.case-client{color:#aebdc9;text-transform:uppercase;letter-spacing:2px;font-size:12px;margin-bottom:17px}.case-copy h3{font-size:28px;color:#f0f1ed}.case-copy p{font-size:16px;color:#aeb8c5}.case-link{margin-top:25px;font-size:14px;color:var(--yellow);border-bottom:1px solid var(--line);padding-bottom:18px}.case-link>span{font-size:18px}.signal-art{top:85px;height:140px;gap:8px}.signal-art i{background:#a7bcc9}.compact-art{height:245px}.team-art{margin-top:60px}.team-art span{background:#2c383d;color:#e8ebdf;border-color:#aabbb44d}.team-art span:nth-of-type(2){background:var(--yellow);color:#242d33}.team-art i{background:#aebbb366}.meletium-art{font-size:40px;margin-top:55px;color:var(--yellow)}.coming-soon{color:#aeb8c5}.approach{background:linear-gradient(180deg,transparent,#9ab4c00d 35%,#9ab4c00d 70%,transparent);color:var(--ink);padding-block:170px}.approach .eyebrow{color:var(--yellow)}.steps{gap:45px;margin-top:90px}.steps h3{font-size:25px;margin-top:0}.steps p{font-size:16px;color:#adb9c8}.about{gap:100px;grid-template-columns:1fr 1.1fr;padding-block:140px}.about-visual{background:transparent;min-height:530px;padding:0;position:relative}.about-visual>.eyebrow{font-size:12px;color:#b3bfce}.math-graph{width:350px;max-width:100%;color:#9ab0c2;margin:40px auto;opacity:.8}.math-graph circle{fill:#24303b}.about-visual>p{font-size:37px;color:#e4e8eb}.about-visual>span{color:#a7b5c5}.about-copy>p{color:#aeb8c5;font-size:16px}.about-copy .about-intro{color:#e0e6e9;font-size:17px}.credentials{gap:48px;padding:25px 0 35px}.credentials strong{font-size:43px;color:var(--yellow)}.credentials span{color:#aeb8c5}.journal{background:transparent;position:relative}.journal:before{content:'';position:absolute;inset:-150px 0;z-index:-1;background:radial-gradient(ellipse at 90% 50%,#bbc8d51a,transparent 65%)}.articles{gap:35px}.article{background:transparent;border:0;border-top:1px solid #c1cbd343;padding:28px 0;min-height:250px}.article-meta{color:var(--yellow)}.article h3{font-size:28px;color:#e9edee}.article-bottom{color:#aab6c6}.article-bottom>span{color:var(--yellow)}.article:hover{border-color:var(--yellow)}.contact{background:transparent;border-radius:0;padding:130px 0 110px;margin-block:0;border-top:1px solid var(--line);overflow:visible}.contact h2{font-size:clamp(48px,6vw,86px);letter-spacing:-3.7px;line-height:1.1;margin:30px 0}.contact p{font-size:16px;color:#b5bfcc}.contact-email{color:#d0d7dd}.contact-graph{width:340px;opacity:.4;margin-right:0}.contact-graph circle{fill:#202b36}.contact>div{z-index:1}.contact .eyebrow{color:var(--yellow)}footer{border-top:1px solid var(--line);padding-block:30px 40px}footer p,footer>span{color:#aab5c2}dialog{background:#f7f7f2;color:#202630;--ink:#202630;--muted:#626e7b;--paper:#f7f7f2;--line:#dadedf;--blue:#414e61}dialog .eyebrow{color:#68798c}dialog h2{font-size:38px}dialog .result{background:#e9ecee;color:#354558}dialog .button{color:#202630}nav.open{background:#1c2532}.motion-toggle{position:fixed;right:22px;bottom:20px;z-index:15;background:#202a36d9;color:#d9dfdf;border:1px solid #c1cbd33b;backdrop-filter:blur(15px);border-radius:30px;padding:10px 15px;font-size:12px;letter-spacing:.5px}.motion-toggle:hover{border-color:var(--yellow)}.scroll-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--yellow);transform:scaleX(0);transform-origin:left;z-index:30;pointer-events:none}.skip-link{color:#202630}.button:focus-visible,button:focus-visible,a:focus-visible{outline-color:var(--yellow)}dialog :focus-visible{outline-color:#414e61}
@media(min-width:1550px){.graph-panel{height:740px;min-height:0}#hero-tesseract{height:100%;min-height:0}}
@media(max-width:1150px){.wrap{width:calc(100% - 80px)}.hero h1{font-size:68px}.hero{min-height:800px}.graph-panel{right:-3%;width:58%;height:570px;min-height:0}.header{gap:20px}nav{gap:18px}.hero-copy>p{max-width:370px}.hero-actions{flex-direction:column;align-items:start}.service{column-gap:28px;grid-template-columns:50px 1fr 1fr}.service h3{font-size:25px}.about{gap:50px}.case-copy h3{font-size:25px}.contact-email{display:block;margin:20px 0}.contact-graph{width:260px}}
@media(max-width:800px){.wrap{width:calc(100% - 44px)}.header{height:80px}.header-cta{padding:10px 15px}.hero{min-height:970px;display:block;padding:75px 0 410px}.hero h1{font-size:clamp(45px,8.8vw,70px);letter-spacing:-3px}.hero-copy>p{max-width:480px;font-size:16px}.hero-actions{flex-direction:row;align-items:center}.hero-note{margin-top:30px}.graph-panel{width:90%;right:0;top:auto;bottom:-20px;transform:none;height:440px;min-height:0;opacity:.7}#hero-tesseract{height:100%;min-height:0}.graph-top{display:none}.graph-bottom{bottom:15px;left:0;right:0}.experience{padding-block:40px}.section{padding-block:85px}.section-heading{margin-bottom:45px}.section-heading h2,h2{font-size:42px;letter-spacing:-1.8px}.section-heading>p{max-width:500px;margin-top:25px}.service{grid-template-columns:45px 1fr;gap:0 25px;padding-block:35px}.service h3,.service>p,.service>a,.service ul{grid-column:2}.service ul{grid-row:auto;display:block;margin:15px 0}.service-top{grid-row:1 / 5}.service h3{font-size:27px}.case-grid{gap:55px 28px}.case-card:nth-child(even){margin-top:80px}.case-art{height:260px;padding:18px}.case-art-top{font-size:12px}.case-stat{font-size:48px;left:18px;gap:12px}.case-stat>span{font-size:12px}.route-art{height:140px}.compact-art{height:200px}.case-copy h3{font-size:24px}.team-art{margin-top:48px}.team-art span{font-size:12px;padding:10px}.meletium-art{font-size:30px;margin-top:40px}.steps{margin-top:55px;gap:38px}.steps p{font-size:15px}.about{grid-template-columns:1fr;gap:55px}.about-visual{min-height:0}.math-graph{width:240px;float:right;margin:15px 0}.about-visual>p{font-size:33px;margin-top:65px}.about-visual>span{clear:both;padding-top:35px}.about-copy{max-width:600px}.articles{gap:15px}.article{min-height:200px}.contact{padding-block:90px}.contact h2{font-size:54px;letter-spacing:-2.5px}.contact-graph{right:-15px;opacity:.18;width:260px}.contact-email{margin:20px 0}.motion-toggle{right:12px;bottom:12px}footer{padding-bottom:65px}}
@media(max-width:480px){.hero{min-height:860px;padding-top:50px;padding-bottom:355px}.hero .eyebrow{font-size:12px;letter-spacing:1.5px}.hero h1{font-size:45px;letter-spacing:-2.5px;line-height:1.12;margin-block:30px}.hero-copy>p{font-size:16px}.hero-actions{gap:18px}.button{padding:16px 19px;font-size:12px}.hero-note{font-size:12px;line-height:1.6}.graph-panel{height:355px;min-height:0;width:100%;bottom:0;right:0}.graph-bottom{font-size:12px}.section-heading h2,h2{font-size:35px}.service{column-gap:18px;grid-template-columns:30px 1fr}.service-top svg{width:29px;height:29px}.service h3{font-size:23px}.service>p{font-size:15px}.case-grid{grid-template-columns:1fr;gap:55px}.case-card:nth-child(even){margin-top:0}.case-art{height:265px}.compact-art{height:210px}.case-art-top{font-size:12px}.case-stat{font-size:55px}.case-copy h3{font-size:26px}.team-art span{font-size:13px;padding:13px}.steps{gap:30px 23px}.steps h3{font-size:22px}.steps p{font-size:14px}.math-graph{width:150px;margin-top:60px}.about-visual>p{font-size:27px}.about-visual>span{font-size:12px}.about-copy .about-intro{font-size:16px}.credentials{gap:30px}.credentials strong{font-size:37px}.article h3{font-size:26px}.contact h2{font-size:42px;letter-spacing:-2px}.contact p{font-size:15px}.contact-graph{width:210px;right:0}.contact .eyebrow{font-size:12px}dialog h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.graph-pulse{animation:none}}
@media(min-width:801px){.hero-copy{width:min(800px,72vw)}.hero h1{font-size:clamp(56px,5.5vw,84px);letter-spacing:-3.8px;white-space:nowrap}.graph-panel{opacity:.65;top:calc(50% + 150px)}.hero-copy>p{max-width:420px}}

.tesseract-panel{opacity:1}.tesseract-edge{stroke:#c2ceda;stroke-width:3;vector-effect:non-scaling-stroke;fill:none}.tesseract-edge.dimension-edge{stroke:var(--yellow);stroke-width:3.2}.tesseract-vertex{fill:#e3e9ec}#hero-tesseract{overflow:hidden}

.tesseract-flow-edge{stroke-width:3.8;stroke-linecap:round;vector-effect:non-scaling-stroke;fill:none;filter:drop-shadow(0 0 4px #ed8cdb55)}.tesseract-flow-head{fill:#ffd0f5;filter:drop-shadow(0 0 5px #ed8cdbaa)}
/* Shared navigation and dedicated pages. */
.header{position:sticky;top:0;background:#151d28ec;backdrop-filter:blur(20px);box-shadow:0 0 0 1px #c1cbd30c;border-radius:0 0 14px 14px;padding-inline:18px;z-index:20}nav a[aria-current]{color:var(--yellow)}nav a[aria-current]:after{content:'';display:block;height:1px;background:var(--yellow);margin-top:5px}.breadcrumb{display:flex;gap:14px;padding-top:38px;font-size:13px;color:var(--muted)}.breadcrumb a{color:var(--yellow)}.page-section{padding-top:70px}.page-section h1{font-size:clamp(42px,5vw,74px);letter-spacing:-2.5px;line-height:1.12;font-weight:500;margin:25px 0}.inner-page .expertise{padding-bottom:90px}.inner-page .about{align-items:start}.inner-page .about-visual{padding-top:25px}.inner-page .contact.page-section{padding-block:90px 60px;border:0}.detail-page{padding-block:65px 100px}.detail-heading{max-width:970px;margin-bottom:60px}.detail-heading h1{font-size:clamp(43px,5.5vw,78px);line-height:1.12;font-weight:500;letter-spacing:-3px;margin:25px 0}.detail-heading>p{font-size:20px;color:var(--muted);line-height:1.7}.prose{max-width:760px;font-size:17px;line-height:1.95;color:#bfc9d3}.prose h2{font-size:29px;line-height:1.3;letter-spacing:-.8px;margin:45px 0 20px;color:var(--ink)}.prose p{margin-bottom:24px}.prose ol{margin:0 0 24px;padding-left:1.4em}.prose li{margin-bottom:8px}.prose li::marker{color:var(--yellow)}.prose .result{color:var(--yellow);font-size:30px;line-height:1.4;border-block:1px solid var(--line);padding:30px 0}.prose .source-note{font-size:14px;border-top:1px solid var(--line);padding-top:25px;margin-top:40px}.prose>a.text-link{margin-top:25px;color:var(--yellow)}.prose a{color:var(--yellow)}.approach-detail{padding-bottom:100px}.contact-details{padding-bottom:110px}.draft-notice{font-size:14px!important;color:var(--yellow)!important}.home-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.home-service-grid>a,.home-service-grid>div{padding:27px 0;border-top:1px solid var(--line)}.home-service-grid span{font-size:12px;letter-spacing:1.8px;color:var(--yellow)}.home-service-grid h3{font-size:28px;line-height:1.35;font-weight:500;letter-spacing:-1px;margin:25px 0 18px}.home-service-grid p{font-size:16px;line-height:1.9;color:var(--muted)}.home-service-grid b{display:block;font-size:14px;font-weight:500;color:var(--yellow);margin-top:28px}.section-more{margin-top:40px;color:var(--yellow)}.home-about{display:grid;grid-template-columns:1fr 1fr;gap:80px}.home-about p{font-size:19px;line-height:1.9;color:var(--muted)}.home-about .text-link{display:flex;margin-top:23px;color:var(--yellow)}a.article{cursor:pointer}a.case-card:hover .case-link{color:#fff}.inner-page .section-heading{align-items:start}
@media(max-width:800px){.header{padding-inline:8px;gap:15px}.header nav{left:-8px;right:-8px}.page-section{padding-top:40px}.page-section h1{font-size:43px;letter-spacing:-1.7px}.home-service-grid{grid-template-columns:1fr;gap:20px}.home-about{grid-template-columns:1fr;gap:30px}.detail-heading h1{font-size:46px;letter-spacing:-1.8px}.detail-heading{margin-bottom:40px}.prose{font-size:16px}.prose h2{font-size:26px}.breadcrumb{padding-top:25px}.contact.page-section h1{font-size:43px}.inner-page .about-visual{display:none}.home-about p{font-size:17px}}
@media(max-width:480px){.header .brand{font-size:24px}.header .brand svg{width:28px;margin-right:6px}.header-cta{padding:9px 11px}.header-cta span{margin-left:8px}.detail-heading h1,.page-section h1{font-size:37px}.prose .result{font-size:25px}.contact.page-section h1{font-size:36px}}
/* Floating navigation, inset from the viewport on every side. */
.header{top:16px;margin-top:16px;border:1px solid #c1cbd326;border-radius:20px;background:#111923fa;box-shadow:0 0 0 1px #02050b7a,0 12px 28px #02050bc7,0 30px 76px #02050bb8,0 0 48px 12px #02050b80}
@media(max-width:800px){.header{top:10px;margin-top:10px;border-radius:16px}.header nav{top:calc(100% + 8px);left:0;right:0;border:1px solid #c1cbd326;border-radius:16px}}
/* Comfortable sizing for navigation, labels, and supporting text. */
nav,.header-cta,.menu-toggle{font-size:16px}
.eyebrow,.hero .eyebrow,.contact .eyebrow,.about-visual>.eyebrow{font-size:14px;letter-spacing:1.5px}
.button,.text-link,.service>a,.case-link,.home-service-grid b{font-size:16px}
.hero-note,.experience>p{font-size:14px}
.case-client,.case-art-top,.coming-soon,.article-meta,.article-meta>span,.home-service-grid span{font-size:14px;letter-spacing:1px}
.article-bottom,.case-stat>span,.credentials span,.about-visual>span{font-size:15px}
.contact-email,.breadcrumb,.motion-toggle{font-size:15px}
footer p,footer>span,footer>a:last-child{font-size:15px}
.prose .source-note,.draft-notice{font-size:16px!important}
@media(max-width:800px){nav,.header-cta,.menu-toggle{font-size:15px}.eyebrow,.hero .eyebrow,.contact .eyebrow,.about-visual>.eyebrow{font-size:13px;letter-spacing:1.1px}.article-meta{flex-wrap:wrap}.hero-actions{flex-wrap:wrap}.hero-note{line-height:1.7}.case-art-top{font-size:13px}.case-stat>span{font-size:14px}}
@media(max-width:480px){.hero .eyebrow{font-size:12px;letter-spacing:.7px}.button,.text-link{font-size:15px}.hero-note{font-size:13px}.case-art-top{font-size:12px}.article-meta,.article-meta>span{font-size:13px}.contact .eyebrow{font-size:13px}.about-visual>span{font-size:13px}.credentials{gap:23px}.header{gap:10px}.header-cta{padding:9px 10px}.header .brand{font-size:22px}.header .brand svg{width:25px}.motion-toggle{font-size:14px}}

.client.geekbot{display:flex;align-items:center;justify-content:center}.geekbot-logo{display:block;width:180px;max-width:100%;height:auto;filter:grayscale(1);opacity:.78}
@media(max-width:480px){.geekbot-logo{width:145px}}

.client.meletium{display:flex;align-items:center;justify-content:center;gap:15px}.meletium-owl{display:block;width:28px;height:auto;flex-shrink:0;filter:brightness(0) invert(1);opacity:.74}.client.meletium .meletium-wordmark{margin:0;font-family:var(--heading);font-size:29px;font-weight:500;letter-spacing:.1px;color:#bdc6cd}
@media(max-width:480px){.client.meletium{gap:10px}.meletium-owl{width:23px}.client.meletium .meletium-wordmark{font-size:23px}}

.client.dixons{display:flex;align-items:center;justify-content:center}.dixons-logo{display:block;width:150px;max-width:100%;height:auto}
@media(max-width:480px){.dixons-logo{width:130px}}

.client.forky{display:flex;align-items:center;justify-content:center}.forky-logo{display:block;width:180px;max-width:100%;height:auto;filter:grayscale(1);opacity:.85}.experience{flex-wrap:wrap}.experience>.client{flex-shrink:0}
@media(min-width:801px) and (max-width:1150px){.experience>p{flex-basis:100%;text-align:center}.experience{justify-content:space-around;gap:20px}}
@media(max-width:480px){.forky-logo{width:150px}}

/* Contact page: invitation on the left, enquiry form on the right. */
.contact-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,8vw,130px);align-items:start;min-height:calc(100svh - 240px);padding-block:clamp(75px,9vw,135px) 130px}
.contact-intro{max-width:610px;padding-top:18px}
.contact-intro .eyebrow{color:var(--yellow)}
.contact-intro .tiny-dot{background:var(--yellow)}
.contact-intro h1{font-size:clamp(46px,5.2vw,76px);line-height:1.12;letter-spacing:-.045em;font-weight:500;margin:30px 0 0;color:#f0f1ed;text-wrap:balance}
.contact-form{padding:clamp(26px,3.5vw,48px);border:1px solid #c1cbd32c;border-radius:18px;background:linear-gradient(145deg,#26313db8,#19222ce8);box-shadow:0 24px 65px #03070f59,0 0 0 1px #ffffff06}
.contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px}
.contact-field{display:flex;flex-direction:column;gap:10px;min-width:0}
.contact-field-wide{grid-column:1 / -1}
.contact-field label{color:#d7dfe4;font-size:15px;font-weight:500}
.contact-field input,.contact-field textarea,.contact-field select{display:block;width:100%;min-height:52px;border:1px solid #aebdca42;border-radius:9px;background:#101923b8;color:#f0f1ed;font:inherit;font-size:16px;padding:14px 15px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.contact-field textarea{min-height:150px;resize:vertical;line-height:1.6}.contact-field select{-webkit-appearance:none;appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23aebac8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 17px center}
.contact-field select{color-scheme:dark;cursor:pointer}
.contact-field input:hover,.contact-field textarea:hover,.contact-field select:hover{border-color:#e9e3b080}
.contact-field input:focus-visible,.contact-field textarea:focus-visible,.contact-field select:focus-visible{border-color:var(--yellow);box-shadow:0 0 0 3px #e9e3b02e}
.contact-form-actions{display:flex;align-items:center;gap:25px;margin-top:31px}
.contact-form-actions .button{border:0;margin:0;white-space:nowrap}
.contact-form-actions p{color:#aeb8c5;font-size:14px;line-height:1.5;margin:0}
.contact-form-actions .button:disabled{cursor:wait;opacity:.7}
.contact-form-status{margin:24px 0 0;color:var(--yellow);font-size:16px;line-height:1.5}
.contact-form-status.is-error{color:#f0aaa4}
.contact-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:950px){.contact-page{grid-template-columns:1fr;gap:48px;min-height:0;padding-block:75px 100px}.contact-intro{padding-top:0}.contact-intro h1{max-width:720px}.contact-form{max-width:720px}}
@media(max-width:560px){.contact-page{padding-block:55px 80px;gap:38px}.contact-intro h1{font-size:clamp(38px,10vw,52px)}.contact-fields{grid-template-columns:1fr;gap:20px}.contact-form-actions{align-items:flex-start;flex-direction:column;gap:16px}.contact-form{padding:24px}}

.client.digital-ecosystems{display:flex;align-items:center;justify-content:center}.digital-ecosystems-logo{display:block;width:88px;max-width:100%;height:auto;filter:grayscale(1);opacity:.85}.experience{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;align-items:center}.experience>p{grid-column:1 / -1;text-align:center}.experience>.client{width:100%;text-align:center}.client.meletium .meletium-wordmark{font-size:clamp(21px,2.1vw,29px)}
@media(max-width:1150px){.experience{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.client.meletium .meletium-wordmark{font-size:26px}}
@media(max-width:480px){.experience{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.digital-ecosystems-logo{width:80px}.client.meletium .meletium-wordmark{font-size:23px}}

.client.welcome{display:flex;align-items:center;justify-content:center}.welcome-logo{display:block;width:180px;max-width:100%;height:auto;filter:grayscale(1);opacity:.85}
@media(min-width:1301px){.experience{grid-template-columns:repeat(7,minmax(0,1fr));gap:22px}}
@media(min-width:481px) and (max-width:1300px){.experience{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.client.meletium .meletium-wordmark{font-size:23px}}
@media(max-width:480px){.welcome-logo{width:155px}.client.welcome{grid-column:1 / -1}}
@media(min-width:481px) and (max-width:800px){.experience{grid-template-columns:repeat(2,minmax(0,1fr))}.client.welcome{grid-column:1 / -1}}

.client.vitalsource{display:flex;align-items:center;justify-content:center}.vitalsource-logo{display:block;width:120px;max-width:100%;height:auto;filter:grayscale(1);opacity:.85}.experience{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}.client.welcome{grid-column:auto}
@media(max-width:800px){.experience{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.vitalsource-logo{width:110px}}

.brand-mark{display:block;width:44px;height:44px;flex-shrink:0;margin-right:10px}footer .brand-mark{width:34px;height:34px;margin-right:8px}
@media(max-width:480px){.header .brand-mark{width:32px;height:32px;margin-right:7px}}

.experience>p{white-space:nowrap}

/* The company wordmark uses Jura; the rest of the site keeps its existing type. */
.brand{font-family:'Jura',var(--heading);font-weight:700}
.header .brand{font-size:34px}
footer .brand{font-size:27px}
@media(max-width:480px){.header .brand{font-size:24px}footer .brand{font-size:23px}}

/* Case studies share panel colors, heading typography, and metric styling. */
.prose ul{margin:0 0 24px;padding-left:1.4em}
.case-art-top{font-family:var(--font);font-size:20px;font-weight:400;line-height:1.4;letter-spacing:1px;color:#cbd2d8}
.case-art-top>span{font-size:inherit}
.case-stream{position:absolute;top:52px;left:5%;width:90%;height:175px;object-fit:contain}
.case-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;mask-image:linear-gradient(to bottom,transparent 4%,#000 24%,#000 60%,transparent 96%)}
.case-retail .case-stat{top:40px;bottom:auto;left:auto;right:29px}
.case-study-image{display:block;width:100%;height:auto}
.case-study-figure{margin:0 0 32px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:linear-gradient(130deg,#d0dbe316,transparent 60%),#b7c5d416}
.case-figure{scroll-margin-top:135px}
.case-figure figcaption{padding:10px 14px 12px;color:#aeb8c5;font-size:15px;line-height:1.5;border-top:1px solid #c4cfdd20}
.case-figure figcaption strong{color:var(--yellow);font-weight:600}
.case-figure-passage{margin:28px 0 38px}
.case-figure-passage>p{margin-top:0}
.case-figure-passage .case-study-figure{width:100%;max-width:620px;margin:18px auto 0}
.case-figure-passage .case-study-figure a,.case-figure-passage .case-study-figure img{display:block}
.case-figure-passage .case-study-figure img{width:100%;height:auto}
@media(max-width:600px){.case-figure figcaption{font-size:14px}}
@media(max-width:800px){.case-art-top{font-size:16px}.case-stream{top:55px;height:125px}.case-retail .case-stat{top:34px;right:18px}}

.case-network{position:absolute;top:calc(50% + 29px);left:50%;width:150%;max-width:none;height:auto;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}

.case-reading{position:absolute;top:58px;left:0;width:100%;height:calc(100% - 66px);object-fit:contain}
.case-meletium .case-reading{top:58px;left:29px;width:calc(55% - 29px);height:calc(100% - 82px);object-position:left center}
.case-meletium .case-stat{left:auto;right:29px;bottom:auto;top:calc(50% + 17px);transform:translateY(-50%)}
@media(max-width:800px){.case-meletium .case-reading{top:50px;left:18px;width:calc(58% - 18px);height:calc(100% - 66px)}.case-meletium .case-stat{right:18px;top:calc(50% + 16px);flex-direction:column;align-items:flex-start;gap:6px}}

/* Keep the original founder portrait visible at every screen size. */
.inner-page .about-founder{display:block;min-height:0}
.founder-portrait{display:block;width:100%;max-width:460px;height:auto;margin:24px 0 0;border-radius:3px}
.about-founder>p{margin-top:24px}
.about-founder>span{display:block;margin-top:24px;padding-top:0}

/* A live vertical timeline; the source remains a complete, readable sequence. */
.approach-journey{--timeline-line:#5c6674;--rail-width:4.5px;--visited-scale:.45;--story-top:140px;--story-stage-height:min(820px,calc(100svh - var(--story-top) - 32px));--node-column:44%;--node-height:104px;--timeline-gap:clamp(28px,5vw,80px);position:relative;margin-top:70px}
.approach-stage{position:relative}
.approach-rail{display:none}
.approach-journey .steps{display:grid;grid-template-columns:minmax(0,1fr);gap:64px;margin:0}
.approach-journey .steps article{position:relative;display:grid;grid-template-columns:var(--node-column) minmax(0,1fr);gap:var(--timeline-gap);align-items:center}
.approach-node-slot{display:flex;align-items:center;justify-content:center;min-width:0;padding-inline:16px;position:relative;z-index:2}
.approach-node{position:relative;display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%;height:var(--node-height);border-radius:20px;background:linear-gradient(145deg,#34414e,#232e3a)}
.approach-node h3{position:relative}
.approach-journey .steps h3{font-size:clamp(26px,3.2vw,44px);font-weight:500;line-height:1;letter-spacing:-.045em;margin:0 32px;flex-shrink:0;white-space:nowrap;color:var(--yellow)}
.approach-journey .steps p{font-size:clamp(17px,1.55vw,22px);line-height:1.75;margin:0;max-width:560px;color:#c8d1d9;text-wrap:pretty}
.approach-connector{display:none}
.approach-milestone{display:flex;justify-content:center;width:var(--node-column)}
.approach-journey .approach-milestone p{font-size:clamp(15px,1.1vw,16px);line-height:1.5;margin:0;color:#c8d1d9}
.approach-milestone-line{display:none}
/* The story plays on a loop in a fixed-height stage; clicking it pauses or resumes (motion.js). */
.is-scroll-story .approach-stage{height:var(--story-stage-height);cursor:pointer}
/* Stopped, the scroll drives the story: a tall track (18svh of scroll per second of story; motion.js sets
   --story-units) with the stage pinned below the header. */
.approach-journey.is-scroll-driven{height:calc(var(--story-stage-height) + 18svh * var(--story-units,30))}
.is-scroll-driven .approach-stage{position:sticky;top:var(--story-top)}
.approach-toggle{position:absolute;right:0;bottom:0;z-index:3;background:#202a36d9;color:#d9dfdf;border:1px solid #c1cbd33b;border-radius:30px;padding:8px 14px;font-size:12px;letter-spacing:.5px;opacity:.6;transition:opacity .25s ease,border-color .25s ease}
.approach-stage:hover .approach-toggle,.approach-toggle:focus-visible,.is-stopped .approach-toggle{opacity:1}
.approach-toggle:hover{border-color:var(--yellow)}
.is-scroll-story .steps{height:100%;grid-template-rows:repeat(4,minmax(0,1fr));gap:0}
/* --fill (expansion) and --glow (signal proximity) both pull the rail color toward yellow. */
.is-scroll-story .approach-node{--fill:0;--glow:0;--tip-top:0;--tip-bottom:0;--tip-top-color:color-mix(in srgb,var(--yellow) calc(var(--tip-top) * 100%),var(--timeline-line));--tip-bottom-color:color-mix(in srgb,var(--yellow) calc(var(--tip-bottom) * 100%),var(--timeline-line));--node-color:color-mix(in srgb,var(--yellow) calc(max(var(--fill),var(--glow)) * 100%),var(--timeline-line));background:var(--node-color);flex-shrink:0;will-change:width,height}
.is-scroll-story .approach-node h3{color:#202833;will-change:opacity,transform}
.is-scroll-story .steps article>p{will-change:opacity,transform}
.is-scroll-story .approach-rail{display:block;position:absolute;left:calc(var(--node-column) / 2);top:12.5%;bottom:12.5%;width:var(--rail-width);background:var(--timeline-line);transform:translateX(-50%)}
/* Fillets: the rail flares into an open node with concave rounded corners, in the node's own color.
   Drawn with gradients (no masks); they grow with --fill and stay hidden until about a pixel tall.
   --node-scale keeps the narrow end rail-wide when a visited node is scaled down. */
.is-scroll-story .approach-node::before,.is-scroll-story .approach-node::after{--r:calc(12px * var(--fill));content:'';position:absolute;left:50%;width:calc(var(--rail-width) / max(var(--node-scale,1),.1) + var(--r) * 2);height:var(--r);transform:translateX(-50%);pointer-events:none;opacity:clamp(0,(var(--fill) - .1) * 8,1)}
.is-scroll-story .approach-node::before{bottom:calc(100% - .5px);background:linear-gradient(var(--tip-top-color),var(--node-color));-webkit-mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) left/50.5% 100% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) right/50.5% 100% no-repeat;mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) left/50.5% 100% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) right/50.5% 100% no-repeat}
/* Each fillet fades between the node's color and the rail's color at its tip: grey, or yellow where the trail is
   passing (motion.js sets --tip-top/--tip-bottom from the trail). Masks cut the curves. */
.is-scroll-story .approach-node::after{top:calc(100% - .5px);background:linear-gradient(var(--node-color),var(--tip-bottom-color));-webkit-mask:radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) left/50.5% 100% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) right/50.5% 100% no-repeat;mask:radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) left/50.5% 100% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) right/50.5% 100% no-repeat}
/* The rail starts at the first node and ends at the last, so they have no outer fillet. */
.is-scroll-story .steps article:first-of-type .approach-node::before,.is-scroll-story .steps article:last-of-type .approach-node::after{display:none}
.is-scroll-story .approach-rail::before{content:'';position:absolute;top:0;left:0;width:100%;height:var(--discovered-progress,0%);border-radius:3px;background:var(--yellow);box-shadow:0 0 8px #e9e3b066;pointer-events:none}
.approach-trail{--trail-dir:bottom;position:absolute;left:50%;top:0;width:calc(var(--rail-width) + 2px);height:0;border-radius:3px;background:linear-gradient(to var(--trail-dir),#e9e3b000,var(--yellow));filter:drop-shadow(0 0 4px #e9e3b055);transform:translateX(-50%)}
.approach-signal{position:absolute;left:50%;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px #e9e3b0aa;transform:translate(-50%,-50%)}
.approach-signal{background:radial-gradient(circle at 35% 30%,#fff8d9,var(--yellow) 55%,#b5ab73);box-shadow:0 0 12px #e9e3b0aa,0 3px 6px #040a1277}
/* Sits left of the rail at --milestone-at of cursor progress (the rail spans 12.5%–87.5% of the stage). */
.is-scroll-story .approach-milestone{position:absolute;left:0;width:auto;right:calc(100% - var(--node-column) / 2 + 10px);top:calc(12.5% + var(--milestone-at) * 75%);transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;gap:12px;z-index:1;pointer-events:none}
.is-scroll-story .approach-milestone p{text-align:right;min-width:0;will-change:opacity,transform}
.is-scroll-story .approach-milestone-line{display:block;flex-shrink:0;width:calc(var(--timeline-gap) - 16px);height:2px;background:linear-gradient(270deg,#e9e3b060,#e9e3b015);transform-origin:right center}
/* Runs from just past its node (motion.js sets --connector-start as the node resizes) to the text. */
.is-scroll-story .approach-connector{--connector-start:calc(var(--node-column) / 2 + 14px);--connector-end:calc(var(--node-column) + var(--timeline-gap) - 16px);display:block;position:absolute;left:var(--connector-start);top:50%;width:max(0px,calc(var(--connector-end) - var(--connector-start)));height:2px;background:linear-gradient(90deg,#e9e3b060,#e9e3b015);transform-origin:left center}
@media(max-width:800px){.approach-journey{--story-top:120px;--visited-scale:.65;--node-column:42%;--node-height:76px;--timeline-gap:20px;margin-top:40px}.approach-node-slot{padding-inline:4px}.approach-journey .steps h3{font-size:clamp(16px,3.6vw,28px);margin-inline:12px}.approach-journey .steps p{font-size:clamp(16px,2.2vw,18px);line-height:1.65}.approach-journey .steps{gap:40px}.is-scroll-story .steps{gap:0}.is-scroll-story .approach-connector{--connector-end:calc(var(--node-column) + var(--timeline-gap) - 8px)}.is-scroll-story .approach-milestone{left:-22px;right:calc(100% - var(--node-column) / 2 + 8px);gap:6px}.is-scroll-story .approach-milestone-line{width:calc(var(--timeline-gap) - 8px)}.approach-journey .approach-milestone p{font-size:13px}}
@media print{.approach-toggle{display:none}.approach-journey.is-scroll-driven{height:auto}.is-scroll-story .approach-milestone{position:static;transform:none;justify-content:center}.is-scroll-story .approach-milestone p{opacity:1!important;transform:none!important;text-align:center}.is-scroll-story .approach-milestone-line{display:none}.is-scroll-story .approach-stage{position:static;height:auto;max-height:none}.is-scroll-story .approach-rail,.is-scroll-story .approach-connector{display:none}.is-scroll-story .approach-node::before,.is-scroll-story .approach-node::after{display:none}.is-scroll-story .steps{display:grid;gap:36px}.is-scroll-story .steps article>p,.is-scroll-story .approach-node h3{opacity:1!important;transform:none!important}.is-scroll-story .approach-node{width:max-content!important;height:var(--node-height)!important;transform:none!important;background:#e9e3b0!important;box-shadow:none!important;border-radius:20px!important}.is-scroll-story .approach-node h3{position:static}}
/* Case art panels: raised with a bevel and drop shadow; linked cards lift and grow on hover. */
.case-art{border-radius:10px;box-shadow:0 22px 40px -20px #000000b3,0 8px 18px -10px #00000080}
.case-art:after{border-radius:inherit;box-shadow:inset 0 1px 0 #ffffff26,inset 0 -3px 8px #00000059,inset 0 0 0 1px #ffffff0a}
a.case-card .case-art{transition:scale .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
@media(hover:hover){a.case-card:hover .case-art{scale:1.035;border-color:#e9e3b055;box-shadow:0 34px 60px -24px #000000cc,0 14px 26px -12px #00000099,0 0 0 1px #e9e3b01f}}
a.case-card:focus-visible .case-art{scale:1.035;border-color:#e9e3b055}
@media(prefers-reduced-motion:reduce){a.case-card .case-art{transition:none}}
/* Dither: faint fixed grain over the page background breaks up banding in the dark gradients. */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}
/* ---- Copy update (optimium-site-copy.md) ---- */
/* Homepage argument: the closing answer reads as the section's conclusion. */
.thesis-answer{font-family:var(--heading);font-size:clamp(24px,2.4vw,32px);line-height:1.4;letter-spacing:-.02em;font-weight:500;color:#e9edee;max-width:900px;margin:60px 0 0;text-wrap:pretty}
.thesis .section-more{display:inline-flex;margin-top:28px}
/* Timeline: the "With…" tag at the end of each step description. */
.approach-with{display:block;margin-top:16px;font-family:var(--font);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
/* Approach page: With your team, Proof Sprint, comparison table. */
.section-closing{font-family:var(--heading);font-size:clamp(19px,1.8vw,24px);line-height:1.5;letter-spacing:-.01em;color:#e0e6e9;max-width:820px;margin:50px 0 0;text-wrap:pretty}
.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 60px}
.team-grid h3{margin-top:12px}
.sprint-label{font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--yellow);margin:0 0 6px}
.sprint-list{list-style:none;padding:0;margin:0;max-width:820px}
.sprint-list li{position:relative;padding:20px 0 20px 26px;border-top:1px solid var(--line);font-size:17px;line-height:1.6;color:#c8d1d9}
.sprint-list li::before{content:'';position:absolute;left:2px;top:29px;width:8px;height:8px;border-radius:50%;background:var(--yellow)}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:720px;border-collapse:collapse;font-size:16px;line-height:1.55}
.compare-table th,.compare-table td{padding:18px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.compare-table thead th,.compare-table thead td{border-top:0;font-size:14px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:#aeb8c5}
.compare-table tbody th{font-size:15px;font-weight:500;color:#aeb8c5;white-space:nowrap}
.compare-table td{color:#c8d1d9}
.compare-table th:last-child,.compare-table td:last-child{background:#e9e3b00f;color:var(--yellow);font-weight:500}
.approach-compare .section-more{display:inline-flex;margin-top:32px}
/* Contact page: what happens next. */
.contact-next{margin:44px 0 0;padding-left:1.3em;max-width:520px;font-size:16px;line-height:1.7;color:#aeb8c5}
.contact-next li{margin-bottom:14px;padding-left:4px}
.contact-next li::marker{color:var(--yellow);font-weight:500}
.contact-next strong{color:#e0e6e9;font-weight:500}
/* Insights: upcoming titles while posts are in preparation. */
.upcoming{max-width:900px}
.upcoming .eyebrow{margin-bottom:18px;color:var(--yellow)}
.upcoming-list{list-style:none;padding:0;margin:0}
.upcoming-list li{font-family:var(--heading);font-size:clamp(22px,2.4vw,30px);line-height:1.35;letter-spacing:-.02em;color:#e9edee;padding:24px 0;border-top:1px solid var(--line)}
.upcoming-list li:last-child{border-bottom:1px solid var(--line)}
.upcoming .section-more{display:inline-flex;margin-top:32px}
@media(max-width:800px){.team-grid{grid-template-columns:1fr}.thesis-answer{margin-top:40px}.section-closing{margin-top:36px}.sprint-list li{font-size:16px}}
.link-icon{width:1.1em;height:1.1em;flex-shrink:0;fill:currentColor}
.text-link:has(.link-icon){gap:10px}
.footer-linkedin{display:inline-flex;align-items:center;gap:8px}
/* Mobile header: three-line menu icon (becomes an X when open) so "Let's talk" keeps one line. */
.menu-icon{position:relative;display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:background-color .2s ease}
.menu-icon::before,.menu-icon::after{content:'';position:absolute;left:0;width:100%;height:100%;border-radius:inherit;background:currentColor;transition:transform .25s ease}
.menu-icon::before{transform:translateY(-7px)}
.menu-icon::after{transform:translateY(7px)}
.menu-toggle[aria-expanded="true"] .menu-icon{background-color:transparent}
.menu-toggle[aria-expanded="true"] .menu-icon::before{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon::after{transform:rotate(-45deg)}
.header-cta{white-space:nowrap}
@media(max-width:800px){
.header .menu-toggle{width:44px;height:44px;align-items:center;justify-content:center;padding:0;margin-right:-6px;color:#f0f1ed}
nav a[aria-current]:after{display:none}
}
/* Phones and small tablets: a single-column timeline (the scroll story runs from 801px, see motion.js). */
@media(max-width:800px){
.approach-journey .steps{position:relative;display:block;padding-left:34px}
.approach-journey .steps::before{content:'';position:absolute;left:9px;top:22px;bottom:0;width:2px;border-radius:2px;background:linear-gradient(var(--yellow),var(--timeline-line) 30%,var(--timeline-line) 88%,#5c667400)}
.approach-journey .steps article{display:block;position:relative;margin-top:48px}
.approach-journey .steps article:first-child{margin-top:0}
.approach-journey .steps article::before{content:'';position:absolute;left:-30px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px #141b25,0 0 12px #e9e3b088}
.approach-journey .approach-node-slot{display:block;padding:0}
.approach-journey .approach-node{display:inline-flex;height:auto;padding:10px 18px;border-radius:14px}
.approach-journey .steps h3{font-size:24px;margin:0}
.approach-journey .steps article>p{margin-top:16px}
.approach-journey .approach-milestone{display:block;position:relative;width:auto;margin-top:12px}
.approach-journey article+.approach-milestone{margin-top:24px}
.approach-journey .approach-milestone::before{content:'';position:absolute;left:-29px;top:50%;width:10px;height:10px;border-radius:50%;border:2px solid var(--timeline-line);background:#141b25;transform:translateY(-50%)}
.approach-journey .approach-milestone p{font-size:15px;color:#aeb8c5}
}
/* Heading lines, split at <br> so they can fade in one after another (motion.js). */
.line{display:block;color:inherit}

.client.kotsovolos{display:flex;align-items:center;justify-content:center}.kotsovolos-logo{display:block;width:56px;max-width:100%;height:auto;opacity:.85}
@media(max-width:480px){.kotsovolos-logo{width:50px}}

/* Figure lightbox: a larger figure over the page, closed by Esc, the button or a click. */
.case-study-figure img{cursor:zoom-in}
.figure-lightbox{width:fit-content;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);padding:0;background:#18202b;color:#d9dfe3;border:1px solid #c4cfdd30;border-radius:6px;overflow:hidden;cursor:zoom-out}
.figure-lightbox::backdrop{background:#0d1219e6;backdrop-filter:blur(4px)}
.figure-lightbox img{display:block;width:auto;height:auto;max-width:calc(100vw - 34px);max-height:calc(100vh - 90px);margin:auto}
.figure-lightbox p{margin:0;padding:10px 54px 12px 14px;font-size:15px;line-height:1.5;color:#aeb8c5;border-top:1px solid #c4cfdd20}
.figure-lightbox p strong{color:var(--yellow);font-weight:600}
.figure-lightbox .dialog-close{top:8px;right:8px;width:40px;height:40px;padding:0;border-radius:50%;background:#18202bcc;color:#e5e9eb;line-height:1}
.figure-lightbox :focus-visible{outline-color:var(--yellow)}