/* The public folder is the complete client. No third-party scripts or fonts. */
:root{color-scheme:dark;--bg:#0a1116;--panel:#101b22;--panel2:#14232c;--ink:#edf3f4;--muted:#a0b1ba;--line:#293940;--accent:#69e7df;--lime:#c6e992;--radius:14px;--max:1240px;font-family:Arial,Helvetica,sans-serif;font-size:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6}body:has(dialog[open]){overflow:hidden}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{opacity:.55;cursor:wait}img{display:block;max-width:100%}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{line-height:1.12;letter-spacing:-.045em}h1{font-size:clamp(3.4rem,5.7vw,5.1rem);font-weight:600;line-height:1.04;margin-bottom:26px}h2{font-size:clamp(2.3rem,3.5vw,3.25rem);font-weight:500;margin-bottom:24px}h3{font-size:1.45rem;font-weight:500}p{margin-bottom:18px}button{border:0;background:none}::selection{background:var(--accent);color:var(--bg)}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}section{scroll-margin-top:28px}.wrap{max-width:var(--max);margin-inline:auto;width:calc(100% - 80px)}.section{padding-block:110px}.eyebrow{font-family:Consolas,'Courier New',monospace;font-size:.75rem;letter-spacing:.11em;font-weight:600;color:var(--accent);line-height:1.7}.muted{color:var(--muted)}.accent{color:var(--accent)}.micro{font-size:.75rem;color:var(--muted);line-height:1.6}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:50px;border-radius:6px;padding:13px 21px;background:var(--accent);color:#0a2226;font-size:.875rem;font-weight:700;border:1px solid transparent;transition:background .18s,transform .18s}.button:hover{background:#9cf3ed;transform:translateY(-2px)}.button.small{min-height:42px;padding:10px 16px;font-size:.8rem}.button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}.button.secondary:hover{border-color:var(--accent);background:var(--panel)}.text-link{display:inline-flex;align-items:center;gap:18px;font-size:.875rem;font-weight:600;padding:10px 0}.text-link:hover,.inline-button:hover,a:hover.email-link{color:var(--accent)}.inline-button{padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-size:inherit}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px}.header{position:sticky;top:0;z-index:20;background:#0a1116ed;border-bottom:1px solid #26353b;backdrop-filter:blur(18px)}.nav{display:flex;align-items:center;justify-content:space-between;min-height:91px;gap:20px}.brand{display:flex;align-items:center;gap:14px;font-weight:600;font-size:.875rem;line-height:1.4}.monogram{font-size:1.8rem;letter-spacing:-.12em;font-weight:700}.monogram span{color:var(--accent)}.brand-sub{display:block;font-size:.6rem;letter-spacing:.14em;color:var(--muted);margin-top:5px}.nav-links{display:flex;align-items:center;gap:32px;font-size:.8rem}.nav-links>a:not(.button):hover{color:var(--accent)}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1fr 1.03fr;gap:52px;padding-top:95px;padding-bottom:80px;align-items:center}.hero .eyebrow{margin-bottom:26px}.hero h1 span{color:var(--accent)}.status-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:9px;vertical-align:middle}.hero-description{color:var(--muted);font-size:1.08rem;line-height:1.8;margin-bottom:32px}.hero-note{font-size:.75rem;color:var(--muted);display:flex;gap:12px;align-items:center;margin-top:30px}.line{width:25px;height:1px;background:var(--line);flex-shrink:0}.demo{padding:26px 26px 20px;background:radial-gradient(ellipse at 100% 0%,#1d363945,transparent 65%),var(--panel);border:1px solid #32444d;border-radius:var(--radius);position:relative;box-shadow:0 20px 70px #0003}.demo-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:22px}.demo .eyebrow{font-size:.65rem;margin:0}.badge{display:inline-block;font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 8px;white-space:nowrap}.demo h2{font-size:1.75rem;letter-spacing:-.04em;margin-bottom:10px}.demo>p{font-size:.875rem;max-width:370px}.demo-input{padding:16px 0;border-bottom:1px solid var(--line)}.demo-input label{font-size:.75rem;color:var(--muted);display:block;margin-bottom:6px}select,input,textarea{width:100%;border:1px solid #40535c;background:#0b151c;color:var(--ink);border-radius:6px;padding:11px 12px;min-height:46px;font-size:.875rem}select{cursor:pointer}textarea{resize:vertical;min-height:104px}input::placeholder,textarea::placeholder{color:#7f929d}.demo-input select{font-size:.8rem}.workflow{display:flex;align-items:center;justify-content:space-between;margin:26px 0}.node{width:85px;padding:0;text-align:center;position:relative}.node-icon{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border:1px solid #40545e;border-radius:11px;color:var(--accent);font-size:1.4rem;background:#14262e;transition:background .25s,box-shadow .25s}.node strong{display:block;font-size:.75rem}.node small{display:block;font-size:.625rem;color:var(--muted);white-space:nowrap}.node:hover .node-icon,.node.active .node-icon{border-color:var(--accent);box-shadow:0 0 0 5px #69e7df0d}.node.done .node-icon{background:var(--accent);color:#0a2226}.connector{flex:1;height:1px;background:#3a5661;position:relative;top:-20px}.connector:after{content:'›';position:absolute;right:-1px;top:-13px;color:#67818c}.demo-output{border:1px solid #2a3c43;border-radius:7px;background:#0a1319;padding:15px 17px;min-height:106px}.output-label{font-family:Consolas,monospace;color:var(--accent);font-size:.625rem;letter-spacing:.09em}.demo-output p{font-size:.8rem;margin:7px 0 0;color:#b4c3cb;line-height:1.6}.demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}.demo-bottom .micro{font-size:.625rem}.proof-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:60px;padding-block:26px}.proof-strip p{display:flex;gap:14px;align-items:center;margin:0}.proof-strip strong{font-size:2rem;font-weight:500;letter-spacing:-.06em}.proof-strip p>span{font-size:.75rem;max-width:105px;color:var(--muted);line-height:1.5}.location{margin-left:auto;font-family:Consolas,monospace;font-size:.625rem;letter-spacing:.04em;color:var(--muted);text-align:right}.location b{font-family:Arial,sans-serif;letter-spacing:0;font-weight:400;font-size:.8rem;color:var(--ink)}.section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:36px}.section-head h2{margin-bottom:0}.section-head>p{color:var(--muted);max-width:340px;font-size:.95rem;margin-bottom:5px}.section-head .eyebrow{margin-bottom:18px}.work-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0 26px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filters button{font-size:.8rem;padding:9px 14px;border:1px solid transparent;border-radius:5px;color:var(--muted)}.filters button span{font-family:Consolas,monospace;font-size:.65rem;margin-left:5px;opacity:.7}.filters button[aria-pressed=true]{color:var(--accent);border-color:#3c666a;background:#13282c}.filters button:hover{color:var(--ink)}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#101a21;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}.project:hover{transform:translateY(-5px);border-color:#608088}.project-visual{height:210px;position:relative;overflow:hidden;background-color:#0d1b22;background-image:radial-gradient(#40606a66 1px,transparent 1px);background-size:16px 16px;padding:20px;display:flex;flex-direction:column;justify-content:center}.project-meta{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:.625rem;font-family:Consolas,monospace;color:#a4c1c5}.mini-flow{display:flex;align-items:center;justify-content:center;margin-top:23px;gap:0}.mini-node{height:54px;min-width:62px;background:#162c35;border:1px solid #3f646c;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--accent)}.mini-node:last-child{color:var(--lime);border-color:#587150;background:#202e27}.mini-flow>span{height:1px;background:#41616b;width:28px}.visual-caption{font-family:Consolas,monospace;color:#8faab5;font-size:.625rem;text-align:center;margin:16px 0 0}.project:nth-child(3n+2) .project-visual{background-color:#171a27}.project:nth-child(3n+2) .mini-node{color:#c2b9ee;background:#25263e;border-color:#575575}.project:nth-child(3n+3) .project-visual{background-color:#16221f}.project-body{padding:24px;display:flex;flex-direction:column;flex:1}.project-tag{font-family:Consolas,monospace;color:var(--accent);font-size:.625rem;letter-spacing:.1em;margin-bottom:13px}.project h3{font-size:1.4rem;line-height:1.22;letter-spacing:-.035em;margin-bottom:14px}.project p{font-size:.875rem;color:var(--muted);line-height:1.7}.project-outcome{display:flex;gap:9px;border-top:1px solid var(--line);padding-top:15px;margin-top:auto;font-size:.75rem;color:#c0d4c7}.project-outcome span{color:var(--lime)}.project .text-link{justify-content:space-between;width:100%;margin-top:15px;color:var(--ink);text-align:left}.project .text-link:hover{color:var(--accent)}.center{text-align:center;margin-top:35px}.services-section{background:#101a20;border-block:1px solid var(--line);padding:90px 0}.services-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:110px}.section-intro>p:not(.eyebrow){color:var(--muted);max-width:370px}.services-list details{border-bottom:1px solid var(--line)}.services-list details:first-child{border-top:1px solid var(--line)}summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:20px;padding:23px 0;font-size:1.1rem;font-weight:500;line-height:1.4}summary::-webkit-details-marker{display:none}summary>span:last-child{margin-left:auto;color:var(--muted)}summary .service-number{font-family:Consolas,monospace;color:var(--accent);font-size:.75rem}details[open] summary>span:last-child{transform:rotate(45deg);color:var(--accent)}.service-body{padding:0 0 24px 40px}.service-body p{font-size:.9rem;color:var(--muted)}.service-body a{font-size:.85rem;color:var(--accent)}.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px}.process-grid article{border-top:1px solid #527078;padding:25px 25px 0 0}.process-grid article:not(:first-child){padding-left:25px;border-left:1px solid var(--line)}.process-grid article>span{font: .7rem Consolas,monospace;letter-spacing:.08em;color:var(--accent)}.process-grid h3{font-size:1.3rem;margin-top:25px;margin-bottom:14px}.process-grid p{font-size:.875rem;color:var(--muted)}.process-grid small{display:block;color:#c4d2d6;font-size:.7rem;margin-top:23px}.about-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:95px;padding-block:40px 85px;align-items:start}.portrait{overflow:hidden;border-radius:10px;background:#152128;border:1px solid var(--line)}.portrait img{width:100%;height:340px;object-fit:cover;object-position:center 25%;filter:saturate(.45)}.portrait>div{padding:22px 25px}.portrait span{font: .6rem Consolas,monospace;letter-spacing:.08em;color:var(--accent)}.portrait strong{display:block;font-size:1.6rem;font-weight:500;letter-spacing:-.04em;margin-top:9px}.portrait p{font-size:.75rem;color:var(--muted);margin:5px 0 0}.about-copy>p:not(.eyebrow){color:var(--muted);font-size:.95rem}.about-copy details{border-bottom:1px solid var(--line)}.about-copy summary{font-size:.9rem;padding:16px 0}.detail-body{font-size:.85rem;color:var(--muted);padding-bottom:15px}.detail-body h3{font-size:1rem;color:var(--ink);margin-top:20px;letter-spacing:-.01em}.detail-body a{color:var(--accent)}.credential-links{padding-left:18px}.credential-links li{margin-block:12px}.tools-section{border-top:1px solid var(--line);padding:35px 0 70px}.tool-list{display:flex;flex-wrap:wrap;gap:10px 23px;color:#acbbc3}.tool-list span{font-size:.85rem}.contact-section{background:linear-gradient(115deg,#10252b,#10191f 65%);border-top:1px solid #304b50;padding:95px 0}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.contact-layout>div>p:not(.eyebrow){max-width:360px;color:var(--muted)}.contact-layout h2{font-size:clamp(2.3rem,3.4vw,3.1rem);line-height:1.14}.contact-note{display:flex;gap:17px;padding-block:23px;margin-bottom:14px}.contact-note>span{display:grid;place-items:center;width:38px;height:38px;color:var(--accent);border:1px solid #3a5a61;border-radius:8px;flex-shrink:0}.contact-note strong{font-size:.875rem}.contact-note p{font-size:.8rem;color:var(--muted);margin-top:8px}.email-link{font-size:.95rem;display:block;margin-bottom:10px;overflow-wrap:anywhere}.intake{background:#101b22;border:1px solid #38505a;border-radius:12px;padding:28px;min-height:500px}.form-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.form-top .eyebrow{font-size:.65rem}.step-track{display:flex;gap:5px;margin:18px 0 30px}.step-track span{height:3px;background:#2c3f48;flex:1;border-radius:3px}.step-track span.active{background:var(--accent)}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-size:1.5rem;letter-spacing:-.04em;line-height:1.2;font-weight:500;margin-bottom:12px;width:100%}fieldset>p{font-size:.85rem}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block:20px}.choice{position:relative;display:flex;flex-direction:column;padding:15px 13px;border:1px solid #3a4d57;border-radius:7px;cursor:pointer;background:#0d171e}.choice input{position:absolute;top:13px;right:13px;min-height:0;width:15px;height:15px;accent-color:var(--accent);margin:0}.choice>span{color:var(--accent);font-size:1.4rem;line-height:1;margin-bottom:15px}.choice strong{font-size:.8rem;font-weight:500}.choice small{font-size:.65rem;color:var(--muted);margin-top:4px}.choice:has(:checked){border-color:var(--accent);background:#162d32}.field{display:block;font-size:.8rem;font-weight:500;margin-top:17px}.field>input,.field>select,.field>textarea{display:block;margin-top:7px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.optional{font-weight:400;color:var(--muted);font-size:.75rem}.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:15px;margin-top:26px}.form-actions #form-back{margin-right:auto}.form-footnote{margin:15px 0 0;text-align:center;font-size:.65rem}.form-tip,.brief-summary{padding:15px;background:#172a32;border-left:2px solid var(--accent);font-size:.8rem;color:#b6c9d1;margin-top:23px}.brief-summary p{margin:0 0 8px;overflow-wrap:anywhere}.brief-summary p:last-child{margin:0}.brief-summary strong{color:var(--ink)}.consent{display:flex;align-items:flex-start;gap:12px;font-size:.75rem;line-height:1.6;color:var(--muted);margin-top:19px}.consent input{width:17px;height:17px;min-height:0;margin-top:4px;flex-shrink:0;accent-color:var(--accent)}.form-error{color:#ffb8b0;font-size:.85rem;margin:15px 0 0}.form-error:empty{display:none}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}#form-success{padding:40px 0}.success-icon{font-size:2rem;color:var(--accent);display:block;margin-bottom:20px}#form-success p{color:var(--muted);font-size:.95rem}.footer{display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding-block:32px}.footer .brand{margin-right:auto}.footer>.inline-button{font-size:.75rem}.footer .text-link{font-size:.75rem}dialog{padding:0;border:1px solid #445961;border-radius:13px;color:var(--ink);background:var(--bg);width:min(860px,calc(100% - 32px));max-height:90dvh;box-shadow:0 30px 100px #0007}dialog::backdrop{background:#03090ddb;backdrop-filter:blur(7px)}.dialog-bar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#0f1b22;z-index:2;padding:14px 26px;border-bottom:1px solid var(--line)}.close-button{border:1px solid var(--line);height:40px;width:40px;border-radius:6px}.close-button:hover{border-color:var(--accent)}.case-main{padding:38px}.case-main h2{margin-top:15px;font-size:2.5rem}.case-deck{font-size:1.05rem;color:var(--muted)}.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 30px}.case-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.case-main h3{font-size:1.25rem;margin-bottom:15px;letter-spacing:-.025em}.case-main p,.case-main li{color:var(--muted);font-size:.95rem}.case-outcome{padding:23px;background:#172a2b;border-left:3px solid var(--accent);margin:28px 0}.case-outcome p{margin:0}.case-outcome small{display:block;color:#b0c4c5;font-size:.75rem;margin-top:13px}.case-main details{border-block:1px solid var(--line);margin:25px 0}.case-main summary{font-size:1rem}.case-steps{padding-left:22px}.case-steps li{padding:7px 0}.case-image{border-radius:6px;margin:20px 0;max-height:430px;width:100%;object-fit:contain;background:#142027}.case-main .image-note{font-size:.75rem}.privacy-content{padding:30px}.privacy-content p{color:var(--muted)}.privacy-content a{color:var(--accent)}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;top:10px;left:10px;z-index:100;background:var(--accent);color:var(--bg);padding:12px}body [hidden]{display:none!important}
/* Keep the playground's primary action within a typical desktop first viewport. */
.hero{padding-top:64px;padding-bottom:64px}.demo-top{margin-bottom:16px}.demo>p{max-width:none;margin-bottom:10px}.demo-input{padding-block:9px}.workflow{margin-block:20px}.demo-output{min-height:90px}.demo-bottom{margin-top:14px}
@media(min-width:1450px){.hero{padding-top:80px;padding-bottom:80px}.demo{padding:30px}.hero h1{font-size:5.4rem}}
@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.hero{gap:28px}.hero h1{font-size:4.2rem}.demo{padding:20px}.demo-top{flex-wrap:wrap}.proof-strip{gap:35px}.services-layout,.contact-layout,.about-section{gap:45px}.project-body{padding:20px}.nav-links{gap:22px}.node small{font-size:.6rem}.demo-bottom{flex-wrap:wrap}}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:60px}.hero-copy{max-width:650px}.hero h1{font-size:4.8rem}.demo{max-width:650px;width:100%;padding:28px}.demo-top{flex-wrap:nowrap}.demo-bottom{flex-wrap:nowrap}.proof-strip{gap:25px;flex-wrap:wrap}.location{display:none}.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.projects>.project:nth-child(3):last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.projects>.project:nth-child(3):last-child .project-visual{height:auto}.work-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.section{padding-block:75px}.section-head{gap:25px}.section-head>p{max-width:270px}.services-layout{grid-template-columns:1fr;gap:30px}.services-section{padding-block:70px}.section-intro>p:not(.eyebrow){max-width:550px}.process-grid{grid-template-columns:1fr 1fr;gap:30px 0}.process-grid article:nth-child(3){padding-left:0;border-left:0}.about-section{gap:30px;grid-template-columns:.85fr 1.15fr}.portrait img{height:280px}.portrait>div{padding:18px}.contact-layout{gap:35px;grid-template-columns:1fr}.contact-layout>div:first-child{max-width:600px}.intake{max-width:650px;width:100%}.nav-links{gap:17px}.nav-links>.button{display:none}}
@media(max-width:600px){html{scroll-padding-top:80px}.wrap{width:calc(100% - 36px)}.nav{min-height:76px}.brand-sub{font-size:.5rem}.brand{font-size:.8rem}.menu-toggle{display:flex;gap:15px;align-items:center;font-size:.8rem;min-height:44px}.nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:#101c23;border-bottom:1px solid var(--line);padding:25px;flex-direction:column;align-items:stretch;font-size:1rem}.nav-links.open{display:flex}.nav-links>.button{display:inline-flex}.hero{padding-top:48px;padding-bottom:40px;gap:40px}.hero .eyebrow{font-size:.625rem;margin-bottom:23px}.hero h1{font-size:clamp(3.2rem,12vw,4.6rem)}.hero-description{font-size:1rem}.hero-description br{display:none}.actions{gap:12px 22px}.hero-note{font-size:.7rem;margin-top:22px;align-items:flex-start}.demo{padding:19px 16px}.demo-top{gap:10px}.demo-top .eyebrow{font-size:.55rem;margin:0;max-width:140px}.demo h2{font-size:1.55rem}.demo .badge{font-size:.625rem}.workflow{gap:0}.node{width:67px}.node-icon{width:40px;height:40px}.node strong{font-size:.7rem}.node small{font-size:.54rem}.demo-bottom{flex-wrap:wrap}.demo-bottom .micro{font-size:.625rem}.proof-strip{gap:20px;padding-block:22px;justify-content:space-between}.proof-strip p{display:block}.proof-strip strong{font-size:1.7rem}.proof-strip p>span{display:block;font-size:.625rem;max-width:95px}.section{padding-block:65px}.section-head{display:block;margin-bottom:20px}.section-head>p{max-width:100%;margin-top:23px}.section-head h2{font-size:2.35rem}.filters{gap:1px}.filters button{font-size:.75rem;padding:8px 10px}.filters button span{font-size:.6rem}.projects{grid-template-columns:1fr}.projects>.project:nth-child(3):last-child{display:flex;grid-column:auto}.projects>.project:nth-child(3):last-child .project-visual{height:210px}.project-body{padding:24px}.project h3{font-size:1.65rem}.project p{font-size:.95rem}.project-outcome{font-size:.8rem}.project-visual{height:205px}.process-grid{gap:35px 0}.process-grid article{padding-right:14px}.process-grid article:not(:first-child){padding-left:14px}.process-grid article:nth-child(3){padding-left:0}.process-grid h3{font-size:1.2rem}.process-grid p{font-size:.85rem}.process-grid small{font-size:.65rem}.about-section{grid-template-columns:1fr;padding-bottom:55px;gap:35px}.portrait img{height:380px;object-position:center 25%}.portrait>div{padding:22px}.about-copy h2{font-size:2.35rem}.tools-section{padding-bottom:50px}.tool-list{gap:9px 19px}.contact-section{padding-block:65px}.intake{padding:22px 18px}.contact-layout h2{font-size:2.4rem}.choice{padding:14px 11px}.choice strong{font-size:.75rem}.choice small{font-size:.625rem}.form-top .eyebrow{font-size:.6rem}.field-row{grid-template-columns:1fr;gap:0}.footer{gap:16px 25px}.footer .brand{width:100%}.footer .brand>span:last-child{font-size:.75rem}.case-main{padding:25px}.case-main h2{font-size:2rem}.case-columns{grid-template-columns:1fr;gap:15px}.dialog-bar{padding:10px 20px}.case-main .button{width:100%;gap:10px}.case-main .case-deck{font-size:1rem}.privacy-content{padding:25px}.privacy-content h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Services accordion only */
#services {
  --service-accent: var(--route-rgb, var(--network-rgb, 105, 231, 223));
  padding-bottom: 52px;
}

