:root{
  --cream:#efeee9;--black:#0f0f0f;--black2:#151515;--orange:#d94a17;
  --line:rgba(239,238,233,.22);--muted:rgba(239,238,233,.66);--dim:rgba(239,238,233,.42);
  --font:"Helvetica Neue ME","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;--pad:clamp(22px,3.2vw,52px);--max:1600px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--orange);color:var(--cream)}
:focus-visible{outline:1px solid var(--cream);outline-offset:5px}
.shell{width:min(100%,var(--max));margin-inline:auto}
.eyebrow{margin:0 0 20px;font-size:10px;letter-spacing:.23em;text-transform:uppercase;color:var(--dim)}
.link-arrow{display:inline-flex;gap:12px;align-items:center;font-size:12px}
.link-arrow::after{content:"→";color:var(--orange);transition:transform .25s ease}
.link-arrow:hover::after{transform:translateX(5px)}

/* HERO */
.hero{
      position:relative;
      height:100svh;
      min-height:720px;
      background:var(--orange);
      overflow:hidden;
      isolation:isolate
    }
.header{position:absolute;z-index:50;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding:28px var(--pad) 0}
.brand{font-size:21px;font-weight:600;letter-spacing:.025em}
.header-right{display:flex;align-items:flex-start;gap:clamp(34px,5vw,84px);font-size:13px;line-height:1.45}
.nav-stack{display:flex;flex-direction:column}
.nav-stack a{transition:opacity .25s ease}.nav-stack a:hover{opacity:.56}
.hero-marquee{position:absolute;z-index:10;top:11.5svh;inset-inline:0;overflow:hidden;pointer-events:none}
.marquee-track{display:flex;width:max-content;white-space:nowrap;font-size:clamp(145px,22vw,330px);line-height:.82;letter-spacing:-.07em;animation:marquee 30s linear infinite}
.marquee-track span{padding-right:6vw}
.hero-name-mobile{display:none}
.hero-photo-bg,
.hero-photo-fg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
  user-select:none
}
.hero-photo-bg{z-index:0}
.hero-photo-fg{
  z-index:20;
  /* Soft foreground mask: hides the marquee behind Mahdi without any hard cutout edge. */
  -webkit-mask-image:radial-gradient(
    ellipse 41% 66% at 71% 53%,
    #000 0%,
    #000 66%,
    rgba(0,0,0,.96) 73%,
    rgba(0,0,0,.70) 82%,
    rgba(0,0,0,.28) 91%,
    transparent 100%
  );
  mask-image:radial-gradient(
    ellipse 41% 66% at 71% 53%,
    #000 0%,
    #000 66%,
    rgba(0,0,0,.96) 73%,
    rgba(0,0,0,.70) 82%,
    rgba(0,0,0,.28) 91%,
    transparent 100%
  )
}
.hero-bottom{position:absolute;z-index:30;left:var(--pad);right:var(--pad);bottom:24px}
.hero-rule{height:1.5px;background:var(--cream);transform-origin:left;animation:lineIn 1.05s cubic-bezier(.76,0,.24,1) 1s both}
.hero-footer{display:flex;justify-content:space-between;align-items:flex-end;padding-top:16px;font-size:12px;line-height:1.3}
.hero-footer-right{text-align:right}
.menu-btn{display:none;border:0;background:transparent;width:42px;height:42px;padding:0;cursor:pointer}
.menu-btn span{display:block;width:24px;height:1.5px;margin:5px auto;background:var(--cream);transition:transform .45s cubic-bezier(.76,0,.24,1),opacity .25s ease}
.menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* PROOF */
.proof{display:grid;grid-template-columns:repeat(4,1fr);padding-inline:var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-item{min-height:168px;padding:30px 28px 28px 0;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line)}
.proof-item:not(:first-child){padding-left:36px}.proof-item:last-child{border-right:0}
.proof-value{font-family:var(--serif);font-size:clamp(50px,5.5vw,82px);line-height:.86;font-weight:400;letter-spacing:-.055em}
.proof-label{margin-top:14px;font-size:13px;line-height:1.3;color:var(--muted)}

