@font-face{font-family:Brand;src:local('Anthropic Sans'),local('Anthropic');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#111d3c;color:#f9fafc;font-family:Brand,Inter,'Segoe UI',Arial,sans-serif;font-size:17px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #d6ef8c;outline-offset:6px}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.12;letter-spacing:-.04em}h1{font-size:clamp(52px,5.6vw,86px);font-weight:650}h2{font-size:clamp(32px,3vw,46px);font-weight:600}h3{font-size:26px;font-weight:600}h1 span,h2 span{color:#d6ef8c}p{color:#d1d8e5}p+p{margin-top:18px}.wrap{width:min(1240px,88%);margin:auto}.header{position:absolute;z-index:3;top:0;left:6%;width:88%;height:110px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{width:145px;height:auto;display:block}.header nav{display:flex;gap:40px;font-size:15px}.header nav a:hover,footer a:hover{color:#d6ef8c}.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:13px 26px;border:1px solid transparent;border-radius:100px;background:linear-gradient(120deg,#d6ef8c,#b5efad);color:#16233d;font-size:16px;font-weight:650;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 8px 30px #6dd9b522}.button.outline{background:transparent;color:white;border-color:#98a7ba}.button.small{min-height:46px;padding:10px 25px;font-size:14px}.hero{min-height:100svh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 40%,#283f60 0,#182748 38%,#111d3c 75%);display:flex;align-items:center;border-bottom:1px solid #6dd9b51f}.hero-inner{position:relative;z-index:1;padding:145px 0 115px}.hero-copy{width:53%}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.25em;color:#d8e0e9;margin-bottom:23px}.intro{font-size:21px;max-width:480px;margin-top:25px}.actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:35px}.skills{font-size:14px;margin-top:30px}.skills b{color:#6dd9b5;padding:0 8px}.hero-art{position:absolute;right:-3%;top:10%;width:56%;height:80%;background:url('assets/hero-fluid-optimized.webp') center/contain no-repeat;mix-blend-mode:normal}.scroll{position:absolute;bottom:25px;left:6%;font-size:12px;color:#acbbcf;letter-spacing:.08em}.scroll span{padding-left:14px}.section{padding:95px 0;scroll-margin-top:20px}.section-label{display:flex;align-items:center;gap:25px;text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:#dce4ef;margin-bottom:27px}.section-label:after{content:'';height:1px;background:#52627b;flex:1}.about{display:grid;grid-template-columns:280px 1fr;gap:70px;align-items:center}.about figure{height:330px;position:relative;isolation:isolate;padding:7px;border-radius:42% 58% 54% 46% / 38% 40% 60% 62%;background:linear-gradient(140deg,#d6ef8c,#6dd9b5 58%,#35b9c5);box-shadow:0 18px 60px #6dd9b518;overflow:visible}.about figure:before{content:"";position:absolute;inset:-18px -14px;z-index:-1;border:1px solid #6dd9b53b;border-radius:48% 52% 44% 56% / 44% 36% 64% 56%;transform:rotate(-8deg)}.about img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:inherit}.about h2{margin-bottom:23px}.about .button{margin-top:26px}.about p{max-width:750px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}.card{border:1px solid #416887;border-radius:22px;padding:32px;background:linear-gradient(140deg,#24385666,#15254355);display:flex;flex-direction:column}.service-icon{width:95px;height:95px;filter:drop-shadow(0 4px 7px #6dd9b54a);margin-bottom:26px}.card h3{margin-bottom:18px;min-height:60px}.card p{font-size:16px;flex:1}.detail{background:none;color:#ccefae;border:0;border-top:1px solid #4a668055;padding:22px 0 0;margin-top:26px;font-size:14px;display:flex;justify-content:space-between;cursor:pointer}.detail span{font-size:22px;line-height:1}.content{display:grid;grid-template-columns:1fr 1.6fr;gap:55px;align-items:center}.content p{margin-top:18px}.content .section-label{margin-top:0}.social-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.social{display:flex;gap:20px;padding:28px 22px;border:1px solid #416887;border-radius:22px;background:#21375455;transition:background .2s}.social:hover{background:#2b466666}.social h3{font-size:20px;letter-spacing:-.02em}.social p{font-size:14px;margin:10px 0 18px}.social strong{font-size:13px;color:#d6ef8c;font-weight:500}.social-symbol{font-size:45px;line-height:1;color:#9be6b4}.play{font-size:32px}.contact{padding-bottom:110px}.contact h2{max-width:850px}.contact p:not(.section-label){margin-top:23px}.contact .button{margin-top:30px}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #4a668055;padding:35px 0 45px}footer .logo{width:105px}footer div{display:flex;gap:35px;font-size:14px}dialog{background:#192b4b;color:white;border:1px solid #6dd9b566;border-radius:24px;padding:45px;max-width:600px;width:90%;box-shadow:0 30px 100px #0007}dialog::backdrop{background:#061026b8;backdrop-filter:blur(6px)}dialog h2{font-size:33px;margin-bottom:22px}dialog ul{padding-left:20px;color:#d1d8e5;margin:25px 0 30px}dialog li{margin:12px 0}.close{position:absolute;right:15px;top:10px;background:none;border:0;color:white;font-size:30px;cursor:pointer}
@media(min-width:1700px){.hero-copy{width:55%}.hero-art{right:2%}}@media(max-width:1000px){.header nav{gap:20px}.hero-copy{width:62%}.hero-art{right:-20%;width:70%;opacity:.65}.about{grid-template-columns:230px 1fr;gap:40px}.cards{gap:15px}.card{padding:24px}.content{grid-template-columns:1fr}.social-cards{max-width:800px}}@media(max-width:650px){body{font-size:16px}.wrap{width:88%}.header{height:90px}.logo{width:115px}.header nav{display:none}.header .small{font-size:12px;padding:10px 15px}.hero{min-height:100svh;align-items:flex-start}.hero-inner{padding-top:145px;padding-bottom:310px}.hero-copy{width:100%}h1{font-size:52px}.intro{font-size:18px}.hero-art{width:85%;height:330px;top:auto;bottom:0;right:-12%;opacity:.8}.eyebrow{font-size:10px;letter-spacing:.18em}.actions{gap:12px}.button{font-size:14px;padding:13px 20px}.skills{font-size:12px;max-width:320px}.skills b{padding:0 3px}.scroll{display:none}.section{padding:60px 0}.about{grid-template-columns:1fr;gap:30px}.about figure{width:200px;height:235px}.about h2{font-size:32px}.cards{grid-template-columns:1fr}.card{padding:28px}.card h3{min-height:auto}.card h3 br{display:none}.social-cards{grid-template-columns:1fr}.content{gap:30px}.contact h2 br{display:none}footer{align-items:flex-start;gap:25px}footer div{flex-direction:column;gap:8px;font-size:12px}dialog{padding:35px 25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.youtube-symbol{width:44px;height:34px;flex-shrink:0;color:#9be6b4}.social-symbol{flex-shrink:0;width:44px;text-align:center}

.instagram-symbol{width:44px;height:44px;flex-shrink:0;color:#9be6b4}

/* Layouts for touch screens, portrait tablets and narrow phones. */
.wrap,.header{max-width:1240px}.about>div,.content>div,.card,.social>div{min-width:0}.social strong,footer a{overflow-wrap:anywhere}.button,.detail,.header nav a{min-height:44px}.header nav a{display:inline-flex;align-items:center}dialog{max-height:85svh;overflow-y:auto}
@media(min-width:651px) and (max-width:1100px){
 .wrap{width:90%}.header{left:5%;width:90%;gap:20px}.header nav{gap:22px}.hero-copy{width:60%}.hero-art{right:-10%;width:60%;opacity:1}.hero-inner{padding-top:150px;padding-bottom:100px}.intro{font-size:19px}.actions{gap:12px}.actions .button{padding:13px 21px}.about{grid-template-columns:230px minmax(0,1fr);gap:48px}.about figure{height:290px}.section{padding:75px 0}.card{padding:24px 20px}.card h3{font-size:23px}.service-icon{width:80px;height:80px}.social{padding:25px;gap:20px}.content{gap:35px}
}
@media(min-width:651px) and (max-width:900px) and (orientation:portrait){
 .hero{align-items:flex-start}.hero-inner{padding:160px 0 440px}.hero-copy{width:100%;max-width:620px}.hero-art{top:auto;bottom:25px;right:2%;width:70%;height:400px;opacity:1}.hero h1{font-size:clamp(58px,8vw,72px)}.intro{max-width:550px}.scroll{left:5%}
}
@media(max-width:760px){
 .cards{grid-template-columns:1fr}.card{padding:28px}.card h3{min-height:auto}.card h3 br{display:none}.service-icon{width:80px;height:80px;margin-bottom:22px}.social-cards{grid-template-columns:1fr}.about{grid-template-columns:1fr;gap:42px}.about figure{width:240px;height:280px;margin:0 auto}.about h2{font-size:clamp(30px,5vw,38px)}
}
@media(max-width:650px){
 .header{height:116px;align-content:center;flex-wrap:wrap;gap:4px 16px}.header nav{display:flex;order:3;flex-basis:100%;justify-content:center;gap:30px;font-size:14px}.header nav a{min-height:40px}.header .small{font-size:13px;min-height:44px}.hero-inner{padding-top:158px;padding-bottom:300px}.hero h1{font-size:clamp(40px,10.5vw,60px)}.hero-copy{width:100%}.hero-art{height:290px;width:100%;right:-8%;bottom:5px;opacity:1}.intro{font-size:18px}.eyebrow{font-size:12px;letter-spacing:.12em}.skills{font-size:14px;line-height:1.9;max-width:none}.actions{gap:12px;margin-top:27px}.actions .button{padding:12px 18px;font-size:14px}.section-label{font-size:12px;letter-spacing:.18em;gap:18px;margin-bottom:24px}.section{padding:58px 0}.about figure{width:220px;height:260px}.about h2{font-size:32px}.content{gap:30px}.social{padding:25px 22px;gap:20px}.social p{font-size:16px}.social strong{font-size:14px}.contact{padding-bottom:65px}.contact h2{font-size:32px}.contact .button{max-width:100%;text-align:center}footer{gap:24px}footer div{font-size:14px}dialog{width:calc(100% - 32px);padding:42px 24px 28px}dialog h2{font-size:28px}dialog .button{width:100%;text-align:center}
}
@media(max-width:370px){.header nav{gap:22px}.header .small{padding:10px 12px;font-size:12px}.logo{width:100px}.actions{flex-direction:column;align-items:stretch}.hero-inner{padding-bottom:270px}.hero-art{height:250px}.about h2,.contact h2{font-size:29px}.social{gap:14px;padding:22px 18px}footer{flex-direction:column}}
@media(max-height:600px) and (orientation:landscape) and (max-width:1100px){.hero{min-height:100svh}.hero-inner{padding-top:145px;padding-bottom:65px}.hero-copy{width:65%}.hero-art{top:120px;bottom:auto;height:calc(100% - 130px);right:-14%;width:58%;opacity:.8}.hero h1{font-size:48px}.scroll{display:none}}

/* Phone hero: artwork behind the copy, desktop composition preserved. */
@media(max-width:650px){
 .hero{align-items:center;isolation:isolate}
 .hero-inner{padding-top:150px;padding-bottom:60px}
 .hero-art{top:18%;bottom:auto;right:-48%;width:145%;height:80%;opacity:.32;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%)}
 .hero:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#111d3c80,transparent 95%)}
 .hero-copy{width:100%}
 .hero .intro,.hero .skills{color:#edf1f8}
 .hero .button.outline{background:#111d3cbf}
}
@media(max-height:600px) and (orientation:landscape) and (max-width:650px){
 .hero-inner{padding-top:145px;padding-bottom:45px}
 .hero-art{top:12%;height:90%;right:-48%;width:145%;opacity:.32}
}

/* Begin the stacked about section with its heading, then the portrait. */
@media(max-width:760px){
 .about{row-gap:22px}
 .about>div{display:contents}
 .about>div>*{order:3}
 .about>div>.section-label{order:1;margin:0 0 12px;max-width:none}
 .about>figure{order:2;margin:0 auto 20px}
 .about h2{margin-bottom:0}
 .about p+p{margin-top:0}
 .about .button{justify-self:start;margin-top:4px}
}
@media(max-width:650px){.hero{border-bottom:0}}

/* Center the phone composition while keeping card copy easy to scan. */
@media(max-width:650px){
 .hero-copy,.section{text-align:center}
 .hero .intro,.hero .skills{margin-left:auto;margin-right:auto}
 .actions{justify-content:center}
 .section-label{justify-content:center;gap:14px}
 .section-label:before{content:"";height:1px;flex:1;background:#52627b}
 .section-label:after{flex:1}
 .about .button{justify-self:center}
 .about p{margin-left:auto;margin-right:auto}
 .cards,.social-cards{text-align:left}
 .card h3{text-align:center}
 .service-icon{align-self:center}
 .contact .button{margin-left:auto;margin-right:auto}
 footer{flex-direction:column;align-items:center;text-align:center}
 footer .logo{margin:auto}
 footer div{align-items:center;gap:12px}
}
@media(max-width:370px){.actions{align-items:center}.actions .button{width:100%;max-width:300px}}

@media(max-width:650px){
 .hero{min-height:100svh}
 .hero-inner{min-height:100svh;display:flex;padding-top:158px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
 .hero-copy{display:flex;flex-direction:column;align-items:center}
 .hero .intro{margin-top:25px}
 .hero .skills{margin-top:auto;padding-top:52px;width:100%;max-width:360px}
 .hero .actions{width:100%;flex-shrink:0}
}

@media(max-width:650px){
 .hero .skills{max-width:none;white-space:nowrap;font-size:clamp(11px,2.9vw,14px);letter-spacing:-.02em;line-height:1.6}
 .hero .skills b{padding:0 1px}
}

@media(max-width:650px){
 .header{height:132px;row-gap:12px}
 .header nav{gap:6px;padding:5px;border:1px solid #6dd9b540;border-radius:100px;background:#1b2b4bd9;box-shadow:0 5px 20px #06102625;backdrop-filter:blur(12px)}
 .header nav a{flex:1;justify-content:center;min-height:40px;border:1px solid #789bad35;border-radius:100px;background:#ffffff06;font-size:14px;line-height:1.2;transition:background .2s,color .2s}
 .header nav a:hover,.header nav a:active,.header nav a:focus-visible{background:#d6ef8c;color:#16233d}
}

@media(min-width:651px){
 .header nav{gap:6px;padding:5px;border:1px solid #6dd9b540;border-radius:100px;background:#1b2b4bd9;box-shadow:0 5px 20px #06102625;backdrop-filter:blur(12px)}
 .header nav a{justify-content:center;min-height:40px;padding:0 22px;border:1px solid #789bad35;border-radius:100px;background:#ffffff06;font-size:15px;line-height:1.2;transition:background .2s,color .2s}
 .header nav a:hover,.header nav a:active,.header nav a:focus-visible{background:#d6ef8c;color:#16233d}
}
@media(min-width:651px) and (max-width:900px){.header{gap:12px}.header nav a{padding:0 12px;font-size:14px}.header .small{padding:10px 16px}.header .logo{width:125px}}

@media(max-width:650px){
 .header .button.small{background:#1b2b4bd9;color:#d6ef8c;border:1px solid #6dd9b540;box-shadow:0 5px 20px #06102625;font-weight:600;backdrop-filter:blur(12px)}
 .header .button.small:hover,.header .button.small:active{background:#263b58;box-shadow:none}
}

.menu-toggle{display:none}
@media(max-width:650px){
 .header{height:90px;flex-wrap:nowrap;gap:8px}
 .header>.button.small{margin-left:auto;padding:10px 13px;font-size:12px;white-space:nowrap}
 .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0;border:1px solid #6dd9b540;border-radius:50%;color:#d6ef8c;background:#1b2b4bd9;cursor:pointer}
 .menu-toggle[aria-expanded="true"]{background:#d6ef8c;color:#16233d}
 .header nav{display:none;position:absolute;top:80px;right:0;width:min(280px,100%);padding:10px;border-radius:22px;flex-direction:column;gap:8px;background:#192b4bf5;box-shadow:0 18px 50px #06102680}
 .header.menu-open nav{display:flex}
 .header nav a{flex:none;min-height:48px;border-radius:14px;padding:12px 18px;justify-content:flex-start;font-size:16px}
}
@media(max-width:370px){.header .logo{width:95px}.header>.button.small{padding:10px;font-size:11px}}

@media(max-width:650px){
 .hero .eyebrow{margin-bottom:38px}
 .hero .intro{margin-top:32px}
 .hero .actions{margin-top:42px;gap:16px}
}

@media(max-width:650px){
 .hero-art{top:-4%;right:-52%;width:185%;height:112%;background-size:cover;background-position:center;opacity:.32}
}

/* Carry the opening's fluid artwork into the portrait treatment. */
.about figure{
 padding:4px;
 border-radius:38% 62% 42% 58% / 44% 40% 60% 56%;
 background:linear-gradient(145deg,#e9fac1 0%,#d6ef8c 18%,#6dd9b5 50%,#35b9c5 75%,#b5efad 100%);
 box-shadow:0 18px 45px #06102640,inset 0 1px 3px #ffffff80;
}
.about figure:before{
 inset:-17% -21%;
 border:0;
 border-radius:0;
 background:url('assets/hero-fluid-optimized.webp') center/contain no-repeat;
 transform:rotate(-12deg);
 opacity:.8;
 filter:drop-shadow(0 8px 16px #6dd9b520);
}
.about img{border-radius:inherit}
@media(max-width:760px){
 .about>figure{margin-top:12px;margin-bottom:35px}
 .about figure:before{inset:-15% -20%;opacity:.75}
}

/* Replace the oval with a flowing, folded silhouette. */
.shape-definitions{position:absolute;pointer-events:none}
.about figure{padding:5px;border-radius:0;clip-path:url(#portrait-flow);background:linear-gradient(135deg,#f3ffcf 0%,#d6ef8c 22%,#6dd9b5 49%,#35b9c5 72%,#d6ef8c 100%);box-shadow:none}
.about figure:before{display:none}
.about img{border-radius:0;clip-path:url(#portrait-flow);object-position:50% 20%}

/* Keep the ribbon accents outside the new wavy portrait frame. */
.about figure{clip-path:none;background:none;overflow:visible;padding:5px}
.about figure:before{display:block;z-index:-1;inset:-17% -21%;background:url('assets/hero-fluid-optimized.webp') center/contain no-repeat;transform:rotate(-12deg);opacity:.8}
.about figure:after{content:"";position:absolute;inset:0;z-index:0;clip-path:url(#portrait-flow);background:linear-gradient(135deg,#f3ffcf 0%,#d6ef8c 22%,#6dd9b5 49%,#35b9c5 72%,#d6ef8c 100%)}
.about img{position:relative;z-index:1;clip-path:url(#portrait-flow);border-radius:0}
@media(max-width:760px){.about figure:before{inset:-15% -20%;opacity:.75}}

/* Glossy fluid ribbon frame, with the original portrait below it. */
.about figure{height:380px;padding:0;background:none;clip-path:none;isolation:isolate}
.about figure:before{display:none}
.about figure:after{inset:0;z-index:2;clip-path:none;background:url('assets/portrait-fluid-frame.png') center/100% 100% no-repeat;pointer-events:none}
.about img{position:absolute;inset:0;width:100%;height:100%;z-index:1;clip-path:url(#portrait-flow);object-fit:cover;object-position:50% 20%;border-radius:0}
@media(min-width:761px) and (max-width:1100px){.about figure{height:330px}}
@media(max-width:760px){.about figure{height:340px;width:240px}.about>figure{margin-top:0;margin-bottom:10px}}
@media(max-width:650px){.about figure{height:315px;width:225px}}

/* Give the portrait priority and move the ribbon outside its silhouette. */
.about{grid-template-columns:320px minmax(0,1fr);gap:70px}
.about figure{width:320px;height:370px}
.about figure:after{inset:-17% -15%;z-index:0;background-size:100% 100%;opacity:.85}
.about img{z-index:1;object-position:50% 25%}
@media(min-width:761px) and (max-width:1100px){.about{grid-template-columns:270px minmax(0,1fr);gap:50px}.about figure{width:270px;height:325px}}
@media(max-width:760px){.about{grid-template-columns:1fr}.about figure{width:280px;height:325px}.about>figure{margin-top:25px;margin-bottom:40px}}
@media(max-width:650px){.about figure{width:min(270px,90%);height:315px}.about figure:after{inset:-14% -12%}}

/* Portrait tablets use the same background composition as phones. */
@media(min-width:651px) and (max-width:1100px) and (orientation:portrait){
 .hero{min-height:100svh;align-items:center;isolation:isolate;border-bottom:0}
 .hero-inner{min-height:100svh;display:flex;padding-top:170px;padding-bottom:max(45px,env(safe-area-inset-bottom))}
 .hero-copy{width:100%;max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center}
 .hero h1{font-size:clamp(56px,7.5vw,86px)}
 .hero .eyebrow{margin-bottom:38px}
 .hero .intro{max-width:580px;margin-top:32px;color:#edf1f8;font-size:22px}
 .hero .actions{justify-content:center;margin-top:42px;gap:18px}
 .hero .skills{margin-top:auto;padding-top:60px;color:#edf1f8;white-space:nowrap;font-size:16px}
 .hero-art{top:-4%;bottom:auto;right:-40%;width:165%;height:112%;background-size:cover;background-position:center;opacity:.32;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%)}
 .hero:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#111d3c80,transparent 95%)}
 .hero .button.outline{background:#111d3cbf}
 .hero .scroll{display:none}
}

/* The portrait follows the actual opening of the ribbon asset. */
.about{grid-template-columns:360px minmax(0,1fr);gap:60px}
.about figure{width:360px;height:455px}
.about figure:after{inset:0;z-index:2;opacity:1;background-size:100% 100%}
.about img{z-index:1;object-position:50% 20%}
@media(min-width:761px) and (max-width:1100px){.about{grid-template-columns:280px minmax(0,1fr);gap:45px}.about figure{width:280px;height:355px}}
@media(max-width:760px){.about{grid-template-columns:1fr}.about figure{width:300px;height:380px}.about>figure{margin-top:0;margin-bottom:12px}}
@media(max-width:650px){.about figure{width:min(285px,100%);height:360px}.about figure:after{inset:0}}

/* Show every part of the original photograph; the ribbon stays outside. */
.about figure{width:360px;height:auto;aspect-ratio:1;overflow:visible}
.about img{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain;object-position:center;clip-path:none;border-radius:0;z-index:1}
.about figure:after{inset:-10% -13%;z-index:0;opacity:.85;background-size:100% 100%}
@media(min-width:761px) and (max-width:1100px){.about figure{width:280px;height:auto}}
@media(max-width:760px){.about figure{width:300px;height:auto}.about>figure{margin-top:20px;margin-bottom:35px}}
@media(max-width:650px){.about figure{width:min(300px,90%);height:auto}.about figure:after{inset:-10% -12%}}

/* Blend the cutout portrait with the same flowing artwork as the opening. */
.about .portrait-composite{height:400px;aspect-ratio:auto;background:none}
.about .portrait-composite:before,.about .portrait-composite:after{content:"";display:block;position:absolute;inset:-5% -15%;background:url('assets/hero-fluid-optimized.webp') center/contain no-repeat;transform:none;opacity:.9;clip-path:none;pointer-events:none}
.about .portrait-composite:before{z-index:0}
.about .portrait-composite:after{z-index:2;clip-path:inset(80% 0 0 0);opacity:.95}
.about .portrait-composite img{position:absolute;inset:0 -5%;width:110%;height:100%;object-fit:contain;object-position:center bottom;clip-path:none;z-index:1;-webkit-mask-image:linear-gradient(#000 0%,#000 91%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 91%,transparent 100%)}
@media(min-width:761px) and (max-width:1100px){.about .portrait-composite{height:335px}}
@media(max-width:760px){.about .portrait-composite{height:355px}}
@media(max-width:650px){.about .portrait-composite{height:340px}.about .portrait-composite:before,.about .portrait-composite:after{inset:-3% -10%}}

/* A single integrated portrait composition replaces separate layers. */
.about .portrait-composite:before,.about .portrait-composite:after{display:none}
.about .portrait-composite img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;-webkit-mask-image:none;mask-image:none;clip-path:none}

@media(max-width:760px){
 .card h3{font-size:24px;line-height:1.3;letter-spacing:-.02em;white-space:normal;overflow-wrap:normal;word-break:normal}
}
@media(max-width:370px){.card h3{font-size:22px}}

/* Keep compact headings readable when line breaks reflow on touch screens. */
@media(max-width:760px){
 .section h2,dialog h2{line-height:1.22;letter-spacing:-.02em}
 .social h3{line-height:1.3;letter-spacing:-.01em}
 .social p,.card p{line-height:1.65}
 .social strong{display:inline-block;line-height:1.5}
}
@media(min-width:761px) and (max-width:1100px){
 .section h2{line-height:1.2;letter-spacing:-.025em}
 .card h3{line-height:1.25;letter-spacing:-.02em}
}

/* Social channels share the same brand gradient and card rhythm. */
.network-symbol{width:44px;height:44px;flex-shrink:0}
.social-cards .social{align-items:flex-start}
@media(min-width:761px){.social-cards .social:last-child:nth-child(odd){grid-column:1 / -1}}

/* Keep the video channels adjacent in the stacked mobile list. */
@media(max-width:760px){
 .social-cards .social:nth-child(3){order:4}
 .social-cards .social:nth-child(4){order:3}
 .social-cards .social:nth-child(1){order:1}
 .social-cards .social:nth-child(2){order:2}
 .social-cards .social:nth-child(5){order:5}
 .social-cards .social:nth-child(6){order:6}
}

/* Direct contact channels, with a readable email address. */
.contact-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.contact .contact-actions .button{margin-top:0}
.contact-email{display:inline-block;margin-top:20px;color:#d1d8e5;font-size:16px;overflow-wrap:anywhere}
.contact-email:hover{color:#d6ef8c}
@media(max-width:650px){.contact-actions{justify-content:center;gap:16px}.contact .contact-actions .button{margin-left:0;margin-right:0}}

/* A complete footer with direct social links and email contact. */
.site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;padding:42px 0 48px;border-top:1px solid #6dd9b533;text-align:left}
.site-footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.site-footer .logo{width:120px;margin:0}
.site-footer .footer-brand p{font-size:14px;line-height:1.5;color:#acbbcf}
.site-footer .footer-networks{align-items:center;gap:14px}
.site-footer .footer-label{font-size:14px;color:#d1d8e5}
.footer-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #6dd9b540;border-radius:14px;background:#21375455;transition:background .2s,transform .2s}
.footer-socials a:hover{background:#2b466666;transform:translateY(-2px)}
.footer-socials svg{width:23px;height:23px;flex-shrink:0}
.footer-socials .youtube-symbol{height:18px}
.site-footer .footer-contact{align-items:flex-end;gap:15px}
.site-footer .footer-website{font-size:14px;line-height:1.5;color:#acbbcf}
.site-footer .footer-website:hover{color:#d6ef8c}
@media(max-width:1000px){.site-footer{grid-template-columns:1fr;justify-items:center;gap:30px;text-align:center}.site-footer>div,.site-footer .footer-contact{align-items:center}.site-footer .logo{margin:0 auto}}
@media(max-width:370px){.footer-socials{gap:7px}.footer-socials a{width:42px;height:42px}}

.site-footer .footer-copyright{grid-column:1 / -1;justify-self:center;margin:0;font-size:13px;line-height:1.6;color:#acbbcf;text-align:center}

.contact-actions .button:not(.outline){background:linear-gradient(120deg,#d6ef8c 0%,#6dd9b5 55%,#35b9c5 100%);color:#16233d}

.site-footer .footer-company{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:5px 0;font-size:14px;line-height:1.5;color:#d1d8e5;text-decoration:underline;text-decoration-color:#6dd9b580;text-underline-offset:5px;text-align:center}
.site-footer .footer-company:hover{color:#d6ef8c;text-decoration-color:currentColor}

/* The phone header keeps only the brand and menu control. */
@media(max-width:650px){
 .header>.button.small{display:none}
 .header>.menu-toggle{margin-left:auto}
}

@media(min-width:651px){.header nav .mobile-menu-contact{display:none}}

/* Mobile Safari: fill the current viewport and keep the browser edges indigo. */
html{background:#111d3c}
@media(max-width:650px){
 .hero,.hero-inner{min-height:100vh;min-height:100dvh}
 .hero{background:#111d3c}
 .header{top:env(safe-area-inset-top,0px)}
 .hero-inner{padding-top:calc(158px + env(safe-area-inset-top,0px));padding-bottom:max(36px,env(safe-area-inset-bottom,0px))}
 .hero-art{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 82%,transparent 100%)}
}
/* Keep the stacked biography together instead of spreading its rows. */
@media(max-width:760px){
 .about{row-gap:18px;align-content:start}
 .about>div>.section-label{margin:0 0 6px}
 .about>.portrait-composite{margin:0 auto;height:320px}
 .about h2{margin:0 0 4px}
 .about>div>p:not(.section-label){margin:0;line-height:1.65}
 .about .button{margin-top:6px}
}

/* Contact form: follows the indigo and lime/mint palette. */
.contact-form-panel[hidden]{display:none}
.contact-form-panel{max-width:760px;margin:36px auto 0;padding:32px;border:1px solid #6dd9b540;border-radius:24px;background:linear-gradient(140deg,#1d3154e6,#111d3cf5);text-align:left;box-shadow:0 18px 60px #080e2126}
.form-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.form-heading h3{font-size:clamp(22px,3vw,28px);margin:0;line-height:1.3}
.form-close{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid #6dd9b550;border-radius:50%;background:transparent;color:#d6ef8c;font-size:0;line-height:1;cursor:pointer}
.form-close::before{content:"";display:block;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.contact-form{display:grid;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form label{display:grid;gap:9px;font-size:15px;font-weight:600;line-height:1.5;color:#f0f3f8;text-align:left}
.contact-form label>span{display:contents;color:#b9c6d8;font-weight:400}
.contact-form input:not([type="hidden"]),.contact-form textarea{display:block;width:100%;min-width:0;box-sizing:border-box;border:1px solid #758baa70;border-radius:12px;background:#111d3c;color:#fff;padding:14px 16px;font:inherit;font-size:16px;line-height:1.5;outline-offset:3px}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#aebbd0}
.contact-form input:focus-visible,.contact-form textarea:focus-visible,.form-close:focus-visible{outline:2px solid #6dd9b5}
.contact-form .form-privacy{font-size:13px;line-height:1.6;color:#b9c6d8;margin:0;text-align:left}
.contact-form .button{justify-self:start;cursor:pointer;border:0;font:inherit;font-weight:700}
.contact-form .button:disabled{opacity:.5;cursor:wait}
.contact-form .form-status{margin:0;font-size:15px;line-height:1.6;color:#d6ef8c;text-align:left;min-height:0}
.contact-form .form-error{color:#ffd0c7}
.form-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
#contact-verification{width:100%;min-width:0;min-height:65px}
@media(max-width:650px){.contact-form-panel{padding:22px 18px;margin-top:28px;border-radius:20px}.form-row{grid-template-columns:1fr}.contact-form .button{width:100%;justify-content:center}.contact-form{gap:18px}}

/* Small navigation control, aligned with the site's palette. */
.back-to-top[hidden]{display:none}
.back-to-top{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:8;display:grid;place-items:center;width:46px;height:46px;margin:0;padding:0;border:1px solid #6dd9b570;border-radius:50%;background:#192b4bee;color:#d6ef8c;box-shadow:0 6px 22px #080e2140;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .2s,transform .2s}
.back-to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back-to-top:hover{background:#253d60;transform:translateY(-2px)}
@media(max-width:650px){.back-to-top{right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.back-to-top{transition:none}}

/* Close control: gradient icon only, with a comfortable touch target. */
.form-heading .form-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;appearance:none;-webkit-appearance:none;font-size:0;line-height:0}
.form-heading .form-close::before{width:20px;height:20px;flex:none;background:linear-gradient(135deg,#d6ef8c 0%,#6dd9b5 55%,#35b9c5 100%)}
.form-heading .form-close:hover::before{background:linear-gradient(135deg,#eefcad,#8af3cf,#5bdae4)}
/* The top link exists in HTML, so navigation also works without JavaScript. */
a.back-to-top{display:flex;align-items:center;justify-content:center;text-decoration:none}
a.back-to-top[hidden]{display:none}
a.back-to-top svg{display:block;flex:none}

/* Wide desktop: header, hero artwork and scroll cue share the content frame. */
@media(min-width:1400px){
 .header{left:50%;width:min(1240px,88vw);max-width:1240px;transform:translateX(-50%)}
 .hero-copy{width:53%}
 .hero-art{width:min(690px,48vw);right:calc((100vw - min(1240px,88vw))/2 - 72px);top:14%;height:72%;pointer-events:none}
 .scroll{left:calc((100vw - min(1240px,88vw))/2)}
}

/* Service popups: same gradient close icon as the contact form. */
#service-dialog .close{position:absolute;right:14px;top:14px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;appearance:none;-webkit-appearance:none;font-size:0;line-height:0;cursor:pointer}
#service-dialog .close::before{content:"";display:block;flex:none;width:20px;height:20px;background:linear-gradient(135deg,#d6ef8c 0%,#6dd9b5 55%,#35b9c5 100%);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
#service-dialog .close:hover::before{background:linear-gradient(135deg,#eefcad,#8af3cf,#5bdae4)}
#service-dialog .close:focus:not(:focus-visible){outline:none}
#service-dialog .close:focus-visible{outline:2px solid #6dd9b5;outline-offset:2px}
#service-dialog #dialog-title:focus{outline:none}

/* Center the introduction between the header and technology row on portrait screens. */
@media(max-width:650px), (min-width:651px) and (max-width:1100px) and (orientation:portrait){
 .hero{min-height:100vh;min-height:100lvh;align-items:stretch;}
 .hero-inner{min-height:100vh;min-height:100lvh;display:flex;align-items:stretch;padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:calc(36px + env(safe-area-inset-bottom,0px));}
 .hero-copy{display:grid;grid-template-rows:minmax(auto,1fr) auto;gap:28px;align-items:stretch;flex:1;width:100%;max-width:none;}
 .hero-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 0;}
 .hero .eyebrow{margin-bottom:32px;}
 .hero .intro{margin-top:30px;}
 .hero .actions{margin-top:36px;justify-content:center;}
 .hero .skills{margin:0;padding:0;width:100%;text-align:center;align-self:end;}
}
@media(min-width:651px) and (max-width:1100px) and (orientation:portrait){
 .hero-inner{padding-top:130px;padding-bottom:48px;}
 .hero-copy{gap:36px;}
 .hero-message{padding:32px 0;}
}
@media(max-width:370px){
 .hero-inner{padding-top:calc(100px + env(safe-area-inset-top,0px));padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));}
 .hero-message{padding:22px 0;}
 .hero .eyebrow{margin-bottom:26px;}
 .hero .intro{margin-top:24px;}
 .hero .actions{margin-top:28px;}
}

/* On portrait tablets, keep the technology row inside Safari's visible viewport. */
@media(min-width:651px) and (max-width:1100px) and (orientation:portrait){
 .hero,.hero-inner{min-height:100vh;min-height:100dvh;}
 .hero-inner{padding-top:130px;padding-bottom:32px;}
 .hero-copy{gap:24px;}
 .hero .skills{display:block;visibility:visible;opacity:1;max-width:none;white-space:nowrap;font-size:clamp(13px,1.6vw,16px);line-height:1.6;color:#edf1f8;}
 .hero .skills b{padding:0 4px;}
}

/* Explicit portrait-tablet footer position, within the visible first section. */
@media(min-width:651px) and (max-width:1100px) and (orientation:portrait){
 .hero{min-height:100vh;min-height:100dvh;}
 .hero-inner{height:100vh;height:100dvh;min-height:680px;position:relative;padding-top:130px;padding-bottom:84px;}
 .hero-copy{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;}
 .hero-message{flex:1;min-height:0;justify-content:center;padding:24px 0;}
 .hero .skills{position:absolute;z-index:2;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));display:block;margin:0;padding:0;width:100%;max-width:none;text-align:center;color:#edf1f8;font-size:clamp(13px,1.6vw,16px);line-height:1.6;white-space:nowrap;visibility:visible;opacity:1;}
}

/* Center the brand, navigation and contact button as one portrait-tablet group. */
@media(min-width:651px) and (max-width:1100px) and (orientation:portrait){
 .header{left:50%;transform:translateX(-50%);width:90%;max-width:1000px;height:110px;justify-content:center;align-items:center;flex-wrap:nowrap;gap:20px;}
 .header .logo{width:125px;}
 .header nav{order:0;flex:0 1 auto;flex-basis:auto;justify-content:center;gap:6px;margin:0;}
 .header nav a{padding:0 12px;font-size:14px;}
 .header>.button.small{margin:0;white-space:nowrap;padding:10px 18px;font-size:13px;}
}
@media(min-width:651px) and (max-width:760px) and (orientation:portrait){
 .header{gap:12px;}
 .header .logo{width:115px;}
 .header nav a{padding:0 8px;font-size:13px;}
 .header>.button.small{padding:10px 14px;font-size:12px;}
}