#services .services-list details {
  border-left: 2px solid transparent;
}

#services .services-list details[open] {
  border-left-color: rgb(var(--service-accent));
  background: rgba(var(--service-accent), .04);
}

#services .services-list summary {
  display: grid;
  grid-template-columns: 20px 20px minmax(0, 1fr) 32px;
  gap: 12px;
  align-items: start;
  padding: 18px 16px;
}

#services .service-number,
#services .service-icon {
  margin-top: 4px;
}

#services .service-icon {
  color: var(--muted);
}

#services .service-icon svg {
  display: block;
}

#services details[open] .service-icon {
  color: rgb(var(--service-accent));
}

#services .service-title {
  display: block;
}

#services .service-subtitle {
  display: block;
  margin-top: 5px;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

#services details[open] .service-subtitle {
  display: none;
}

#services .service-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -3px 0 0;
  border: 1px solid transparent;
  border-radius: 50%;
  line-height: 1;
  transition: background .18s, border-color .18s;
}

#services summary:hover .service-toggle,
#services summary:focus-visible .service-toggle {
  color: rgb(var(--service-accent));
  background: rgba(var(--service-accent), .09);
  border-color: rgba(var(--service-accent), .3);
}

#services .service-body {
  padding: 0 16px 14px 80px;
}

