
:root{--ivory:#F3EEE8;--teal:#17645F;--coral:#FF6845;--dark:#172C2B;--text:#263532;--muted:#687772;--line:#E8E4DF;--white:#FFFEFC}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;background:var(--ivory);color:var(--text);font:16px/1.7 "DM Sans",sans-serif}.wrap{width:min(1120px,calc(100% - 44px));margin:auto}a{color:inherit;text-decoration:none}.progress{position:fixed;top:0;left:0;height:3px;background:var(--coral);z-index:20;width:0}.nav{position:sticky;top:0;z-index:10;background:#F3EEE8eF;backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}nav{height:72px;display:flex;align-items:center;justify-content:center}.brand{font:800 18px Manrope;color:var(--dark);letter-spacing:-.7px}.brand span{color:var(--teal)}.navlinks{display:flex;gap:22px;align-items:center;justify-content:center;margin:0 auto;font-size:12px;font-weight:700;color:var(--muted)}.navlinks a:hover{color:var(--coral)}.pillbtn,.btn{display:inline-block;padding:11px 18px;border-radius:30px;background:var(--teal);color:white;font-weight:700;font-size:13px;transition:.2s}.pillbtn:hover,.btn:hover{background:var(--dark);transform:translateY(-2px)}.hero{min-height:650px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:45px;padding:75px 0}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:var(--teal)}.eyebrow:before{content:"";display:inline-block;width:22px;height:2px;background:var(--coral);vertical-align:middle;margin:0 9px 3px 0}h1,h2,h3{font-family:Manrope,sans-serif;color:var(--dark);line-height:1.15;letter-spacing:-1px}h1{font-size:clamp(48px,6vw,76px);margin:20px 0}h1 span{color:var(--teal)}h2{font-size:clamp(30px,4vw,43px);margin:12px 0}.hero-statement{font-size:clamp(25px,3vw,38px);margin:0 0 14px;letter-spacing:-1.2px}h3{font-size:18px;margin:0 0 5px}.lead{font-size:19px;color:var(--muted);max-width:640px}.meta{font-size:13px;color:var(--muted);margin:22px 0}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn.outline{background:transparent;color:var(--teal);border:1px solid #17645F66}.orbwrap{height:460px;display:grid;place-items:center;position:relative;perspective:1100px;isolation:isolate}.portrait-stage{width:min(430px,100%);height:100%;position:relative;display:grid;place-items:center;transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}.portrait{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center center;display:block;border:0;border-radius:0;clip-path:none;mix-blend-mode:normal;background:transparent;filter:drop-shadow(0 18px 22px #172c2b18);transform:translateZ(20px);animation:portraitFloat 6s ease-in-out infinite}/* Hero portrait scale and composition */
.hero{grid-template-columns:1fr 1fr;gap:28px}
.orbwrap{height:560px;min-width:0;overflow:visible}
.portrait-stage{width:min(540px,112%);height:108%;margin-left:-8px}
.portrait{width:118%;height:118%;max-width:none;object-fit:contain;object-position:center center}
@media(max-width:780px){
 .hero{grid-template-columns:1fr;gap:12px}
 .orbwrap{height:460px;margin:0}
 .portrait-stage{width:min(440px,100%);height:100%;margin:0}
 .portrait{width:116%;height:116%}
}
@media(max-width:520px){
 .orbwrap{height:390px;margin:0 -10px}
 .portrait-stage{width:min(360px,100%)}
 .portrait{width:116%;height:116%}
}
.floatlabel{position:absolute;z-index:2;background:var(--white);padding:10px 14px;border-radius:12px;border:1px solid var(--line);box-shadow:0 15px 40px #172c2b12;font-size:11px;font-weight:800;transform:translateZ(65px)}.l1{top:45px;left:0}.l2{right:0;top:145px}.l3{bottom:40px;left:5%}@keyframes portraitFloat{50%{transform:translate3d(0,-9px,35px)}}section{padding:82px 0}.head{max-width:730px;margin-bottom:35px}.head p,.muted{color:var(--muted)}.aboutgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:55px}.aboutgrid p{color:var(--muted)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat,.skill,.job,.project,.cert,.edu{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px}.stat strong{display:block;font:800 32px Manrope;color:var(--teal)}.stat span{font-size:12px;color:var(--muted)}.soft{background:var(--white)}.skills{display:grid;grid-template-columns:1fr 1fr;gap:14px}.skill h3{font-size:16px;margin-bottom:12px}.chips{display:flex;flex-wrap:wrap;gap:7px}.chip{font-size:11px;font-weight:600;color:var(--teal);background:#EDF4F1;border:1px solid #DDEAE5;padding:5px 9px;border-radius:20px}.timeline{position:relative;margin-left:8px}.timeline:before{content:"";position:absolute;left:7px;top:5px;bottom:5px;width:1px;background:#b8cbc5}.job{position:relative;margin:0 0 18px 32px;padding:22px 25px}.job:before{content:"";position:absolute;left:-33px;top:27px;width:13px;height:13px;background:var(--coral);border:4px solid var(--ivory);border-radius:50%;box-shadow:0 0 0 1px var(--coral)}.jobtop{display:flex;justify-content:space-between;gap:16px}.company{font-size:13px;font-weight:700;color:var(--teal)}.date{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}.job ul,.project ul{padding-left:18px;margin:14px 0 0;color:var(--muted);font-size:13px}.job li,.project li{padding:0 0 7px 2px}.dark{background:var(--dark);color:#d1dfda}.dark h2,.dark h3{color:white}.dark .head p{color:#b7c9c2}.projects{display:grid;grid-template-columns:1fr 1fr;gap:16px}.project{background:#ffffff0c;border-color:#ffffff25}.project.wide{grid-column:1/-1}.project p{font-size:13px;color:#bdcec7}.kicker{font-size:10px;letter-spacing:1.5px;color:#ff9a80;font-weight:800;text-transform:uppercase}.status{display:inline-block;margin-top:8px;padding:4px 9px;border-radius:20px;background:#ff684526;color:#ff9a80;font-size:10px;font-weight:800}.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cert{font-size:13px;font-weight:700}.education{background:#EAE5DE}.edus{display:grid;grid-template-columns:1fr 1fr;gap:14px}.edu h3{font-size:15px}.edu p{font-size:12px;color:var(--muted);margin:0}.recognition{margin-top:18px;color:var(--muted)}.contact{background:var(--teal);color:white;text-align:center}.contact h2{color:white;font-size:clamp(34px,5vw,52px)}.contact p{color:#d1e3de;max-width:600px;margin:0 auto 25px}.contact .btn{background:var(--coral)}.contactlinks{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:22px;font-size:13px}.contactlinks a{text-decoration:underline;text-underline-offset:4px}footer{background:#102321;color:#9eb2ab;padding:20px 0;font-size:11px}.foot{display:flex;justify-content:space-between;gap:15px}.reveal{opacity:0;transform:translateY(18px);transition:.65s}.reveal.show{opacity:1;transform:none}
@media(max-width:780px){.navlinks{gap:12px}.navlinks a:not(.pillbtn){display:none}.hero{grid-template-columns:1fr;padding:55px 0}.orbwrap{height:360px}.portrait-stage{width:min(340px,100%)}.aboutgrid{grid-template-columns:1fr;gap:25px}.skills,.projects{grid-template-columns:1fr}.project.wide{grid-column:auto}.certs{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wrap{width:calc(100% - 32px)}nav{height:64px}.hero{min-height:auto}h1{font-size:51px}.lead{font-size:16px}.orbwrap{height:320px;margin:0 -4px}.portrait-stage{width:min(300px,100%)}.floatlabel{font-size:10px;padding:8px 10px}.l1{top:25px}.l2{top:105px}.l3{bottom:20px}section{padding:65px 0}.job{margin-left:26px;padding:18px}.job:before{left:-27px}.jobtop{display:block}.date{display:block;margin-top:6px}.certs,.edus{grid-template-columns:1fr}.foot{display:block;text-align:center}.foot span{display:block;margin:4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.portrait-stage{transform:none!important}}

.enquiry-form{max-width:760px;margin:28px auto 0;text-align:left;background:#ffffff12;border:1px solid #ffffff35;border-radius:18px;padding:24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.enquiry-form label{display:flex;flex-direction:column;gap:7px;color:#f4faf7;font-size:12px;font-weight:700}
.enquiry-form .full{grid-column:1/-1}
.enquiry-form input,.enquiry-form textarea{width:100%;border:1px solid #ffffff55;border-radius:10px;background:#ffffff12;color:#fff;padding:12px 13px;font:14px "DM Sans",sans-serif;outline:none}
.enquiry-form input::placeholder,.enquiry-form textarea::placeholder{color:#c6d9d2}
.enquiry-form input:focus,.enquiry-form textarea:focus{border-color:#ff9a80;box-shadow:0 0 0 3px #ff684533}
.enquiry-form textarea{resize:vertical;min-height:120px}
.enquiry-form .btn{border:0;cursor:pointer}
.enquiry-form .btn:disabled{opacity:.65;cursor:wait;transform:none}
.form-status{min-height:22px;margin:12px 0 0!important;font-size:13px!important}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}.enquiry-form .full{grid-column:auto}.enquiry-form{padding:17px}}

.optional{font-weight:400;opacity:.8}
.phone-row{display:grid;grid-template-columns: minmax(125px, .42fr) 1fr;gap:8px}
.phone-row select,.phone-row input{min-width:0}
.enquiry-form select,.enquiry-form option{color:#fff;background:#286f69}
.technology-field{display:flex;flex-direction:column;gap:7px}
.field-label{color:#f4faf7;font-size:12px;font-weight:700}
.tech-picker{position:relative}
.tech-picker summary{list-style:none;cursor:pointer;border:1px solid #ffffff55;border-radius:10px;background:#ffffff12;color:#dcebe7;padding:12px 13px;font-size:14px;min-height:47px}
.tech-picker summary::-webkit-details-marker{display:none}
.tech-picker summary:after{content:"▾";float:right;color:#ffb09c}
.tech-options{position:absolute;z-index:8;top:calc(100% + 6px);left:0;right:0;max-height:280px;overflow:auto;padding:12px;background:#164f4b;border:1px solid #ffffff55;border-radius:12px;box-shadow:0 16px 35px #10232166;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tech-options label{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#f4faf7;cursor:pointer}
.tech-options input{width:15px;height:15px;accent-color:#ff6845}
.other-tech{margin-top:10px}
.other-tech textarea{min-height:68px}
.submit-area{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:190px;min-height:50px;padding:13px 23px;border-radius:999px;background:#ff6845!important;color:#fff!important;border:0;font:700 14px "DM Sans",sans-serif;cursor:pointer;box-shadow:0 5px 0 #c9472d55;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}
.submit-btn:hover{background:#f05232!important;transform:translateY(-2px);box-shadow:0 7px 0 #c9472d55}
.submit-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #c9472d55}
.submit-btn:disabled{opacity:.7;cursor:wait;transform:none;box-shadow:none}
.submit-spinner{display:none;width:15px;height:15px;border:2px solid #ffffff77;border-top-color:#fff;border-radius:50%;animation:submitSpin .7s linear infinite}
.submit-btn.is-loading .submit-spinner{display:inline-block}
.submit-btn.is-loading .submit-arrow{display:none}
@keyframes submitSpin{to{transform:rotate(360deg)}}
.form-status{min-height:22px;margin:0!important;font-size:13px!important;color:#dcebe7!important}
.form-status.error{color:#ffd1c5!important}
.form-status.success{color:#d4f4dc!important}
@media(max-width:560px){.tech-options{grid-template-columns:1fr}.phone-row{grid-template-columns:125px 1fr}.submit-btn{width:100%}.submit-area{width:100%}}

/* Contact form layout refinements */
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:20px;row-gap:20px}
.enquiry-form label,.technology-field{min-width:0}
.enquiry-form label{gap:8px}
.enquiry-form .field-label{display:block;line-height:1.4}
.phone-row{grid-template-columns:minmax(145px,.72fr) minmax(0,1.28fr);align-items:stretch}
.phone-row select,.phone-row input{height:50px;border:1px solid #ffffff55;border-radius:10px;padding:0 12px;background:#ffffff12;color:#fff;font:14px "DM Sans",sans-serif}
.phone-row select{width:100%;min-width:0}
.enquiry-form [hidden]{display:none!important}
.tech-picker{min-width:0}
.tech-picker summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;line-height:1.4}
.tech-picker summary:after{content:"▾";flex:0 0 auto;float:none}
.tech-options{display:block;max-height:260px;overflow-y:auto;overscroll-behavior:contain;padding:7px;background:#164f4b;border:1px solid #ffffff55;border-radius:12px}
.tech-options .tech-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;color:#f4faf7;font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;user-select:none}
.tech-options .tech-option:hover{background:#ffffff16}
.tech-options .tech-option[aria-selected="true"]{background:#ffffff20;color:#fff}
.tech-options .tech-option[aria-selected="true"]:after{content:"✓";color:#ffab94;font-weight:800}
.other-tech{margin-top:12px}
.other-tech textarea{min-height:76px}
.enquiry-form input:focus-visible,.enquiry-form textarea:focus-visible,.enquiry-form select:focus-visible,.tech-picker summary:focus-visible,.tech-option:focus-visible{outline:2px solid #ff9a80;outline-offset:2px}
@media(max-width:620px){.form-grid{grid-template-columns:1fr;row-gap:17px}.enquiry-form .full{grid-column:auto}.phone-row{grid-template-columns:minmax(120px,.75fr) minmax(0,1.25fr)}}

/* Final contact form sizing and alignment */
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:24px;row-gap:22px}
.form-grid>label,.form-grid>.technology-field{width:100%;min-width:0}
.enquiry-form input:not([type="hidden"]),.phone-row select,.tech-picker summary{height:54px;min-height:54px}
.enquiry-form input:not([type="hidden"]){padding:0 16px}
.phone-row{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:10px}
.phone-row select,.phone-row input{height:54px;min-height:54px;width:100%;min-width:0;border-radius:10px}
.technology-field{display:contents}
.technology-field>.field-label{grid-column:2;align-self:end}
.technology-field>.tech-picker{grid-column:2;min-width:0}
.tech-picker summary{display:flex;align-items:center;padding:0 16px}
#otherTechWrap{grid-column:1/-1;width:100%;margin:0;gap:8px}
#otherTechWrap textarea,.enquiry-form textarea[name="requirement"]{width:100%;height:150px;min-height:150px;max-height:260px;padding:14px 16px;line-height:1.5}
.enquiry-form .full{grid-column:1/-1}
@media(max-width:620px){
 .form-grid{grid-template-columns:1fr;row-gap:17px}
 .technology-field>.field-label,.technology-field>.tech-picker{grid-column:1}
 #otherTechWrap{grid-column:1}
 .phone-row{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
 #otherTechWrap textarea,.enquiry-form textarea[name="requirement"]{height:145px;min-height:145px}
}

/* Stable two-column contact form grid: each field group occupies one grid cell */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:28px;row-gap:22px}
.form-grid>label,.form-grid>.technology-field{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;align-self:start}
.technology-field{display:flex}
.technology-field>.field-label{display:block;line-height:1.4}
.technology-field>.tech-picker{width:100%;min-width:0}
#otherTechWrap{grid-column:1/-1;width:100%;margin:0;gap:8px}
#otherTechWrap textarea{width:100%;height:150px;min-height:150px;padding:14px 16px;line-height:1.5}
.enquiry-form textarea[name="requirement"]{width:100%;height:150px;min-height:150px;padding:14px 16px;line-height:1.5}
.form-grid>.full{grid-column:1/-1}
@media(max-width:620px){
 .form-grid{grid-template-columns:minmax(0,1fr);row-gap:18px}
 .form-grid>.full,#otherTechWrap{grid-column:1}
}

/* Deterministic contact form layout: explicit grid placement prevents drift */
.form-grid{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
 grid-template-areas:
  "name mobile"
  "email technology"
  "other other"
  "requirement requirement";
 align-items:start!important;
 column-gap:24px!important;
 row-gap:22px!important;
}
.form-grid>.field-name{grid-area:name}
.form-grid>.field-mobile{grid-area:mobile}
.form-grid>.field-email{grid-area:email}
.form-grid>.field-technology{grid-area:technology;display:flex!important;flex-direction:column!important;align-self:start!important;min-width:0}
.form-grid>.field-other{grid-area:other;width:100%;margin:0}
.form-grid>.field-requirement{grid-area:requirement}
.form-grid>.field-name,.form-grid>.field-mobile,.form-grid>.field-email,.form-grid>.field-requirement{
 display:flex!important;flex-direction:column!important;align-self:start!important;min-width:0
}
.form-grid>.field-name>input,.form-grid>.field-email>input{height:54px;min-height:54px}
.form-grid>.field-mobile .phone-row{height:54px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:10px}
.form-grid>.field-mobile .phone-row>*{height:54px;min-height:54px;width:100%;min-width:0}
.form-grid>.field-technology .tech-picker summary{height:54px;min-height:54px;display:flex;align-items:center;white-space:normal;overflow-wrap:anywhere}
.form-grid>.field-other textarea,.form-grid>.field-requirement textarea{height:150px;min-height:150px;width:100%;display:block}
@media(max-width:620px){
 .form-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"name" "mobile" "email" "technology" "other" "requirement";row-gap:18px!important}
}

.form-trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

.brand{font:800 18px Manrope;color:var(--dark);letter-spacing:-.7px;margin-right:auto;white-space:nowrap}.brand span{color:var(--teal)}.navlinks{margin:0 0 0 auto;gap:clamp(9px,1.5vw,20px)}.navlinks .pillbtn{color:#fff}@media(max-width:780px){nav.wrap{justify-content:space-between}.brand{margin-right:10px}.navlinks{gap:10px}.navlinks a:not(.pillbtn){display:none}.navlinks .pillbtn{display:inline-block}}

/* Accessible responsive multipage navigation */
nav.wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{flex:0 0 auto}
.navlinks{min-width:0;flex:1;display:flex;align-items:center;justify-content:flex-end;gap:clamp(8px,1.25vw,17px);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{flex:0 0 auto}
.navlinks a[aria-current="page"]:not(.pillbtn){color:var(--teal);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:7px}
.navlinks .pillbtn[aria-current="page"]{background:var(--dark);color:#fff}
@media(max-width:900px){.navlinks{gap:12px;font-size:11px}}
@media(max-width:700px){nav.wrap{height:auto;min-height:68px;display:flex;flex-wrap:wrap;gap:0;padding-top:8px;padding-bottom:8px}.brand{width:100%;margin:0 0 6px}.navlinks{width:100%;flex:1 1 100%;justify-content:flex-start;overflow-x:auto;padding:3px 0 7px}.navlinks a{display:inline-block!important}.navlinks .pillbtn{padding:7px 12px}}