/* POSITIONING */
.positioning{padding:clamp(78px,8vw,128px) var(--pad)}
.positioning-grid{display:grid;grid-template-columns:1.05fr .72fr;gap:10vw;align-items:end}
.positioning h1{margin:0;max-width:900px;font-size:clamp(64px,7.8vw,116px);line-height:.89;letter-spacing:-.06em;font-weight:400}
.positioning-copy{padding-bottom:8px}
.positioning-copy p{margin:0;max-width:560px;font-family:var(--serif);font-size:clamp(19px,1.7vw,27px);line-height:1.4;color:var(--muted)}
.orange-dash{width:48px;height:2px;background:var(--orange);margin:34px 0 24px}
.disciplines{font-size:10px;letter-spacing:.18em;text-transform:uppercase;line-height:1.9;color:var(--muted)}

/* WORK */
.work{padding:0 var(--pad) 24px}
.work-head{display:flex;justify-content:space-between;align-items:end;padding:34px 0 24px;border-top:1px solid var(--line)}
.work-row{display:grid;grid-template-columns:110px 1.15fr 1fr;gap:42px;align-items:center;padding:42px 0;border-top:1px solid var(--line)}
.work-index{font-size:11px;color:var(--orange);letter-spacing:.12em}
.work-company{font-size:15px;margin-top:8px}
.work-copy h3{margin:0;max-width:580px;font-size:clamp(30px,3.2vw,50px);font-weight:400;line-height:1.03;letter-spacing:-.04em}
.work-copy p{margin:14px 0 0;max-width:520px;font-size:14px;line-height:1.45;color:var(--muted)}
.work-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.work-metric{padding-left:18px;border-left:1px solid var(--line)}
.work-metric strong{display:block;font-family:var(--serif);font-size:clamp(26px,2.7vw,42px);font-weight:400;line-height:1}
.work-metric span{display:block;margin-top:8px;font-size:10px;line-height:1.3;color:var(--muted)}