#services .service-body p {
  margin-bottom: 8px;
}

#services .service-body .text-link {
  padding-block: 6px;
}

@media (max-width: 850px) {
  #services {
    padding-bottom: 40px;
  }
}

@media (max-width: 600px) {
  #services .services-list summary {
    grid-template-columns: 18px 20px minmax(0, 1fr) 28px;
    gap: 9px;
    padding: 16px 10px;
    font-size: .95rem;
  }

  #services .service-subtitle {
    font-size: .6875rem;
  }

  #services .service-toggle {
    width: 28px;
    height: 28px;
    margin-top: -2px;
  }
  #services .service-body {
    padding: 0 12px 12px 10px;
  }
}
  /* Header additions; the existing menu and CTA layout remain in place. */
.header {
  --nav-accent: var(--route-rgb, var(--network-rgb, 105, 231, 223));
  background: rgba(10, 17, 22, .82);
  border-bottom-color: rgba(160, 177, 186, .12);
  transition: background-color .18s ease, border-color .18s ease;
}
.header.is-scrolled {
  background: rgba(10, 17, 22, .98);
  border-bottom-color: rgba(160, 177, 186, .27);
}
.header .availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .7rem;
  white-space: nowrap;
}
.header .availability-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: rgb(var(--nav-accent));
}
.header .nav-links > a:not(.button).is-active {
  color: rgb(var(--nav-accent));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.header .nav-links > .button.is-active {
  box-shadow: inset 0 0 0 2px var(--bg), 0 0 0 3px rgba(var(--nav-accent), .18);
}
@media (max-width: 1100px) {
  .header .availability { display: none; }
}

/* Personal development tools are deliberately quieter than the marquee. */
#about .dev-environment {
  margin: 20px 0 0;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--muted);
}
#about .dev-environment strong { font-weight: 500; }
/* Header appearance */
.header {
  --nav-accent: var(--route-rgb, var(--network-rgb, 105, 231, 223));
  background: rgba(10, 17, 22, .82);
  border-bottom-color: rgba(160, 177, 186, .12);
  transition: background-color .18s ease, border-color .18s ease;
}

