:root{--ink:#111;--charcoal:#202020;--light:#d7d7d7;--font:'Montserrat','Arial',sans-serif;--body:'Raleway',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:25px}
body{margin:0;color:var(--ink);font-family:var(--font);background:#e5e5e5}
button,input,textarea{font:inherit}
a{color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #6e9df8;outline-offset:5px}
.skip-link{position:absolute;top:-80px;left:15px;z-index:100;padding:14px;background:#fff}.skip-link:focus{top:15px}
.hero{height:770px;min-height:630px;position:relative;background:var(--light);overflow:hidden;isolation:isolate}
.hero-dark{position:absolute;inset:0;background:#030303;clip-path:polygon(49.5% 0,100% 0,100% 100%,40.3% 100%);z-index:-1}
.hero-inner{height:100%;max-width:1440px;margin:auto;position:relative}
.site-header{height:120px;position:relative;display:flex;align-items:center;justify-content:space-between;margin:0 auto;width:min(1020px,84%);z-index:5}
.brand{width:47px;height:47px;display:grid;place-items:center;transition:transform .2s}.brand:hover{transform:translateY(-2px)}.brand svg{width:43px;height:43px}
.site-nav{display:flex;align-items:center;gap:50px}.site-nav a{color:#fff;text-decoration:none;font-family:var(--body);font-size:14px;font-weight:800;white-space:nowrap;transition:opacity .2s}.site-nav a:hover{opacity:.65}.site-nav .nav-contact{color:#111;background:#fff;border-radius:999px;padding:11px 17px;text-transform:uppercase;font-size:12px}.site-nav .nav-contact:hover{background:#e8e8e8;opacity:1}
.menu-toggle{display:none}
.hero-copy{position:absolute;left:14%;top:35%;z-index:2}.hero-greeting{font-size:26px;font-weight:700;margin:0 0 32px}.hero-copy h1{font-size:clamp(40px,4.5vw,64px);font-weight:800;letter-spacing:-2px;line-height:1.06;margin:0}.hero-role{color:#858585;font-family:var(--body);font-weight:800;font-size:17px;margin:16px 0 0;letter-spacing:.2px}
.hero-socials{display:flex;gap:19px;margin-top:92px}.hero-socials a{display:grid;place-items:center;width:43px;height:42px;background:#c1c1c1;box-shadow:4px 4px 9px #b9b9b9,-3px -3px 9px #ededed;transition:transform .2s,background .2s}.hero-socials a:hover{transform:translateY(-4px);background:#fff}.hero-socials svg{width:24px;height:24px}
.hero-portrait{position:absolute;bottom:0;left:48.5%;width:35.2%;height:auto;max-height:88%;object-fit:contain;object-position:bottom;mix-blend-mode:normal;z-index:1;pointer-events:none}
/* The optional local photo editor is enabled with ?edit=1, never shown on the published page by default. */
.hero-photo-editor{position:absolute;right:3%;bottom:24px;z-index:4;width:min(270px,27%);padding:16px;background:#171717ed;color:white;border:1px solid #ffffff55;box-shadow:0 8px 30px #0005;border-radius:8px;font-family:var(--body);font-size:12px;line-height:1.45}
.hero-photo-editor[hidden],.photo-download[hidden]{display:none!important}
.hero-photo-editor input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)}
.photo-action{display:block;text-align:center;text-decoration:none;background:#fff;color:#111;padding:10px 8px;font-family:var(--font);font-size:11px;font-weight:800;border-radius:3px;cursor:pointer}
.photo-action:hover,.hero-photo-editor input:focus-visible + .photo-action{background:#e0e0e0}
.photo-download{margin-top:9px;background:#d9e7ff}
.photo-help{margin:12px 0 0;overflow-wrap:anywhere;color:#ddd}
.photo-help strong{color:white}
@media(max-width:700px){.hero-photo-editor{right:3%;bottom:12px;width:min(245px,60%);padding:10px;font-size:10px}.photo-action{font-size:10px;padding:8px 5px}.photo-help{margin-top:6px}}
.intro{min-height:230px;background:var(--charcoal);color:#fff;position:relative;overflow:hidden;display:flex;align-items:center}.intro-content{width:min(1170px,85%);margin:0 auto;position:relative;z-index:1;padding:35px 0}.intro h2{font-size:21px;letter-spacing:5px;margin:0 0 20px;text-transform:uppercase;font-weight:800}.intro p{max-width:890px;font-family:var(--body);font-size:13px;line-height:1.6;margin:0 0 24px;color:#e0e0e0}.intro-decoration{position:absolute;right:3%;top:-35%;font-weight:900;font-size:270px;line-height:1.2;transform:rotate(25deg);font-family:Arial,sans-serif;color:transparent;-webkit-text-stroke:13px #080808;opacity:.95;pointer-events:none}.lined-link{display:inline-block;font-family:var(--body);text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.4px;padding:2px 15px;border-left:2px solid currentColor;border-right:2px solid currentColor;line-height:22px;transition:letter-spacing .2s}.lined-link:hover{letter-spacing:2px}
.light-sections{background:radial-gradient(ellipse at 50% 43%,#fff 0%,#f4f4f4 48%,#dedede 100%)}.content-shell{max-width:1190px;margin:0 auto;text-align:center}.about{padding:106px 28px 0}.boxed-title{display:table;min-width:300px;padding:17px 45px;border:5px solid #111;text-transform:uppercase;letter-spacing:10px;font-size:22px;font-weight:800;line-height:1.1;text-align:center;margin:0 auto}.section-lede{max-width:660px;margin:52px auto 0;font-family:var(--body);font-size:13px;font-weight:600;line-height:1.65}.about>.on-light{margin-top:54px}.section-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:72px auto 0;width:140px;font-weight:900;font-size:16px}.section-divider:before,.section-divider:after{content:'';height:2px;background:#111;flex:1}.section-divider span{font-size:16px;letter-spacing:-6px;padding-right:6px;white-space:nowrap;transform:translateY(-3px)}
.service-grid{max-width:775px;margin:91px auto 0;display:grid;grid-template-columns:1fr 1fr;column-gap:115px;row-gap:60px;text-align:left}.service{position:relative;min-height:115px}.service h3{font-size:17px;letter-spacing:4px;text-transform:uppercase;margin:0 0 14px;font-weight:800}.service p{font-family:var(--body);font-size:13px;line-height:1.65;margin:0}.service-deco{position:absolute;left:-23px;top:-30px;color:#d6d6d6;font-size:70px;line-height:1;font-family:Arial,sans-serif;z-index:0}.service h3,.service p{position:relative}.service-maintenance{grid-column:1 / -1;max-width:385px;justify-self:center;margin-top:30px}.services-divider{margin-top:108px}
.skills{padding:90px 24px 137px}.skills-inner{width:min(650px,100%);margin:74px auto 0;text-align:left}.skills-group-title{text-transform:uppercase;letter-spacing:4px;font-size:20px;font-weight:800;margin:0 0 55px}.skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:45px;row-gap:65px;margin-bottom:97px}.skill{display:flex;align-items:center;flex-direction:column;justify-content:flex-start;gap:18px;min-width:0;text-align:center}.skill-icon,.wordmark,.tile-icon,.flag,.c-mark{width:70px;height:70px;flex:0 0 70px}.skill-icon{object-fit:contain}.skill>span{text-transform:uppercase;letter-spacing:2px;font-size:15px;line-height:1.4;font-family:var(--body);font-weight:500}.wordmark{display:grid;place-items:center;font-family:cursive}.sass-mark{font-style:italic;font-size:39px;color:#cd6799;transform:rotate(-15deg);letter-spacing:-4px}.tile-icon{display:grid;place-items:end;padding:6px;font-family:Arial,sans-serif;font-weight:800;font-size:36px}.js-mark{background:#f7df1e;color:#111}.bootstrap-mark{background:#563d7c;color:#fff;border-radius:9px;place-items:center;font-family:Georgia,serif;font-size:55px}.ts-mark{background:#3178c6;color:white}.flag{display:grid;place-items:center;font-size:58px;line-height:1}.c-mark{color:#fff;background:#4279ac;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);display:flex;align-items:center;justify-content:center;font-size:43px;font-weight:800;font-family:Arial,sans-serif;letter-spacing:-7px;padding-right:7px}.c-mark span{font-size:20px;letter-spacing:-3px;transform:translateY(2px)}.c-mark-plain{background:#8895a5;padding:0;letter-spacing:0}.skill-grid-other{margin-bottom:0}
.portfolio{background:#1b1b1b;color:#fff}.portfolio-banner{min-height:240px;display:grid;place-items:center;background:linear-gradient(#2224,#2224),url('assets/mountains.jpg') center 48%/cover no-repeat}.portfolio-banner .boxed-title{color:#111;border-color:#111;background:#ffffff18;min-width:360px}.portfolio-controls{height:83px;display:flex;justify-content:center;align-items:flex-end;gap:0;background:#1a1a1a}.filter-button{color:#dedede;border:0;border-bottom:1px solid #999;background:none;min-width:146px;padding:16px 16px 13px;text-transform:uppercase;font-size:12px;font-family:var(--body);letter-spacing:.4px;transition:color .2s,border-color .2s}.filter-button:hover,.filter-button.active{color:#fff;border-color:white}.filter-button.active{font-weight:800}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr)}.project{border:0;padding:0;margin:0;position:relative;aspect-ratio:183/115;overflow:hidden;color:white;background:#0b0b0b;display:block;width:100%}.project[hidden]{display:none}.project img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .35s}.project:hover img,.project:focus-visible img{transform:scale(1.07);filter:brightness(.52)}.project-overlay{position:absolute;inset:0;background:#0009;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:700;opacity:0;transition:opacity .25s;padding:20px}.project-overlay strong{font-size:22px;letter-spacing:2px}.project:hover .project-overlay,.project:focus-visible .project-overlay{opacity:1}.portfolio-ending{font-family:var(--body);font-size:16px;text-align:center;padding:17px;margin:0;font-weight:700}
.contact{padding:105px 20px 86px;min-height:890px;text-align:center;background:radial-gradient(ellipse at center,#fff 0%,#f1f1f1 56%,#dedede 100%)}.contact .section-lede{margin-top:46px}.contact .section-divider{margin-top:42px}.contact-form{max-width:460px;margin:84px auto 0;text-align:left}.contact-form label{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.contact-form input,.contact-form textarea{background:transparent;border:0;border-left:4px solid #111;border-bottom:4px solid #111;border-radius:0;color:#111;outline:none;width:100%;padding:15px 12px 13px;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.4px;transition:border-color .2s}.contact-form input{height:56px;margin-bottom:22px}.contact-form textarea{margin-top:15px;min-height:139px;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:#666}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#757575;opacity:1}.contact-form [aria-invalid=true]{border-color:#b12424}.submit-button{display:block;margin:43px auto 0;background:transparent;border:0;border-left:2px solid #111;border-right:2px solid #111;text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:800;padding:7px 30px}.submit-button:hover{background:#111;color:white}.form-status{font-size:13px;line-height:1.55;text-align:center;min-height:24px;margin-top:24px;color:#333}
.footer{min-height:245px;background:#1b1b1b;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:36px 16px;text-align:center}.back-to-top{display:flex;flex-direction:column;align-items:center;gap:3px;text-transform:uppercase;text-decoration:none;letter-spacing:2px;font-family:var(--body);font-size:12px;font-weight:800}.back-to-top span{font-size:23px;line-height:1}.footer-socials{display:flex;gap:20px}.footer-socials a{width:22px;height:22px;display:block;transition:transform .2s}.footer-socials a:hover{transform:translateY(-3px)}.footer-socials svg{width:22px;height:22px}.footer p{font-family:var(--body);font-size:12px;margin:0}
.project-dialog{padding:0;border:none;width:min(620px,calc(100% - 40px));max-height:90vh;background:#f4f4f4;color:#111;box-shadow:0 20px 90px #0006}.project-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-image{display:block;width:100%;max-height:330px;object-fit:cover}.dialog-body{padding:30px 38px 36px}.dialog-eyebrow{font-size:11px;letter-spacing:3px;font-weight:800;text-transform:uppercase}.dialog-body h2{font-size:27px}.dialog-body p{font-family:var(--body);line-height:1.6}.dialog-body .dialog-note{color:#666;font-size:12px}.dialog-close{position:absolute;top:12px;right:14px;background:#fff;color:#111;width:40px;height:40px;border:0;border-radius:50%;font-size:28px;line-height:1}
@media(max-width:1000px){.hero{height:670px;min-height:620px}.site-header{width:87%}.site-nav{gap:24px}.hero-copy{left:9%;top:35%}.hero-copy h1{font-size:48px}.hero-portrait{left:48%;width:42%}.intro-content{width:84%}.service-grid{column-gap:75px}}
@media(max-width:700px){html{scroll-padding-top:0}.hero{height:800px;min-height:0}.hero-dark{clip-path:polygon(100% 0,100% 100%,0 100%,0 58%)}.site-header{width:90%;height:84px}.brand{color:#111}.menu-toggle{display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;background:#fff;border:0;border-radius:3px;width:44px;height:42px;z-index:8}.menu-toggle span{width:22px;height:2px;background:#111;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)}.site-nav{position:absolute;top:72px;right:0;width:min(290px,90vw);display:none;align-items:stretch;gap:0;flex-direction:column;padding:13px 20px;background:#1b1b1b;box-shadow:0 10px 30px #0004}.site-nav.open{display:flex}.site-nav a{padding:13px 8px}.site-nav .nav-contact{margin:8px 0;text-align:center}.hero-copy{top:17%;left:7%;right:7%}.hero-greeting{font-size:19px;margin-bottom:16px}.hero-copy h1{font-size:clamp(36px,8vw,55px);letter-spacing:-1px}.hero-role{font-size:13px;margin-top:10px}.hero-socials{margin-top:28px;gap:14px}.hero-socials a{width:36px;height:36px}.hero-portrait{left:auto;right:4%;width:min(67%,385px);height:auto;max-height:55%;bottom:0;object-fit:contain;object-position:bottom}.intro{min-height:255px}.intro-content{padding:40px 0;width:86%}.intro h2{font-size:18px}.intro p{font-size:12px}.intro-decoration{font-size:190px;right:-15%;top:0;opacity:.55}.about{padding-top:80px}.boxed-title{font-size:18px;min-width:242px;letter-spacing:7px;padding:15px 22px;border-width:4px}.section-lede{font-size:12px;margin-top:40px}.about>.on-light{margin-top:40px}.section-divider{margin-top:50px}.service-grid{grid-template-columns:1fr;max-width:440px;margin:65px 20px 0;row-gap:45px}.service-maintenance{grid-column:auto;max-width:none;margin-top:0;justify-self:stretch}.services-divider{margin-top:75px}.skills{padding-top:75px;padding-bottom:90px}.skills-inner{margin-top:65px;max-width:460px}.skills-group-title{font-size:17px;margin-bottom:35px}.skill-grid{grid-template-columns:repeat(2,1fr);row-gap:43px;column-gap:15px;margin-bottom:75px}.skill>span{font-size:13px}.portfolio-banner{min-height:195px}.portfolio-banner .boxed-title{min-width:250px}.portfolio-controls{height:67px}.filter-button{min-width:90px;font-size:11px;padding-left:7px;padding-right:7px}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.project-overlay{gap:6px;font-size:9px}.project-overlay strong{font-size:14px;letter-spacing:.5px}.contact{min-height:0;padding:80px 23px 70px}.contact-form{margin-top:57px}.contact-form input{margin-bottom:13px}.footer{min-height:235px}}
@media(max-width:410px){.hero{height:740px}.hero-dark{clip-path:polygon(100% 0,100% 100%,0 100%,0 56%)}.hero-portrait{width:77%;right:0;max-height:51%}.hero-copy h1{font-size:36px}.hero-socials{margin-top:25px}.portfolio-grid{grid-template-columns:1fr}.project{aspect-ratio:183/104}.project-overlay strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}


/* AMR KHALED — rebuilt hero: keep all left-hand copy on light background. */
:root{--light:#e6e7e9}
.hero{background:var(--light)}
.hero-inner{isolation:isolate}
.hero-copy{left:8.4%;top:36%;width:39%;max-width:510px;color:#171717;z-index:3}
.hero-greeting{margin-bottom:23px;white-space:nowrap}
.hero-copy h1{font-size:clamp(37px,3.65vw,57px);letter-spacing:-2.1px;line-height:1.08;white-space:nowrap}
.hero-role{font-size:19px;margin-top:14px;color:#65696d}
.hero-socials{margin-top:76px}
/* The PNG includes transparent padding. A larger image box gives the visible person a
   properly proportioned, full-height portrait without stretching or distortion. */
.hero-portrait{left:48%;bottom:0;width:min(660px,46%);height:auto;max-height:100%;object-fit:contain;object-position:bottom;z-index:1}
.hero-hook{position:absolute;right:4%;top:36%;width:280px;z-index:2;color:#fff;font-family:var(--body)}
.hook-eyebrow{display:flex;align-items:center;gap:11px;font:800 11px var(--font);letter-spacing:3px;color:#bcbcbc;white-space:nowrap}
.hook-dot{width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block;box-shadow:0 0 0 4px #ffffff22}
.hook-headline{font:500 clamp(27px,2.15vw,36px)/1.22 var(--font);letter-spacing:-1.2px;margin:25px 0 17px}
.hook-headline strong{font-weight:800}
.hook-description{color:#bcbcbc;font-size:14px;font-weight:500;line-height:1.7;max-width:275px;margin:0 0 29px}
.hook-link{display:inline-flex;align-items:center;gap:19px;border-bottom:1px solid #fff;padding:0 0 9px;text-decoration:none;text-transform:uppercase;letter-spacing:1.7px;font:800 11px var(--font);transition:gap .2s,color .2s}
.hook-link:hover{gap:27px;color:#d8d8d8}
@media (min-width:1441px){.hero-dark{clip-path:polygon(49.5% 0,100% 0,100% 100%,40.3% 100%)}}
@media (min-width:1101px) and (max-width:1440px){.hero-copy{left:7%;width:39%}.hero-copy h1{font-size:clamp(37px,3.65vw,53px)}.hero-portrait{left:46.5%;width:46%}.hero-hook{right:2.7%;width:24%;top:34%}.hook-headline{font-size:clamp(25px,2.2vw,32px)}}
@media (min-width:701px) and (max-width:1100px){
 .hero{height:675px}
 .hero-copy{left:6%;top:34%;width:39%}
 .hero-copy h1{font-size:clamp(29px,3.85vw,42px);letter-spacing:-1.5px}
 .hero-greeting{font-size:21px}.hero-role{font-size:15px}
 .hero-socials{margin-top:60px}
 .hero-portrait{left:43%;width:49%;max-height:94%}
 .hero-hook{right:2.5%;top:29%;width:20%;min-width:145px}
 .hook-eyebrow{font-size:9px;letter-spacing:1.4px}
 .hook-headline{font-size:clamp(18px,2.35vw,26px);letter-spacing:-.65px;margin:18px 0 11px}
 .hook-description{font-size:12px;line-height:1.45;margin-bottom:17px}
 .hook-link{font-size:9px;letter-spacing:.5px;gap:6px}
}
/* On phones, use a slanted horizontal split: text is entirely on light, hook entirely
   on dark, and the portrait sits separately on the right without covering either. */
@media (max-width:700px){
 .hero{height:830px;min-height:0}
 .hero-dark{clip-path:polygon(0 55%,100% 47%,100% 100%,0 100%)}
 .hero-copy{left:7%;right:auto;top:16%;width:86%;max-width:none}
 .hero-greeting{font-size:20px;margin-bottom:18px}
 .hero-copy h1{font-size:clamp(35px,8vw,51px);letter-spacing:-1.8px}
 .hero-role{font-size:15px;margin-top:10px}
 .hero-socials{margin-top:35px;gap:15px}
 .hero-portrait{left:auto;right:-12%;bottom:0;width:min(80%,450px);max-height:59%;height:auto;object-fit:contain;object-position:bottom;z-index:1}
 .hero-hook{left:7%;right:auto;top:66%;width:205px;z-index:2}
 .hook-eyebrow{font-size:9px;letter-spacing:1.8px}
 .hook-headline{font-size:clamp(22px,4.3vw,28px);line-height:1.23;margin:19px 0 11px;letter-spacing:-.5px}
 .hook-description{font-size:12px;line-height:1.55;margin-bottom:21px}
 .hook-link{font-size:10px;letter-spacing:1px;gap:10px}
 .hero-photo-editor{right:3%;bottom:12px;width:min(215px,54%)}
}
@media (max-width:480px){
 .hero{height:780px}
 .hero-dark{clip-path:polygon(0 54%,100% 46%,100% 100%,0 100%)}
 .hero-copy{top:15%}
 .hero-copy h1{font-size:clamp(32px,8.1vw,39px);letter-spacing:-1.3px}
 .hero-portrait{right:-30%;width:90%;max-height:54%}
 .hero-hook{left:6%;top:63%;width:34%;min-width:122px}
 .hook-eyebrow{font-size:8px;letter-spacing:.7px;gap:7px}
 .hook-headline{font-size:clamp(19px,5vw,24px);margin:15px 0 12px}
 .hook-description{font-size:10px;line-height:1.5;margin-bottom:14px}
 .hook-link{font-size:9px;letter-spacing:.1px;gap:5px}
 .hero-socials{margin-top:28px}
 .hero-photo-editor{width:min(185px,46%)}
}

/* =============================================================
   ABOUT + EXPERIENCE | deliberate extension of the original
   monochrome portfolio. Keep this section on its original soft,
   radial grey-to-white background. The experience entries have subtle boundaries.
   ============================================================= */
.intro{min-height:248px}
.intro-content{width:min(1170px,85%);padding:42px 0 43px}
.intro h2{font-size:clamp(18px,1.65vw,23px);letter-spacing:4px;line-height:1.3;margin-bottom:17px}
.intro p{max-width:780px;font-size:14px;line-height:1.72;margin-bottom:22px}
.intro-decoration{position:absolute;width:clamp(260px,30vw,430px);height:auto;right:1%;top:-34px;transform:rotate(-12deg);color:#070707;opacity:.65;pointer-events:none;-webkit-text-stroke:0;z-index:0}
.intro-content{z-index:1}
.intro .lined-link{font-size:11px;letter-spacing:1px;padding-inline:15px}
.light-sections{background:radial-gradient(ellipse at 50% 43%,#fff 0%,#f4f4f4 48%,#dedede 100%)}
.about{padding:95px 28px 0}
.about-story{max-width:790px;margin:44px auto 0;text-align:left;font-family:var(--body);font-size:15px;line-height:1.78;color:#292929}
.about-story p{margin:0 0 17px}
.about-story .about-usp{font-weight:700;color:#171717;margin-top:23px;margin-bottom:0}
.about-cta{margin-top:33px!important;font-size:12px}
.about>.section-divider{margin-top:60px}
@media(max-width:1000px){
 .intro-content{width:84%}
 .intro-decoration{right:-7%;opacity:.40}
}
@media(max-width:700px){
 .intro{min-height:270px}
 .intro-content{padding:42px 0}
 .intro h2{font-size:19px;letter-spacing:2.5px}
 .intro p{font-size:12px;line-height:1.7;max-width:96%}
 .intro-decoration{width:250px;right:-19%;top:0;opacity:.3}
 .about{padding:77px 22px 0}
 .about-story{font-size:14px;line-height:1.75;margin-top:36px}
 .about-story p{margin-bottom:14px}
 .about-story .about-usp{margin-top:19px}
 .about-cta{margin-top:28px!important}
 .about>.section-divider{margin-top:54px}
}
@media(max-width:420px){
 .intro{min-height:290px}
 .intro h2{font-size:17px;letter-spacing:1.7px}
 .about-story{font-size:13px}
}

.about-cta{max-width:100%;line-height:1.65;text-wrap:pretty}


/* ABOUT: education section shares the original continuous soft grey-to-white background. */
.education{max-width:790px;margin:83px auto 0;text-align:center}
.education .education-title{min-width:min(345px,100%);max-width:100%;border-width:4px;font-size:19px;letter-spacing:6px;padding:16px 24px}
.education-details{position:relative;max-width:690px;margin:35px auto 0;padding:20px 28px 25px;text-align:center;border-top:1px solid #d7d9da;border-bottom:1px solid #d7d9da}
.education-icon{display:block;width:47px;height:47px;margin:0 auto 12px;fill:none;stroke:#cfd2d5;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.education-details p{font-family:var(--body);line-height:1.6;margin:0}
.education-degree{font-size:17px;font-weight:800;letter-spacing:.05px;color:#191919}
.education-years{font-size:13px;font-weight:700;color:#686868;letter-spacing:2px;margin:9px 0 20px!important}
.education-fact{font-size:14px;color:#383838;margin:7px 0!important}
.education-fact strong{font-weight:800;color:#1c1c1c}
/* The same vector mark as the header logo ornaments both section dividers. */
.brand-divider{width:158px;gap:12px}
.brand-divider span{display:grid;place-items:center;flex:0 0 35px;padding:0;letter-spacing:normal;white-space:normal;transform:none}
.brand-divider .divider-logo{display:block;width:34px;height:34px;fill:currentColor}
.about>.brand-divider{margin-top:62px}
@media(max-width:700px){
 .education{margin-top:65px}
 .education .education-title{min-width:min(290px,100%);font-size:17px;letter-spacing:4px;padding:15px 18px}
 .education-details{margin-top:28px;padding:18px 12px 23px}
 .education-degree{font-size:15px}
 .education-years{font-size:12px}
 .education-fact{font-size:13px}
 .about>.brand-divider{margin-top:53px}
}
@media(max-width:380px){.education .education-title{min-width:0;width:100%;letter-spacing:3px}.education-fact{font-size:12px}}


/* EXPERIENCE & INTERNSHIPS — certificates are explicitly training, never presented as jobs. */
.experience{max-width:1030px;margin:66px auto 0;text-align:center}
.experience-heading h3{font-size:clamp(21px,2.2vw,29px);font-weight:800;letter-spacing:4px;line-height:1.4;margin:0;text-wrap:balance}
.experience-subtitle{margin:15px 0 0;font-size:11px;font-weight:800;letter-spacing:3px;color:#777}
.experience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin:49px auto 0;text-align:left}
.experience-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:27px 27px 25px;background:#ffffff64;border:1px solid #d8d8d8;box-shadow:0 8px 28px #00000005;isolation:isolate}
.experience-illustration{position:absolute;width:76px;height:76px;right:16px;top:14px;color:#d4d6d8;z-index:-1;pointer-events:none}
.experience-illustration svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.experience-card-copy{position:relative;z-index:1;flex:1}
.experience-kind{margin:0 0 14px;font:800 10px var(--font);text-transform:uppercase;letter-spacing:2px;color:#666}
.experience-card h4{font-size:17px;line-height:1.48;letter-spacing:1.3px;font-weight:800;margin:0 0 13px;text-transform:uppercase;max-width:380px}
.experience-provider{font:700 12px/1.5 var(--body);color:#4e4e4e;margin:0 0 17px}
.experience-provider span{padding:0 6px;color:#aaa}
.experience-description{font:500 13px/1.75 var(--body);color:#414141;margin:0 0 25px;max-width:430px}
.certificate-link{margin-top:auto;display:block;text-decoration:none;color:#181818}
.certificate-link img{display:block;width:100%;aspect-ratio:1.44;object-fit:contain;background:#fff;border:1px solid #d6d6d6;filter:grayscale(.22);transition:filter .25s,transform .25s}
.certificate-link:hover img,.certificate-link:focus-visible img{filter:grayscale(0);transform:translateY(-2px)}
.certificate-link>span{display:inline-flex;gap:12px;margin-top:16px;padding:4px 0;border-bottom:1px solid currentColor;font:800 10px var(--font);letter-spacing:1.8px}
.about .services-divider.brand-divider{margin-top:76px}
@media(max-width:700px){
 .experience{margin-top:49px}
 .experience-heading h3{font-size:20px;letter-spacing:2.3px}
 .experience-grid{grid-template-columns:1fr;gap:24px;margin-top:34px;max-width:510px}
 .experience-card{padding:22px 21px}
 .experience-card h4{font-size:15px;letter-spacing:1px}
 .experience-description{font-size:12px}
 .experience-illustration{width:62px;height:62px}
 .about .services-divider.brand-divider{margin-top:60px}
}
@media(max-width:380px){.experience-heading h3{font-size:18px;letter-spacing:1.4px}.experience-card{padding:20px 17px}.experience-provider{font-size:11px}}


/* DATA ANALYST SKILLS: consistently sized local vector icons and centered groups. */
.skills{padding:95px 25px 126px}
.skills-inner{width:min(1030px,100%);margin:72px auto 0;text-align:left}
.skill-category{margin:0 0 77px}
.skill-category:last-child{margin-bottom:0}
.skills-group-title{font-size:18px;letter-spacing:3.4px;margin:0 0 37px}
.skill-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:38px 22px;margin:0}
.skill{flex:0 0 165px;min-width:0;gap:16px;text-align:center}
.skill-icon{display:block;width:75px;height:75px;flex:0 0 75px;object-fit:contain}
.skill>span{font:600 12px/1.5 var(--body);letter-spacing:1.8px;text-transform:uppercase;max-width:155px}
@media(max-width:1000px){.skill{flex-basis:145px}.skill-grid{gap:34px 20px}}
@media(max-width:700px){
 .skills{padding:74px 22px 94px}
 .skills-inner{margin-top:56px;width:min(460px,100%)}
 .skill-category{margin-bottom:67px}
 .skills-group-title{font-size:16px;letter-spacing:2.5px;margin-bottom:28px}
 .skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:15px;row-gap:35px}
 .skill{width:100%;min-width:0;gap:13px}
 .skill:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:50%}
 .skill-icon{width:66px;height:66px;flex-basis:66px}
 .skill>span{font-size:11px;letter-spacing:1.35px;overflow-wrap:normal}
}
@media(max-width:350px){.skill>span{font-size:10px;letter-spacing:.7px}}


/* OFFERED SERVICES: light editorial cards matching the portfolio style. */
.offered-services{padding:104px 24px 116px;background:radial-gradient(ellipse at center,#fff 0%,#f1f1f1 56%,#dedede 100%)}
.offered-services-lede{max-width:700px;margin-top:46px}
.offered-grid{max-width:1110px;margin:72px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;text-align:left}
.offered-card{background:#fbfbfb;border:1px solid #d8d8d8;box-shadow:0 12px 34px rgba(0,0,0,.06);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.offered-card:hover,.offered-card:focus-within{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.09)}
.offered-visual{aspect-ratio:16/10;background:linear-gradient(180deg,#fafafa 0%,#efefef 100%);border-bottom:1px solid #d8d8d8;padding:16px}
.offered-visual img{display:block;width:100%;height:100%;object-fit:cover}
.offered-copy{padding:25px 24px 28px}
.offered-copy h3{margin:0 0 12px;font-size:17px;font-weight:800;letter-spacing:2.2px;line-height:1.35;text-transform:uppercase}
.offered-copy p{margin:0;color:#4d4d4d;font-family:var(--body);font-size:13px;line-height:1.72}
@media(max-width:1000px){.offered-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.offered-card:last-child{grid-column:1/-1;max-width:530px;justify-self:center;width:100%}}
@media(max-width:700px){.offered-services{padding:80px 22px 88px}.offered-services-lede{margin-top:39px}.offered-grid{grid-template-columns:1fr;max-width:500px;margin-top:52px;gap:22px}.offered-card:last-child{grid-column:auto;max-width:none}.offered-copy{padding:22px 20px 24px}.offered-copy h3{font-size:15px;letter-spacing:1.5px}.offered-copy p{font-size:12px}.offered-visual{padding:12px}}

/* Detailed, locally stored service artwork; maintain a consistent crop and card rhythm. */
.offered-visual{padding:0;aspect-ratio:1.48;background:#eee;overflow:hidden}
.offered-visual img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .35s ease}
.offered-card:hover .offered-visual img{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){.offered-visual img{transition:none}}


/* 2026-09: Experience now contains the ongoing NTI track; completed certificates moved to Achievements. */
.experience .experience-grid{max-width:730px;grid-template-columns:minmax(0,1fr);margin-top:38px}
.nti-card{padding:35px 39px 34px;min-height:0}
.nti-card .experience-description{margin-bottom:0}
.training-status{display:inline-block;margin-left:10px;padding:5px 9px;border:1px solid #c5c5c5;border-radius:99px;color:#424242;letter-spacing:1px;font-size:9px;vertical-align:middle;white-space:nowrap}
.nti-details{display:grid;grid-template-columns:1fr;gap:10px;margin-top:23px;border-top:1px solid #d5d5d5;padding-top:21px}
.nti-details p{margin:0;font:500 13px/1.6 var(--body);color:#414141}
.nti-details strong{color:#1a1a1a;font-weight:800}
.achievements{background:radial-gradient(ellipse at 50% 43%,#fff 0%,#f4f4f4 60%,#e6e6e6 100%);padding:102px 24px 114px;border-top:1px solid #dddddd}
.achievements .content-shell{max-width:1190px}
.achievements-lede{margin-top:43px;max-width:650px}
.achievement-certificates{max-width:1030px;margin:0 auto}
.achievements .experience-grid{margin-top:54px}
.achievements .experience-card{background:#ffffffc7}
/* Professional contact layout; preserve existing understated monochrome typography and underline fields. */
.contact{min-height:0;padding:102px 24px 115px;background:radial-gradient(ellipse at center,#fff 0%,#f4f4f4 55%,#dedede 100%)}
.contact-hook{max-width:830px;margin:42px auto 0;font:500 clamp(21px,2.4vw,29px)/1.45 var(--font);letter-spacing:-.4px}
.contact-hook strong{font-weight:800}
.contact-subline{margin:17px auto 0;max-width:610px;font:500 13px/1.7 var(--body);color:#575757}
.contact .section-divider{margin-top:45px}
.contact-layout{width:min(1080px,100%);margin:65px auto 0;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(45px,7vw,115px);text-align:left;align-items:start}
.contact-details{padding:22px 0 25px}
.contact-kicker{font:800 11px var(--font);letter-spacing:3.1px;color:#666;margin:0 0 16px}
.contact-details h3{font:800 clamp(25px,2.8vw,33px)/1.3 var(--font);letter-spacing:-.8px;margin:0 0 17px}
.contact-details-description{font:500 14px/1.75 var(--body);max-width:360px;color:#555;margin:0}
.contact-methods{display:grid;gap:27px;margin-top:39px}
.contact-method,.linkedin-method{display:flex;align-items:center;gap:17px;min-width:0;text-decoration:none}
.contact-method-icon,.linkedin-icon-link{display:grid;place-items:center;width:47px;height:47px;flex:0 0 47px;border:1.5px solid #202020;background:#f6f6f6;color:#1b1b1b;transition:background .2s,color .2s}
.contact-method-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.linkedin-icon-link svg{width:23px;height:23px}
.contact-method:hover .contact-method-icon,.linkedin-icon-link:hover{background:#202020;color:white}
.contact-method>span:last-child,.linkedin-method>span:last-child{min-width:0;display:grid;gap:6px}
.contact-method small,.linkedin-method small{font:800 10px var(--font);letter-spacing:2px;color:#727272}
.contact-method strong,.linkedin-method strong{font:700 13px/1.5 var(--body);color:#252525;overflow-wrap:anywhere}
.contact-method:hover strong{text-decoration:underline;text-underline-offset:3px}
.contact-form-column{border-left:1px solid #d3d3d3;padding-left:clamp(25px,4.8vw,75px)}
.contact-form-column h3{font:800 15px/1.4 var(--font);text-transform:uppercase;letter-spacing:2.5px;margin:19px 0 25px}
.contact-form{width:100%;max-width:100%;margin:0}
.contact-form input{height:53px;margin-bottom:17px}
.contact-form textarea{margin-top:2px;min-height:142px}
.contact-form input,.contact-form textarea{font-size:11px;border-left-width:3px;border-bottom-width:3px}
.contact-form .submit-button{margin:27px 0 0 0;padding:8px 30px}
.contact-form .form-status{text-align:left;margin:17px 0 0;min-height:0}
.form-status:empty{display:none}
.form-disclaimer{font:500 11px/1.65 var(--body);color:#656565;margin:20px 0 0;max-width:400px}
@media(max-width:700px){
 .experience .experience-grid{max-width:520px;margin-top:32px}
 .nti-card{padding:26px 23px}
 .training-status{margin:8px 0 0;display:table}
 .achievements{padding:80px 22px 90px}
 .achievements-lede{margin-top:34px}
 .achievements .experience-grid{margin-top:36px}
 .contact{padding:80px 22px 90px}
 .contact-hook{font-size:22px;margin-top:38px}
 .contact-subline{font-size:12px}
 .contact-layout{grid-template-columns:1fr;gap:38px;margin-top:44px;max-width:510px}
 .contact-details{padding:0}
 .contact-details h3{font-size:26px}
 .contact-methods{margin-top:29px;gap:21px}
 .contact-form-column{border-left:0;border-top:1px solid #ccc;padding:34px 0 0}
 .contact-form-column h3{margin:0 0 22px}
}
@media(max-width:375px){.contact-method strong,.linkedin-method strong{font-size:12px}.contact-method,.linkedin-method{gap:11px}.contact-method-icon,.linkedin-icon-link{width:40px;height:40px;flex-basis:40px}}


/* PORTFOLIO REFRESH: aligned with the rest of the monochrome page and matched to the offered-service visuals. */
.portfolio{padding:108px 24px 116px;background:radial-gradient(ellipse at center,#fff 0%,#f1f1f1 56%,#dedede 100%);color:#111}
.portfolio-header{max-width:1190px;margin:0 auto;text-align:center}
.portfolio-lede{max-width:670px;margin-top:46px}
.portfolio .boxed-title{background:transparent}
.portfolio-controls{height:auto;display:flex;justify-content:center;align-items:center;gap:16px;background:transparent;margin:56px auto 0;padding:0 12px;flex-wrap:wrap}
.filter-button{color:#111;border:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf;background:#fbfbfb;min-width:178px;padding:14px 18px 13px;border-radius:999px;text-transform:uppercase;font-size:12px;font-family:var(--body);font-weight:800;letter-spacing:1px;transition:all .2s ease;box-shadow:0 4px 12px rgba(0,0,0,.04)}
.filter-button:hover,.filter-button.active{color:#fff;background:#111;border-color:#111}
.portfolio-grid.portfolio-grid-analytics{max-width:1110px;margin:42px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.project{border:1px solid #d8d8d8;border-radius:0;padding:0;margin:0;position:relative;aspect-ratio:auto;overflow:hidden;color:#111;background:#fbfbfb;display:block;width:100%;box-shadow:0 12px 34px rgba(0,0,0,.06);transition:transform .22s ease,box-shadow .22s ease}
.project[hidden]{display:none}
.project img{width:100%;height:320px;object-fit:cover;display:block;transition:transform .45s ease,filter .3s ease;background:linear-gradient(180deg,#fafafa 0%,#efefef 100%)}
.project:hover,.project:focus-visible{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.09)}
.project:hover img,.project:focus-visible img{transform:scale(1.02);filter:none}
.project-overlay{position:static;opacity:1;background:transparent;display:block;padding:22px 24px 26px;text-align:left;color:#111;transition:none}
.project-overlay span:first-child{display:block;color:#6a6a6a;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.project-overlay strong{display:block;font-size:24px;letter-spacing:2px;line-height:1.25;text-transform:uppercase;margin-bottom:14px}
.project-overlay span:last-child{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.2px;text-transform:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.project-overlay span:last-child::after{content:'↗';font-size:13px;line-height:1}
.portfolio-ending{display:none}
@media(max-width:1000px){.portfolio-grid.portfolio-grid-analytics{gap:24px}.project img{height:280px}.filter-button{min-width:160px}}
@media(max-width:700px){.portfolio{padding:82px 22px 92px}.portfolio-lede{margin-top:39px}.portfolio-controls{margin-top:42px;gap:12px}.filter-button{min-width:144px;font-size:11px;padding:12px 14px}.portfolio-grid.portfolio-grid-analytics{grid-template-columns:1fr;max-width:510px;margin-top:34px;gap:22px}.project img{height:240px}.project-overlay{padding:20px 20px 23px}.project-overlay strong{font-size:19px;letter-spacing:1.3px}}
@media(max-width:420px){.filter-button{width:100%;max-width:280px}.project img{height:210px}}

/* FINAL SHARED SHELL: navigation remains available through all sections and at all sizes. */
:root{--site-nav-height:78px;--site-ink:#171717;--site-paper:#f5f5f5}
html{scroll-padding-top:calc(var(--site-nav-height) + 18px)}
.site-header{position:sticky;top:0;z-index:100;width:100%;max-width:none;margin:0;height:var(--site-nav-height);padding:0 max(24px,calc((100vw - 1190px)/2));display:flex;justify-content:space-between;align-items:center;background:#101010;box-shadow:0 1px 0 #ffffff18}
.site-header .brand{color:#fff;width:44px;height:44px;flex:0 0 44px}
.site-header .brand svg{width:36px;height:36px}
.site-nav{gap:clamp(16px,2vw,33px);min-width:0}
.site-nav a{color:white;font:800 12px/1.4 var(--body);white-space:nowrap}
.site-nav .nav-contact{padding:12px 19px;letter-spacing:.35px}
.site-nav a:not(.nav-contact):hover{opacity:1;color:#d1d1d1;text-decoration:underline;text-underline-offset:7px}
.hero{scroll-margin-top:var(--site-nav-height)}
/* All transitions use exactly the same mark as the header, drawn from one shared SVG path. */
.section-transition{width:180px;max-width:100%;margin:0 auto 50px;display:flex;align-items:center;justify-content:center;gap:14px;height:36px;color:#171717}
.section-transition .transition-line{height:2px;width:59px;background:currentColor;flex:1 1 auto}
.section-transition .divider-logo{display:block;width:34px;height:34px;flex:0 0 34px;fill:currentColor}
.section-divider.brand-divider{width:180px;max-width:100%;gap:14px;display:flex;align-items:center;justify-content:center;height:36px}
.section-divider.brand-divider::before,.section-divider.brand-divider::after{height:2px;background:#171717;flex:1 1 auto}
.section-divider.brand-divider span{height:36px;flex:0 0 34px;display:grid;place-items:center;padding:0;transform:none}
.section-divider.brand-divider .divider-logo{width:34px;height:34px;display:block}
.about>.section-transition{margin-bottom:45px}
.education>.section-transition{margin-bottom:40px}
.skills>.section-transition{margin-bottom:45px}
.portfolio>.section-transition{margin-bottom:44px}
.offered-services .section-transition,.achievements .section-transition,.contact .section-transition{margin-bottom:43px}
/* Match the two portfolio cards to the adjacent three service cards. */
.portfolio{padding:92px 24px 100px}
.portfolio-grid.portfolio-grid-analytics{width:min(1110px,100%);margin:42px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:stretch}
.portfolio-grid .project{display:flex;flex-direction:column;text-align:left;align-items:stretch;background:#fbfbfb;border:1px solid #d8d8d8;box-shadow:0 12px 34px rgba(0,0,0,.06);color:#111;cursor:pointer;min-height:0;aspect-ratio:auto;overflow:hidden;border-radius:0;transition:transform .22s ease,box-shadow .22s ease}
.portfolio-grid .project[hidden]{display:none!important}
.portfolio-grid .project:hover,.portfolio-grid .project:focus-visible{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.09)}
.project .project-visual{display:block;width:100%;aspect-ratio:1.48;overflow:hidden;background:#eee;border-bottom:1px solid #d8d8d8}
.project .project-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;background:#eee}
.portfolio-grid .project:hover .project-visual img,.portfolio-grid .project:focus-visible .project-visual img{transform:scale(1.025)}
.portfolio-grid .project-overlay{position:static;opacity:1;background:transparent;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;color:#111;text-align:left;width:100%;flex:1;padding:25px 24px 28px}
.portfolio-grid .project-overlay strong{display:block;margin:0 0 12px;font:800 17px/1.35 var(--font);letter-spacing:2.2px;text-transform:uppercase}
.portfolio-grid .project-overlay .project-summary{display:block;margin:0 0 19px;color:#4d4d4d;font:500 13px/1.72 var(--body);letter-spacing:0;text-transform:none;border:0;padding:0}
.portfolio-grid .project-overlay .project-cta{display:inline-flex;align-items:center;gap:12px;border:0;border-bottom:1px solid #111;padding:0 0 5px;margin-top:auto;color:#111;text-transform:uppercase;font:800 10px/1.5 var(--font);letter-spacing:1.3px}
.portfolio-grid .project-overlay .project-cta::after{display:none;content:none}
.portfolio-grid .project-overlay .project-cta span{font-size:14px;line-height:1;border:0;margin:0;padding:0;color:#111;font-weight:800;letter-spacing:0}
.portfolio-controls{margin-top:45px}
/* Section transitions share one continuous soft background rather than a hard visual seam. */
.portfolio,.offered-services,.achievements,.contact{background:radial-gradient(ellipse at 50% 45%,#fff 0%,#f6f6f6 48%,#e4e4e4 100%)}
.offered-services{padding-top:68px}
.achievements{padding-top:68px;border-top:0}
.contact{padding-top:68px}
@media(max-width:900px){
 .site-header{padding:0 6%;height:var(--site-nav-height)}
 .menu-toggle{display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;background:#fff;border:0;border-radius:3px;width:44px;height:42px;z-index:8}
 .menu-toggle span{width:22px;height:2px;background:#111;transition:transform .2s,opacity .2s}
 .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)}
 .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
 .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)}
 .site-nav{position:absolute;top:calc(var(--site-nav-height) - 1px);right:4%;width:min(300px,92vw);display:none;align-items:stretch;gap:0;flex-direction:column;padding:14px 20px;background:#181818;box-shadow:0 15px 30px #0005;z-index:12}
 .site-nav.open{display:flex}
 .site-nav a{padding:13px 9px;font-size:13px}
 .site-nav .nav-contact{margin:9px 0;text-align:center}
}
@media(max-width:700px){
 :root{--site-nav-height:70px}
 html{scroll-padding-top:calc(var(--site-nav-height) + 14px)}
 .site-header{height:var(--site-nav-height);width:100%;padding:0 6%;background:#101010}
 .site-header .brand{color:white}
 .site-nav{top:calc(var(--site-nav-height) - 1px);right:4%}
 .portfolio{padding:75px 22px 80px}
 .portfolio-grid.portfolio-grid-analytics{grid-template-columns:1fr;max-width:510px;gap:22px;margin-top:34px}
 .portfolio-grid .project-overlay{padding:22px 20px 24px}
 .portfolio-grid .project-overlay strong{font-size:15px;letter-spacing:1.5px}
 .portfolio-grid .project-overlay .project-summary{font-size:12px}
 .portfolio-controls{margin-top:38px}
 .section-transition{margin-bottom:35px;width:165px}
 .portfolio>.section-transition{margin-bottom:34px}
 .offered-services,.achievements,.contact{padding-top:58px}
}
@media(prefers-reduced-motion:reduce){.portfolio-grid .project img{transition:none}.site-header{scroll-behavior:auto}}

.portfolio-grid .project-overlay .project-cta span::after{display:none!important;content:none!important}