@font-face{font-family:Inter;src:url(fonts/inter-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02FF,U+1E00-1EFF}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02FF,U+1E00-1EFF}
@font-face{font-family:Inter;src:url(fonts/inter-latin.woff2) format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin.woff2) format('woff2');font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:NotoArabic;src:url(fonts/noto-arabic.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:NotoDevanagari;src:url(fonts/noto-devanagari.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:NotoBengali;src:url(fonts/noto-bengali.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:NotoSans;src:url(fonts/noto-cyrillic.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:light;--bg:#f6f5f0;--surface:#fcfcf9;--text:#1a2c2a;--muted:#53645f;--accent:#07594f;--accent-ink:#fff;--border:#d5ddd6;--soft:#e8eee7;--error:#a0212d;--shadow:none;--radius:8px;--sans:Inter,NotoSans,system-ui,sans-serif;--display:Newsreader,Georgia,serif;--space:clamp(20px,4vw,64px)}
:root[data-appearance=dark]{color-scheme:dark;--bg:#101c1b;--surface:#142321;--text:#e7efeb;--muted:#a5bab1;--accent:#94dac7;--accent-ink:#102822;--border:#334640;--soft:#253b34;--error:#ffa6ad}
@media(prefers-color-scheme:dark){:root[data-appearance=system]{color-scheme:dark;--bg:#101c1b;--surface:#142321;--text:#e7efeb;--muted:#a5bab1;--accent:#94dac7;--accent-ink:#102822;--border:#334640;--soft:#253b34;--error:#ffa6ad}}
:root[data-design=neumorphic]{--bg:#e8eeeb;--surface:#e8eeeb;--soft:#dae4de;--border:#afc1b7;--radius:24px;--shadow:9px 9px 22px #c8d2cc,-9px -9px 22px #fff}
:root[data-design=neumorphic][data-appearance=dark]{--bg:#1d2b30;--surface:#1d2b30;--soft:#2a3e44;--border:#53696b;--shadow:9px 9px 22px #121d21,-9px -9px 22px #2a3b40}
@media(prefers-color-scheme:dark){:root[data-design=neumorphic][data-appearance=system]{--bg:#1d2b30;--surface:#1d2b30;--soft:#2a3e44;--border:#53696b;--shadow:9px 9px 22px #121d21,-9px -9px 22px #2a3b40}}
:root[data-design=glassmorphic]{--bg:#eef3f7;--surface:#f8fbff;--border:#bdcbd7;--soft:#e1e9f1;--radius:24px;--shadow:0 14px 42px #1e405b10;--text:#142e40;--muted:#456074;--accent:#19546d}
:root[data-design=glassmorphic][data-appearance=dark]{--bg:#0d172a;--surface:#17263b;--text:#edf3fa;--muted:#b1c4da;--border:#455775;--soft:#233953;--accent:#b5dfff;--accent-ink:#102940;--shadow:0 14px 42px #0002}
@media(prefers-color-scheme:dark){:root[data-design=glassmorphic][data-appearance=system]{--bg:#0d172a;--surface:#17263b;--text:#edf3fa;--muted:#b1c4da;--border:#455775;--soft:#233953;--accent:#b5dfff;--accent-ink:#102940;--shadow:0 14px 42px #0002}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;overflow-wrap:anywhere}body:lang(ar),body:lang(fa),body:lang(ur){--sans:NotoArabic,Inter,sans-serif;--display:NotoArabic,serif}body:lang(hi){--sans:NotoDevanagari,Inter,sans-serif;--display:NotoDevanagari,serif}body:lang(bn){--sans:NotoBengali,Inter,sans-serif;--display:NotoBengali,serif}body:lang(ru){--sans:NotoSans,Inter,sans-serif;--display:NotoSans,serif}
a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}button,select,input,textarea{font:inherit;color:inherit}button,select,summary{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button,a,select,summary{touch-action:manipulation}img{max-width:100%;height:auto;display:block}button{background:none}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--display);font-weight:450;letter-spacing:-.04em;line-height:1.12}h1{font-size:clamp(40px,5.1vw,72px);max-width:850px}h2{font-size:clamp(34px,3.6vw,52px);margin-bottom:16px}h3{font-size:19px;line-height:1.4;font-weight:650;letter-spacing:-.025em;margin-bottom:12px}p{margin-bottom:20px}summary{list-style:none}summary::-webkit-details-marker{display:none}[hidden]{display:none!important}
.site-header,.preference-bar,.site-footer,main,.locale-suggestion{width:min(1200px,calc(100% - var(--space)*2));margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:26px;border-bottom:1px solid var(--border);position:relative;z-index:3}.wordmark{display:flex;gap:14px;align-items:center;text-decoration:none;font-size:14px;font-weight:600}.monogram{font-family:var(--display);font-size:38px;color:var(--accent);font-weight:600;letter-spacing:-.1em;line-height:1}.desktop-nav{display:flex;gap:24px;font-size:13px;font-weight:550;align-items:center}.desktop-nav a{text-decoration:none;display:flex;align-items:center;min-height:44px}.desktop-nav a:last-child{border:1px solid var(--border);padding:8px 14px;border-radius:6px;max-width:210px;line-height:1.3}.mobile-nav{display:none}
.preference-bar{display:flex;justify-content:flex-end;gap:24px;align-items:center;padding-block:16px;font-size:11px;color:var(--muted);position:relative;z-index:2}.preference{display:flex;gap:9px;align-items:center}.preference select{min-height:44px;max-width:155px;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:7px 24px 7px 9px;font-size:12px;font-weight:600;color:var(--text)}.language-picker summary{display:flex;gap:10px;align-items:center;min-height:44px}.language-picker summary>span{color:var(--text);border-bottom:1px solid var(--border);font-size:12px;font-weight:600}.language-picker nav{position:absolute;inset-inline-end:0;top:68px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px;box-shadow:0 12px 30px #0002;max-width:min(440px,100%);min-width:280px}.language-picker a{min-height:44px;display:flex;align-items:center;padding:6px 12px;text-decoration:none}.language-picker a[aria-current]{background:var(--soft);border-radius:6px}.locale-suggestion{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:14px}.locale-suggestion button{border:0;min-height:44px;color:var(--muted);margin-inline-start:auto}
.page-section{padding-block:80px;border-bottom:1px solid var(--border);scroll-margin-top:16px}.hero{padding-block:60px 90px;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:clamp(40px,6vw,100px);align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:650;line-height:1.7;color:var(--accent);margin-bottom:26px;display:flex;gap:10px;align-items:center}.accent-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;flex-shrink:0}.professional-name{font-size:14px;font-weight:600;margin-bottom:22px}.professional-name span{color:var(--muted);font-weight:450}.hero-description{font-size:17px;color:var(--muted);max-width:62ch;margin-bottom:32px}.hero-tools{font-size:11px;letter-spacing:.08em;margin:38px 0 0;color:var(--muted);display:flex;gap:14px}.hero-aside{align-self:center}.portrait-frame{padding:8px;border:1px solid var(--border);border-radius:120px 120px 12px 12px;box-shadow:var(--shadow)}.portrait-frame img{aspect-ratio:4/5;object-fit:cover;object-position:center 35%;border-radius:110px 110px 6px 6px;filter:saturate(.88)}.portrait-caption{font-size:11px;color:var(--muted);text-align:center;margin:16px 0 30px}.hero-note{display:flex;gap:12px;align-items:center;border-top:1px solid var(--border);padding-top:18px}.hero-note>span{font-size:32px;color:var(--accent)}.hero-note p{font-size:11px;color:var(--muted);margin:0}.hero-note strong{font-weight:550;color:var(--text)}.actions{display:flex;gap:26px;flex-wrap:wrap;align-items:center}.button{display:inline-flex;gap:24px;justify-content:space-between;align-items:center;border:1px solid transparent;padding:13px 21px;min-height:48px;line-height:1.4;text-decoration:none;font-size:13px;font-weight:600;border-radius:7px;transition:background-color .15s,transform .15s}.button.primary{background:var(--accent);color:var(--accent-ink)}.button:hover{transform:translateY(-2px)}.button.secondary{border-color:var(--border);background:var(--surface)}.text-link{display:inline-flex;gap:14px;align-items:center;min-height:44px;font-size:13px;font-weight:550}.section-heading{display:grid;grid-template-columns:80px minmax(0,1fr);margin-bottom:40px;gap:20px}.section-number{color:var(--accent);font-size:12px;padding-top:13px}.section-heading p:not(.section-number){color:var(--muted);max-width:65ch;margin-bottom:0;font-size:15px}.project-grid,.service-grid,.credential-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.surface{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}.project-card{padding:26px;display:flex;flex-direction:column;transition:border-color .2s;position:relative}.project-card:hover{border-color:var(--accent)}.project-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px}.project-top img{width:60px;height:60px;object-fit:contain;border-radius:14px;background:#fff}.project-index{font-family:var(--display);font-size:23px;color:var(--muted)}.card-description{font-size:14px;color:var(--muted);margin-bottom:18px}.project-contribution{display:flex;flex-direction:column;font-size:12px;margin-bottom:16px}.project-contribution>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.tech-label{color:var(--muted);font-size:10px;letter-spacing:.04em;line-height:1.7}.project-links{display:flex;align-items:center;flex-wrap:wrap;gap:2px 18px;font-size:11px;margin-top:auto;padding-top:12px}.project-links a{min-height:44px;display:flex;align-items:center;gap:7px}.case-details{border-top:1px solid var(--border);margin-top:16px;font-size:13px}.case-details summary,.further-training summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:52px;font-weight:600}.case-details[open] summary>span,.further-training[open] summary>span{transform:rotate(45deg)}.case-details dl{margin:10px 0 0}.case-details dt{font-size:11px;font-weight:600;color:var(--accent);margin-bottom:5px}.case-details dd{margin:0 0 16px;color:var(--muted);font-size:13px}.status-label{font-size:10px;padding:6px 10px;border-radius:5px;border:1px solid var(--border);background:var(--soft);color:var(--accent);width:fit-content;margin-bottom:14px}.small-print{font-size:11px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.service-card{padding:28px;display:flex;flex-direction:column}.service-number{font-family:var(--display);font-size:28px;color:var(--accent);margin-bottom:24px}.service-card p{font-size:14px;color:var(--muted)}.service-card .tech-label{margin-top:auto;margin-bottom:18px}.service-link{display:flex;justify-content:space-between;gap:16px;font-size:11px;padding-top:15px;min-height:44px;border-top:1px solid var(--border);text-decoration:none}.service-link>span:last-child{font-size:20px}.experience-row{display:grid;grid-template-columns:160px 80px minmax(0,1fr);gap:24px;padding-block:30px;border-bottom:1px solid var(--border);align-items:start}.experience-row:first-child{padding-top:0}.experience-row:last-child{border:0;padding-bottom:0}.experience-date{font-size:12px;color:var(--muted);padding-top:8px;line-height:1.5}.employer-mark{border:1px solid var(--border);width:72px;height:72px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;color:#07594f}.employer-mark img{width:100%;height:100%;object-fit:contain}.employer-mark>span{font-size:30px;font-family:var(--display)}.experience-copy h3{font-size:16px;margin-bottom:10px}.experience-copy h3 span{font-weight:450;color:var(--muted)}.experience-copy p{color:var(--muted);font-size:14px;max-width:75ch;margin-bottom:0}.credential-card{padding:25px}.credential-card>div{display:flex;justify-content:space-between;gap:10px;margin-bottom:22px}.credential-card h3{font-size:16px;font-weight:500;margin:0}.credential-issuer{font-size:12px;font-weight:650;color:var(--accent)}.further-training{margin-top:24px;border-top:1px solid var(--border);font-size:13px}.further-training summary{max-width:400px}.further-training ul{list-style:none;padding:0;max-width:700px}.further-training li{display:flex;gap:18px;justify-content:space-between;padding-block:12px;border-bottom:1px solid var(--border);color:var(--muted)}.about-section{display:grid;grid-template-columns:1fr 2fr;gap:80px}.about-body{font-size:19px;line-height:1.75;max-width:60ch}.education{font-size:13px;color:var(--muted);margin-block:26px}.resume-block p{color:var(--muted);font-size:12px;margin-top:16px}.contact-section{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;padding-bottom:100px;border-bottom:0}.contact-copy h2{font-size:clamp(38px,4vw,56px);max-width:15ch}.contact-copy>p:not(.eyebrow){color:var(--muted);font-size:15px;max-width:40ch}.contact-copy .text-link{margin-top:10px}.contact-form{padding:28px}.contact-form label{font-size:12px;font-weight:550;display:block;margin-bottom:8px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--border);border-radius:6px;background:var(--bg);font-size:14px;min-height:46px;padding:11px 12px;resize:vertical}.contact-form textarea{line-height:1.7}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field-error{display:block;min-height:22px;font-size:11px;color:var(--error);margin-bottom:8px}.contact-form .button{width:100%;justify-content:center;gap:20px}.honey{position:absolute;clip-path:inset(100%);height:1px;width:1px;overflow:hidden}.form-notice:empty{display:none}.form-notice{font-size:13px;padding:14px;background:var(--soft);border:1px solid var(--border);border-radius:6px;margin-bottom:24px}.form-notice.form-error{color:var(--error)}.contact-form [aria-invalid]{border-color:var(--error)}.site-footer{padding-block:30px 40px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:24px;font-size:11px;color:var(--muted)}.site-footer p{margin:0}.site-footer p>span{display:block;margin-top:4px}.site-footer>div{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}.site-footer a{display:flex;align-items:center;min-height:44px}.skip-link{position:fixed;top:8px;inset-inline-start:8px;transform:translateY(-150%);background:var(--accent);color:var(--accent-ink);padding:12px 20px;z-index:100;border-radius:6px}.skip-link:focus{transform:translateY(0)}.legal-page{max-width:800px;margin-inline:auto;border:0;min-height:60vh}.legal-page h1{font-size:48px}.legal-page>p:not(.eyebrow){max-width:68ch;color:var(--muted)}.legal-page .eyebrow{margin-top:40px}.error-page{border:0;max-width:800px;margin-inline:auto;min-height:60vh}.error-number{font-family:var(--display);font-size:100px;color:var(--accent);margin:0}.error-page h1{font-size:48px}.error-page>p:not(.error-number){color:var(--muted)}.ambient{display:none;pointer-events:none;position:fixed;inset:0;z-index:-1}:root[data-design=glassmorphic] .ambient{display:block;background:radial-gradient(ellipse at 10% 10%,#6faec32c,transparent 50%),radial-gradient(ellipse at 90% 40%,#96b09f2c,transparent 55%)}
@supports(backdrop-filter:blur(12px)){:root[data-design=glassmorphic] .surface{background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(12px)}}
:root[dir=rtl] h1,:root[dir=rtl] h2{letter-spacing:0;line-height:1.4}:root[dir=rtl] .eyebrow{letter-spacing:0}:root[dir=rtl] .preference select{padding:7px 9px 7px 24px}
@media(max-width:1050px){.desktop-nav{gap:16px}.desktop-nav a:last-child{display:none}.project-grid,.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:minmax(0,1fr) 180px;gap:40px}.hero h1{font-size:clamp(40px,5.8vw,64px)}.contact-section{gap:40px}.about-section{gap:40px}.preference-bar{gap:18px}}
@media(max-width:650px){:root{--space:20px}.site-header{padding-block:20px}.wordmark{font-size:12px;gap:10px}.monogram{font-size:32px}.desktop-nav{display:none}.mobile-nav{display:block;font-size:12px}.mobile-nav summary{display:flex;gap:12px;align-items:center;min-height:44px}.mobile-nav nav{position:absolute;inset-inline:0;top:85px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 12px 30px #0002}.mobile-nav a{display:flex;min-height:48px;align-items:center;text-decoration:none}.preference-bar{justify-content:flex-start;flex-wrap:wrap;gap:4px 14px;padding-block:10px}.preference{font-size:10px;gap:6px}.preference select{font-size:11px;max-width:130px;min-height:44px}.language-picker{margin-inline-start:auto}.language-picker summary{font-size:10px}.language-picker nav{top:100%;z-index:5}.page-section{padding-block:52px}.hero{padding-top:26px;grid-template-columns:1fr;gap:22px}.hero-copy{order:2}.hero-aside{order:1;display:flex;gap:20px;align-items:center}.portrait-frame{width:112px;padding:5px;border-radius:60px 60px 10px 10px;flex-shrink:0}.portrait-frame img{aspect-ratio:4/5;border-radius:55px 55px 5px 5px}.portrait-caption{margin:0;text-align:start;font-size:12px;max-width:20ch}.hero-note{display:none}.hero h1{font-size:43px;line-height:1.14;margin-bottom:22px}.hero .eyebrow{margin-bottom:18px}.professional-name{font-size:12px;margin-bottom:16px}.hero-description{font-size:15px;line-height:1.75}.hero-tools{margin-top:28px;font-size:10px;gap:12px}.actions{gap:14px 22px}.button{padding:12px 18px;min-height:48px;font-size:12px}.section-heading{grid-template-columns:38px 1fr;gap:12px;margin-bottom:28px}.section-number{font-size:10px;padding-top:9px}.section-heading h2{font-size:34px}.section-heading p:not(.section-number){font-size:14px}.project-grid,.service-grid,.credential-grid{grid-template-columns:1fr;gap:18px}.project-card,.service-card{padding:24px}.project-top{margin-bottom:16px}.experience-row{grid-template-columns:52px 1fr;gap:8px 16px;padding-block:24px}.experience-date{grid-column:2;grid-row:1;padding:0;font-size:11px}.employer-mark{grid-row:1/3;width:48px;height:48px;border-radius:8px;padding:5px}.experience-copy{grid-column:2;grid-row:2}.experience-copy h3{font-size:15px}.experience-copy h3 span{display:block;margin-top:5px}.experience-copy p{font-size:13px}.about-section,.contact-section{grid-template-columns:1fr;gap:24px}.about-section .eyebrow{margin-bottom:12px}.about-body{font-size:17px}.contact-copy h2{max-width:17ch;font-size:40px}.contact-form{padding:22px}.form-row{grid-template-columns:1fr;gap:0}.site-footer{display:block;padding-block:24px}.site-footer>div{margin-top:16px;gap:20px}.legal-page h1,.error-page h1{font-size:38px}}
@media(max-width:360px){:root{--space:16px}.hero h1{font-size:36px}.preference-bar{gap:4px 10px}.language-picker{margin-inline-start:0}.project-card,.service-card,.contact-form{padding:20px}}
@media(horizontal-viewport-segments:2){.hero,.about-section,.contact-section,.project-grid,.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:max(40px,calc(env(viewport-segment-left 1 0,0px) - env(viewport-segment-right 0 0,0px) + 40px))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.button:hover{transform:none}}
@media(forced-colors:active){.surface,.button,.preference select{border:1px solid CanvasText}.ambient{display:none}}
/* Form boundaries remain perceptible in every palette (WCAG non-text contrast). */
.contact-form input,.contact-form select,.contact-form textarea,.preference select,.button.secondary{border-color:var(--muted)}

/* Component materials: editorial, tactile and Liquid Glass inspired controls. */
:root {
  --control-radius: 10px;
  --raised: 6px 6px 16px #c8d2cc, -6px -6px 16px #ffffff;
  --pressed: inset 3px 3px 7px #c8d2cc, inset -3px -3px 7px #ffffff;
  --glass-edge: #ffffffd9;
  --glass-control: #edf3f7e6;
  --glass-shadow: 0 8px 24px #102d4920, inset 0 1px 0 #ffffffdf, inset 0 -1px 0 #ffffff4d;
}
:root[data-appearance=dark] {
  --raised: 6px 6px 16px #121d21, -6px -6px 16px #2a3b40;
  --pressed: inset 3px 3px 7px #121d21, inset -3px -3px 7px #2a3b40;
  --glass-edge: #b1d6ff5c;
  --glass-control: #253b55e6;
  --glass-shadow: 0 8px 24px #0004, inset 0 1px 0 #e3f3ff4a, inset 0 -1px 0 #8ec7ff1f;
}
@media (prefers-color-scheme: dark) {
  :root[data-appearance=system] {
    --raised: 6px 6px 16px #121d21, -6px -6px 16px #2a3b40;
    --pressed: inset 3px 3px 7px #121d21, inset -3px -3px 7px #2a3b40;
    --glass-edge: #b1d6ff5c;
    --glass-control: #253b55e6;
    --glass-shadow: 0 8px 24px #0004, inset 0 1px 0 #e3f3ff4a, inset 0 -1px 0 #8ec7ff1f;
  }
}
.control-icon { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.preference-bar { gap: 10px; padding-block: 16px; color: var(--text); z-index: 6; }
.preference-picker { position: relative; }
.preference-picker > summary {
  display: flex; gap: 12px; align-items: center; min-height: 56px; min-width: 156px;
  border: 1px solid var(--border); border-radius: var(--control-radius);
  padding: 10px 14px; background: var(--surface); transition: background .18s, box-shadow .18s;
}
.control-caption { display: grid; gap: 2px; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.4; }
.control-kicker { font-size: 10px; color: var(--muted); font-weight: 450; }
.chevron { border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; width: 6px; height: 6px; transform: rotate(45deg); margin-inline-start: auto; flex-shrink: 0; transition: transform .18s; }
.preference-picker[open] .chevron { transform: rotate(225deg); }
.preference-picker[open] > summary { border-color: var(--accent); }
.preference-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 280px;
  padding: 10px; margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 16px 48px #0002; z-index: 8;
}
.preference-panel legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.preference-option { display: flex; gap: 12px; align-items: center; min-height: 58px; padding: 9px 12px; border-radius: 12px; font-size: 13px; color: var(--text); cursor: pointer; position: relative; }
.preference-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.preference-option:hover, .language-options a:hover { background: var(--soft); }
.preference-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.preference-option:has(input:checked) { background: var(--soft); }
.option-check { margin-inline-start: auto; opacity: 0; color: var(--accent); font-size: 16px; }
.preference-option:has(input:checked) .option-check { opacity: 1; }
.design-swatch { width: 48px; height: 36px; flex-shrink: 0; display: flex; gap: 5px; align-items: center; padding: 7px; border-radius: 9px; background: #f6f5f0; }
.design-swatch i { display: block; width: 14px; height: 20px; border: 1px solid #acb9ae; border-radius: 2px; background: #fafaf6; }
.swatch-neumorphic { background: #e0e7e3; }
.swatch-neumorphic i { border: 0; border-radius: 4px; background: #e0e7e3; box-shadow: 2px 2px 4px #b7c4bc, -2px -2px 4px #fff; }
.swatch-neumorphic i:last-child { box-shadow: inset 2px 2px 3px #b7c4bc, inset -2px -2px 3px #fff; }
.swatch-glassmorphic { background: linear-gradient(130deg,#a4c0f4,#b6d8da 55%,#e7b8a6); }
.swatch-glassmorphic i { border-radius: 6px; border-color: #fffc; background: #ffffff55; box-shadow: inset 0 1px 0 #fff9; }
.language-picker nav.preference-panel { top: calc(100% + 10px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 330px; min-width: 0; max-width: none; gap: 4px; }
.language-options a { justify-content: space-between; padding: 10px; min-height: 46px; border-radius: 9px; font-size: 13px; gap: 8px; text-decoration: none; }
.language-check { color: var(--accent); }
.language-picker summary > span { border: 0; }
.language-picker { margin-inline-start: 0; }
.desktop-nav a:last-child, .button { border-radius: var(--control-radius); }
.project-links, .service-link { font-size: 12px; }
.tech-label, .small-print { font-size: 12px; letter-spacing: 0; }
.hero-tools { flex-wrap: wrap; letter-spacing: .035em; }
.project-contribution { font-size: 13px; }
.project-contribution > span { font-size: 11px; }
.status-label { font-size: 12px; border-radius: var(--control-radius); }
.further-training summary { max-width: none; border-radius: var(--control-radius); padding-inline: 16px; }
.contact-form input, .contact-form select, .contact-form textarea { border-radius: var(--control-radius); border-color: var(--muted); }
.contact-form label { font-size: 13px; }
.contact-form .small-print { font-size: 12px; }
.contact-form [aria-invalid=true] { border-color: var(--error); }
.project-top img { box-shadow: 0 3px 8px #00000010; }
:root[data-design=minimal] .preference-picker > summary { background: transparent; border-radius: 8px; }
:root[data-design=minimal] .preference-panel { border-radius: 10px; box-shadow: 0 10px 28px #00000015; }
:root[data-design=minimal] .preference-option, :root[data-design=minimal] .language-options a { border-radius: 6px; }

/* Soft UI uses one material, paired lighting, and recessed interaction states. */
:root[data-design=neumorphic] { --control-radius: 16px; --radius: 28px; --shadow: 10px 10px 26px #c8d2cc, -10px -10px 26px #fff; }
:root[data-design=neumorphic][data-appearance=dark] { --shadow: 10px 10px 26px #121d21, -10px -10px 26px #2a3b40; }
@media(prefers-color-scheme:dark) { :root[data-design=neumorphic][data-appearance=system] { --shadow: 10px 10px 26px #121d21, -10px -10px 26px #2a3b40; } }
:root[data-design=neumorphic] h1, :root[data-design=neumorphic] h2 { font-family: var(--sans); font-weight: 550; letter-spacing: -.045em; line-height: 1.16; }
:root[data-design=neumorphic] .surface { border-color: transparent; }
:root[data-design=neumorphic] .project-grid, :root[data-design=neumorphic] .service-grid, :root[data-design=neumorphic] .credential-grid { gap: 30px; }
:root[data-design=neumorphic] .preference-picker > summary, :root[data-design=neumorphic] .button.secondary, :root[data-design=neumorphic] .desktop-nav a:last-child, :root[data-design=neumorphic] .mobile-nav > summary {
  background: var(--surface); box-shadow: var(--raised); border-color: transparent;
}
:root[data-design=neumorphic] .preference-picker[open] > summary, :root[data-design=neumorphic] .button.secondary:active, :root[data-design=neumorphic] .desktop-nav a:last-child:active { box-shadow: var(--pressed); }
:root[data-design=neumorphic] .preference-panel { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
:root[data-design=neumorphic] .preference-option:has(input:checked), :root[data-design=neumorphic] .language-options a[aria-current] { background: var(--surface); box-shadow: var(--pressed); }
:root[data-design=neumorphic] .button.primary { box-shadow: var(--raised), inset 0 1px 0 #ffffff40; border-color: #ffffff30; }
:root[data-design=neumorphic] .button.primary:active { box-shadow: var(--pressed); transform: translateY(1px); }
:root[data-design=neumorphic] .contact-form input, :root[data-design=neumorphic] .contact-form select, :root[data-design=neumorphic] .contact-form textarea { background: var(--surface); box-shadow: var(--pressed); }
:root[data-design=neumorphic] .portrait-frame { border: 0; padding: 12px; border-radius: 120px 120px 26px 26px; background: var(--surface); }
:root[data-design=neumorphic] .portrait-frame img { border-radius: 108px 108px 18px 18px; }
:root[data-design=neumorphic] .service-number { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; box-shadow: var(--pressed); font-size: 24px; }
:root[data-design=neumorphic] .experience-list { display: grid; gap: 20px; }
:root[data-design=neumorphic] .experience-row { border: 0; background: var(--surface); border-radius: var(--radius); padding: 28px; box-shadow: var(--raised); }
:root[data-design=neumorphic] .employer-mark { box-shadow: var(--pressed); border-color: transparent; }
:root[data-design=neumorphic] .further-training { border: 0; padding: 8px; border-radius: var(--radius); box-shadow: var(--raised); }
:root[data-design=neumorphic] .further-training ul { padding: 8px 16px; }
:root[data-design=neumorphic] .status-label { box-shadow: var(--pressed); background: var(--surface); border: 0; }

/* Glass stays on the functional layer; content uses a calmer frosted material. */
:root[data-design=glassmorphic] { --control-radius: 999px; --radius: 28px; --display: Inter,NotoSans,system-ui,sans-serif; }
:root[data-design=glassmorphic] h1, :root[data-design=glassmorphic] h2 { font-family: var(--sans); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; }
:root[data-design=glassmorphic] .ambient {
  z-index: -1; background: radial-gradient(ellipse at 8% 18%,#538cf343,transparent 48%), radial-gradient(ellipse at 83% 5%,#dc946d29,transparent 35%), radial-gradient(ellipse at 90% 65%,#51b9a52d,transparent 45%);
}
:root[data-design=glassmorphic] .site-header { border: 0; }
:root[data-design=glassmorphic] .desktop-nav {
  gap: 4px; padding: 6px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-control); box-shadow: var(--glass-shadow);
}
:root[data-design=glassmorphic] .desktop-nav a { padding: 8px 18px; border-radius: 999px; }
:root[data-design=glassmorphic] .desktop-nav a:hover { background: var(--soft); }
:root[data-design=glassmorphic] .desktop-nav a:last-child { border: 0; background: var(--accent); color: var(--accent-ink); }
:root[data-design=glassmorphic] .preference-picker > summary, :root[data-design=glassmorphic] .mobile-nav > summary, :root[data-design=glassmorphic] .button.secondary {
  border-color: var(--glass-edge); background: var(--glass-control); box-shadow: var(--glass-shadow); border-radius: 999px;
}
:root[data-design=glassmorphic] .preference-picker[open] > summary { box-shadow: var(--glass-shadow), 0 0 0 1px var(--accent); }
:root[data-design=glassmorphic] .preference-panel { border-color: var(--glass-edge); background: var(--surface); box-shadow: var(--glass-shadow),0 20px 60px #0003; border-radius: 24px; }
:root[data-design=glassmorphic] .button.primary { border: 1px solid #ffffff35; box-shadow: 0 8px 24px #175f7833,inset 0 1px 0 #ffffff6b,inset 0 -1px 0 #0002; }
:root[data-design=glassmorphic] .button.primary:active, :root[data-design=glassmorphic] .button.secondary:active { transform: scale(.98); }
:root[data-design=glassmorphic] .surface { border-color: var(--glass-edge); background: var(--surface); backdrop-filter: none; }
:root[data-design=glassmorphic] .service-number { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--soft); font-size: 24px; }
:root[data-design=glassmorphic] .portrait-frame { border-color: var(--glass-edge); border-radius: 120px 120px 28px 28px; background: var(--glass-control); box-shadow: var(--glass-shadow); padding: 10px; }
:root[data-design=glassmorphic] .portrait-frame img { border-radius: 110px 110px 20px 20px; }
:root[data-design=glassmorphic] .experience-list { display: grid; gap: 16px; }
:root[data-design=glassmorphic] .experience-row { border: 1px solid var(--glass-edge); border-radius: var(--radius); padding: 28px; background: var(--surface); box-shadow: var(--shadow); }
:root[data-design=glassmorphic] .contact-form input, :root[data-design=glassmorphic] .contact-form select, :root[data-design=glassmorphic] .contact-form textarea { border-radius: 14px; background: var(--bg); }
:root[data-design=glassmorphic] .further-training { border: 1px solid var(--glass-edge); border-radius: 20px; background: var(--surface); padding: 6px; }
:root[data-design=glassmorphic] .further-training ul { padding: 8px 16px; }
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))) {
  :root[data-design=glassmorphic] .desktop-nav, :root[data-design=glassmorphic] .preference-picker > summary, :root[data-design=glassmorphic] .button.secondary, :root[data-design=glassmorphic] .mobile-nav > summary {
    background: linear-gradient(150deg,color-mix(in srgb,var(--glass-control) 85%,transparent),color-mix(in srgb,var(--glass-control) 65%,transparent));
    -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  }
}
@media(max-width:1050px) {
  .credential-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :root[data-design=glassmorphic] .desktop-nav a { padding-inline: 12px; }
}
@media(max-width:650px) {
  .site-header { gap: 14px; }
  .mobile-nav > summary { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--control-radius); }
  .preference-bar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding-block: 8px 16px; }
  .preference-picker { position: static; min-width: 0; }
  .preference-picker > summary { min-width: 0; min-height: 58px; gap: 6px; padding: 8px 10px; }
  .preference-picker > summary > .control-icon { display: none; }
  .control-caption { font-size: 11px; overflow-wrap: normal; }
  .control-kicker { font-size: 10px; }
  .control-caption > span:last-child { max-width: 17ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chevron { width: 5px; height: 5px; }
  .preference-panel, .language-picker nav.preference-panel { inset-inline: 0; top: calc(100% + 2px); width: 100%; }
  .language-picker nav.preference-panel { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: min(70vh,520px); overflow-y: auto; }
  .hero { padding-top: 20px; }
  :root[data-design=neumorphic] .hero h1, :root[data-design=glassmorphic] .hero h1 { font-size: clamp(35px,10vw,43px); }
  :root[data-design=neumorphic] .project-grid, :root[data-design=neumorphic] .service-grid { gap: 26px; }
  .credential-grid { grid-template-columns: 1fr; }
  :root[data-design=neumorphic] .experience-row, :root[data-design=glassmorphic] .experience-row { padding: 22px; }
  :root[data-design=neumorphic] .portrait-frame { padding: 7px; border-radius: 60px 60px 18px 18px; }
  :root[data-design=neumorphic] .portrait-frame img { border-radius: 53px 53px 12px 12px; }
  :root[data-design=glassmorphic] .portrait-frame { padding: 6px; border-radius: 60px 60px 18px 18px; }
  :root[data-design=glassmorphic] .portrait-frame img { border-radius: 54px 54px 12px 12px; }
}
@media(max-width:360px) {
  .preference-picker > summary { padding-inline: 8px; }
  .control-caption { font-size: 10px; }
  .chevron { display: none; }
}
:root[dir=rtl] h1, :root[dir=rtl] h2 { letter-spacing: 0; line-height: 1.45; }
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  :root[data-design=glassmorphic] .desktop-nav, :root[data-design=glassmorphic] .preference-picker > summary, :root[data-design=glassmorphic] .button.secondary { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--muted); }
  .surface { border-color: var(--muted)!important; }
  .ambient { display: none!important; }
}
@media(forced-colors:active) {
  .preference-picker > summary, .preference-panel, .preference-option:has(input:checked) { border: 1px solid CanvasText; }
  .option-check { color: CanvasText; }
}

/* A lens-like functional layer: directional reflection, clear rims and soft depth. */
:root[data-design=glassmorphic] {
  --glass-fill: #ffffff62; --glass-rim: #ffffffdc; --glass-shade: #36577d23;
  --glass-content: #f8fbffdc; --glass-glint: #ffffffed;
  --glass-depth: 0 10px 30px #243f6420, inset 0 2px 2px #ffffffed, inset 2px 0 2px #ffffffa3, inset -1px -2px 3px #36577d29;
}
:root[data-design=glassmorphic][data-appearance=dark] {
  --glass-fill: #c2dfff14; --glass-rim: #d8eaff80; --glass-shade: #0005;
  --glass-content: #17263be8; --glass-glint: #d9ecff70;
  --glass-depth: 0 10px 30px #0004, inset 0 2px 2px #d9ecff70, inset 2px 0 2px #c7e6ff32, inset -1px -2px 3px #0006;
}
@media(prefers-color-scheme:dark) {
  :root[data-design=glassmorphic][data-appearance=system] {
    --glass-fill: #c2dfff14; --glass-rim: #d8eaff80; --glass-shade: #0005;
    --glass-content: #17263be8; --glass-glint: #d9ecff70;
    --glass-depth: 0 10px 30px #0004, inset 0 2px 2px #d9ecff70, inset 2px 0 2px #c7e6ff32, inset -1px -2px 3px #0006;
  }
}
:root[data-design=glassmorphic] .ambient {
  background: radial-gradient(ellipse at 4% 8%,#659df958,transparent 48%), radial-gradient(ellipse at 95% 15%,#e6ac8b45,transparent 40%), radial-gradient(ellipse at 68% 55%,#6fcdb842,transparent 42%), radial-gradient(ellipse at 20% 88%,#aaa0f638,transparent 46%);
}
:root[data-design=glassmorphic] :is(.desktop-nav,.preference-picker>summary,.mobile-nav>summary,.button.secondary,.text-link,.project-links a,.service-link,.case-details>summary,.further-training>summary,.locale-suggestion button) {
  border: 1px solid var(--glass-rim); border-radius: 999px; box-shadow: var(--glass-depth);
  background: linear-gradient(145deg,var(--glass-fill),transparent 55%),var(--surface);
  text-decoration: none; transition: box-shadow .18s,transform .18s,background-color .18s;
}
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))) {
  :root[data-design=glassmorphic] :is(.desktop-nav,.preference-picker>summary,.mobile-nav>summary,.button.secondary,.text-link,.project-links a,.service-link,.case-details>summary,.further-training>summary,.locale-suggestion button,.portrait-frame) {
    background: linear-gradient(145deg,var(--glass-fill),transparent 55%),color-mix(in srgb,var(--surface) 62%,transparent);
    -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  }
  :root[data-design=glassmorphic] :is(.surface,.experience-row,.further-training,.preference-panel,.mobile-nav nav) {
    background: var(--glass-content); -webkit-backdrop-filter:blur(22px) saturate(125%); backdrop-filter:blur(22px) saturate(125%);
  }
}
:root[data-design=glassmorphic] :is(.surface,.experience-row,.preference-panel,.mobile-nav nav) {
  border-color:color-mix(in srgb,var(--glass-rim) 70%,var(--border)); box-shadow: 0 14px 38px var(--glass-shade), inset 0 1px 0 var(--glass-glint);
}
:root[data-design=glassmorphic] .portrait-frame { border-color:var(--glass-rim); box-shadow:var(--glass-depth); }
:root[data-design=glassmorphic] :is(.text-link,.project-links a) { padding: 9px 16px; min-height:44px; }
:root[data-design=glassmorphic] .project-links { gap:10px; }
:root[data-design=glassmorphic] .service-link { padding:10px 16px; margin-top:2px; }
:root[data-design=glassmorphic] .case-details { border:0; }
:root[data-design=glassmorphic] .case-details>summary { padding:10px 16px; min-height:48px; }
:root[data-design=glassmorphic] .case-details dl { padding:12px 4px 0; }
:root[data-design=glassmorphic] .further-training { padding:10px; }
:root[data-design=glassmorphic] .button.primary { background:linear-gradient(145deg,#ffffff24,transparent 55%),var(--accent); box-shadow:var(--glass-depth); }
:root[data-design=glassmorphic] :is(.button,.text-link,.project-links a,.service-link,.preference-picker>summary):active { transform:scale(.98); }
:root[data-design=glassmorphic] .preference-option:has(input:checked) { box-shadow:inset 0 1px 2px var(--glass-shade),0 1px 0 var(--glass-glint); }

/* Every action shares the same soft material, including inline disclosures and links. */
:root[data-design=neumorphic] :is(.desktop-nav a,.mobile-nav>summary,.mobile-nav nav a,.text-link,.project-links a,.service-link,.case-details>summary,.further-training>summary,.locale-suggestion button) {
  background:var(--surface); border:1px solid transparent; border-radius:16px; box-shadow:var(--raised);
  text-decoration:none; padding:11px 16px; min-height:44px; transition:box-shadow .15s,transform .15s;
}
:root[data-design=neumorphic] .desktop-nav { gap:12px; }
:root[data-design=neumorphic] .desktop-nav a { font-size:12px; }
:root[data-design=neumorphic] .project-links { gap:14px 12px; }
:root[data-design=neumorphic] .case-details { border:0; }
:root[data-design=neumorphic] .case-details>summary { min-height:48px; }
:root[data-design=neumorphic] .case-details dl { padding:16px 4px 0; }
:root[data-design=neumorphic] .service-link { margin-top:8px; }
:root[data-design=neumorphic] :is(.button.primary,.button.secondary,.desktop-nav a,.mobile-nav nav a,.text-link,.project-links a,.service-link,.case-details>summary,.further-training>summary):active,
:root[data-design=neumorphic] .case-details[open]>summary,
:root[data-design=neumorphic] .further-training[open]>summary { box-shadow:var(--pressed); transform:translateY(1px); }
:root[data-design=neumorphic] .mobile-nav nav { background:var(--surface); box-shadow:var(--shadow); padding:14px; border-radius:22px; }
:root[data-design=neumorphic] .mobile-nav nav a { margin:8px; }
:root[data-design=neumorphic] .preference-option { margin-block:4px; }

/* Keep control names and their menus usable at tablet and narrow-phone sizes. */
.project-grid { align-items:start; }
.project-links { margin-top:0; }
@media(max-width:1050px) and (min-width:651px) {
  .preference-bar { gap:12px; }
  .preference-picker { min-width:0; }
  .preference-picker>summary { min-width:148px; }
  .preference-panel { max-width:calc(100vw - var(--space)*2); }
  :root[data-design=neumorphic] .desktop-nav { gap:8px; }
  :root[data-design=neumorphic] .desktop-nav a { padding-inline:12px; }
}
@media(max-width:650px) {
  .actions { gap:16px; }
  .button,.text-link { max-width:100%; }
  .project-card,.service-card,.credential-card,.contact-form { padding:24px; }
  .project-links { align-items:stretch; }
  :root[data-design=glassmorphic] .preference-picker>summary { border-radius:20px; padding-inline:10px; }
  :root[data-design=neumorphic] .preference-bar { gap:14px; }
  :root[data-design=neumorphic] .preference-picker>summary { padding-inline:9px; }
  :root[data-design=glassmorphic] .further-training>summary,
  :root[data-design=neumorphic] .further-training>summary { border-radius:16px; }
  .case-details>summary { font-size:12px; }
  .hero-tools { gap:10px; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root[data-design=glassmorphic] :is(.surface,.experience-row,.preference-panel,.desktop-nav,.preference-picker>summary,.mobile-nav>summary,.mobile-nav nav,.button.secondary,.text-link,.project-links a,.service-link,.case-details>summary,.further-training,.further-training>summary,.portrait-frame) {
    background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; border-color:var(--muted);
  }
}
@media(prefers-reduced-motion:reduce) { .button,.text-link,.service-link,.preference-picker>summary { transition:none!important; transform:none!important; } }