.header.is-scrolled {
  background: rgba(10, 17, 22, .98);
  border-bottom-color: rgba(160, 177, 186, .27);
}

/* Availability badge */
.header .availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .7rem;
  white-space: nowrap;
}

.header .availability-dot {
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: rgb(var(--nav-accent));
}

/* Active navigation link */
.header .nav-links > a:not(.button).is-active {
  color: rgb(var(--nav-accent));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.header .nav-links > .button.is-active {
  box-shadow:
    inset 0 0 0 2px var(--bg),
    0 0 0 3px rgba(var(--nav-accent), .18);
}

/* Keep narrower headers uncluttered */
@media (max-width: 1100px) {
  .header .availability {
    display: none;
  }
}

/* Quiet personal tool list in About */
#about .dev-environment {
  margin: 20px 0 0;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--muted);
}

#about .dev-environment strong {
  font-weight: 500;
}
/* All styling is limited to the Process section. */
#process {
  --process-rgb: var(--route-rgb, var(--network-rgb, 105, 231, 223));
}

/* Small caption and accessible pause control */
#process .process-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 18px;
  color: var(--muted, #a0b1ba);
  font-size: .7rem;
}

#process .process-controls > span {
  font-family: Consolas, monospace;
  letter-spacing: .08em;
}

#process .process-controls label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  min-height: 32px;
}

#process .process-controls input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: rgb(var(--process-rgb));
}

#process .process-controls input:focus-visible {
  outline: 2px solid rgb(var(--process-rgb));
  outline-offset: 4px;
}

/* Four connected cards */
#process .process-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#process .process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border: 1px solid #2b3e44;
  border-radius: 16px;
  background: #101d23;
  transition: border-color .2s ease;
}

#process .process-step:hover {
  border-color: rgba(var(--process-rgb), .55);
}

/* Decorative connections */
#process .process-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 37px;
  left: 100%;
  width: 26px;
  color: rgba(var(--process-rgb), .65);
  text-align: center;
  font-size: 16px;
  line-height: 20px;
}

/* Icon and step number */
#process .process-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 24px;
}

#process .process-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--process-rgb), .22);
  border-radius: 12px;
  background: rgba(var(--process-rgb), .05);
  color: rgb(var(--process-rgb));
}

/* Highlight each step in sequence; only opacity animates. */
#process .process-icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgb(var(--process-rgb));
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(var(--process-rgb), .18);
  opacity: 0;
  animation: process-activation 8s ease-in-out infinite;
  pointer-events: none;
}

#process .process-step:nth-child(2) .process-icon::after {
  animation-delay: 2s;
}

#process .process-step:nth-child(3) .process-icon::after {
  animation-delay: 4s;
}

#process .process-step:nth-child(4) .process-icon::after {
  animation-delay: 6s;
}

#process:has(#process-pause:checked) .process-icon::after {
  animation-play-state: paused;
}

#process .process-number {
  color: var(--muted, #a0b1ba);
  font: .65rem Consolas, monospace;
  letter-spacing: .06em;
}

/* Card text */
#process .process-step h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.3;
}

#process .process-step p {
  margin: 0 0 24px;
  color: var(--muted, #a0b1ba);
  font-size: .875rem;
  line-height: 1.7;
}

/* Align deliverables at the bottom of each row. */
#process .process-step small {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #2b3e44;
  color: #d5e2e5;
  font-size: .75rem;
  line-height: 1.6;
}

#process .process-step small > span {
  display: block;
  margin-bottom: 4px;
  color: rgb(var(--process-rgb));
  font: .6rem Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@keyframes process-activation {
  0%, 25%, 100% { opacity: 0; }
  8%, 17% { opacity: 1; }
}

/* Tablet */
@media (max-width: 1100px) {
  #process .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #process .process-step:nth-child(2)::after {
    display: none;
  }
}

/* Mobile: a vertical workflow */
@media (max-width: 600px) {
  #process .process-flow {
    grid-template-columns: 1fr;
  }

  #process .process-step {
    padding: 22px;
  }

  #process .process-step-top {
    margin-bottom: 18px;
  }

  #process .process-step:not(:last-child)::after {
    content: "↓";
    display: block;
    top: 100%;
    left: calc(50% - 12px);
    width: 24px;
    line-height: 24px;
  }
}

/* Respect the visitor's motion preference. */
@media (prefers-reduced-motion: reduce) {
  #process .process-icon::after {
    animation: none;
  }

  #process .process-step {
    transition: none;
  }

  #process .process-controls label {
    display: none;
  }
  }

