/* =========================================================
   ALFIEMK One Page — v1.2.2
   Premium centered profile. Mobile-first. No global header.
   ========================================================= */

body.onepage-body{
  --op-blue:#1f7af4;
  --op-blue-2:#0e5ac7;
  --op-navy:#0d284c;
  --op-ink:#0b1525;
  --op-text:#3c4c62;
  --op-muted:#708096;
  --op-line:#e1e8f1;
  --op-paper:#fff;
  --op-soft:#f6f9fd;
  --op-soft-blue:#eef6ff;
  --op-shell:960px;
  --op-radius:22px;
  margin:0;
  padding:0!important;
  background:#fff;
  color:var(--op-ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.62;
  letter-spacing:-.008em;
  overflow-x:hidden;
}
.onepage-body main{background:#fff;overflow:hidden}
.onepage-body .op-shell{width:min(var(--op-shell),calc(100% - 30px));margin-inline:auto}
.onepage-body h1,.onepage-body h2,.onepage-body h3,.onepage-body p{margin-top:0}
.onepage-body h1,.onepage-body h2,.onepage-body h3{font-family:var(--font-title)}
.onepage-body em{font-style:normal;color:var(--op-blue)}
.onepage-body svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.onepage-body a:focus-visible{outline:3px solid rgba(31,122,244,.28);outline-offset:4px;border-radius:12px}

/* Top identity row — deliberately not a global/sticky header */
.op-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:74px;padding:10px 0 8px;border-bottom:1px solid rgba(208,219,233,.7)
}
.op-brand{display:inline-flex;align-items:center;gap:10px;min-width:0}
.op-brand-mark{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:10px;background:linear-gradient(145deg,#2a89ff,#0d5bc6);color:#fff;font:800 18px/1 var(--font-title);box-shadow:0 10px 22px rgba(24,110,229,.20),inset 0 0 0 1px rgba(255,255,255,.28)}
.op-brand>span:last-child{display:grid;line-height:1.08}
.op-brand strong{font:800 15px/1.15 var(--font-title);letter-spacing:-.02em}
.op-brand small{margin-top:4px;color:#7b889a;font:700 10px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.op-nav{display:none;align-items:center;justify-content:center;gap:24px}
.op-nav a{position:relative;padding:9px 0;color:#526176;font-size:15px;font-weight:650}
.op-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:2px;border-radius:999px;background:var(--op-blue);transition:right .2s ease}
.op-nav a:hover{color:#0d2647}.op-nav a:hover::after{right:0}
.op-top-action{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 13px;border:1px solid #d8e6f9;border-radius:12px;background:#fff;color:#1555aa;font:800 13px/1 var(--font-title);box-shadow:0 8px 22px rgba(37,84,140,.08);white-space:nowrap}

/* Hero */
.op-hero{
  position:relative;
  background:
    radial-gradient(circle at 14% 33%,rgba(73,158,255,.09),transparent 25%),
    radial-gradient(circle at 86% 28%,rgba(31,122,244,.10),transparent 27%),
    linear-gradient(180deg,#fbfdff 0%,#f4f8fd 100%);
  border-bottom:1px solid #e5ebf2;
}
.op-hero::before,.op-hero::after{content:'';position:absolute;pointer-events:none;border-radius:50%;border:1px solid rgba(31,122,244,.055)}
.op-hero::before{width:240px;height:240px;left:-150px;top:130px;box-shadow:0 0 0 30px rgba(31,122,244,.018),0 0 0 60px rgba(31,122,244,.012)}
.op-hero::after{width:180px;height:180px;right:-110px;top:160px;box-shadow:0 0 0 28px rgba(31,122,244,.018),0 0 0 56px rgba(31,122,244,.01)}
.op-hero .op-shell{position:relative;z-index:1}
.op-hero-grid{display:grid;gap:28px;align-items:center;padding:44px 0 24px}
.op-hero-copy{text-align:center;max-width:620px;margin-inline:auto}
.op-kicker{margin:0 0 14px;color:#145dbd;font:800 13px/1.2 var(--font-title);letter-spacing:.17em}
.op-hero h1{margin:0;color:#0b111c;font:800 clamp(44px,12vw,68px)/.98 var(--font-title);letter-spacing:-.06em;text-wrap:balance}
.op-hero h1 span,.op-hero h1 strong{display:block}.op-hero h1 strong{color:var(--op-blue);font-weight:800}
.op-role{margin:15px auto 0;max-width:600px;color:#213249;font:750 15px/1.45 var(--font-body)}
.op-lead{margin:11px auto 0;max-width:560px;color:#66778c;font-size:15px;line-height:1.62}
.op-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;margin-top:19px;padding:0 18px;border-radius:999px;background:linear-gradient(135deg,#2b86ff,#1262d0);color:#fff;font:800 15px/1 var(--font-title);box-shadow:0 13px 28px rgba(31,122,244,.23);transition:transform .2s ease,box-shadow .2s ease}
.op-primary svg{width:16px;height:16px}.op-primary:hover{transform:translateY(-2px);box-shadow:0 17px 34px rgba(31,122,244,.28)}
.op-hero-quote{margin:18px auto 0!important;max-width:480px;color:#7e91aa;font-size:15px;font-style:italic;line-height:1.55}

.op-portrait-wrap{position:relative;width:min(430px,100%);margin-inline:auto;padding:18px 14px 26px}
.op-portrait-halo{position:absolute;inset:8% 2% 7%;border-radius:42px;background:radial-gradient(circle at 50% 35%,rgba(58,146,255,.22),transparent 46%),linear-gradient(180deg,#e9f2fd,#dbeafb 74%,#eef5fc);filter:drop-shadow(0 26px 34px rgba(37,84,140,.10))}
.op-portrait-halo::before{content:'';position:absolute;inset:-10px;border:1px solid rgba(60,135,230,.18);border-radius:48px}
.op-portrait-halo::after{content:'';position:absolute;right:-20px;top:42px;width:84px;height:124px;background-image:radial-gradient(circle,rgba(40,126,237,.20) 1.2px,transparent 1.2px);background-size:10px 10px;opacity:.55}
.op-portrait-frame{position:relative;z-index:1;overflow:hidden;border:1px solid rgba(255,255,255,.92);border-radius:28px;background:#e8edf3;box-shadow:0 26px 65px rgba(19,52,95,.18),0 0 0 1px rgba(72,119,179,.12)}
.op-portrait-frame::after{content:'';position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(180deg,transparent,rgba(234,242,251,.80));pointer-events:none}
.op-portrait{width:100%;aspect-ratio:851/805;object-fit:cover;object-position:center;transform:scale(1.01);filter:saturate(.96) contrast(1.015)}
.op-experience-badge{position:absolute;z-index:4;right:2px;bottom:12px;display:grid;grid-template-columns:34px auto auto;align-items:center;gap:0 7px;min-width:190px;padding:11px 13px;border:1px solid rgba(255,255,255,.92);border-radius:16px;background:rgba(255,255,255,.90);color:#17304e;box-shadow:0 18px 36px rgba(26,64,112,.16);backdrop-filter:blur(16px)}
.op-badge-icon{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#eaf4ff;color:var(--op-blue)}
.op-badge-icon svg{width:18px;height:18px}.op-experience-badge>span:not(.op-badge-icon){font-size:13px;color:#77879a}.op-experience-badge strong{font:800 18px/1 var(--font-title)}.op-experience-badge small{grid-column:2/-1;margin-top:3px;color:#7b899b;font-size:12px}

.op-facts{position:relative;z-index:6;display:grid;grid-template-columns:1fr;gap:9px;margin:0 auto -1px;padding:11px;border:1px solid var(--op-line);border-radius:19px 19px 0 0;background:rgba(255,255,255,.96);box-shadow:0 15px 34px rgba(33,65,107,.08)}
.op-facts>div{display:flex;align-items:center;justify-content:center;gap:11px;min-height:66px;padding:9px 12px;border-radius:13px}.op-facts>div+div{border-top:1px solid #e9eef4}
.op-fact-icon,.op-icon-box,.op-contact-icon,.op-project-icon{display:grid;place-items:center;color:var(--op-blue)}
.op-fact-icon{flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#edf5ff}.op-fact-icon svg{width:19px;height:19px}
.op-facts p{margin:0;display:grid;gap:1px;text-align:left}.op-facts strong{color:#152239;font:800 15px/1.25 var(--font-title)}.op-facts small{color:#78879a;font-size:15px;line-height:1.3}

/* Centered section system */
.op-section{padding:58px 0;background:#fff}.op-section:nth-of-type(even){background:#fff}
.op-section-head{max-width:760px;margin:0 auto 28px;text-align:center}
.op-section-label{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:11px;color:#718095}.op-section-label span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#eaf4ff;color:var(--op-blue);font:800 13px/1 var(--font-title)}.op-section-label small{font:800 12px/1.2 var(--font-title);letter-spacing:.15em}
.op-section-head h2{margin:0;color:var(--op-ink);font:800 clamp(32px,8vw,46px)/1.02 var(--font-title);letter-spacing:-.052em;text-wrap:balance}.op-section-head>p{margin:10px auto 0;max-width:650px;color:var(--op-muted);font-size:15px;line-height:1.6}

/* Common premium cards */
.op-panel,.op-info-card,.op-achievement-card,.op-involvement-card{border:1px solid var(--op-line);background:rgba(255,255,255,.97);box-shadow:0 12px 32px rgba(32,61,99,.055)}
.op-panel,.op-info-card{border-radius:20px}.op-panel{padding:22px}
.op-panel-heading,.op-card-title{display:flex;align-items:center;gap:11px}.op-panel-heading{margin-bottom:16px}.op-panel-heading h3,.op-card-title h3{margin:0;color:#16223a;font:800 18px/1.2 var(--font-title)}
.op-icon-box{flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:#edf5ff;box-shadow:inset 0 0 0 1px rgba(31,122,244,.07)}.op-icon-box svg{width:19px;height:19px}

/* Profile */
.op-profile{background:#fff}.op-profile-grid{display:grid;gap:14px;max-width:820px;margin-inline:auto}.op-profile-copy{text-align:left;color:#526178}.op-profile-copy p{margin:0 0 12px;font-size:15px;line-height:1.7}.op-profile-copy p:last-child{margin-bottom:0}
.op-info-card{overflow:hidden}.op-card-title{display:grid;grid-template-columns:auto 1fr auto;padding:16px 17px;background:linear-gradient(180deg,#fbfdff,#f5f9fe);border-bottom:1px solid var(--op-line)}.op-card-title small{color:#8a97a7;font-size:13px;white-space:nowrap}.op-info-card dl{margin:0;padding:3px 17px 6px}.op-info-card dl>div{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0;border-bottom:1px solid #e8edf4}.op-info-card dl>div:last-child{border-bottom:0}.op-info-card dt{color:#7a899b;font:650 14px/1.4 var(--font-body)}.op-info-card dd{margin:0;color:#14213a;font:700 15px/1.48 var(--font-body)}

/* Achievements */
.op-achievements{background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}.op-achievement-list{display:grid;gap:12px;max-width:820px;margin-inline:auto}.op-achievement-card{display:grid;grid-template-columns:68px minmax(0,1fr);gap:14px;align-items:center;padding:15px;border-radius:17px;text-align:left;transition:transform .2s ease,box-shadow .2s ease}.op-achievement-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(32,61,99,.08)}
.op-year{display:grid;place-items:center;min-height:60px;border-radius:13px;background:linear-gradient(145deg,#f0f7ff,#e7f2ff);color:var(--op-blue);font:800 17px/1 var(--font-title)}.op-achievement-copy h3{margin:0 0 5px;color:#17243b;font:800 15px/1.34 var(--font-title)}.op-achievement-copy p{margin:0;color:#627289;font-size:14px}.op-achievement-copy span{display:block;margin-top:3px;color:#8996a7;font-size:13px}

/* Involvement */
.op-involvement{background:#fff}.op-involvement-grid{display:grid;gap:11px;max-width:900px;margin-inline:auto}.op-involvement-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:17px;border-radius:17px;text-align:left}.op-involvement-card .op-icon-box{width:40px;height:40px;flex-basis:40px}.op-involvement-card h3{margin:1px 0 5px;color:#17243b;font:800 15px/1.35 var(--font-title)}.op-involvement-card p{margin:0;color:#718095;font-size:14px;line-height:1.55}

/* Project */
.op-projects{background:linear-gradient(180deg,#f7faff 0%,#fff 100%)}.op-project-list{max-width:900px;margin-inline:auto}.op-project-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;overflow:hidden;padding:22px;border:1px solid rgba(119,172,242,.24);border-radius:22px;background:radial-gradient(circle at 100% 0,rgba(42,131,255,.28),transparent 36%),linear-gradient(135deg,#0e315e,#081b34 74%);color:#fff;box-shadow:0 22px 48px rgba(11,43,81,.16)}.op-project-card::after{content:'';position:absolute;right:-86px;bottom:-94px;width:220px;height:220px;border:1px solid rgba(130,184,255,.16);border-radius:50%;box-shadow:0 0 0 30px rgba(130,184,255,.035),0 0 0 62px rgba(130,184,255,.018)}
.op-project-icon{position:relative;z-index:1;width:50px;height:50px;border-radius:15px;background:rgba(46,136,255,.12);border:1px solid rgba(137,188,255,.26);color:#5da2ff}.op-project-icon svg{width:27px;height:27px}.op-project-copy{position:relative;z-index:1}.op-project-status{display:inline-flex;padding:6px 9px;border:1px solid rgba(177,212,255,.25);border-radius:999px;background:rgba(66,143,244,.12);color:#c7e0ff;font:800 11px/1 var(--font-title);letter-spacing:.04em}.op-project-card h3{margin:10px 0 5px;font:800 24px/1.1 var(--font-title);letter-spacing:-.035em}.op-project-card p{margin:0;color:#c3d0e1;font-size:14px;line-height:1.55}.op-project-card>a{position:relative;z-index:2;grid-column:1/-1;display:inline-flex;justify-self:center;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;background:#fff;color:#1555aa;font:800 13px/1 var(--font-title);box-shadow:0 10px 24px rgba(0,0,0,.12)}

/* Contact */
.op-contact{padding:0 0 30px;background:#fff}.op-contact-head{margin-bottom:20px}.op-contact-card{display:grid;gap:10px;max-width:900px;margin-inline:auto;padding:14px;border:1px solid rgba(82,158,255,.35);border-radius:20px;background:linear-gradient(135deg,#105aa9,#1579ef);box-shadow:0 18px 38px rgba(26,101,190,.16)}.op-contact-card>a,.op-contact-card>div{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;padding:12px 13px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.08);color:#fff;text-align:left}.op-contact-icon{grid-row:1/3;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.13);color:#fff}.op-contact-icon svg{width:21px;height:21px}.op-contact-card small{color:#d8e8ff;font-size:15px}.op-contact-card strong{font:800 15px/1.35 var(--font-title);overflow-wrap:anywhere}

/* Footer */
.op-footer{padding:22px 0 26px;border-top:1px solid #e2e9f1;background:#f9fbfd;color:#738196}.op-footer-inner{display:grid;gap:10px;text-align:center}.op-footer-brand{display:grid;gap:2px}.op-footer-brand strong{color:#17243b;font:800 15px/1.25 var(--font-title)}.op-footer-brand span,.op-footer p{margin:0;font-size:13px;line-height:1.45}

/* Mobile refinements */
@media (max-width:560px){
  .op-topbar{min-height:66px}.op-brand small{font-size:9px;letter-spacing:.10em}.op-top-action{padding:0 10px;font-size:11px}.op-top-action span{display:none}
  .op-hero-grid{padding-top:34px}.op-hero-copy{padding-inline:4px}.op-hero h1{font-size:clamp(44px,13vw,58px)}
  .op-facts{grid-template-columns:repeat(3,1fr);gap:0;padding:7px}.op-facts>div{display:grid;justify-items:center;gap:7px;padding:8px 4px;min-width:0}.op-facts>div+div{border-top:0;border-left:1px solid #e8edf4}.op-facts p{text-align:center}.op-facts strong{font-size:13px}.op-facts small{font-size:12px}.op-fact-icon{width:34px;height:34px;flex-basis:34px}.op-fact-icon svg{width:17px;height:17px}
  .op-section{padding:48px 0}.op-section-head{margin-bottom:22px}.op-section-head h2{font-size:34px}.op-panel{padding:19px}.op-card-title{grid-template-columns:auto 1fr}.op-card-title small{grid-column:2;margin-top:3px}.op-project-card{grid-template-columns:1fr;text-align:center}.op-project-icon{margin-inline:auto}.op-project-card>a{grid-column:auto;width:100%}
}

/* Tablet + desktop */
@media (min-width:700px){
  .op-shell{width:min(var(--op-shell),calc(100% - 48px))}
  .op-profile-grid{grid-template-columns:.92fr 1.08fr;align-items:stretch}
  .op-info-card dl>div{grid-template-columns:150px minmax(0,1fr);align-items:start;gap:14px}
  .op-achievement-list{grid-template-columns:1fr 1fr}.op-achievement-card:last-child:nth-child(odd){grid-column:1/-1}
  .op-involvement-grid{grid-template-columns:1fr 1fr}
  .op-contact-card{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  .op-nav{display:flex}.op-topbar{min-height:82px}
  .op-hero-grid{grid-template-columns:minmax(0,.96fr) minmax(360px,.78fr);gap:56px;min-height:540px;padding:42px 20px 32px}
  .op-hero-copy{text-align:left;margin-inline:0}.op-kicker,.op-role,.op-lead,.op-hero-quote{margin-left:0;margin-right:0}.op-hero h1{font-size:64px}.op-primary{margin-top:20px}.op-portrait-wrap{width:390px}
  .op-facts{grid-template-columns:repeat(3,1fr);max-width:900px;border-radius:18px 18px 0 0;padding:8px}.op-facts>div+div{border-top:0;border-left:1px solid #e6edf4}
  .op-section{padding:66px 0}.op-section-head{margin-bottom:32px}.op-section-head h2{font-size:44px}.op-section-label{margin-bottom:12px}
  .op-involvement-grid{grid-template-columns:repeat(3,1fr)}
  .op-project-card{grid-template-columns:54px minmax(0,1fr) auto;padding:24px 26px}.op-project-card>a{grid-column:auto;justify-self:end;white-space:nowrap}.op-contact-card{padding:15px 18px}
  .op-footer-inner{grid-template-columns:1fr;justify-items:center}
}

@media (min-width:1100px){
  .op-hero-grid{gap:70px}.op-portrait-wrap{width:410px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.reveal-delay{transition:none!important;transform:none!important;opacity:1!important}.op-primary,.op-achievement-card{transition:none!important}}

/* Contact + social channels — v1.2.2 */
.op-social-block{
  max-width:900px;
  margin:14px auto 0;
  padding:16px;
  border:1px solid var(--op-line);
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 14px 34px rgba(32,61,99,.055);
}
.op-social-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin-bottom:13px;
  text-align:center;
}
.op-social-heading span{color:#17243b;font:800 16px/1.25 var(--font-title)}
.op-social-heading small{color:#7c8999;font-size:15px;line-height:1.4}
.op-social-links{display:grid;grid-template-columns:1fr;gap:9px}
.op-social-link{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-height:66px;
  padding:10px 12px;
  border:1px solid #e0e8f2;
  border-radius:14px;
  background:#fff;
  color:#17243b;
  text-align:left;
  box-shadow:0 8px 20px rgba(30,61,102,.035);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.op-social-link:hover{transform:translateY(-2px);border-color:#bfd8fb;box-shadow:0 13px 26px rgba(31,96,176,.09)}
.op-social-icon{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:12px;background:#edf5ff;color:var(--op-blue)
}
.op-social-icon svg{width:21px;height:21px}
.op-social-link>span:nth-child(2){display:grid;gap:2px;min-width:0}
.op-social-link strong{font:800 15px/1.25 var(--font-title)}
.op-social-link small{color:#75849a;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.op-social-arrow{color:#8aa0bb;font:800 17px/1 var(--font-title)}

@media (min-width:560px){
  .op-social-links{grid-template-columns:1fr 1fr}
  .op-social-link:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:900px){
  .op-contact-card{grid-template-columns:repeat(3,1fr)}
  .op-social-block{padding:17px 18px}
  .op-social-heading{flex-direction:row;justify-content:space-between;text-align:left;margin-bottom:14px}
  .op-social-links{grid-template-columns:repeat(5,1fr)}
  .op-social-link,.op-social-link:last-child:nth-child(odd){grid-column:auto;grid-template-columns:38px minmax(0,1fr);min-height:76px;padding:10px}
  .op-social-icon{width:38px;height:38px}
  .op-social-arrow{display:none}
  .op-social-link small{font-size:13px}
}

/* =========================================================
   v1.2.3 — LOCKED PREMIUM HERO PORTRAIT
   Purpose: prevent the hero portrait from becoming stretched/tall
   again after responsive/cache changes. The frame owns the ratio;
   the image always fills it without distortion.
   ========================================================= */
body.onepage-body .op-hero-grid{
  align-items:center;
}
body.onepage-body .op-portrait-wrap{
  width:min(370px,100%);
  padding:16px 14px 28px;
  isolation:isolate;
}
body.onepage-body .op-portrait-halo{
  inset:7% 1% 5%;
  border-radius:38px;
  background:
    radial-gradient(circle at 50% 38%,rgba(58,146,255,.22),transparent 48%),
    linear-gradient(180deg,#edf5ff 0%,#dfeeff 70%,#f2f7fc 100%);
  filter:drop-shadow(0 24px 34px rgba(37,84,140,.10));
}
body.onepage-body .op-portrait-halo::before{
  inset:-8px;
  border-radius:44px;
  border-color:rgba(49,126,225,.15);
}
body.onepage-body .op-portrait-frame{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  min-height:0;
  max-height:none;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.98);
  border-radius:30px;
  background:#eef3f8;
  box-shadow:
    0 30px 70px rgba(20,54,98,.15),
    0 10px 26px rgba(20,54,98,.08),
    0 0 0 1px rgba(75,126,190,.12),
    inset 0 1px 0 rgba(255,255,255,.92);
  transform:translateZ(0);
}
body.onepage-body .op-portrait-frame::before{
  content:'';
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(180deg,transparent 72%,rgba(13,40,76,.055));
}
body.onepage-body .op-portrait-frame::after{
  z-index:3;
  height:15%;
  background:linear-gradient(180deg,transparent,rgba(240,246,252,.58));
}
body.onepage-body .op-portrait{
  position:absolute;
  inset:0;
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  transform:none!important;
  scale:1!important;
  filter:saturate(.98) contrast(1.02) brightness(1.01);
  backface-visibility:hidden;
}
body.onepage-body .op-experience-badge{
  right:0;
  bottom:8px;
  min-width:184px;
  border-color:rgba(255,255,255,.98);
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 42px rgba(23,61,108,.16),0 0 0 1px rgba(58,126,214,.05);
}

@media (max-width:560px){
  body.onepage-body .op-portrait-wrap{width:min(350px,100%);padding:12px 10px 25px}
  body.onepage-body .op-portrait-frame{border-radius:25px}
  body.onepage-body .op-portrait-halo{border-radius:32px}
  body.onepage-body .op-experience-badge{right:4px;bottom:4px;min-width:176px}
}

@media (min-width:900px){
  body.onepage-body .op-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);
    gap:58px;
    min-height:500px;
    padding:38px 20px 30px;
  }
  body.onepage-body .op-hero-copy{max-width:470px}
  body.onepage-body .op-portrait-wrap{width:370px}
}

@media (min-width:1100px){
  body.onepage-body .op-hero-grid{gap:64px}
  body.onepage-body .op-portrait-wrap{width:385px}
}
