:root{--night:#1D1B20;--paper:#F7F3ED;--rose:#B9979B;--olive:#59634A;--taupe:#D4C6B3;--bg:var(--night);--text:var(--paper);--muted:#c5bdc1;--accent:var(--rose);--line:#ffffff26;--serif:Georgia,'Times New Roman',serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif;color-scheme:dark}
:root[data-theme=light]{--bg:var(--paper);--text:var(--night);--muted:#60585e;--accent:#784e56;--line:#1d1b202b;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;transition:background .45s,color .45s}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:var(--rose);color:var(--night)}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.header{position:sticky;top:0;z-index:30;width:100%;height:86px;display:flex;align-items:center;justify-content:space-between;padding-inline:max(48px,calc((100% - 1280px)/2));background:var(--bg);border-bottom:1px solid var(--line);gap:22px;transition:background .45s}.identity{display:flex;align-items:center;gap:14px}.mark{width:40px;height:34px;stroke:currentColor;stroke-width:1.1}.wordmark{font-size:31px;letter-spacing:-1.7px;font-weight:300}.header nav{display:flex;align-items:center;gap:30px;margin-left:auto;margin-right:20px;font-size:12px}.header nav a{position:relative;padding:11px 0}.header nav a:after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}.header nav a:hover:after,.header nav a:focus-visible:after{transform:scaleX(1)}.nav-contact{color:var(--accent)}.header-controls{display:flex;gap:7px;align-items:center}.header-controls button{background:transparent;border:1px solid var(--line);border-radius:30px;min-height:38px;padding:9px 13px;font-size:10px;white-space:nowrap;transition:background .2s,border-color .2s}.header-controls button:hover{background:color-mix(in srgb,var(--rose) 12%,var(--bg));border-color:var(--accent)}#language span{opacity:.5;font-size:9px}.header-controls .menu{display:none}.hero{position:relative;min-height:590px;height:calc(100svh - 86px);max-height:810px;display:flex;align-items:center;overflow:clip}.hero-content{position:relative;z-index:1;padding-block:25px 65px;width:100%;pointer-events:none}.hero-content a{pointer-events:auto}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:9px;line-height:1.8}.hero .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(64px,7.4vw,108px);line-height:.98;letter-spacing:-.065em;font-weight:300;margin-bottom:27px;max-width:850px}em{font-family:var(--serif);font-weight:400;letter-spacing:-.055em;color:var(--accent)}p{font-size:14px;line-height:1.8;color:var(--muted)}.hero-bottom{display:flex;align-items:center;gap:52px}.hero-bottom p{font-size:13px;line-height:1.8;margin:0}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;position:relative;overflow:hidden;background:var(--rose);color:#231c21;border:1px solid var(--rose);padding:17px 23px;border-radius:50px;font-size:12px;transition:box-shadow .3s,background .3s,transform .3s}.pill:hover{background:var(--taupe);border-color:var(--taupe);transform:translateY(-2px);box-shadow:0 8px 25px #0002}.link-icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.2;transition:transform .3s}.pill:hover .link-icon{transform:translateX(4px)}.hero-note{margin-top:25px;margin-bottom:0;font-size:10px;line-height:1.65;max-width:220px;padding-left:14px;border-left:1px solid var(--accent)}.hero-foot{position:absolute;bottom:21px;left:0;right:0;display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:17px;font-size:9px;color:var(--muted)}.section{padding-block:95px}.section-label{display:flex;justify-content:space-between;gap:25px;text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:var(--muted);padding-bottom:45px}h2{font-size:clamp(37px,4.1vw,61px);line-height:1.12;letter-spacing:-.055em;font-weight:300;margin-bottom:26px}.intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:85px}.lead{font-size:21px;line-height:1.5;letter-spacing:-.025em;color:var(--text);margin-bottom:18px}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:52px}.services article{border-top:1px solid var(--line);padding-top:20px}.service-number{font-size:10px;color:var(--accent)}h3{font-size:25px;line-height:1.2;letter-spacing:-.035em;font-weight:400;margin-bottom:17px}.services h3{margin-top:27px;min-height:60px}.services p{font-size:13px;min-height:120px}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags span{border:1px solid var(--line);border-radius:30px;padding:6px 10px;font-size:9px;color:var(--muted)}.cap-note{font-size:10px;margin-top:28px;max-width:700px}.technical-flow{margin-top:50px;padding:30px;border:1px solid var(--line);border-radius:3px}.technical-flow .eyebrow{margin-bottom:25px;color:var(--accent)}.flow-nodes{display:flex;align-items:center;gap:24px;justify-content:space-between}.flow-nodes>span{font-size:13px}.flow-nodes i{flex:1;height:1px;min-width:25px;background:var(--line);position:relative;overflow:hidden}.flow-nodes i:after{content:'';position:absolute;left:-40%;height:1px;width:40%;background:var(--rose);animation:signal 3s ease-in-out infinite}.flow-nodes i:nth-of-type(2):after{animation-delay:1.5s}@keyframes signal{to{left:110%}}.work{border-top:1px solid var(--line)}.work-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:28px}.work-heading h2{margin:0}.work-heading>p{max-width:300px;margin:0;font-size:13px}.work-role{font-size:10px;color:var(--accent);margin-bottom:35px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}.project{min-width:0;position:relative}.project.featured{grid-column:1/-1;display:grid;grid-template-columns:1.5fr 1fr;gap:38px;align-items:center;margin-bottom:10px}.project-screen{background:color-mix(in srgb,var(--olive) 20%,var(--bg));aspect-ratio:1.794;overflow:hidden;border:1px solid var(--line);border-radius:4px}.project-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .7s;filter:saturate(.8)}.project:hover .project-screen img{transform:scale(1.035);filter:saturate(1)}.project-info{padding-top:22px;padding-bottom:16px}.project-info .eyebrow{font-size:8px;color:var(--accent);margin:0 0 12px}.project-number{font-size:9px;color:var(--muted);float:right;margin-left:15px}.project-info h3{margin-bottom:13px}.project-info p{font-size:12px;line-height:1.8;max-width:600px}.project-info .credit{font-size:9px;border-top:1px solid var(--line);padding-top:13px;margin-top:20px;margin-bottom:0}.work-disclaimer{font-size:10px;margin-top:35px;margin-bottom:0}.capture-pending{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px;background:color-mix(in srgb,var(--olive) 17%,var(--bg))}.capture-pending strong{font-family:var(--serif);font-size:26px;font-weight:400}.capture-pending p{font-size:10px;max-width:240px;margin:12px 0 0}.about{background:color-mix(in srgb,var(--olive) 12%,var(--bg))}.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:90px;align-items:center}.about-monogram{min-height:410px;border:1px solid var(--line);border-radius:50% 50% 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:60px}.about-monogram .mark{width:150px;height:125px;stroke-width:.65;color:var(--taupe)}:root[data-theme=light] .about-monogram .mark{color:var(--olive)}.about-monogram>span{text-transform:uppercase;letter-spacing:.16em;font-size:8px;color:var(--muted)}.about-grid h2{font-size:clamp(36px,3.8vw,56px)}.principles{list-style:none;margin:27px 0 0;padding:0;border-top:1px solid var(--line)}.principles li{font-size:11px;padding:13px 0;border-bottom:1px solid var(--line)}.principles li:before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin-right:12px;vertical-align:middle}.contact h2{font-size:clamp(52px,7.4vw,106px);margin-bottom:40px}.contact-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-bottom p{margin:0}.footer{display:flex;justify-content:space-between;gap:30px;align-items:center;border-top:1px solid var(--line);padding-top:26px;padding-bottom:100px;color:var(--muted);font-size:10px}.footer .wordmark{color:var(--text)}.prototype{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:20;background:var(--bg);border:1px solid var(--line);border-radius:30px;display:flex;align-items:center;gap:18px;padding:5px 15px;box-shadow:0 6px 25px #0001;white-space:nowrap}.prototype>span{font-size:7px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.prototype button{background:none;border:0;padding:8px 0;font-size:9px;color:var(--text)}.back-top{position:fixed;right:24px;bottom:24px;z-index:25;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--rose);border-radius:50%;background:var(--rose);color:#231c21;box-shadow:0 5px 20px #0003;transition:background .25s,transform .25s}.back-top[hidden]{display:none}.back-top svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.back-top:hover{background:var(--taupe);border-color:var(--taupe);transform:translateY(-3px)}.skip{position:fixed;top:-100px;left:20px;background:var(--rose);color:var(--night);padding:15px;z-index:99}.skip:focus{top:15px}
@keyframes arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.motion-ready .hero-enter{animation:arrive .9s cubic-bezier(.2,.7,.3,1) both}.motion-ready h1.hero-enter{animation-delay:.12s}.motion-ready .hero-bottom.hero-enter{animation-delay:.26s}.motion-ready .hero-note.hero-enter{animation-delay:.4s}.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);transition-delay:var(--delay,0ms)}.motion-ready .reveal.in-view{opacity:1;transform:none}.motion-paused *{animation-play-state:paused!important}.motion-paused .reveal{opacity:1;transform:none;transition:none}
@media(max-width:1050px){.header{gap:15px;padding-inline:32px}.wrap{width:calc(100% - 64px)}.header nav{gap:18px;margin-right:8px}.intro-grid,.about-grid{gap:45px}.services{gap:26px}.services p{min-height:165px}.work-heading{gap:35px}.project.featured{gap:26px}.project-grid{gap:28px}.hero{min-height:590px}h1{font-size:clamp(64px,8vw,93px)}}
@media(max-width:760px){.header{height:76px;padding-inline:20px}.header nav{display:none;position:absolute;top:75px;left:20px;right:20px;background:var(--bg);border:1px solid var(--line);border-radius:3px;margin:0;padding:20px;flex-direction:column;align-items:stretch;gap:4px}.header nav.open{display:flex}.header-controls .menu{display:flex;align-items:center;gap:8px}.menu svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.2}.wordmark{font-size:28px}.identity{gap:9px}.mark{width:33px}.header-controls{gap:5px}.header-controls button{padding:8px 10px;min-height:36px}.hero{height:calc(100svh - 76px);min-height:580px;max-height:800px}.hero-content{padding-bottom:65px}h1{font-size:clamp(60px,10.5vw,82px)}.hero-bottom{gap:26px}.hero-bottom p{font-size:12px}.pill{padding:15px 20px;gap:25px;font-size:11px}.hero-note{margin-top:23px}.hero-foot{font-size:8px}.section{padding-block:70px}.section-label{padding-bottom:33px;font-size:8px}.intro-grid,.about-grid{grid-template-columns:1fr;gap:20px}.services{grid-template-columns:1fr;gap:32px;margin-top:35px}.services h3{min-height:0;margin-top:20px}.services p{min-height:0;max-width:580px}.technical-flow{margin-top:35px;padding:22px}.flow-nodes{gap:12px}.flow-nodes>span{font-size:10px}.work-heading{display:block}.work-heading p{margin-top:22px;max-width:100%}.project.featured{display:block}.project-grid{gap:30px}.project-info h3{font-size:22px}.about-monogram{min-height:300px;max-width:300px;width:100%;margin:0 auto 25px;gap:40px}.about-monogram .mark{width:105px;height:90px}.about-grid h2{font-size:42px}.contact-bottom{align-items:start;flex-direction:column;gap:25px}.contact h2{font-size:clamp(49px,8.5vw,70px)}html{scroll-padding-top:94px}}
@media(max-width:520px){.wrap{width:calc(100% - 40px)}.header{gap:8px}.header .mark{width:27px;height:29px}.identity{gap:7px}.wordmark{font-size:26px}.header-controls button{font-size:9px;padding:8px 9px}.header-controls .menu{padding:8px 10px}.menu>span{display:none}.menu svg{width:16px}.hero{min-height:650px;height:calc(100svh - 76px);max-height:800px;align-items:flex-start}.hero-content{padding-top:42px}.hero .eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:24px}h1{font-size:clamp(52px,12vw,67px);line-height:1.02;margin-bottom:29px}.hero-bottom{align-items:start;flex-direction:column;gap:22px}.hero-bottom p{font-size:12px}.hero-note{font-size:10px;margin-top:23px}.hero-foot>span{max-width:155px;line-height:1.6}.hero-foot>span:last-child{text-align:right;max-width:110px}.section-label>span:last-child{max-width:120px;text-align:right;line-height:1.6}h2{font-size:36px}.lead{font-size:20px}.project-grid{grid-template-columns:1fr}.project-info{padding-top:20px;padding-bottom:0}.project.featured{grid-column:auto}.project-info h3{font-size:25px}.project-info p{font-size:12px}.flow-nodes{flex-direction:column;gap:15px}.flow-nodes>span{font-size:12px}.flow-nodes i{height:25px;width:1px;min-width:0;flex:auto}.flow-nodes i:after{height:40%;width:1px;top:-40%;left:0;animation:signal-vertical 3s ease-in-out infinite}@keyframes signal-vertical{to{top:110%}}.about-grid h2{font-size:37px}.contact h2{font-size:clamp(43px,10.5vw,58px)}.footer{align-items:start;gap:20px;padding-bottom:115px}.footer>span{max-width:165px;line-height:1.6;font-size:9px}.back-top{right:16px;bottom:65px;width:44px;height:44px}.prototype{gap:15px;max-width:calc(100% - 24px)}}
@media(max-height:760px) and (min-width:761px){.hero{min-height:550px}.hero-content{padding-top:12px;padding-bottom:55px}h1{font-size:clamp(64px,6.5vw,88px)}.hero .eyebrow{margin-bottom:18px}.hero-note{margin-top:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}.pill:hover,.back-top:hover,.project:hover .project-screen img,.pill:hover .link-icon{transform:none}}