/* Combined portfolio: the original design tokens and behaviors stay in place. */
.hero { gap: 48px; padding-block: 58px 64px; }
.hero-copy { min-width: 0; }
.hero-intro { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.hero-portrait { width: 112px; height: 124px; flex: 0 0 auto; object-fit: cover; object-position: center 32%; border-radius: 12px; border: 1px solid #3c535a; }
.hero .hero-intro .eyebrow { margin: 0 0 9px; font-size: .625rem; }
.hero-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.035em; margin: 0 0 7px; line-height: 1.2; }
.hero-location { color: var(--muted); font-size: .75rem; line-height: 1.6; margin: 0; }
.hero h1 { font-size: clamp(3.2rem, 4.8vw, 4.65rem); }
.hero-description { max-width: 450px; font-size: 1rem; line-height: 1.8; margin-bottom: 26px; }
.hero-note { margin-top: 22px; }
.hero .actions { gap: 12px 22px; }
.demo > .micro:last-child { margin: 0; font-size: .65rem; }
.proof-strip { padding-block: 23px; }
.nav-links { gap: 24px; }

/* About: editorial introduction beside four quiet feature cards. */
.about-merged { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 26px; align-items: start; }
.about-story h2 { line-height: 1.13; }
.about-story > p:not(.eyebrow) { color: var(--muted); font-size: .95rem; line-height: 1.85; max-width: 520px; }
.about-story .text-link { margin-top: 5px; }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 3px; }
.about-features article { padding: 25px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.feature-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid #315458; border-radius: 10px; color: var(--accent); background: #69e7df08; flex-shrink: 0; }
.feature-icon svg { display: block; }
.about-features h3 { font-size: 1rem; line-height: 1.35; letter-spacing: -.025em; margin: 21px 0 11px; }
.about-features p { font-size: .8rem; line-height: 1.8; color: var(--muted); margin: 0; }
#about .dev-environment { grid-column: 2; margin: 0; font-size: .7rem; line-height: 1.9; }

/* Experience: chronological records with a thin connecting line. */
.experience-section { padding-block: 84px; background: #101a20; border-block: 1px solid var(--line); }
.experience-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }
.experience-intro > p:not(.eyebrow) { color: var(--muted); font-size: .95rem; line-height: 1.85; max-width: 420px; }
.experience-intro .eyebrow { max-width: 330px; }
.experience-timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid #355057; }
.experience-timeline > li { position: relative; padding: 0 0 28px; }
.experience-timeline > li::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); left: -33px; top: 8px; box-shadow: 0 0 0 5px #173035; }
.experience-timeline > li:last-child { padding-bottom: 0; }
.experience-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.experience-top .eyebrow { font-size: .625rem; margin: 0; }
.experience-date { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.experience-timeline h3 { font-size: 1.3rem; line-height: 1.3; margin: 0 0 9px; }
.experience-previous { color: #c4d2d6; font-size: .8rem; margin-bottom: 6px; }
.experience-place { color: var(--muted); font-size: .7rem; margin-bottom: 17px; }
.experience-timeline ul { padding-left: 18px; color: var(--muted); font-size: .85rem; line-height: 1.8; margin: 0 0 18px; }
.experience-timeline ul li + li { margin-top: 7px; }
.experience-timeline ul li::marker { color: var(--accent); }
.experience-transfer { font-size: .7rem; color: #bdcecf; padding-top: 12px; border-top: 1px solid var(--line); margin: 0; }
.experience-education { display: flex; align-items: center; gap: 15px; margin: 28px 0 0 28px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.experience-education h3 { font-size: .9rem; margin: 0 0 5px; letter-spacing: -.015em; }
.experience-education p { font-size: .75rem; color: var(--muted); margin: 0; }
.experience-credentials { margin-left: 28px; margin-top: 10px; }
.experience-credentials details { border-bottom: 1px solid var(--line); }
.experience-credentials summary { padding-block: 16px; font-size: .8rem; }
.experience-credentials .credential-links { columns: 2; column-gap: 22px; font-size: .75rem; }
.experience-credentials .credential-links li { break-inside: avoid; }

/* Six services, with the same quiet surface and action styles as the work. */
#services { padding-block: 84px 64px; }
#services .section-head { margin-bottom: 34px; }
#services .service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#services .service-card { display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: border-color .2s ease; }
#services .service-card:hover, #services .service-card:focus-within { border-color: #4b7578; }
#services .service-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
#services .service-card-number { color: var(--muted); font: .65rem Consolas, monospace; }
#services .service-card h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 14px; }
#services .service-card p { font-size: .875rem; line-height: 1.8; color: var(--muted); margin-bottom: 24px; }
#services .service-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
#services .service-card-bottom small { color: #b8c9ce; font-size: .7rem; line-height: 1.6; }
#services .service-card-cta { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid #35535a; color: var(--accent); font-size: 1.2rem; transition: background .2s ease; }
#services .service-card-cta:hover { background: #69e7df12; }
.delivery-process { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 28px; }
.delivery-process > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.delivery-process .eyebrow { font-size: .625rem; margin: 0; }
.delivery-process h3 { font-size: 1rem; margin: 0; }
.delivery-process ol { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0; }
.delivery-process li { color: #c3d2d5; font-size: .8rem; padding-left: 20px; border-left: 1px solid var(--line); }
.delivery-process li:first-child { padding-left: 0; border: 0; }
.delivery-process li span { display: block; margin-bottom: 9px; color: var(--accent); font: .6rem Consolas, monospace; letter-spacing: .08em; }
.tools-section { padding-block: 65px 75px; border-top: 0; }
.contact-section { padding-block: 85px; }

@media (max-width: 1200px) {
  .header .availability { display: none; }
  .nav-links { gap: 22px; }
  .about-merged, .experience-layout { column-gap: 40px; }
  .hero { gap: 32px; }
}
@media (max-width: 1000px) {
  .about-merged { grid-template-columns: 1fr; gap: 28px; }
  .about-story { max-width: 650px; }
  .about-story h2 br:nth-of-type(2) { display: none; }
  .about-story > p:not(.eyebrow) { max-width: none; }
  #about .dev-environment { grid-column: 1; }
  .experience-layout { grid-template-columns: 1fr; gap: 35px; }
  .experience-intro > p:not(.eyebrow) { max-width: 650px; }
  #services .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Collapse early enough that the full navigation never crowds the identity. */
@media (max-width: 900px) {
  .nav { min-height: 76px; }
  .menu-toggle { display: flex; align-items: center; gap: 15px; min-height: 44px; font-size: .8rem; }
  .nav-links { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 22px 24px; flex-direction: column; align-items: stretch; gap: 8px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: .95rem; }
  .nav-links.open { display: flex; }
  .nav-links > a { padding-block: 10px; }
  .nav-links > .button { display: inline-flex; margin-top: 8px; }
}
@media (max-width: 850px) {
  .hero { padding-top: 42px; gap: 36px; }
  .hero h1 { font-size: clamp(3.4rem, 8vw, 4.7rem); }
  .hero-description { max-width: 540px; }
  .hero .demo { max-width: none; }
  .experience-section, #services { padding-block: 65px; }
  .tools-section { padding-block: 55px; }
}
@media (max-width: 600px) {
  .hero-intro { gap: 16px; margin-bottom: 25px; }
  .hero-portrait { width: 88px; height: 100px; }
  .hero-name { font-size: 1.15rem; }
  .hero .hero-intro .eyebrow { font-size: .55rem; letter-spacing: .07em; }
  .hero-location { font-size: .7rem; }
  .hero h1 { font-size: clamp(3rem, 11.5vw, 4.3rem); }
  .hero-description { font-size: .95rem; }
  .hero { padding-bottom: 40px; }
  .about-features { gap: 12px; }
  .about-features article { padding: 20px 16px; }
  .about-features h3 { font-size: .9rem; }
  .about-features p { font-size: .775rem; }
  .about-story h2, .experience-intro h2 { font-size: 2.2rem; }
  .experience-timeline { padding-left: 22px; }
  .experience-timeline > li::before { left: -27px; }
  .experience-timeline h3 { font-size: 1.2rem; }
  .experience-education, .experience-credentials { margin-left: 22px; }
  .experience-education { padding: 16px; gap: 12px; }
  .experience-credentials .credential-links { columns: 1; }
  #services .service-cards { grid-template-columns: 1fr; gap: 16px; }
  #services .service-card { padding: 24px; }
  .delivery-process ol { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .delivery-process li:nth-child(3) { padding-left: 0; border: 0; }
  .contact-section { padding-block: 65px; }
}
@media (max-width: 380px) {
  .about-features { grid-template-columns: 1fr; }
  .hero-name { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  #services .service-card, #services .service-card-cta { transition: none; }
}

/* Moving teal edges. Append OUTSIDE all existing @media blocks. */
@property --portfolio-edge-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --portfolio-glow-rgb: var(--route-rgb, var(--network-rgb, 105, 231, 223));
  --portfolio-edge-width: 1.5px;
}

/* Restrict moving borders to key actions and selected frames. */
:where(.header .button, .hero .actions > .button, #run-demo, #form-next,
       #demo, .intake, .project, #services .service-card) {
  position: relative;
  isolation: isolate;
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  :where(.header .button, .hero .actions > .button, #run-demo, #form-next,
         #demo, .intake, .project, #services .service-card)::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    padding: var(--portfolio-edge-width);
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
      from var(--portfolio-edge-angle),
      transparent 0deg 245deg,
      rgba(var(--portfolio-glow-rgb), .08) 275deg,
      rgba(var(--portfolio-glow-rgb), .65) 305deg,
      rgb(var(--portfolio-glow-rgb)) 330deg,
      #edfffd 343deg,
      transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: portfolio-edge-turn 5s linear infinite;
  }

  /* Large frames move more slowly. The demo's existing ::after stays intact. */
  #demo::before, .intake::before {
    animation-duration: 9s;
  }

  /* Keep card collections quiet until a visitor interacts with a card. */
  .project::before, #services .service-card::before {
    opacity: 0;
    animation-duration: 7s;
    animation-play-state: paused;
    transition: opacity .2s ease;
  }

  .project:focus-within::before,
  #services .service-card:focus-within::before {
    opacity: 1;
    animation-play-state: running;
  }

  @media (hover: hover) {
    .project:hover::before, #services .service-card:hover::before {
      opacity: 1;
      animation-play-state: running;
    }
  }
}

/* A restrained halo accompanies the moving edge. */
#demo {
  box-shadow: 0 20px 70px #0003,
              0 0 20px rgba(var(--portfolio-glow-rgb), .06);
}
.intake {
  box-shadow: 0 0 20px rgba(var(--portfolio-glow-rgb), .05);
}

@keyframes portfolio-edge-turn {
  to { --portfolio-edge-angle: 360deg; }
}

/* Reuse the portfolio's existing Pause background control. */
body.background-paused :is(.header .button, .hero .actions > .button,
  #run-demo, #form-next, #demo, .intake, .project, #services .service-card)::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  :is(.header .button, .hero .actions > .button, #run-demo, #form-next,
      #demo, .intake, .project, #services .service-card)::before {
    animation: none;
    transition: none;
  }
}

/* Violet borders on the primary buttons and intake Continue button. */
:is(.header .button, .hero .actions > .button, #run-demo, #form-next) {
  box-shadow: 0 0 14px rgba(139, 92, 246, .22);
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  :is(.header .button, .hero .actions > .button, #run-demo, #form-next)::before {
    inset: -3px;
    padding: 2.5px;
    border-radius: 9px;
    background: conic-gradient(
      from var(--portfolio-edge-angle),
      rgba(139, 92, 246, .2) 0deg 235deg,
      #8b5cf6 285deg,
      #d8b4fe 320deg,
      #ffffff 340deg,
      #a78bfa 352deg,
      rgba(139, 92, 246, .2) 360deg
    );
    animation-duration: 3s;
  }
}

/* Approved portrait hero: scoped to this section; existing demo IDs stay intact. */
#top.hero-portrait-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 36px 70px;
  padding-block: 46px 60px;
}
#top .hero-copy { min-width: 0; }
#top .hero-copy > .eyebrow { margin: 0 0 16px; }
#top .hero-name { font-size: 1.8rem; margin: 0 0 20px; }
#top h1 { font-size: clamp(3.2rem, 5.2vw, 4.8rem); line-height: 1.06; margin: 0 0 26px; }
#top .hero-description { max-width: 560px; margin-bottom: 28px; }
#top .hero-metrics { display: grid; grid-template-columns: 1fr 1fr 1.2fr; margin-top: 36px; }
#top .hero-metrics p { margin: 0; padding-right: 18px; }
#top .hero-metrics p + p { border-left: 1px solid var(--line); padding-left: 26px; }
#top .hero-metrics strong { display: block; color: var(--accent); font-size: 2rem; line-height: 1.2; font-weight: 600; }
#top .hero-metrics span { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; margin-top: 6px; max-width: 160px; }
#top .hero-profile { margin: 0; min-width: 0; border: 1px solid #467275; border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: 0 0 28px rgba(105, 231, 223, .05); }
#top .hero-profile img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
#top .hero-profile figcaption { padding: 20px 24px; border-top: 1px solid var(--line); }
#top .hero-profile strong { display: block; font-size: .95rem; }
#top .hero-profile figcaption span { display: block; color: var(--muted); font-size: .75rem; line-height: 1.6; margin-top: 5px; }
#top .demo-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 36px; padding: 30px; align-items: start; }
#top .demo-summary { min-width: 0; padding-right: 30px; border-right: 1px solid var(--line); }
#top .demo-top { flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
#top .demo-top .eyebrow { margin: 0; }
#top .demo-wide h2 { font-size: clamp(1.55rem, 2.2vw, 1.95rem); line-height: 1.2; }
#top .demo-summary > p { font-size: .875rem; line-height: 1.7; margin-bottom: 20px; }
#top .demo-bottom { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 0; }
#top .background-control { margin-bottom: 0; }
#top .demo-flow { min-width: 0; }
#top .demo-input { padding: 0; border: 0; }
#top .workflow { margin: 22px 0; }
#top .demo-output { min-height: 106px; }
@media (max-width: 1000px) {
  #top.hero-portrait-layout { column-gap: 32px; }
  #top h1 { font-size: clamp(2.7rem, 5.4vw, 3.6rem); }
  #top .hero-name { font-size: 1.5rem; }
  #top .hero-metrics p + p { padding-left: 16px; }
  #top .hero-metrics span { font-size: .6875rem; }
  #top .demo-wide { gap: 24px; padding: 24px; }
  #top .demo-summary { padding-right: 24px; }
}
@media (max-width: 760px) {
  #top.hero-portrait-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 36px; }
  #top h1 { font-size: clamp(2.75rem, 9vw, 4.5rem); }
  #top .hero-description { max-width: 580px; }
  #top .hero-profile { width: min(100%, 420px); justify-self: center; }
  #top .demo-wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #top .demo-summary { border-right: 0; padding-right: 0; }
  #top .demo-top { justify-content: space-between; }
  #top .demo-bottom { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
  #top .demo-flow { border-top: 1px solid var(--line); padding-top: 24px; }
  #top .demo-wide h2 { font-size: 1.8rem; }
}
@media (max-width: 420px) {
  #top .hero-metrics { margin-top: 28px; }
  #top .hero-metrics p { padding-right: 10px; }
  #top .hero-metrics p + p { padding-left: 12px; }
  #top .hero-metrics strong { font-size: 1.75rem; }
  #top .demo-wide { padding: 22px 16px; }
  #top .demo-top .eyebrow { max-width: 150px; }
  #top .hero-profile figcaption { padding: 18px; }
}