/* RECOMMENDATIONS */
.recommendations{
  margin-top:42px;
  background:var(--orange);
  color:var(--cream);
  padding:clamp(70px,7.5vw,112px) var(--pad);
}
.recommendations .eyebrow{color:rgba(239,238,233,.72)}
.recommendations-head{
  display:grid;
  grid-template-columns:.58fr 1.42fr;
  gap:8vw;
  align-items:start;
  padding-bottom:44px;
  border-bottom:1px solid rgba(239,238,233,.42);
}
.recommendations-head h2{
  margin:0;
  max-width:930px;
  font-size:clamp(48px,6.7vw,98px);
  line-height:.92;
  letter-spacing:-.057em;
  font-weight:400;
}
.recommendations-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:0;
}
.rec-featured{
  min-height:430px;
  padding:54px 7vw 38px 0;
  border-right:1px solid rgba(239,238,233,.42);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.rec-featured blockquote{
  margin:0;
  max-width:820px;
  font-family:var(--serif);
  font-size:clamp(31px,3.45vw,54px);
  line-height:1.13;
  letter-spacing:-.025em;
}
.rec-featured blockquote::before,
.rec-small blockquote::before{content:"“"}
.rec-featured blockquote::after,
.rec-small blockquote::after{content:"”"}
.rec-meta{
  margin-top:38px;
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:flex-end;
}
.rec-person strong,.rec-person span{display:block}
.rec-person strong{font-size:13px;font-weight:500}
.rec-person span{
  margin-top:5px;
  max-width:420px;
  font-size:10px;
  line-height:1.35;
  color:rgba(239,238,233,.68);
}
.rec-year{
  flex:0 0 auto;
  font-size:10px;
  letter-spacing:.16em;
  color:rgba(239,238,233,.6);
}
.rec-list{padding-left:5vw}
.rec-small{
  padding:42px 0;
  border-bottom:1px solid rgba(239,238,233,.34);
}
.rec-small:last-child{border-bottom:0}
.rec-small blockquote{
  margin:0;
  max-width:610px;
  font-family:var(--serif);
  font-size:clamp(20px,1.9vw,29px);
  line-height:1.3;
}
.rec-small .rec-meta{
  margin-top:24px;
  align-items:flex-start;
}
.recommendations-foot{
  display:flex;
  justify-content:flex-end;
  padding-top:28px;
  border-top:1px solid rgba(239,238,233,.42);
}
.recommendations .link-arrow::after{color:var(--cream)}

/* EXPERIENCE */
.experience{padding:clamp(78px,8vw,120px) var(--pad)}
.experience-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:8vw;margin-bottom:60px}
.experience-intro{margin:0;max-width:760px;font-family:var(--serif);font-size:clamp(20px,2vw,30px);line-height:1.35;color:var(--muted)}
.career{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(239,238,233,.55)}
.chapter{position:relative;min-height:430px;padding:38px 38px 32px 0}
.chapter+.chapter{padding-left:38px;border-left:1px solid var(--line)}
.dot{position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.chapter+.chapter .dot{left:38px}
.chapter-meta{display:flex;justify-content:space-between;gap:16px;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.chapter-word{margin-top:42px;font-size:clamp(72px,7.5vw,116px);line-height:.78;letter-spacing:-.065em;color:rgba(239,238,233,.09)}
.chapter h3{margin:26px 0 14px;max-width:390px;font-size:clamp(27px,2.5vw,38px);line-height:1.05;font-weight:400;letter-spacing:-.035em}
.chapter p{margin:0;max-width:410px;font-size:13px;line-height:1.55;color:var(--muted)}
.chapter-company{position:absolute;left:0;right:38px;bottom:32px;padding-top:16px;border-top:1px solid var(--line)}
.chapter+.chapter .chapter-company{left:38px}
.chapter-company strong,.chapter-company span{display:block}
.chapter-company strong{font-size:13px;font-weight:500}
.chapter-company span{margin-top:5px;font-size:11px;color:var(--dim)}

/* ABOUT + CONTACT */
.closing{padding:0 var(--pad)}
.closing-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.about-block,.contact-block{padding:clamp(70px,7vw,108px) 0}
.about-block{padding-right:7vw;border-right:1px solid var(--line)}
.contact-block{padding-left:7vw}
.closing h2{margin:0;font-size:clamp(52px,6vw,88px);line-height:.91;letter-spacing:-.055em;font-weight:400}
.about-body{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:44px}
.about-body p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.education{font-size:11px;line-height:1.45;color:var(--dim)}
.contact-block p{margin:36px 0 0;max-width:520px;font-size:15px;line-height:1.45;color:var(--muted)}
.contact-links{display:flex;gap:28px;flex-wrap:wrap;margin-top:42px}
.footer{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad) 24px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.footer-brand{font-size:15px;color:var(--cream);letter-spacing:.03em}

/* DRAWER */
.drawer-backdrop{position:fixed;z-index:80;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s ease}
.drawer{position:absolute;right:0;top:0;height:100%;width:min(82%,380px);background:#141414;padding:74px 30px 36px;transform:translateX(100%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer-backdrop.open .drawer{transform:translateX(0)}
.drawer-close{position:absolute;right:22px;top:18px;border:0;background:transparent;font-size:34px;font-weight:200;cursor:pointer}
.drawer-label{margin:30px 0 16px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.drawer-main{display:flex;flex-direction:column;font-size:40px;line-height:1.06}
.drawer-social{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:14px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* TABLET */
@media (max-width:900px){
  .header-right{display:none}.menu-btn{display:block}
  
  .positioning-grid,.recommendations-head,.experience-head{grid-template-columns:1fr;gap:36px}
  .work-row{grid-template-columns:90px 1fr;gap:26px}.work-metrics{grid-column:2}
  .career{grid-template-columns:1fr}
  .chapter,.chapter+.chapter{min-height:auto;padding:0 0 56px 32px;border-left:1px solid rgba(239,238,233,.45)}
  .chapter+.chapter{padding-left:32px}.dot,.chapter+.chapter .dot{left:-5px;top:4px}
  .chapter-meta{justify-content:flex-start}.chapter-word{margin-top:26px;font-size:82px}
  .chapter-company,.chapter+.chapter .chapter-company{position:static;margin-top:28px;padding-top:14px}
}

/* MOBILE */
@media (max-width:600px){
  :root{--pad:18px}
  .hero{height:100svh;min-height:680px;max-height:920px}
  .header{padding-top:max(16px,env(safe-area-inset-top))}
  .brand{font-size:18px}
  .hero-marquee{display:none}
  .hero-name-mobile{display:block;position:absolute;z-index:10;top:12.5svh;left:0;width:100%;padding-inline:10px;font-size:clamp(76px,25vw,106px);line-height:.82;letter-spacing:-.07em;pointer-events:none}
  .hero-name-mobile span{display:block;white-space:nowrap}
  .hero-name-mobile span:nth-child(2){padding-left:14vw}
  .hero-photo-bg,
  .hero-photo-fg{
    object-position:64% center
  }
  .hero-photo-fg{
    -webkit-mask-image:radial-gradient(
      ellipse 58% 60% at 64% 52%,
      #000 0%,
      #000 63%,
      rgba(0,0,0,.95) 72%,
      rgba(0,0,0,.64) 83%,
      rgba(0,0,0,.22) 92%,
      transparent 100%
    );
    mask-image:radial-gradient(
      ellipse 58% 60% at 64% 52%,
      #000 0%,
      #000 63%,
      rgba(0,0,0,.95) 72%,
      rgba(0,0,0,.64) 83%,
      rgba(0,0,0,.22) 92%,
      transparent 100%
    )
  }
  .hero-bottom{left:18px;right:18px;bottom:max(16px,env(safe-area-inset-bottom))}
  .hero-footer{padding-top:12px;font-size:10px;line-height:1.25;gap:14px}
  .hero-footer-right{max-width:118px}
  .proof{grid-template-columns:1fr 1fr;padding-inline:18px}
  .proof-item,.proof-item:not(:first-child){min-height:132px;padding:24px 12px 22px 0}
  .proof-item:nth-child(even){padding-left:18px;border-right:0}
  .proof-item:nth-child(odd){border-right:1px solid var(--line)}
  .proof-item:nth-child(3),.proof-item:nth-child(4){border-top:1px solid var(--line)}
  .proof-value{font-size:clamp(48px,14vw,60px)}
  .proof-label{font-size:11px;margin-top:10px}
  .positioning{padding:64px 18px}
  .positioning-grid{gap:36px}
  .positioning h1{font-size:clamp(47px,13.6vw,63px);line-height:.94}
  .positioning-copy p{font-size:18px}
  .disciplines{font-size:9px;letter-spacing:.13em;overflow-wrap:anywhere}
  .work{padding:0 18px 16px}
  .work-head{padding:28px 0 16px}
  .work-row{display:block;padding:34px 0}
  .work-company{font-size:14px}
  .work-copy{margin-top:22px}
  .work-copy h3{font-size:31px;line-height:1.03}
  .work-copy p{font-size:13.5px}
  .work-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:28px}
  .work-metric{padding-left:10px}
  .work-metric strong{font-size:26px;white-space:nowrap}
  .work-metric span{font-size:9px}
  .recommendations{margin-top:24px;padding:60px 18px}
  .recommendations-head{display:block;padding-bottom:30px}
  .recommendations-head h2{margin-top:18px;font-size:clamp(42px,12.2vw,56px);line-height:.96}
  .recommendations-grid{display:block}
  .rec-featured{min-height:0;padding:38px 0 36px;border-right:0;border-bottom:1px solid rgba(239,238,233,.38)}
  .rec-featured blockquote{font-size:clamp(25px,7vw,31px);line-height:1.22}
  .rec-list{padding-left:0}
  .rec-small{padding:31px 0}
  .rec-small blockquote{font-size:19px;line-height:1.38}
  .rec-meta{margin-top:25px;gap:20px}
  .rec-person strong{font-size:12px}
  .rec-person span{font-size:9.5px}
  .rec-year{font-size:9px}
  .recommendations-foot{justify-content:flex-start;padding-top:24px}
  .experience{padding:64px 18px}
  .experience-head{display:block;margin-bottom:46px}
  .experience-intro{margin-top:20px;font-size:19px}
  .career{display:block;border-top:0;border-left:1px solid rgba(239,238,233,.42);margin-left:4px}
  .chapter,.chapter+.chapter{padding:0 0 58px 30px;border-left:0}
  .dot,.chapter+.chapter .dot{left:-5px}
  .chapter-word{font-size:70px;margin-top:24px}
  .chapter h3{font-size:28px;margin-top:18px}
  .chapter p{font-size:13.5px}
  .closing{padding:0 18px}
  .closing-grid{display:block}
  .about-block,.contact-block{padding:62px 0}
  .about-block{border-right:0;border-bottom:1px solid var(--line)}
  .contact-block{padding-left:0}
  .closing h2{font-size:clamp(46px,13vw,61px);line-height:.94}
  .about-body{grid-template-columns:1fr;gap:28px;margin-top:34px}
  .about-body p,.contact-block p{font-size:14px}
  .contact-links{gap:22px;margin-top:32px}
  .footer{padding:18px 18px calc(20px + env(safe-area-inset-bottom))}
}
@media (max-width:370px){
  .hero-name-mobile{font-size:74px}
  
  .work-metric strong{font-size:23px}
}
@media (max-height:700px) and (max-width:600px){
  .hero{min-height:640px}
  .hero-name-mobile{top:11svh}
  
}

/* FINAL MOBILE HARDENING */
@media (max-width:600px){
  body{min-width:0}
  .header{padding-inline:18px}
  .hero-name-mobile{overflow:hidden}
  .hero-name-mobile span{max-width:100%}
  .work-row,.chapter,.rec-featured,.rec-small,.about-block,.contact-block{min-width:0}
  .work-metrics{width:100%}
  .work-metric{min-width:0}
  .work-metric span{overflow-wrap:anywhere}
  .rec-meta{min-width:0}
  .rec-person{min-width:0}
  .rec-person span{overflow-wrap:anywhere}
  .contact-links a,.drawer-social a{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:390px){
  .recommendations-head h2{font-size:40px}
  .rec-featured blockquote{font-size:24px}
  .rec-small blockquote{font-size:18px}
}
@media (max-width:360px){
  :root{--pad:16px}
  .proof{padding-inline:16px}
  .positioning,.work,.recommendations,.experience,.closing{padding-left:16px;padding-right:16px}
  .hero-bottom{left:16px;right:16px}
  .hero-footer{font-size:9.5px}
  .work-metrics{gap:5px}
  .work-metric{padding-left:7px}
  .work-metric strong{font-size:22px}
  .rec-featured blockquote{font-size:25px}
}


/* V9 POLISH */
.work-row{transition:background-color .25s ease}
.work-row:hover{background:rgba(239,238,233,.018)}
.work-company{font-weight:500}
.proof-label{max-width:210px}
@media (max-width:600px){
  .hero-footer-right{max-width:104px}
  .proof-label{max-width:145px;line-height:1.3}
  .work-head>span{display:none}
  .recommendations{margin-top:8px}
  .rec-list .rec-small:last-child{padding-bottom:18px}
}
@media (min-width:601px){
  .chapter h3{min-height:2.1em}
}


/* V11 — ORIGINAL PHOTO ONLY / natural mobile crop */
@media (max-width:600px){
  .hero-photo-bg,
  .hero-photo-fg{
    object-position:66% center;
  }

  .hero-photo-fg{
    -webkit-mask-image:radial-gradient(
      ellipse 60% 61% at 65% 52%,
      #000 0%,
      #000 62%,
      rgba(0,0,0,.95) 71%,
      rgba(0,0,0,.66) 82%,
      rgba(0,0,0,.24) 92%,
      transparent 100%
    );
    mask-image:radial-gradient(
      ellipse 60% 61% at 65% 52%,
      #000 0%,
      #000 62%,
      rgba(0,0,0,.95) 71%,
      rgba(0,0,0,.66) 82%,
      rgba(0,0,0,.24) 92%,
      transparent 100%
    );
  }

  /* Keep text readable without changing the photo colors. */
  .hero-name-mobile{z-index:10}
  .hero-bottom{z-index:30}
}

@media (max-width:430px){
  .hero-photo-bg,
  .hero-photo-fg{
    object-position:68% center;
  }
}

@media (max-width:360px){
  .hero-photo-bg,
  .hero-photo-fg{
    object-position:69% center;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* V12: pixel-aligned subject matte; the original photograph is unchanged. */
.hero{height:min(100svh,1000px);min-height:700px;--photo-bottom:104px}
.hero-photo-bg,.hero-photo-fg{inset:0 0 var(--photo-bottom);height:calc(100% - var(--photo-bottom));object-fit:cover;object-position:50% 0%}
.hero-photo-fg{-webkit-mask-image:url("/portrait-mask.png");mask-image:url("/portrait-mask.png");-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 0%;mask-position:50% 0%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero-marquee{top:18%;}
.hero-bottom{bottom:0;left:0;right:0;height:var(--photo-bottom);padding:0 var(--pad) 20px;background:var(--orange)}
.hero-footer{padding-top:16px}
@media(max-width:900px) and (min-width:601px){
 .hero{min-height:680px;height:90svh}
 .hero-photo-bg,.hero-photo-fg{object-position:67% 0%;-webkit-mask-position:67% 0%;mask-position:67% 0%}
}
@media(max-width:600px){
 .hero{height:auto;min-height:0;max-height:none;--photo-bottom:112px;padding-top:156px;background:var(--orange)}
 .header{align-items:center;padding-top:max(14px,env(safe-area-inset-top));height:70px}
 .menu-btn{width:44px;height:44px}
 .hero-name-mobile{top:85px;left:18px;right:18px;width:auto;padding:0;overflow:visible;font-size:clamp(40px,11.7vw,60px);letter-spacing:-.06em;line-height:1;display:flex;gap:.23em;z-index:21}
 .hero-name-mobile span:nth-child(2){padding:0}
 .hero-photo-bg{position:relative;inset:auto;width:100%;height:120vw;max-height:600px;object-fit:cover;object-position:78% 0%}
 .hero-photo-fg{display:none}
 .hero-bottom{position:relative;inset:auto;height:auto;min-height:112px;padding:0 18px max(22px,env(safe-area-inset-bottom));background:var(--orange)}
 .hero-footer{font-size:11px;line-height:1.4;padding-top:16px;gap:18px}
 .hero-footer-right{max-width:132px}
}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.hero-rule{animation:none}}


/* V13 — readable typography, clear navigation, and direct copy. */
:root{--font:"Helvetica Neue",Helvetica,Arial,sans-serif;--muted:#bdbcb8;--dim:#aaa9a5}
html{scroll-padding-top:28px} body{font-size:16px}
:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.skip-link{position:fixed;left:16px;top:-100px;z-index:100;background:var(--cream);color:var(--black);padding:14px}
.skip-link:focus{top:16px}
.hero-intro{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.header-right{font-size:14px;line-height:1.65}
.header-right a{min-height:28px}
.hero-footer{font-size:14px;line-height:1.5}.hero-footer strong{font-weight:500}
.hero-bottom{background:var(--black);color:var(--cream)}
.menu-btn{width:auto;min-width:72px;height:44px;padding:0 14px;border:1px solid currentColor;font-size:14px;border-radius:0}
.eyebrow{font-size:12px;letter-spacing:.14em;line-height:1.5;font-weight:500}
.proof-label{font-size:14px;line-height:1.5}
.positioning h2{margin:0;font-size:clamp(48px,6.4vw,92px);font-weight:400;line-height:1.02;letter-spacing:-.055em}
.positioning-copy p{font-size:clamp(20px,1.7vw,26px);line-height:1.5}
.disciplines{font-size:12px;letter-spacing:.03em;text-transform:none;line-height:1.9}
.work-index{color:#f17c4c;font-size:12px}.work-company{font-size:17px}
.work-copy p,.chapter p,.about-body p,.contact-block p{font-size:16px;line-height:1.65}
.work-metric span{font-size:12px;line-height:1.5}
.work-copy h3{line-height:1.12}
.recommendations{color:#0f0f0f}
.recommendations .eyebrow,.rec-person span,.rec-year{color:#0f0f0f}
.recommendations-head,.rec-featured,.rec-small,.recommendations-foot{border-color:rgba(23,16,11,.35)}
.rec-person strong{font-size:15px;font-weight:600}.rec-person span,.rec-year{font-size:12px;line-height:1.5}
.recommendations .link-arrow::after{color:currentColor}
.recommendations .link-arrow{font-size:14px;text-decoration:underline;text-underline-offset:5px;min-height:44px}
.chapter{min-height:520px}.chapter-meta{font-size:12px;letter-spacing:.05em}
.chapter-word{font-size:60px;color:#777671;margin-top:30px}
.chapter-company strong{font-size:15px}.chapter-company span,.education{font-size:13px;line-height:1.65}
.about-body{grid-template-columns:1fr;gap:28px}.closing h2{font-size:clamp(44px,5vw,72px);line-height:1.02}
.contact-block p{margin-top:28px}.contact-links{margin-top:20px}
.link-arrow{font-size:15px;min-height:44px}
.button-primary{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:48px;padding:14px 18px;background:var(--cream);color:var(--black);font-size:15px;font-weight:500}
.button-primary:hover{background:#fff}.contact-primary{margin-top:30px}
.text-action{text-decoration:underline;text-underline-offset:5px;display:inline-flex;align-items:center;min-height:48px;font-size:15px}
.footer{font-size:12px;gap:20px;flex-wrap:wrap}.footer a{min-height:44px;display:flex;align-items:center}
.drawer{overflow-y:auto;padding-top:86px}.drawer-main a{min-height:54px;display:flex;align-items:center;font-size:36px}
.drawer-label{font-size:12px}.drawer-close{min-width:48px;min-height:48px}.drawer-social a{font-size:16px}
.drawer-backdrop{visibility:hidden}.drawer-backdrop.open{visibility:visible}
.reveal{opacity:1;transform:none;transition:none}
@media(max-width:900px){.chapter,.chapter+.chapter{min-height:0}.chapter h3{min-height:0}}
@media(max-width:600px){
 .hero{padding-top:0;background:var(--cream);color:var(--black)}
 .header{position:relative;height:auto;min-height:76px;padding:16px 20px;align-items:center;color:var(--black)}
 .brand{font-size:22px}.menu-btn{display:block}
 .hero-intro{position:relative;width:auto;height:auto;margin:0;padding:20px 20px 30px;overflow:visible;clip-path:none}
 .hero-role{font-size:14px;font-weight:500;letter-spacing:.025em;margin:0 0 18px}
 .hero-intro h1{font-size:clamp(56px,16vw,70px);letter-spacing:-.055em;line-height:.98;font-weight:500;margin:0}
 .hero-intro h1 span{display:block}
 .hero-intro-copy{font-size:17px;line-height:1.5;max-width:32ch;margin:22px 0 0;color:#3a3936}
 .hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}
 .hero-actions .button-primary{background:var(--black);color:var(--cream);font-size:14px;gap:14px}
 .hero-photo-bg{height:108vw;max-height:none;object-position:78% 0%}
 .hero-bottom{background:var(--black);padding:0 20px 24px;min-height:0}
 .hero-rule{height:1px}.hero-footer{font-size:13px;line-height:1.6;gap:16px;align-items:flex-start;padding-top:20px}
 .hero-footer strong{font-size:15px;display:inline-block;margin-bottom:4px}.hero-footer-right{max-width:135px}
 .proof-item,.proof-item:not(:first-child){min-height:150px}.proof-value{font-size:52px}.proof-label{font-size:13px;line-height:1.5}
 .positioning h2{font-size:42px;line-height:1.06}.positioning-copy p{font-size:20px}
 .work-copy h3{font-size:30px}.work-copy p{font-size:16px}
 .work-metrics{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.work-metric{padding-left:9px}
 .work-metric strong{font-size:27px}.work-metric span{font-size:12px;overflow-wrap:normal}
 .recommendations-head h2{font-size:40px;line-height:1.04}.rec-featured blockquote{font-size:26px;line-height:1.3}
 .rec-small blockquote{font-size:22px;line-height:1.4}.rec-meta{gap:12px}.rec-person span,.rec-year{font-size:12px}
 .experience-intro{font-size:20px;line-height:1.5}.chapter p{font-size:16px}.chapter-word{font-size:46px}
 .chapter-meta{font-size:12px}.chapter h3{font-size:29px}
 .closing h2{font-size:42px;line-height:1.06}.about-body p,.contact-block p{font-size:16px}
 .education{font-size:14px}.contact-primary{width:100%}.footer{font-size:12px}
}

@media(min-width:601px){.hero-intro>p,.hero-intro>.hero-actions{display:none}}

/* V14: constrain the desktop composition by available height, not screen width.
   Both photo layers retain the source's exact 2048:1366 ratio. */
@media(min-width:1000px){
 .hero{width:100%;max-width:min(1600px,calc((max(700px,100svh) - 104px)*1.499267936));margin-inline:auto;height:auto;min-height:0;max-height:none;padding-bottom:104px}
 .hero-photo-bg{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:2048/1366;object-fit:contain;object-position:center}
 .hero-photo-fg{inset:0 0 104px;width:100%;height:calc(100% - 104px);object-fit:fill;object-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center}
 .hero-marquee{top:20%}.marquee-track{font-size:clamp(130px,15vw,230px)}
 .header{padding-inline:32px}.header-right{gap:32px;font-size:13px}
 .hero-bottom{height:104px;padding-inline:32px}
}


/* Clear collaboration routes using the existing portfolio design. */
html{scroll-padding-top:32px}
.hero-footer-message{max-width:550px}
.hero-footer-message strong,.hero-footer-message>span{display:block}
.hero-footer-message strong{font-size:18px;margin-bottom:3px}
.hero-footer-message>span{color:var(--muted);font-size:13px}
.hero-footer-message p{font-size:16px;line-height:1.5;margin:10px 0 0;max-width:48ch}
.hero-footer-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap;max-width:430px}
.hero-footer-actions>span{flex-basis:100%;font-size:12px;color:var(--muted);text-align:right}
.hero-footer-actions .text-action{padding:0 10px}
.proof-item{transition:background-color .2s ease}
.proof-item:hover{background:rgba(239,238,233,.04)}
.proof-context{font-size:12px;color:var(--cream);margin-top:16px;text-decoration:underline;text-underline-offset:4px}
.proof-label{margin-top:5px}
.proof-item:focus-visible{outline-offset:-4px}
.contact-path{border-top:1px solid var(--line);padding-top:28px;margin-top:32px;scroll-margin-top:30px}
.path-label{font-size:11px;letter-spacing:.08em;color:var(--muted)}
.contact-path h3{font-size:clamp(26px,2.5vw,36px);font-weight:400;letter-spacing:-.035em;line-height:1.15;margin:13px 0 0}
.contact-path p{font-size:16px;margin-top:16px}
.contact-path .contact-primary{margin-top:22px}
.path-resume{margin:12px 0 0;display:flex;width:fit-content}
.hero-work-link{font-size:14px}
@media(min-width:601px){
 .hero{--photo-bottom:176px}
 .hero-bottom{height:176px;display:flex;flex-direction:column;justify-content:center;padding-bottom:0}
 .hero-footer{align-items:center;padding:16px 0 20px;gap:26px}
 .hero-intro>.hero-work-link{display:none}
}
@media(min-width:1000px){
 .hero{max-width:min(1600px,calc((max(700px,100svh) - 176px)*1.499267936));padding-bottom:176px}
 .hero-photo-fg{inset:0 0 176px;height:calc(100% - 176px)}
 .hero-marquee{top:17%}
}
@media(min-width:601px) and (max-width:999px){
 .hero{min-height:780px;height:100svh}
 .hero-footer-message p{max-width:34ch}
 .hero-footer-actions{max-width:280px;gap:6px 12px}
 .hero-footer-actions .button-primary,.hero-footer-actions .text-action{font-size:14px}
}
@media(max-width:600px){
 .hero-intro{padding-bottom:24px}
 .hero-role{max-width:29ch;font-size:13px;line-height:1.5}
 .hero-intro-copy{font-size:17px;max-width:34ch}
 .hero-actions{gap:10px 18px}
 .hero-actions .button-primary{font-size:14px;padding:13px 15px}
 .hero-actions .text-action{font-size:14px}
 .hero-work-link{margin-top:8px}
 .hero-footer-message p,.hero-footer-actions .button-primary,.hero-footer-actions .text-action{display:none}
 .hero-footer-message strong{font-size:15px}
 .hero-footer-message>span{font-size:12px}
 .hero-footer-actions{max-width:126px;align-self:center}
 .hero-footer-actions>span{font-size:12px}
 .hero-footer{gap:14px}
 .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
 .proof-item,.proof-item:not(:first-child){min-height:166px;min-width:0}
 .proof-value{font-size:clamp(32px,10.4vw,52px)}
 .proof-label{max-width:100%;overflow-wrap:break-word}
 .contact-path h3{font-size:28px}
 .contact-path .button-primary{width:100%;justify-content:center;padding-inline:12px}
 .contact-path{scroll-margin-top:24px}
}

/* Scoped correction: retain the original composition and subject matte.
   The source photo keeps its natural ratio and fills every wide viewport. */
@media(min-width:1000px){
 .hero{width:100%;max-width:none;margin-inline:0}
}
/* The supplied PNG already has an alpha channel: no background plate. */
.hero .brand{position:relative;display:block;width:96px;height:50px;flex:0 0 96px;background:transparent;overflow:hidden}
.hero .brand img{position:absolute;top:-23px;left:0;width:96px;height:96px;max-width:none}