.tennis-placeholder{position:relative;height:100%}.provisional-label{position:absolute;left:15px;bottom:14px;border:1px solid #f7f3ed55;background:#1d1b20dd;color:#f7f3ed;padding:7px 11px;border-radius:30px;font-size:8px;letter-spacing:.06em}.tennis-placeholder img{object-fit:cover}
/* Keep the complete opening composition in view, including its closing note. */
.hero{align-items:flex-start}.hero-content{padding-top:clamp(22px,4vh,48px)}.hero h1{font-size:clamp(64px,min(7.4vw,12.8svh),100px)}.motion-paused .hero-enter{animation:none;opacity:1;transform:none}
@media(max-height:760px) and (min-width:761px){.hero-content{padding-top:20px}.hero h1{font-size:clamp(60px,min(6.5vw,11.7svh),82px)}}
@media(max-width:760px){.hero-content{padding-top:35px}.hero h1{font-size:clamp(60px,10.5vw,82px)}}
@media(max-width:520px){.hero-content{padding-top:32px}.hero h1{font-size:clamp(50px,12vw,67px)}}

/* Recognizable web/integration drawing. Fixed viewBox padding; no canvas or pointer motion. */
.hero-content{width:58%;max-width:750px}.hero-diagram{position:absolute;top:clamp(70px,9vh,110px);right:0;width:44%;max-width:570px;aspect-ratio:620/480;margin:0;pointer-events:none;color:var(--accent)}.hero-diagram>svg{display:block;width:100%;height:100%;overflow:hidden}.diagram-surface{fill:var(--bg);stroke:var(--accent);stroke-width:1.1}.diagram-line{stroke:var(--line);stroke-width:1}.diagram-connectors{stroke:var(--olive);stroke-width:1.2;opacity:.6}.diagram-signals{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:8 80;animation:connection-flow 4s linear infinite}.diagram-signals path:nth-child(2){stroke:var(--olive)}.diagram-muted{fill:var(--accent);opacity:.6}.diagram-address{fill:color-mix(in srgb,var(--olive) 12%,var(--bg))}.diagram-tinted{fill:color-mix(in srgb,var(--rose) 13%,var(--bg));stroke:var(--line);stroke-width:.8}.diagram-code{stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.diagram-heading{stroke:var(--text);stroke-width:4;stroke-linecap:round;opacity:.7}.diagram-copy{stroke:var(--muted);stroke-width:2;stroke-linecap:round;opacity:.5}.diagram-button{fill:var(--rose)}.diagram-progress{stroke:var(--olive);stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:left;animation:build-progress 5s ease-in-out infinite}.diagram-label{fill:var(--muted);font-family:var(--sans);font-size:10px;letter-spacing:.05em}.page-hidden *{animation-play-state:paused!important}@keyframes connection-flow{to{stroke-dashoffset:-88}}@keyframes build-progress{0%,100%{transform:scaleX(.65);opacity:.6}50%{transform:scaleX(1.8);opacity:1}}
@media(max-width:1100px) and (min-width:761px){.hero-bottom{align-items:flex-start;flex-direction:column;gap:22px}.hero h1{font-size:clamp(60px,7vw,80px)}.hero-diagram{top:115px;width:43%}.hero{min-height:650px}}
@media(max-width:760px){.hero{display:flex;flex-direction:column;height:auto;max-height:none;min-height:0;padding-bottom:65px}.hero-content{width:100%;max-width:none;padding:30px 0 0}.hero-diagram{position:relative;order:2;top:auto;right:auto;width:min(100%,430px);max-width:430px;margin:18px auto 28px;aspect-ratio:620/480}.hero-bottom{flex-wrap:wrap}.hero-foot{bottom:17px}.hero-note{margin-top:22px}}
@media(max-width:520px){.hero-content{padding-top:28px}.hero-diagram{width:min(100%,360px);margin-top:8px;margin-bottom:24px}.hero h1{font-size:clamp(50px,12vw,67px)}}
@media(prefers-reduced-motion:reduce){.diagram-signals,.diagram-progress{animation:none!important}.diagram-signals{stroke-dasharray:none;stroke-width:1.2;opacity:.6}}

/* Readable supporting type, fewer rules, equal project hierarchy. */
:root{--sans:'Avenir Next','Segoe UI',Arial,sans-serif;--display:'Helvetica Neue',Helvetica,Arial,sans-serif}.wordmark,h1,h2{font-family:var(--display)}em{font-family:var(--serif)}body{font-weight:400}p{font-size:16px;line-height:1.8}.header{border-bottom:0;box-shadow:0 5px 22px #0000000c}.header nav{font-size:13px}.header-controls button{font-size:12px;font-weight:500;min-height:40px}.header-controls #language span{font-size:11px}.eyebrow{font-size:11px;font-weight:500;letter-spacing:.1em}.hero .eyebrow{font-size:11px}.hero-bottom p{font-size:15px}.hero-note{font-size:13px;line-height:1.6;border-left:0;padding-left:0;max-width:290px}.hero-foot{border-top:0;font-size:11px;padding-top:10px}.section-label{font-size:11px;font-weight:500;letter-spacing:.08em}.intro-grid{align-items:center;grid-template-columns:1.1fr 1fr;gap:65px}.intro-grid p{margin-bottom:0;max-width:490px}.services{gap:48px;margin-top:38px}.services article{border-top:0;padding-top:0}.service-number{font-size:12px}.services h3{min-height:0;margin-top:18px;font-size:25px}.services p{min-height:0;font-size:15px}.tags span{border:0;background:color-mix(in srgb,var(--olive) 10%,var(--bg));font-size:11px;padding:7px 10px}.cap-note{font-size:12px;max-width:820px;margin-top:32px}.work{border-top:0}.work-heading>p{font-size:15px;max-width:340px}.work-role{font-size:12px}.project-info .eyebrow{font-size:10px}.project-info h3{font-size:26px}.project-info p{font-size:15px}.project-info .credit{border-top:0;padding-top:0;font-size:12px;margin-top:17px}.project-number{font-size:11px}.project-screen{border:0}.work-disclaimer{font-size:12px}.about-monogram{border:0}.about-monogram>span{font-size:11px}.education-note{margin-top:26px;padding-top:0}.education-note>span{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--accent);font-weight:500}.education-note p{font-size:14px;margin-top:10px;margin-bottom:0}.footer{border-top:0;font-size:12px}.prototype>span{font-size:9px}.prototype button{font-size:11px}.pill{font-size:13px;font-weight:500}.diagram-label{font-size:12px;font-weight:500;letter-spacing:.015em}.hero-content{padding-top:32px}.hero h1{font-size:clamp(64px,min(7vw,11.5svh),94px)}
@media(max-width:1100px) and (min-width:761px){.hero{min-height:690px}.hero h1{font-size:clamp(58px,6.5vw,76px)}.hero-content{width:56%}.services{gap:28px}.services h3{font-size:23px}}
@media(max-width:760px){.header nav{font-size:14px}.hero-content{width:100%;padding-top:28px}.hero h1{font-size:clamp(60px,10.5vw,82px)}.hero .eyebrow{font-size:10px}.hero-bottom p{font-size:14px}.hero-note{font-size:12px}.hero-foot{font-size:10px}.intro-grid{grid-template-columns:1fr;gap:12px}.intro-grid p{max-width:100%}.services{gap:30px;margin-top:30px}.services h3{font-size:25px}.section-label{font-size:10px}.about-grid{gap:20px}.work-heading>p{font-size:15px}.footer{font-size:11px}}
@media(max-width:520px){.header-controls button{font-size:11px;padding:8px}.header-controls #language span{font-size:10px}.hero h1{font-size:clamp(49px,12vw,67px)}.hero .eyebrow{font-size:9px;letter-spacing:.04em;line-height:1.7}.section-label>span:last-child{max-width:145px}.hero-foot>span{max-width:170px}.footer>span{font-size:11px}.project-info p{font-size:14px}.project-info .credit{font-size:12px}.prototype>span{font-size:8px}.prototype button{font-size:10px}}
/* Distinct full-width chapters, without adding rules. */
:root{--chapter:#25252a;--work-bg:#1D1B20;--about-bg:#252a25;--contact-bg:#242127;--footer-bg:#131116}
:root[data-theme=light]{--chapter:#eae7df;--work-bg:#F7F3ED;--about-bg:#e6e9df;--contact-bg:#eee5e4;--footer-bg:#dcd4c8}
.intro{background:var(--chapter)}.work{background:var(--work-bg)}.about{background:var(--about-bg)}.contact{background:var(--contact-bg)}.footer{display:block;width:100%;margin:0;background:var(--footer-bg);padding:55px 0 100px}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.footer-inner>span{font-size:13px;max-width:430px;line-height:1.7}.intro-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;max-width:1100px}.intro-grid p{max-width:none}.work-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:40px;max-width:1100px}.work-heading>p{max-width:none;font-size:16px;line-height:1.8}.education-inline{font-size:14px;color:var(--muted);margin-top:24px}.identity{transform-origin:left center;transition:transform .25s ease,color .25s}.identity:hover,.identity:focus-visible{transform:scale(1.045);color:var(--accent)}.identity .wordmark{color:inherit}.tags span{transition:transform .25s,background .25s,color .25s;cursor:default}.tags span:hover{transform:translateY(-3px);background:var(--rose);color:var(--night)}.tags:focus-within span{background:color-mix(in srgb,var(--rose) 22%,var(--bg))}#language,#theme{display:inline-flex;align-items:center;justify-content:center;gap:7px}#language .language-flag{font-size:17px;opacity:1;line-height:1}#language>span:last-child{font-size:11px;opacity:1}#theme>svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}#theme:hover{background:var(--rose);color:var(--night);border-color:var(--rose)}#theme:hover>svg{transform:rotate(18deg)}
/* Native horizontal scrolling supports touch; controls advance exactly one card. */
.project-carousel{--cards:3;--card-gap:26px}.carousel-toolbar{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:25px}.carousel-status{margin:0;font-size:12px;color:var(--muted)}.carousel-controls{display:flex;gap:10px}.carousel-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;transition:background .25s,color .25s,transform .25s}.carousel-controls button:hover:not(:disabled){background:var(--rose);color:var(--night);transform:translateY(-2px)}.carousel-controls button:disabled{opacity:.28;cursor:default}.carousel-controls svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.project-track{display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:10px;position:relative;touch-action:pan-x pan-y}.project-track::-webkit-scrollbar{display:none}.project-track:focus-visible{outline-offset:7px}.project-track .project{flex:0 0 calc((100% - (var(--cards) - 1)*var(--card-gap))/var(--cards));min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column}.project-track .project-screen{display:block;flex-shrink:0}.project-track .project-info{display:flex;flex-direction:column;flex:1;padding-top:21px;position:relative}.project-track .project-number{position:absolute;right:0;top:21px;margin:0;font-size:10px}.project-track .eyebrow{padding-right:45px;font-size:10px}.project-track .project-info h3{font-size:25px;margin-bottom:14px}.project-track .project-info p{font-size:14px;line-height:1.8}.project-url{display:flex;align-items:center;gap:8px;max-width:100%;width:fit-content;overflow-wrap:anywhere;font-size:12px;line-height:1.6;color:var(--accent);margin-top:auto;padding-top:20px;transition:color .25s}.project-url svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.2;flex-shrink:0;transition:transform .25s}.project-url:hover{color:var(--text)}.project-url:hover svg{transform:translate(2px,-2px)}.project-screen:focus-visible img{transform:scale(1.035);filter:saturate(1)}
@media(max-width:1100px){.project-carousel{--cards:2;--card-gap:24px}.work-heading,.intro-grid{gap:30px}.footer-inner>span{max-width:350px}}
@media(max-width:760px){.work-heading,.intro-grid{grid-template-columns:1fr;gap:12px}.work-heading>p{margin-top:0;font-size:15px}.footer-inner{align-items:start}.footer-inner>span{max-width:260px}.footer{padding:40px 0 110px}.header-controls button{min-height:38px}}
@media(max-width:640px){.project-carousel{--cards:1;--card-gap:20px}.project-track .project-info h3{font-size:26px}.carousel-toolbar{margin-bottom:20px}.project-track .project-info p{font-size:15px}.footer-inner{flex-direction:column;gap:25px}.footer-inner>span{max-width:none}.footer .identity .mark{width:35px;height:32px}.footer .identity .wordmark{font-size:30px}}
@media(max-width:520px){.header-controls{gap:4px}.header-controls button{padding:7px}#language,#theme{gap:5px}#language .language-flag{font-size:15px}#theme>svg{width:14px;height:14px}.identity{gap:6px}}
@media(prefers-reduced-motion:reduce){.identity:hover,.identity:focus-visible,.tags span:hover,.carousel-controls button:hover:not(:disabled),#theme:hover>svg,.project-screen:focus-visible img,.project-url:hover svg{transform:none}}

/* Specialties start directly with their titles, without decorative numbering. */
.services h3{margin-top:0}

/* Deep old-rose keeps white chip text readable in both themes. */
.services .tags span{background:#81535D;color:#FFFFFF}
.services .tags span:hover{background:#653D48;color:#FFFFFF}
.services .tags:focus-within span{background:#81535D;color:#FFFFFF}
.services .tags:focus-within span:hover{background:#653D48;color:#FFFFFF}
.back-top{background:#81535D;border-color:#81535D;color:#FFFFFF}
.back-top:hover{background:#653D48;border-color:#653D48;color:#FFFFFF}

/* Equal-height desktop cards pin chip groups to the same baseline, without text limits. */
@media(min-width:761px){
 .services{align-items:stretch}
 .services article{display:flex;flex-direction:column;align-items:flex-start}
 .services article .tags{margin-top:auto;padding-top:12px}
 .services article>p{margin-bottom:12px}
}
@media(max-width:760px){
 .services article{display:block}
 .services article .tags{margin-top:0;padding-top:0}
}

@supports(grid-template-rows:subgrid){
 @media(min-width:761px){
  .services{grid-template-rows:auto auto auto;row-gap:18px}
  .services article{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-items:start;min-width:0}
  .services article>h3,.services article>p{margin-top:0;margin-bottom:0}
  .services article .tags{margin-top:0;padding-top:0;align-self:start}
 }
}

/* Surface-colored foreground creates the requested cutout effect without transparency. */
:root{--pink-button:#B9979B;--pink-button-hover:#C5A8AB}
:root[data-theme=light]{--pink-button:#784E56;--pink-button-hover:#653D48}
.hero{--button-surface:var(--bg)}.intro{--button-surface:var(--chapter)}.work{--button-surface:var(--work-bg)}.about{--button-surface:var(--about-bg)}.contact{--button-surface:var(--contact-bg)}.header{--button-surface:var(--bg)}.footer{--button-surface:var(--footer-bg)}
.services .tags span,.services .tags:focus-within span{background:var(--pink-button);color:var(--button-surface)}
.services .tags span:hover,.services .tags:focus-within span:hover{background:var(--pink-button-hover);color:var(--button-surface)}
.pill{background:var(--pink-button);border-color:var(--pink-button);color:var(--button-surface,var(--bg))}
.pill:hover{background:var(--pink-button-hover);border-color:var(--pink-button-hover);color:var(--button-surface,var(--bg))}
.back-top{background:var(--pink-button);border-color:var(--pink-button);color:var(--button-surface,var(--bg))}
.back-top:hover{background:var(--pink-button-hover);border-color:var(--pink-button-hover);color:var(--button-surface,var(--bg))}
#theme:hover,.carousel-controls button:hover:not(:disabled){background:var(--pink-button);border-color:var(--pink-button);color:var(--button-surface,var(--bg))}

/* Contact shares the work surface; the footer closes in the approved charcoal. */
:root{--contact-bg:var(--work-bg);--footer-bg:#1D1B20}
:root[data-theme=light]{--contact-bg:var(--work-bg);--footer-bg:#1D1B20}
.contact{background:var(--work-bg);--button-surface:var(--work-bg)}
.footer{background:#1D1B20;color:#F7F3ED;--accent:#B9979B;--muted:#D4C6B3;--button-surface:#1D1B20}
.footer-inner>span{color:#F7F3ED}
/* Preserve the separately approved floating button: deep rose, white chevron. */
#back-top{background:#81535D;border-color:#81535D;color:#FFFFFF}
#back-top:hover{background:#653D48;border-color:#653D48;color:#FFFFFF}

/* Background refinement is day-only; retain the previously approved night chapters. */
:root[data-theme=dark]{--contact-bg:#242127;--footer-bg:#131116}
:root[data-theme=dark] .contact{background:var(--contact-bg);--button-surface:var(--contact-bg)}
:root[data-theme=dark] .footer{background:var(--footer-bg)}
:root[data-theme=light]{--contact-bg:var(--work-bg);--footer-bg:#1D1B20}
:root[data-theme=light] .contact{background:var(--work-bg);--button-surface:var(--work-bg)}
:root[data-theme=light] .footer{background:#1D1B20}

/* Subtle palette-tinted separation for the sticky header, night only. */
:root[data-theme=dark] .header{box-shadow:0 6px 20px -9px rgba(212,198,179,.25),0 2px 8px -5px rgba(185,151,155,.14)}

/* Specialties: three spacious native disclosures; one area expanded initially. */
.services{display:block;max-width:1100px;margin-top:36px}
.services .specialty{margin:0;padding:10px 0 20px}
.services summary{display:grid;grid-template-columns:1.05fr 1.1fr 24px;align-items:center;gap:34px;padding:17px 0;cursor:pointer;list-style:none}
.services summary::-webkit-details-marker{display:none}
.specialty-title{font-family:var(--display);font-size:27px;line-height:1.25;letter-spacing:-.035em;color:var(--text);transition:color .25s}
.specialty-summary{font-size:14px;line-height:1.7;color:var(--muted)}
.services summary>svg{width:22px;height:22px;stroke:var(--accent);stroke-width:1.25;transition:transform .3s;transform-origin:center}
.services .specialty[open] summary>svg{transform:rotate(45deg)}
.services summary:hover .specialty-title{color:var(--accent)}
.services summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:3px}
.specialty-body{margin-left:calc((100% - 92px)*1.05/2.15 + 34px);padding:0 55px 15px 0}
.services .specialty-body p{font-size:15px;line-height:1.85;max-width:650px;margin:0 0 22px;min-height:0}
.services .specialty-body .tags{margin:0;padding:0;gap:8px}
:root[data-theme=dark] .services .tags span,:root[data-theme=dark] .services .tags:focus-within span{background:#81535D;color:var(--text)}
:root[data-theme=dark] .services .tags span:hover,:root[data-theme=dark] .services .tags:focus-within span:hover{background:#653D48;color:var(--text)}
:root[data-theme=dark] .header{box-shadow:0 6px 20px -9px rgba(212,198,179,.08),0 2px 8px -5px rgba(185,151,155,.04)}
@media(max-width:900px){.services summary{grid-template-columns:1fr 1fr 22px;gap:24px}.specialty-title{font-size:25px}.specialty-body{margin-left:calc((100% - 70px)/2 + 24px);padding-right:45px}}
@media(max-width:640px){.services{margin-top:22px}.services .specialty{padding:8px 0 18px}.services summary{grid-template-columns:minmax(0,1fr) 22px;gap:10px 20px;padding:15px 0}.specialty-title{font-size:25px}.specialty-summary{grid-column:1;grid-row:2;font-size:14px}.services summary>svg{grid-column:2;grid-row:1}.specialty-body{margin-left:0;padding:0 0 12px}.services .specialty-body p{font-size:15px;margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.services summary>svg{transition:none}}

/* Warm olive/linen for the approach chapter, day mode only. */
:root[data-theme=light]{--about-bg:#DDDCCB}

/* Open specialty cards: title, one concise explanation, and a shared chip row. */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:24px;row-gap:0;max-width:none;margin-top:40px;align-items:stretch}
.services .specialty-card{display:flex;flex-direction:column;align-items:flex-start;padding:30px 27px;border-radius:10px;background:color-mix(in srgb,var(--chapter) 55%,var(--bg));border:0;box-shadow:0 8px 28px #00000006;min-width:0;transition:transform .3s,box-shadow .3s}
.services .specialty-card:hover{transform:translateY(-4px);box-shadow:0 13px 30px #00000010}
.services .specialty-card h3{font-family:var(--display);font-size:27px;line-height:1.16;font-weight:500;letter-spacing:-.035em;color:var(--text);margin:0 0 23px}
.services .specialty-card>p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 27px;min-height:0}
.services .specialty-card .tags{margin-top:auto;padding-top:0;gap:7px}
.services .specialty-card .tags span{font-size:11px;padding:7px 10px}
@supports(grid-template-rows:subgrid){@media(min-width:761px){.services{row-gap:22px}.services .specialty-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-items:start;padding:30px 27px}.services .specialty-card h3,.services .specialty-card>p{margin:0}.services .specialty-card .tags{margin:0;padding:0;align-self:start}}}
@media(max-width:1050px) and (min-width:761px){.services{column-gap:18px}.services .specialty-card{padding:26px 21px}.services .specialty-card h3{font-size:24px}}
@media(max-width:760px){.services{grid-template-columns:1fr;grid-template-rows:none;gap:22px;margin-top:28px}.services .specialty-card{display:block;max-width:none;padding:29px}.services .specialty-card h3{font-size:28px;margin-bottom:17px}.services .specialty-card>p{margin-bottom:23px;max-width:610px}.services .specialty-card .tags{margin:0;padding:0}}
@media(prefers-reduced-motion:reduce){.services .specialty-card:hover{transform:none}}

.services .specialty-card{--button-surface:color-mix(in srgb,var(--chapter) 55%,var(--bg))}

/* Keep night carousel chevrons ivory through hover and keyboard focus. */
:root[data-theme=dark] .carousel-controls button{color:var(--text)}
:root[data-theme=dark] .carousel-controls button:hover:not(:disabled),:root[data-theme=dark] .carousel-controls button:focus-visible:not(:disabled){color:var(--text);background:#81535D;border-color:#81535D}
:root[data-theme=dark] .carousel-controls button svg{stroke:var(--text)}

/* A single semantic link covers each project, including whitespace. */
.project-link{display:flex;flex-direction:column;flex:1;min-width:0;border-radius:5px;transition:background .25s,box-shadow .25s;user-select:text}
.project-link:hover{background:color-mix(in srgb,var(--rose) 5%,var(--work-bg))}
.project-link:focus-visible{outline:2px solid var(--accent);outline-offset:7px}
.project-link:focus-visible .project-screen img{transform:scale(1.035);filter:saturate(1)}
.project-track .project-link .project-info{flex:1}
.project-track .project-info .eyebrow{white-space:nowrap;overflow:visible;font-size:11px;min-height:20px;line-height:20px;margin-bottom:14px}
.project-track .project-info h3{min-height:var(--project-title-height,0px);font-size:25px;line-height:1.2;margin-bottom:18px}
.project-track .project-info p[data-i18n^="desc_"]{min-height:var(--project-description-height,0px);margin-bottom:0;line-height:1.8;font-size:15px}
.project-track .project-url{padding-top:22px;font-size:13px}
.project-link:hover .project-url{color:var(--text)}
.header .identity .mark{width:46px;height:39px}.header .identity{gap:15px}
.footer{padding:32px 0 74px}.footer-inner{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:17px}.footer .identity{justify-content:center;transform-origin:center}.footer .identity .mark{width:48px;height:41px}.footer .identity .wordmark{font-size:36px}.footer-inner>span{max-width:none;font-size:13px}.about-monogram .mark{width:185px;height:155px}
.contact h2{font-size:clamp(48px,6.3vw,88px)}h2{font-size:clamp(36px,3.7vw,55px)}.about-grid h2{font-size:clamp(35px,3.5vw,51px)}.work-heading{gap:55px;align-items:center;margin-bottom:38px}.work-heading>p{line-height:1.9;font-size:16px}.section-label{font-size:12px}.hero-foot{font-size:12px}.work-role,.work-disclaimer,.cap-note{font-size:13px}.project-number{font-size:11px}
@media(max-width:1050px){.work-heading{gap:36px}}
@media(max-width:760px){.header .identity{gap:9px}.header .identity .mark{width:38px;height:33px}.footer .identity .mark{width:47px;height:40px}.footer .identity .wordmark{font-size:34px}.footer{padding:32px 0 80px}.about-monogram .mark{width:140px;height:117px}.contact h2{font-size:clamp(46px,7.8vw,67px)}.work-heading{gap:20px}.section-label{font-size:11px}}
@media(max-width:520px){.header .identity{gap:7px}.header .identity .mark{width:31px;height:28px}.header .wordmark{font-size:25px}.hero-foot{font-size:10px}.contact h2{font-size:clamp(41px,10vw,54px)}.about-grid h2{font-size:35px}.project-track .project-info h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.project-link:focus-visible .project-screen img{transform:none}}
html.motion-paused{scroll-behavior:auto}

.footer{padding:50px 0}.footer-inner{gap:12px}

/* Footer monogram only: approximately 18% larger, retaining its aspect ratio. */
.footer .identity .mark{width:56.64px;height:48.38px;flex-shrink:0}
@media(max-width:760px){.footer .identity .mark{width:55.46px;height:47.2px}}

/* Recycle original cards only after a full slide; keep every visible card a real link. */
.project-track{overflow-anchor:none}.project-track.is-reindexing{scroll-snap-type:none!important;scroll-behavior:auto!important}

/* Text inset is constant in normal, hover and focus; screenshots retain their full frame. */
.project-track .project-info{padding:22px 18px 18px}
.project-track .project-info .project-number{right:18px;top:22px}

/* First-visit monogram presentation. Hidden HTML is the fail-open default. */
.site-intro[hidden]{display:none!important}
.site-intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;background:var(--bg);color:var(--text);pointer-events:none;opacity:1;transition:opacity .18s ease}
.site-intro .mark{width:116px;height:94px;stroke-width:1.1;color:var(--accent)}
.site-intro p{margin:0;font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.site-intro.intro-leaving{opacity:0}
.stroke-mark path{stroke-dasharray:1;stroke-dashoffset:0}
.site-intro .stroke-mark path,.about-monogram.logo-awaiting .stroke-mark path{stroke-dashoffset:1}
.site-intro.intro-playing .stroke-mark path{animation:monogram-draw .38s ease both;animation-delay:calc(var(--stroke-index)*.22s)}
.about-monogram.logo-drawing .stroke-mark path{animation:monogram-draw .5s ease both;animation-delay:calc(var(--stroke-index)*.18s)}
@keyframes monogram-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes intro-safety{to{visibility:hidden}}
.motion-paused .stroke-mark path{animation:none!important;stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){.site-intro{display:none!important}.stroke-mark path{animation:none!important;stroke-dashoffset:0!important}}

/* Approach identity group: larger mark and legible caption, same six-stroke drawing. */
.about-monogram .mark{width:225px;height:189px;flex-shrink:0}
.about-monogram>span{font-size:13.5px;line-height:1.7;letter-spacing:.12em;text-align:center;max-width:100%;padding-inline:10px}
@media(max-width:760px){.about-monogram .mark{width:170px;height:142px}.about-monogram>span{font-size:13.5px}}
@media(max-width:360px){.about-monogram>span{letter-spacing:.09em}}

/* Approach group only: an additional 18% on desktop, responsive sizing below. */
.about-monogram .mark{width:265.5px;height:223.02px}
.about-monogram>span{font-size:15.9px;letter-spacing:.10em}
@media(max-width:1050px) and (min-width:761px){.about-monogram .mark{width:240px;height:201.6px}.about-monogram>span{font-size:14.5px;letter-spacing:.08em}}
@media(max-width:760px){.about-monogram .mark{width:190px;height:158.7px}.about-monogram>span{font-size:14px;letter-spacing:.09em}}
@media(max-width:360px){.about-monogram .mark{width:180px;height:150.35px}.about-monogram>span{font-size:13.5px;letter-spacing:.06em}}

/* Header/footer share the six-stroke replay; the existing parent grow stays unchanged. */
.identity.identity-drawing .stroke-mark path{animation:monogram-draw .38s ease both;animation-delay:calc(var(--stroke-index)*.16s)}
@media(prefers-reduced-motion:reduce){.identity.identity-drawing .stroke-mark path{animation:none!important;stroke-dashoffset:0!important}}

.site-intro.intro-playing{animation:intro-safety 2.2s step-end forwards}
/* Both language choices stay visible; only the active one is filled. */
.language-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:30px}
.header-controls .language-switch button{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:25px;min-height:32px;padding:7px 9px;background:transparent;color:var(--muted);font-size:11px;font-weight:500;transition:background .2s,color .2s}
.language-switch .language-flag{font-size:16px;line-height:1;filter:grayscale(.7)}
.header-controls .language-switch button[aria-pressed=true]{background:var(--accent);color:var(--bg)}
.language-switch button[aria-pressed=true] .language-flag{filter:none}
.header-controls .language-switch button:hover:not([aria-pressed=true]){background:color-mix(in srgb,var(--rose) 15%,var(--bg));color:var(--text)}
@media(max-width:520px){.language-switch{padding:2px;gap:1px}.header-controls .language-switch button{padding:6px 4px;min-height:30px;font-size:10px;gap:3px}.language-switch .language-flag{font-size:13px}#theme>span{display:none}.header-controls #theme{min-width:34px;padding:7px}.header-controls{gap:4px}}

/* The opening sequence starts only after the loading presentation is dismissed. */
.entry-managed .hero-enter{animation-name:none}
.hero-line,.hero-line-text{display:block}
.entry-pending .entry-bit{opacity:0;transform:translateY(var(--entry-rise,12px));animation:entry-safety 3s step-end forwards}
.entry-playing .entry-bit{animation:entry-reveal .65s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--entry-delay,0s)}
@keyframes entry-reveal{from{opacity:0;transform:translateY(var(--entry-rise,12px))}to{opacity:1;transform:translateY(0)}}
@keyframes entry-safety{to{opacity:1;transform:none}}
.motion-paused .entry-bit{animation:none!important;opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.entry-bit{animation:none!important;opacity:1!important;transform:none!important}}

/* Filled project arrows mirror the approved back-to-top colors in both themes. */
.carousel-controls button,:root[data-theme=dark] .carousel-controls button{background:#81535D;border-color:#81535D;color:#FFFFFF}
.carousel-controls button:hover:not(:disabled),.carousel-controls button:focus-visible:not(:disabled),:root[data-theme=dark] .carousel-controls button:hover:not(:disabled),:root[data-theme=dark] .carousel-controls button:focus-visible:not(:disabled){background:#653D48;border-color:#653D48;color:#FFFFFF}
.carousel-controls button svg,:root[data-theme=dark] .carousel-controls button svg{stroke:#FFFFFF}

/* Approved CTA size in both languages; white foreground throughout night mode. */
.pill{font-size:16px}
:root:not([data-theme=light]) .pill,:root:not([data-theme=light]) .pill:hover,:root:not([data-theme=light]) .pill:focus-visible{color:#FFFFFF}
.pill .link-icon{color:inherit;stroke:currentColor}

/* Reveal only once content is well inside the reading viewport; small, deliberate stagger. */
.motion-ready .reveal{transform:translateY(18px);transition:opacity .95s ease,transform .95s cubic-bezier(.2,.7,.3,1);transition-delay:var(--delay,0ms)}
.motion-ready .reveal.in-view{opacity:1;transform:none}
/* The CTA color sweeps beneath stationary text; the arrow passes and returns once. */
.pill{isolation:isolate}
.pill::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--pink-button-hover);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);z-index:-1;pointer-events:none}
.pill:hover,.pill:focus-visible{background:var(--pink-button);border-color:var(--pink-button-hover);color:var(--button-surface,var(--bg));transform:translateY(-2px)}
.pill:hover::before,.pill:focus-visible::before{transform:scaleX(1)}
.pill:hover .link-icon,.pill:focus-visible .link-icon{transform:none;animation:cta-arrow-pass .55s ease both}
@keyframes cta-arrow-pass{0%{transform:translateX(0);opacity:1}40%{transform:translateX(9px);opacity:0}41%{transform:translateX(-7px);opacity:0}100%{transform:translateX(0);opacity:1}}
.carousel-controls button{position:relative;overflow:hidden;isolation:isolate}
.carousel-controls button::before{content:'';position:absolute;inset:0;border-radius:inherit;background:#653D48;transform:scale(0);transition:transform .35s cubic-bezier(.2,.7,.3,1);z-index:-1;pointer-events:none}
.carousel-controls button:hover:not(:disabled),.carousel-controls button:focus-visible:not(:disabled),:root[data-theme=dark] .carousel-controls button:hover:not(:disabled),:root[data-theme=dark] .carousel-controls button:focus-visible:not(:disabled){background:#81535D;border-color:#653D48;color:#FFFFFF}
.carousel-controls button:hover:not(:disabled)::before,.carousel-controls button:focus-visible:not(:disabled)::before{transform:scale(1)}
#project-prev{--button-direction:-1}#project-next{--button-direction:1}
.carousel-controls button:hover:not(:disabled) svg,.carousel-controls button:focus-visible:not(:disabled) svg{animation:control-arrow-pass .5s ease both}
@keyframes control-arrow-pass{0%{transform:translateX(0);opacity:1}40%{transform:translateX(calc(var(--button-direction)*7px));opacity:0}41%{transform:translateX(calc(var(--button-direction)*-6px));opacity:0}100%{transform:translateX(0);opacity:1}}
.motion-paused .reveal{opacity:1;transform:none;transition:none}
.motion-paused .pill,.motion-paused .carousel-controls button{transition:none!important;transform:none!important}
.motion-paused .pill .link-icon,.motion-paused .carousel-controls button svg{animation:none!important;transform:none!important;opacity:1!important}
.motion-paused .pill::before,.motion-paused .carousel-controls button::before{transition:none}
@media(max-width:640px),(hover:none),(pointer:coarse){.motion-ready .reveal{transform:translateY(8px);transition-duration:.6s}.motion-ready .reveal.in-view{transform:none}.pill:hover,.carousel-controls button:hover:not(:disabled),.services .specialty-card:hover{transform:none!important}.pill .link-icon,.carousel-controls button svg{animation:none!important;transform:none!important;opacity:1!important}.pill::before,.carousel-controls button::before{transition:none}}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal{opacity:1!important;transform:none!important;transition:none!important}.pill .link-icon,.carousel-controls button svg{animation:none!important;transform:none!important;opacity:1!important}.pill::before,.carousel-controls button::before{transition:none}}

.pill{font-size:16px}
:root:not([data-theme=light]) .pill,:root:not([data-theme=light]) .pill:hover,:root:not([data-theme=light]) .pill:focus-visible{color:#FFFFFF}
.pill .link-icon{color:inherit;stroke:currentColor}
.motion-paused.motion-ready .reveal{opacity:1;transform:none;transition:none}

/* One shared page frame, including the sticky header and every chapter. */
:root{--page-max:1280px;--page-gutter:48px;--rose-deep:#81535D;--rose-deep-hover:#653D48;--pink-button:var(--rose-deep);--pink-button-hover:var(--rose-deep-hover)}
@media(max-width:1050px){:root{--page-gutter:32px}}
@media(max-width:760px){:root{--page-gutter:20px}}
.wrap{width:min(var(--page-max),calc(100% - 2 * var(--page-gutter)));margin-inline:auto}
.header{padding-inline:max(var(--page-gutter),calc((100% - var(--page-max))/2))}
.wrap .wrap{width:100%;margin-inline:0}
.intro-grid,.work-heading{max-width:none}
.contact-bottom{width:100%;min-width:0}
.contact-bottom .pill{flex-shrink:0;max-width:100%;margin-inline:0}
.header-controls #theme{order:2}
.header-controls .menu{order:1}
@media(max-width:760px){.header nav{left:var(--page-gutter);right:var(--page-gutter)}}
:root:not([data-theme=light]) .services .tags span,:root:not([data-theme=light]) .services .tags:focus-within span{background:var(--rose-deep);color:#FFFFFF}
:root:not([data-theme=light]) .services .tags span:hover,:root:not([data-theme=light]) .services .tags:focus-within span:hover{background:var(--rose-deep-hover);color:#FFFFFF}
:root:not([data-theme=light]) .header-controls .language-switch button[aria-pressed=true]{background:var(--rose-deep);color:#FFFFFF}
:root:not([data-theme=light]) .header-controls .language-switch button[aria-pressed=true]:hover,:root:not([data-theme=light]) .header-controls .language-switch button[aria-pressed=true]:focus-visible{background:var(--rose-deep-hover);color:#FFFFFF}

/* The diagram frame follows the painted right edge rather than empty viewBox space. */
.hero-diagram{aspect-ratio:571/480}
.intro-grid p,.work-heading>p,.about-grid p{text-wrap:pretty}
@media(min-width:761px){.intro-grid>div:last-child{padding-left:18px}.work-heading>p{width:calc(100% - 18px);justify-self:end}}

/* Pastilla "Identidad provisional / Pausar animación" oculta; se conserva en el HTML porque app.js la usa */
.prototype{display:none!important}

/* ===== Ajustes octubre 2026 ===== */
:root{--cta-green:#6A7558;--cta-green-hover:#59634A;--hero-space:clamp(48px,8vh,88px)}
:root[data-theme=light]{--cta-green:#59634A;--cta-green-hover:#47503A}

/* Hovers sobrios: solo cambia el color, sin barridos ni flechas que se esconden. */
.header nav a::after{content:none}
.header nav a:not(.nav-contact){transition:color .2s}
.header nav a:not(.nav-contact):hover,.header nav a:not(.nav-contact):focus-visible{color:var(--accent)}
.pill::before,.carousel-controls button::before{content:none}
.pill,.pill:hover,.pill:focus-visible{transform:none!important;box-shadow:none;transition:background .2s,border-color .2s,color .2s}
.pill:hover,.pill:focus-visible{background:var(--pink-button-hover);border-color:var(--pink-button-hover)}
.pill .link-icon,.carousel-controls button svg{animation:none!important;transform:none!important;opacity:1!important;transition:none}
.carousel-controls button,.carousel-controls button:hover:not(:disabled){transform:none!important}
.carousel-controls button:hover:not(:disabled),.carousel-controls button:focus-visible:not(:disabled),:root[data-theme=dark] .carousel-controls button:hover:not(:disabled),:root[data-theme=dark] .carousel-controls button:focus-visible:not(:disabled){background:#653D48;border-color:#653D48;color:#FFFFFF}

/* Modo noche: el texto y el sol del botón Día se quedan claros al pasar el cursor. */
:root[data-theme=dark] #theme:hover,:root[data-theme=dark] #theme:focus-visible{color:#FFFFFF}

/* "Hablemos" es el único botón principal del encabezado. */
.header nav a.nav-contact{background:var(--cta-green);color:#FFFFFF;padding:10px 18px;border-radius:40px;line-height:1;transition:background .2s}
.header nav a.nav-contact:hover,.header nav a.nav-contact:focus-visible{background:var(--cta-green-hover);color:#FFFFFF}
@media(max-width:760px){.header nav a.nav-contact{align-self:flex-start;margin-top:8px;padding:12px 20px}}

/* Hero: el mismo espacio arriba y abajo, contenido centrado verticalmente. */
@media(min-width:761px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);column-gap:clamp(24px,4vw,64px);align-items:center;height:auto;min-height:0;max-height:none;padding-block:var(--hero-space) 0}
  .hero-content{grid-column:1;grid-row:1;width:auto;max-width:750px;padding:0}
  .hero-diagram{position:relative;grid-column:2;grid-row:1;top:auto;right:auto;width:100%;max-width:570px;justify-self:end}
  .hero-foot{position:relative;bottom:auto;left:auto;right:auto;grid-column:1/-1;grid-row:2;margin-top:var(--hero-space);padding-block:14px}
  /* Texto de la derecha: alineado a la izquierda, pero el bloque llega al margen derecho. */
  .intro-grid>div:last-child{padding-left:0;display:flex;justify-content:flex-end}
  .intro-grid>div:last-child p{max-width:440px}
  .work-heading>p{width:auto;max-width:440px;justify-self:end}
}

/* Botón flotante de contacto y ventana "Hablemos". */
.contact-fab{position:fixed;right:24px;bottom:24px;z-index:26;display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 16px;border:1px solid var(--cta-green);border-radius:40px;background:var(--cta-green);color:#FFFFFF;font-size:14px;font-weight:500;box-shadow:0 8px 24px #0003;transition:background .2s}
.contact-fab:hover,.contact-fab:focus-visible{background:var(--cta-green-hover);border-color:var(--cta-green-hover)}
.contact-fab svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.back-top{bottom:88px}
@media(max-width:520px){.contact-fab{right:16px;bottom:16px;padding:12px 16px 12px 14px;font-size:13px}.back-top{right:16px;bottom:76px}}
.contact-dialog{width:min(420px,calc(100% - 32px));padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--text);box-shadow:0 24px 60px #0005}
.contact-dialog::backdrop{background:#1d1b2066;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.contact-dialog[open]{animation:contact-dialog-in .25s ease both}
@keyframes contact-dialog-in{from{opacity:0;transform:translateY(10px)}}
.contact-dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.contact-dialog-head .eyebrow{margin:0;color:var(--accent)}
.contact-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);transition:background .2s}
.contact-close:hover,.contact-close:focus-visible{background:color-mix(in srgb,var(--rose) 20%,var(--bg))}
.contact-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.contact-dialog-intro{margin:0 0 18px;font-size:15px}
.contact-options{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contact-options a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line);transition:color .2s}
.contact-option-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-options strong{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.03em}
.contact-options small{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.contact-options svg{flex:none;width:20px;height:20px;stroke:currentColor;stroke-width:1.4}
.contact-options a:hover,.contact-options a:focus-visible{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.contact-dialog[open]{animation:none}}

/* Sin pie en el hero: el mismo espacio arriba y abajo en todos los anchos. */
.hero-foot{display:none}
@media(min-width:761px){.hero{padding-block:var(--hero-space)}}
@media(max-width:760px){.hero{padding-block:40px}.hero-content{padding-top:0}.hero-diagram{margin-bottom:0}}

/* Fondo vivo: manchas de color que se desplazan lento, grano sutil y parallax suave. */
:root{--amb-1:color-mix(in srgb,#B9979B 20%,transparent);--amb-2:color-mix(in srgb,#59634A 26%,transparent);--amb-3:color-mix(in srgb,#81535D 22%,transparent);--grain-opacity:.09}
:root[data-theme=light]{--amb-1:color-mix(in srgb,#B9979B 34%,transparent);--amb-2:color-mix(in srgb,#59634A 16%,transparent);--amb-3:color-mix(in srgb,#D4C6B3 45%,transparent);--grain-opacity:.06}
html,body{overflow-x:clip}
.hero{overflow:visible;isolation:isolate}
.about,.contact{position:relative;overflow:hidden;isolation:isolate}
.ambient{position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;overflow:hidden;pointer-events:none}
.ambient::before{content:'';position:absolute;inset:-25%;background:radial-gradient(38% 42% at 78% 30%,var(--amb-1),transparent 70%),radial-gradient(34% 40% at 16% 72%,var(--amb-2),transparent 70%),radial-gradient(28% 34% at 56% 88%,var(--amb-3),transparent 70%);translate:0 var(--parallax,0px);animation:ambient-drift 32s ease-in-out infinite alternate;will-change:transform}
.ambient::after{content:'';position:absolute;inset:0;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.about .ambient::before{background:radial-gradient(36% 44% at 22% 40%,var(--amb-2),transparent 70%),radial-gradient(30% 36% at 82% 70%,var(--amb-1),transparent 70%);animation-duration:38s;animation-direction:alternate-reverse}
.contact .ambient::before{background:radial-gradient(40% 46% at 85% 60%,var(--amb-1),transparent 70%),radial-gradient(32% 40% at 10% 25%,var(--amb-3),transparent 70%)}
@keyframes ambient-drift{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(5%,-4%,0) rotate(6deg) scale(1.08)}100%{transform:translate3d(-4%,3%,0) rotate(-4deg) scale(1.02)}}
.motion-paused .ambient::before,.page-hidden .ambient::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ambient::before{animation:none;translate:none}}

/* El botón flotante "Hablemos" late suavemente para notarse sin estorbar. */
.contact-fab::before{content:'';position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--cta-green);pointer-events:none;animation:fab-pulse 2.6s ease-out infinite}
@keyframes fab-pulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.14,1.5);opacity:0}}
.contact-fab:hover::before,.contact-fab:focus-visible::before,.motion-paused .contact-fab::before{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.contact-fab::before{animation:none;opacity:0}}

/* Monograma de fondo: se mueve a otra velocidad que el contenido (parallax visible). */
.ambient-mark{position:absolute;width:clamp(360px,42vw,640px);height:auto;stroke:var(--accent);stroke-width:.6;stroke-linecap:round;opacity:.16;translate:0 var(--parallax-mark,0px);will-change:translate}
:root[data-theme=light] .ambient-mark{opacity:.2}
.hero .ambient-mark{left:max(-60px,calc(50vw - 760px));top:44%}
.contact .ambient-mark{right:max(-80px,calc(50vw - 780px));top:8%;width:clamp(320px,36vw,560px)}
@media(max-width:760px){.ambient-mark{width:300px;opacity:.12}.hero .ambient-mark{left:-60px;top:52%}.contact .ambient-mark{right:-70px}}
@media(prefers-reduced-motion:reduce){.ambient-mark{translate:none}}

/* Modo día: más color en el fondo y profundidad con sombras suaves. */
:root[data-theme=light]{--amb-1:color-mix(in srgb,#B9979B 55%,transparent);--amb-2:color-mix(in srgb,#59634A 28%,transparent);--amb-3:color-mix(in srgb,#D4C6B3 75%,transparent);--grain-opacity:.08;--depth-1:0 1px 2px #1d1b200a,0 14px 34px -14px #1d1b2033;--depth-2:0 2px 4px #1d1b200d,0 22px 44px -16px #1d1b2040}
:root[data-theme=light] .services .specialty-card{background:#FBF8F3;box-shadow:var(--depth-1);transition:box-shadow .3s}
:root[data-theme=light] .services .specialty-card:hover{box-shadow:var(--depth-2)}
:root[data-theme=light] .hero-diagram>svg{filter:drop-shadow(0 18px 30px #1d1b2024)}
:root[data-theme=light] .project-screen{box-shadow:var(--depth-1)}
:root[data-theme=light] .pill{box-shadow:0 10px 24px -10px #653d4880}
:root[data-theme=light] .about-monogram{filter:drop-shadow(0 16px 26px #1d1b2018)}
:root[data-theme=light] .faq-item{background:#FBF8F3;box-shadow:var(--depth-1)}

/* Preguntas frecuentes. */
.faq{background:var(--chapter)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-intro h2{margin-bottom:22px}
.faq-intro p{max-width:420px;margin:0}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border-radius:14px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--line)}
:root[data-theme=light] .faq-item{border-color:transparent}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;cursor:pointer;list-style:none;font-family:var(--display);font-size:19px;letter-spacing:-.02em;color:var(--text);transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover,.faq-item summary:focus-visible{color:var(--accent)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:14px}
.faq-icon{flex:none;width:20px;height:20px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transition:transform .3s}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 24px 22px;font-size:15px;line-height:1.75;max-width:640px}
.faq-item[open] p{animation:faq-open .3s ease both}
@keyframes faq-open{from{opacity:0;transform:translateY(-4px)}}
@media(max-width:760px){.faq-grid{grid-template-columns:1fr;gap:28px}.faq-item summary{font-size:17px;padding:18px}.faq-item p{padding:0 18px 18px}}
@media(prefers-reduced-motion:reduce){.faq-item[open] p{animation:none}.faq-icon{transition:none}}
.faq .section-label>span:last-child{max-width:none;text-align:left}

/* El monograma vive en Especialidades, lejos de los textos del inicio; las manchas ya no hacen parallax. */
.ambient::before{translate:none}
.ambient-plain::before,.ambient-plain::after{content:none}
.intro{position:relative;overflow:hidden;isolation:isolate}
.intro .ambient-mark{right:max(-90px,calc(50vw - 800px));top:30%;width:clamp(380px,40vw,620px)}
@media(max-width:760px){.intro .ambient-mark{right:-90px;top:45%;width:320px}}

/* Pulso del botón Hablemos: color que se expande, sin línea marcada. */
.contact-fab::before{inset:0;border:0;background:var(--cta-green);z-index:-1;animation:fab-pulse 2.8s ease-out infinite}
@keyframes fab-pulse{0%{transform:scale(1);opacity:.5}75%,100%{transform:scale(1.16,1.55);opacity:0}}
.back-top{bottom:104px}
@media(max-width:520px){.back-top{bottom:92px}}
.intro .ambient-mark{top:50%}

/* Hablemos: el botón crece un poco y suelta una onda de color más intensa. */
:root{--fab-wave:#8A9A6C}
:root[data-theme=light]{--fab-wave:#6E7D55}
.contact-fab{animation:fab-grow 2.8s ease-in-out infinite}
.contact-fab::before{inset:0;background:var(--fab-wave);animation:fab-wave 2.8s ease-out infinite}
@keyframes fab-grow{0%,40%,100%{transform:scale(1)}14%{transform:scale(1.08)}26%{transform:scale(.98)}}
@keyframes fab-wave{0%,10%{transform:scale(1);opacity:0}14%{transform:scale(1.04);opacity:.85}70%,100%{transform:scale(1.28,2);opacity:0}}
.contact-fab:hover,.contact-fab:focus-visible,.motion-paused .contact-fab{animation:none}
.contact-fab:hover::before,.contact-fab:focus-visible::before,.motion-paused .contact-fab::before{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.contact-fab,.contact-fab::before{animation:none}.contact-fab::before{opacity:0}}
.contact-fab::before{background:none;transform:none;opacity:1;animation:fab-wave-ring 2.8s ease-out infinite}
@keyframes fab-wave-ring{0%,10%{box-shadow:0 0 0 0 transparent}14%{box-shadow:0 0 0 2px color-mix(in srgb,var(--fab-wave) 90%,transparent)}70%,100%{box-shadow:0 0 0 20px color-mix(in srgb,var(--fab-wave) 0%,transparent)}}
.contact-fab:hover::before,.contact-fab:focus-visible::before,.motion-paused .contact-fab::before{animation:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){.contact-fab::before{animation:none;box-shadow:none}}

/* Ventana Hablemos: hover claro en cada opción (fondo, palabra que crece y flecha que avanza). */
.contact-options a{margin-inline:-12px;padding:16px 16px;border-radius:12px;transition:background .25s,color .25s}
.contact-options li+li a{margin-top:4px}
.contact-options li{border-bottom:1px solid var(--line)}
.contact-options a{border-bottom:0}
.contact-options strong{display:inline-block;transform-origin:left center;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.contact-options svg{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.contact-options a:hover,.contact-options a:focus-visible{background:color-mix(in srgb,var(--rose) 22%,var(--bg));color:var(--accent)}
:root[data-theme=dark] .contact-options a:hover,:root[data-theme=dark] .contact-options a:focus-visible{background:color-mix(in srgb,var(--rose) 16%,var(--bg));color:var(--rose)}
.contact-options a:hover strong,.contact-options a:focus-visible strong{transform:scale(1.06)}
.contact-options a[target=_blank]:hover svg,.contact-options a[target=_blank]:focus-visible svg{transform:translate(3px,-3px)}
.contact-options a[data-mail-user]:hover svg,.contact-options a[data-mail-user]:focus-visible svg{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.contact-options strong,.contact-options svg{transition:none;transform:none!important}}

/* Portafolio: fondo vivo, etiqueta más grande y tarjetas enmarcadas. */
.work{position:relative;overflow:hidden;isolation:isolate}
.work .ambient::before{background:radial-gradient(38% 42% at 82% 18%,var(--amb-1),transparent 70%),radial-gradient(34% 40% at 12% 62%,var(--amb-2),transparent 70%),radial-gradient(30% 34% at 60% 96%,var(--amb-3),transparent 70%)}
.work .section-label{font-size:15px;letter-spacing:.14em}
:root{--card-bg:color-mix(in srgb,var(--text) 5%,var(--work-bg));--card-bg-hover:color-mix(in srgb,var(--rose) 14%,var(--work-bg));--card-shadow:0 1px 2px #0000001f,0 16px 30px -18px #00000080}
:root[data-theme=light]{--card-bg:#FBF8F3;--card-bg-hover:color-mix(in srgb,var(--rose) 16%,#FBF8F3);--card-shadow:0 1px 2px #1d1b200d,0 16px 30px -18px #1d1b2040}
.project-track{padding:8px 2px 30px;margin:-8px -2px -20px}
.project-link{border-radius:16px;overflow:hidden;background:var(--card-bg);box-shadow:var(--card-shadow);border:1px solid var(--line);transition:background .25s,border-color .25s}
:root[data-theme=light] .project-link{border-color:transparent}
.project-link:hover,.project-link:focus-visible{background:var(--card-bg-hover)}
.project-link .project-screen,:root[data-theme=light] .project-link .project-screen{border-radius:0;border:0;box-shadow:none}
.project-link .project-screen img{transition:transform .6s cubic-bezier(.2,.7,.3,1),filter .6s}
.project-link:hover .project-screen img{transform:scale(1.04);filter:saturate(1)}
.project-track .project-info{padding:22px 22px 22px}
.project-track .project-info .project-number{right:22px}
.project-link .project-url svg{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.project-link:hover .project-url svg,.project-link:focus-visible .project-url svg{transform:translate(3px,-3px)}
.project-link:hover .project-url{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.project-link:hover .project-screen img,.project-link:hover .project-url svg{transform:none}}
.project-track{padding:8px 0 30px;margin:-8px 0 -20px}