/* Footer redesign. All rules are scoped; existing privacy and pause controls work unchanged. */
.site-footer {
  --footer-accent: var(--route-rgb, var(--network-rgb, 105, 231, 223));
  position: relative;
  border-top: 1px solid rgba(var(--footer-accent), .18);
  background: linear-gradient(180deg, rgba(10, 20, 25, .94), rgba(10, 20, 25, .8));
}
.site-footer::before {
  content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--footer-accent)), transparent);
  pointer-events: none;
}
.site-footer .footer-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 60px; padding-block: 56px 44px; }
.site-footer .footer-message .eyebrow { color: var(--muted); margin-bottom: 18px; font-size: .65rem; }
.site-footer h2 { font-size: clamp(2rem, 3.3vw, 3.1rem); line-height: 1.13; letter-spacing: -.045em; margin: 0 0 15px; }
.site-footer h2 span { color: rgb(var(--footer-accent)); }
.site-footer .footer-message > p:last-child { color: var(--muted); font-size: .9rem; line-height: 1.7; margin: 0; max-width: 440px; }
.site-footer .footer-flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; }
.site-footer .footer-flow li { position: relative; text-align: center; min-width: 0; font-size: .75rem; line-height: 1.5; color: var(--muted); }
.site-footer .footer-flow-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 13px; border: 1px solid rgba(var(--footer-accent), .6); border-radius: 50%; color: rgb(var(--footer-accent)); background: #0a171c; }
.site-footer .footer-path { position: absolute; left: calc(50% + 33px); top: 25px; width: calc(100% - 66px); height: 14px; overflow: hidden; background: linear-gradient(rgba(var(--footer-accent), .35), rgba(var(--footer-accent), .35)) center / 100% 1px no-repeat; }
.site-footer .footer-path::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 4px 50%, rgb(var(--footer-accent)) 0 2px, rgba(var(--footer-accent), .14) 3px, transparent 7px); animation: footer-data-flow 4s linear infinite; }
.site-footer .footer-flow li:nth-child(2) .footer-path::after { animation-delay: -2s; }
@keyframes footer-data-flow { from { transform: translateX(-8px); } to { transform: translateX(100%); } }
.site-footer .footer-columns { display: grid; grid-template-columns: 1.45fr .8fr 1fr; gap: 44px; border-top: 1px solid var(--line); padding-block: 38px; }
.site-footer .footer-columns > :not(:first-child) { border-left: 1px solid var(--line); padding-left: 44px; }
.site-footer .footer-brand { display: inline-flex; align-items: center; gap: 18px; font-size: 1.1rem; font-weight: 600; line-height: 1.4; text-decoration: none; }
.site-footer .footer-brand .monogram { font-size: 2.7rem; }
.site-footer .footer-role { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .14em; font-weight: 500; margin-top: 5px; }
.site-footer .footer-identity > p { color: var(--muted); font-size: .8rem; line-height: 1.7; margin: 19px 0 0; }
.site-footer .footer-identity .footer-availability { display: flex; gap: 10px; align-items: center; color: var(--text); margin-top: 14px; }
.site-footer .footer-availability > span { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--footer-accent)); box-shadow: 0 0 10px rgba(var(--footer-accent), .25); flex-shrink: 0; }
.site-footer h3 { font: .65rem/1.5 Consolas, monospace; color: var(--muted); letter-spacing: .14em; margin: 0 0 14px; }
.site-footer .footer-columns ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-columns li a { display: inline-flex; align-items: center; min-height: 40px; gap: 14px; font-size: .875rem; text-decoration: none; }
.site-footer .footer-connect svg { width: 22px; height: 22px; flex-shrink: 0; }
.site-footer a:hover, .site-footer button:hover { color: rgb(var(--footer-accent)); }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline: 2px solid rgb(var(--footer-accent)); outline-offset: 5px; border-radius: 3px; }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 20px; font-size: .75rem; color: var(--muted); }
.site-footer .footer-bottom > div { display: flex; align-items: center; gap: 28px; }
.site-footer .footer-bottom a, .site-footer .footer-bottom button { display: inline-flex; align-items: center; min-height: 44px; font-size: inherit; }
.site-footer .footer-bottom a { color: var(--text); gap: 5px; text-decoration: none; }
body.background-paused .site-footer .footer-path::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .site-footer .footer-path::after { animation: none; } }
@media (max-width: 900px) {
  .site-footer .footer-intro { gap: 30px; }
  .site-footer .footer-columns { gap: 25px; grid-template-columns: 1.35fr .7fr .9fr; }
  .site-footer .footer-columns > :not(:first-child) { padding-left: 25px; }
  .site-footer .footer-brand { gap: 12px; font-size: .95rem; }
  .site-footer .footer-role { font-size: .52rem; }
}
@media (max-width: 700px) {
  .site-footer .footer-intro { grid-template-columns: minmax(0, 1fr); padding-block: 40px 32px; gap: 30px; }
  .site-footer .footer-flow { width: 100%; max-width: 480px; }
  .site-footer .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; padding-block: 30px; }
  .site-footer .footer-identity { grid-column: 1 / -1; }
  .site-footer .footer-columns > :not(:first-child) { padding-left: 0; border-left: 0; }
  .site-footer .footer-brand { font-size: 1.05rem; }
  .site-footer .footer-bottom { flex-wrap: wrap; gap: 6px 24px; padding-block: 18px; }
  .site-footer .footer-bottom > div { gap: 24px; }
}
@media (max-width: 380px) {
  .site-footer .footer-flow-icon { width: 52px; height: 52px; }
  .site-footer .footer-path { top: 19px; left: calc(50% + 27px); width: calc(100% - 54px); }
  .site-footer .footer-flow li { font-size: .6875rem; }
}

/* Floating navigation. Reuses the existing menu, scroll and active-section JS. */
html { scroll-padding-top: 130px; }
.header, .header.is-scrolled {
  padding-block: 16px 10px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.header .nav {
  position: relative;
  width: min(1360px, calc(100% - 48px));
  min-height: 84px;
  padding: 14px 24px;
  justify-content: flex-start;
  gap: 24px;
  border: 1px solid rgba(var(--nav-accent), .22);
  border-radius: 18px;
  background: rgba(12, 25, 30, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 32px #0002, inset 0 1px 0 rgba(var(--nav-accent), .05);
  pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.header.is-scrolled .nav {
  background: rgba(12, 25, 30, .98);
  border-color: rgba(var(--nav-accent), .32);
  box-shadow: 0 12px 32px #0004;
}
.header .brand { flex-shrink: 0; gap: 16px; text-decoration: none; }
.header .brand > .monogram { padding-right: 16px; border-right: 1px solid var(--line); }
.header .availability {
  display: inline-flex;
  padding: 8px 12px;
  border: 1px solid rgba(var(--nav-accent), .13);
  border-radius: 10px;
  background: rgba(var(--nav-accent), .025);
  font-size: .65rem;
  flex-shrink: 0;
}
.header .nav-links { margin-left: auto; gap: 5px; font-size: .8rem; }
.header .nav-links > a:not(.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.header .nav-links > a:not(.button):hover { background: rgba(var(--nav-accent), .045); }
.header .nav-links > a:not(.button).is-active {
  color: rgb(var(--nav-accent));
  background: rgba(var(--nav-accent), .09);
  text-decoration: none;
}
.header .nav-links > .button { display: inline-flex; margin-left: 12px; white-space: nowrap; }
.header .nav-links > .button.is-active { box-shadow: 0 0 14px rgba(139, 92, 246, .22); }
.header .menu-toggle { display: none; }
.header a:focus-visible, .header .menu-toggle:focus-visible {
  outline: 2px solid rgb(var(--nav-accent)); outline-offset: 4px;
}
@media (max-width: 1200px) {
  .header .availability { display: none; }
  .header .nav { gap: 16px; }
}
@media (max-width: 1040px) {
  .header .nav { min-height: 76px; padding: 12px 20px; }
  .header .menu-toggle {
    display: inline-flex; align-items: center; gap: 12px; margin-left: auto;
    min-height: 44px; padding: 8px 12px; font-size: .8rem;
    border: 1px solid rgba(var(--nav-accent), .2); border-radius: 10px;
  }
  .header .menu-toggle:hover, .header .menu-toggle[aria-expanded="true"] { background: rgba(var(--nav-accent), .08); }
  .header .nav-links {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    margin: 0; padding: 18px; gap: 6px; flex-direction: column; align-items: stretch;
    background: #0e1b20; border: 1px solid rgba(var(--nav-accent), .22);
    border-radius: 16px; box-shadow: 0 16px 30px #0005;
    max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); overflow-y: auto;
  }
  .header .nav-links.open { display: flex; }
  .header .nav-links > a:not(.button) { justify-content: flex-start; padding: 12px; }
  .header .nav-links > .button { margin: 8px 0 0; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 104px; }
  .header, .header.is-scrolled { padding-block: 10px 8px; }
  .header .nav { width: calc(100% - 24px); min-height: 70px; padding: 10px 12px; gap: 10px; border-radius: 14px; }
  .header .brand { gap: 10px; font-size: .75rem; }
  .header .brand > .monogram { padding-right: 10px; font-size: 1.6rem; }
  .header .brand-sub { font-size: .45rem; letter-spacing: .08em; }
  .header .menu-toggle { padding-inline: 10px; gap: 8px; font-size: .75rem; }
}
@media (max-width: 360px) {
  .header .brand > .monogram { padding-right: 0; border: 0; }
  .header .brand { gap: 8px; }
  .header .nav { gap: 6px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .header .nav, .header .nav-links > a:not(.button) { transition: none; }
}

/* Compact footer: one content row and a slim utility bar. */
.footer-compact .footer-columns {
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 28px;
  padding-block: 32px;
  border-top: 0;
  align-items: start;
}
.footer-compact .footer-columns > :not(:first-child) { padding-left: 28px; min-width: 0; }
.footer-compact .footer-brand { gap: 14px; font-size: 1rem; }
.footer-compact .footer-brand .monogram { font-size: 2.1rem; }
.footer-compact .footer-role { font-size: .55rem; letter-spacing: .1em; }
.footer-compact .footer-identity .footer-tagline { margin-top: 18px; color: var(--text); font-size: 1rem; line-height: 1.5; }
.footer-compact .footer-tagline span { color: rgb(var(--footer-accent)); }
.footer-compact .footer-identity .footer-location { margin-top: 9px; font-size: .75rem; }
.footer-compact h3 { margin-bottom: 8px; }
.footer-compact .footer-explore ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.footer-compact .footer-columns li a { font-size: .8rem; min-height: 36px; gap: 9px; }
.footer-compact .footer-flow { width: 100%; max-width: 270px; margin-top: 14px; }
.footer-compact .footer-flow-icon { width: 26px; height: 26px; margin-bottom: 0; border: 0; background: transparent; }
.footer-compact .footer-path { top: 6px; left: calc(50% + 20px); width: calc(100% - 40px); }
.footer-compact .footer-connect ul { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.footer-compact .footer-connect svg { width: 20px; height: 20px; }
.footer-compact .footer-availability { display: flex; align-items: center; gap: 9px; margin: 17px 0 0; font-size: .75rem; line-height: 1.6; color: var(--muted); }
.footer-compact .footer-bottom { padding-block: 8px; font-size: .7rem; }
@media (max-width: 1000px) {
  .footer-compact .footer-columns { gap: 20px; grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-compact .footer-columns > :not(:first-child) { padding-left: 20px; }
  .footer-compact .footer-brand { gap: 10px; font-size: .9rem; }
  .footer-compact .footer-role { font-size: .48rem; }
  .footer-compact .footer-explore ul { column-gap: 12px; }
}
@media (max-width: 760px) {
  .footer-compact .footer-columns { grid-template-columns: 1fr 1fr; gap: 24px; padding-block: 26px; }
  .footer-compact .footer-identity { grid-column: 1 / -1; }
  .footer-compact .footer-columns > :not(:first-child) { padding-left: 0; border-left: 0; }
  .footer-compact .footer-brand { font-size: 1rem; }
  .footer-compact .footer-role { font-size: .55rem; }
  .footer-compact .footer-identity .footer-tagline { margin-top: 12px; }
  .footer-compact .footer-identity .footer-location { margin-top: 5px; }
  .footer-compact .footer-explore ul { column-gap: 10px; }
  .footer-compact .footer-connect ul { column-gap: 14px; }
  .footer-compact .footer-columns li a { min-height: 44px; }
  .footer-compact .footer-flow { margin-top: 9px; }
  .footer-compact .footer-availability { margin-top: 10px; }
  .footer-compact .footer-bottom { gap: 0 20px; padding-block: 10px; }
}
@media (max-width: 440px) {
  .footer-compact .footer-columns { grid-template-columns: 1.15fr 1fr; column-gap: 20px; }
  .footer-compact .footer-explore ul { grid-template-columns: minmax(0, 1fr); }
  .footer-compact .footer-connect ul { flex-direction: column; gap: 0; }
  .footer-compact .footer-flow { max-width: 150px; }
  .footer-compact .footer-path { left: calc(50% + 15px); width: calc(100% - 30px); }
}

/* Append at the end of styles.css, outside any existing @media block. */
#case-cta {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 14px rgba(139, 92, 246, .22);
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  #case-cta::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 3;
    padding: 2.5px;
    border-radius: 9px;
    pointer-events: none;
    background: conic-gradient(
      from var(--portfolio-edge-angle),
      rgba(139, 92, 246, .2) 0deg 235deg,
      #8b5cf6 285deg,
      #d8b4fe 320deg,
      #ffffff 340deg,
      #a78bfa 352deg,
      rgba(139, 92, 246, .2) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: portfolio-edge-turn 3s linear infinite;
  }
}

body.background-paused #case-cta::before { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #case-cta::before { animation: none; }
}

/* Case-study cards and detail dialog. Other sections keep their existing styles. */
#work .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
#work .projects > .case-card,
#work .projects > .case-card:nth-child(3):last-child {
  grid-column: auto; display: flex; flex-direction: column; min-width: 0;
  padding: 26px; background: linear-gradient(135deg, #12252a55, transparent 65%), #0d181e;
  border-radius: 12px; overflow: hidden;
}
#work .projects > .case-card-featured { grid-column: 1 / -1; border-color: #416e73; }
#work .case-card:hover { transform: translateY(-3px); }
#work .case-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--accent); font: .65rem Consolas, monospace; letter-spacing: .04em; margin-bottom: 20px; }
#work .case-card-meta .badge { color: var(--muted); }
#work .case-card .project-tag { display: block; margin-bottom: 9px; font-size: .6rem; color: var(--muted); }
#work .case-card h3 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 13px; }
#work .case-card p { margin: 0; }
#work .case-card-main { display: flex; flex-direction: column; flex: 1; gap: 24px; }
#work .case-card-featured .case-card-main { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px; }
#work .case-card-featured h3 { font-size: clamp(1.75rem, 2.6vw, 2.1rem); }
#work .case-card-main > .case-flow { margin-top: auto; }
#work .case-card-featured .case-card-main > .case-flow { margin: 0; border-left: 1px solid var(--line); padding-left: 26px; }
#work .case-card .case-card-guard { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: #c5dedf; background: #69e7df06; border: 1px solid #35575c; border-radius: 7px; margin-top: 20px; padding: 9px 12px; font-size: .75rem; line-height: 1.5; }
#work .case-card-guard svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent); }
#work .case-card-bottom { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 17px; }
#work .case-card-featured .case-card-bottom { display: flex; align-items: center; gap: 24px; }
#work .case-card-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; margin: 0; gap: 16px; }
#work .case-card-facts > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
#work .case-card-facts dt { font: .6rem/1.5 Consolas, monospace; color: var(--accent); margin-bottom: 5px; }
#work .case-card-facts dd { font-size: .75rem; line-height: 1.6; color: var(--muted); margin: 0; }
#work .case-card-featured .text-link { flex: 0 0 auto; width: auto; margin: 0; gap: 18px; }
#work .case-card .text-link { min-height: 44px; }
#work .case-card-result { display: flex; align-items: start; gap: 8px; font-size: .75rem; color: #c0d4c7; }
#work .case-card-result svg { width: 16px; height: 18px; flex-shrink: 0; color: var(--lime); }
#work .case-card-disclosure { font-size: .6rem; color: var(--muted); margin-top: 8px; }
#work #show-all { width: 100%; justify-content: space-between; margin-top: 4px; }
/* Reusable, labeled inline-SVG workflow ribbon. */
:is(#work, #case-dialog) .case-flow { --flow-color: var(--accent); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 12px 0; gap: 0; }
:is(#work, #case-dialog) .case-flow-violet { --flow-color: #c2b9ee; }
:is(#work, #case-dialog) .case-flow li { position: relative; min-width: 0; text-align: center; padding: 0 4px; }
:is(#work, #case-dialog) .case-flow li:not(:last-child)::after { content: ""; position: absolute; width: calc(100% - 66px); height: 1px; left: calc(50% + 33px); top: 29px; background: linear-gradient(90deg, #42646b, #69e7df55); }
:is(#work, #case-dialog) .case-flow-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 13px; color: var(--flow-color); background: #152a30; border: 1px solid #3b636b; border-radius: 10px; }
:is(#work, #case-dialog) .case-flow li:last-child .case-flow-icon { color: var(--lime); border-color: #546b48; background: #223021; }
:is(#work, #case-dialog) .case-flow-violet .case-flow-icon { background: #24263b; border-color: #555572; }
:is(#work, #case-dialog) .case-flow-label { display: block; font: .625rem/1.5 Consolas, monospace; color: #b3c6cb; overflow-wrap: anywhere; }
#case-dialog .case-study-redesign { padding: 32px; }
#case-dialog .case-study-redesign h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; }
#case-dialog .case-study-redesign .case-deck { font-size: .95rem; line-height: 1.7; }
#case-dialog .case-workflow-panel { margin-block: 24px 6px; padding: 16px; border: 1px solid #304d54; border-radius: 10px; background: radial-gradient(#36565e66 .75px, transparent .75px) 0 0 / 14px 14px, #0c191f; }
#case-dialog .case-flow { margin: 0; }
#case-dialog .case-story-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--line); }
#case-dialog .case-story-number { color: var(--accent); font: 600 1rem/1.5 Consolas, monospace; }
#case-dialog .case-story-row h3 { font-size: 1.1rem; margin: 0 0 10px; line-height: 1.4; }
#case-dialog .case-story-row p { font-size: .875rem; line-height: 1.8; margin: 0; }
#case-dialog .case-story-outcome { padding: 20px; margin: 20px 0; border: 1px solid #315357; border-left: 3px solid var(--accent); border-radius: 7px; background: #142a2c; }
#case-dialog .case-story-outcome small { display: block; margin-top: 12px; color: #b5c9cc; font-size: .7rem; line-height: 1.7; }
#case-dialog .case-human-control { display: flex; gap: 14px; padding: 20px; border: 1px solid #304a51; border-radius: 8px; }
#case-dialog .case-human-control > svg { flex: 0 0 26px; color: var(--accent); }
#case-dialog .case-human-control h3 { font-size: .95rem; color: #c1efee; margin: 0 0 8px; }
#case-dialog .case-human-control p { margin: 0; font-size: .8rem; line-height: 1.8; }
#case-dialog .case-study-redesign details { margin-block: 22px; }
#case-dialog .case-study-redesign summary { gap: 16px; font-size: .9rem; }
#case-dialog .case-study-redesign #case-cta { width: 100%; justify-content: space-between; gap: 16px; }
@media (max-width: 900px) {
  #work .case-card-featured .case-card-bottom { display: block; }
  #work .case-card-featured .text-link { width: 100%; margin-top: 14px; }
  #work .projects > .case-card { padding: 22px; }
  #work .case-card h3 { font-size: 1.4rem; }
  #work .case-card-featured .case-card-main { gap: 22px; }
}
@media (max-width: 650px) {
  #work .projects { grid-template-columns: minmax(0, 1fr); }
  #work .projects > .case-card-featured { grid-column: auto; }
  #work .case-card-featured .case-card-main { display: flex; }
  #work .case-card-featured .case-card-main > .case-flow { width: 100%; border-left: 0; padding-left: 0; }
  #work .case-card-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #work .case-card-facts > div + div { border-left: 0; padding-left: 0; }
  #work .case-card-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
  #case-dialog .case-study-redesign { padding: 24px 20px; }
  #case-dialog .case-workflow-panel { padding: 12px 4px; }
  #case-dialog .case-story-row { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
  #case-dialog .case-story-outcome { padding: 16px 12px; }
  #case-dialog .case-human-control { padding: 16px 12px; gap: 10px; }
  #case-dialog .case-study-redesign #case-cta { font-size: .75rem; }
  :is(#work, #case-dialog) .case-flow-icon { width: 46px; height: 46px; }
  :is(#work, #case-dialog) .case-flow li:not(:last-child)::after { top: 23px; left: calc(50% + 27px); width: calc(100% - 54px); }
  :is(#work, #case-dialog) .case-flow-label { font-size: .55rem; }
}