:root{
  --bg:#0b0d0d;
  --panel:#101313;
  --panel-2:#141818;
  --paper:#f1f0eb;
  --ink:#f5f5f1;
  --muted:#9da3a1;
  --line:rgba(255,255,255,.14);
  --teal:#367f79;
  --teal-bright:#67b8ae;
  --display:'League Spartan',sans-serif;
  --body:'Manrope',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.cursor-glow{position:fixed;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(73,140,132,.11),transparent 68%);pointer-events:none;z-index:50;transform:translate(-50%,-50%);transition:opacity .3s;opacity:0}

.site-header{position:fixed;top:0;left:0;right:0;z-index:30;height:88px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(11,13,13,.95),rgba(11,13,13,.72),transparent);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.10)}
.brand-mark{font:700 36px/1 var(--display);letter-spacing:-.055em}
.brand-mark span{color:var(--teal-bright)}
.site-nav{display:flex;gap:48px;align-items:center;font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.site-nav a{position:relative;padding:8px 0}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--teal-bright);transition:right .25s ease}
.site-nav a:hover:after{right:0}
.site-nav .nav-cta{border:0;padding:8px 0}
.nav-toggle{display:none;background:none;border:0}

.section-grid,.section-pad{position:relative;z-index:1}
.section-pad{padding:120px 5vw;border-top:1px solid var(--line)}

.hero{position:relative;min-height:100vh;padding:130px 4vw 44px;display:grid;grid-template-columns:minmax(380px,.88fr) minmax(520px,1.12fr);grid-template-rows:1fr auto;gap:20px;overflow:hidden;background:radial-gradient(circle at 66% 43%,#363a39 0,#1e2221 24%,#111313 58%,#090b0b 100%)}
.hero:before{content:"";position:absolute;inset:88px 0 0;background:linear-gradient(122deg,transparent 0 18%,rgba(255,255,255,.13) 18.5% 30%,rgba(255,255,255,.03) 30.5% 42%,transparent 42.5%);pointer-events:none;mix-blend-mode:screen}
.hero-copy{position:relative;z-index:6;align-self:center;padding:4vh 0 0 1vw;max-width:630px}
.eyebrow,.section-kicker,.case-type{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:#a7aeab}
.hero h1{font:700 clamp(82px,8.4vw,146px)/.82 var(--display);letter-spacing:-.06em;margin:26px 0 24px;color:white}
.hero-intro{max-width:560px;font-size:clamp(18px,1.35vw,23px);color:#f0f0ed;margin:0 0 36px;line-height:1.55}
.hero-actions{display:flex;align-items:center;gap:24px}
.hero-work-link{display:inline-flex;align-items:center;gap:24px;padding:10px 0 9px;border-bottom:1px solid var(--teal-bright);font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;transition:gap .25s,color .25s}
.hero-work-link:hover{gap:34px;color:var(--teal-bright)}
.hero-visual{position:relative;z-index:3;align-self:end;justify-self:stretch;min-height:calc(100vh - 145px);display:flex;align-items:flex-end;justify-content:center;overflow:visible;background:transparent;padding:0}
.hero-visual:after{display:none}
.hero-visual img{position:relative;z-index:4;width:min(84%,770px);max-height:84vh;height:auto;object-fit:contain;object-position:center bottom;filter:grayscale(1) contrast(1.03);margin:0 auto}
.hero-monogram{position:absolute;z-index:1;left:55%;top:45%;transform:translate(-39%,-50%);font:700 clamp(300px,38vw,620px)/.78 var(--display);letter-spacing:-.11em;color:rgba(255,255,255,.085);white-space:nowrap;pointer-events:none;user-select:none}
.hero-monogram span{color:rgba(74,135,128,.82)}
.hero-tag{display:block;position:absolute;z-index:7;right:1vw;bottom:7vh;background:rgba(7,9,9,.92);border:1px solid rgba(255,255,255,.08);padding:24px 28px 20px;min-width:250px;color:#f5f5f2;font:500 14px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.02em;box-shadow:0 28px 50px rgba(0,0,0,.24)}
.hero-tag:after{content:"";display:block;width:100%;height:1px;background:var(--teal-bright);margin-top:16px}
.hero-footer{grid-column:1/-1;position:relative;z-index:8;padding-left:1vw}
.scroll-cue{display:inline-flex;align-items:center;gap:15px;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.mouse-icon{width:30px;height:49px;border:1px solid currentColor;border-radius:20px;display:inline-flex;justify-content:center;padding-top:9px}
.mouse-icon i{width:3px;height:3px;border-radius:50%;background:white;animation:scrollDot 1.5s infinite}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(18px);opacity:0}100%{transform:translateY(0);opacity:0}}

.section-kicker{color:var(--teal-bright)}
.intro{background:#0e1111}
.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:9vw;align-items:start;margin-top:36px}
.display-heading{font:700 clamp(52px,7vw,112px)/.88 var(--display);letter-spacing:-.05em;margin:0}
.display-heading span,.hire-me h2 span{color:var(--teal-bright)}
.intro-copy{font-size:clamp(18px,1.35vw,22px);color:var(--muted);padding-top:16px}
.intro-copy p:first-child{color:var(--ink)}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:0;background:var(--line)}
.metric-card{background:var(--panel);padding:54px 34px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between}
.metric-value{font:600 clamp(54px,6vw,94px)/1 var(--display);letter-spacing:-.05em;color:white}
.metric-label{font:500 11px/1.5 var(--mono);text-transform:uppercase;color:var(--muted);max-width:190px}

.brands{background:#0b0d0d}
.brands-head{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end;margin:36px 0 64px}
.brands-head h2,.section-heading-row h2,.expertise h2,.experience h2,.personal-copy h2{font:600 clamp(48px,6vw,90px)/.95 var(--display);letter-spacing:-.045em;margin:0}
.brands-head p{color:var(--muted);font-size:18px}
.brand-marquee{overflow:hidden;border-block:1px solid var(--line);padding:26px 0}
.marquee-track{display:flex;gap:52px;width:max-content;animation:marquee 28s linear infinite;font:600 34px/1 var(--display);letter-spacing:.02em}
.marquee-track span:nth-child(odd){color:var(--teal-bright)}
@keyframes marquee{to{transform:translateX(-50%)}}

.work{background:#0f1212}
.section-heading-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:52px}
.text-link{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--teal-bright);padding-bottom:4px}
.feature-case{display:grid;grid-template-columns:1.25fr .75fr;min-height:680px;background:#050606;color:white;border:1px solid var(--line)}
.case-media{background-size:cover;background-position:center;filter:grayscale(1)}
.image-one{background-image:linear-gradient(90deg,transparent,rgba(8,10,10,.12)),url('assets/guitar-2.jpg')}
.case-copy{padding:60px;display:flex;flex-direction:column;justify-content:center}
.case-index{font:500 90px/1 var(--display);color:var(--teal-bright)}
.case-copy h3,.compact h3{font:600 clamp(34px,4vw,66px)/.95 var(--display);letter-spacing:-.04em;margin:24px 0}
.case-copy>p:not(.case-type){color:#bdc2bf;font-size:18px}
.case-results{list-style:none;padding:24px 0 0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid #2e3432}
.case-results li{display:flex;flex-direction:column}.case-results strong{font:600 30px var(--display)}.case-results span{font:400 10px var(--mono);text-transform:uppercase;color:#8e9692}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:1px}
.compact{background:var(--panel);padding:50px;min-height:430px}
.dark-card{background:#17211f;color:white}.compact p{max-width:620px;color:var(--muted)}.case-card-top{display:flex;justify-content:space-between;align-items:start}.compact .case-index{font-size:54px}.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}.case-tags span{border:1px solid currentColor;border-radius:100px;padding:7px 11px;font:400 10px var(--mono);text-transform:uppercase;opacity:.78}

.expertise{display:grid;grid-template-columns:.35fr 1fr;gap:8vw;background:#0b0d0d}
.expertise-number{font:500 clamp(160px,22vw,360px)/.75 var(--display);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px var(--teal-bright);align-self:start}
.expertise-main h2{max-width:900px;margin:24px 0 54px}
.accordion-item{border-top:1px solid var(--line)}.accordion-item:last-child{border-bottom:1px solid var(--line)}
.accordion-item button{width:100%;display:flex;justify-content:space-between;padding:24px 0;background:none;border:0;text-align:left;font:600 clamp(17px,1.6vw,24px) var(--display);cursor:pointer}
.accordion-item button span:last-child{color:var(--teal-bright)}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .4s ease}.accordion-panel p{max-width:760px;color:var(--muted);margin:0 0 24px}.accordion-panel.open{max-height:180px}

.experience{background:#0f1212}
.experience-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:9vw;margin-top:36px}
.timeline-item{display:grid;grid-template-columns:150px 1fr;gap:34px;padding:32px 0;border-top:1px solid var(--line)}.timeline-item:last-child{border-bottom:1px solid var(--line)}
.timeline-year{font:500 11px var(--mono);color:var(--teal-bright)}.timeline-item h3{margin:0 0 8px;font:600 28px var(--display)}.timeline-item p{margin:0;color:var(--muted)}

.personal-brand{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center;background:#080a0a}
.personal-image{height:760px;overflow:hidden}.personal-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.02)}
.personal-copy h2{margin:26px 0}.personal-copy p{color:#aeb5b2;font-size:19px}.personal-copy blockquote{margin:48px 0 0;border-left:2px solid var(--teal-bright);padding-left:24px;font:500 28px/1.25 var(--display)}

.hire-me{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;background:#111515}
.hire-me h2{font:700 clamp(60px,8vw,128px)/.84 var(--display);letter-spacing:-.055em;margin-top:28px}
.hire-details{align-self:end;padding-bottom:16px}.hire-details>p{font-size:20px;max-width:620px;margin-bottom:30px;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:16px 20px;border:1px solid var(--teal-bright);font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.05em;transition:.25s}
.button-primary{background:var(--teal);color:white}.button-primary:hover{background:#2c6a64;transform:translateY(-2px)}
.contact-list{display:grid;gap:14px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line);font:400 12px var(--mono);color:var(--muted)}
.site-footer{display:flex;justify-content:space-between;padding:24px 5vw;border-top:1px solid var(--line);font:400 10px var(--mono);text-transform:uppercase;color:var(--muted);background:#080a0a}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}

@media(max-width:1100px){
  .site-nav{gap:24px}.hero{grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(72px,9vw,118px)}.hero-tag{right:0}.hero-monogram{left:57%;font-size:clamp(250px,37vw,500px)}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:125px}.hero-copy{padding-top:60px}.hero-visual{min-height:680px}.hero-footer{grid-column:auto}.hero-tag{right:8vw;bottom:5vh}.hero-monogram{left:56%;top:47%;font-size:clamp(260px,60vw,480px)}
  .intro-grid,.brands-head,.feature-case,.expertise,.experience-grid,.personal-brand,.hire-me{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.case-grid{grid-template-columns:1fr}.expertise-number{font-size:180px}.personal-image{height:560px}
}
@media(max-width:720px){
  .site-header{height:72px;padding:0 20px}.brand-mark{font-size:30px}.site-nav{position:fixed;top:0;right:-100%;height:100vh;width:78vw;background:#0b0d0d;flex-direction:column;align-items:flex-start;padding:100px 34px;transition:right .35s;box-shadow:-20px 0 50px rgba(0,0,0,.45)}.site-nav.open{right:0}.nav-toggle{display:block;position:relative;z-index:40;width:34px;height:28px}.nav-toggle span{display:block;height:1px;background:white;margin:8px 0}
  .section-pad{padding:78px 22px}.hero{padding:100px 22px 28px}.hero-copy{padding-top:42px}.hero h1{font-size:70px}.hero-intro{font-size:17px}.hero-visual{min-height:520px}.hero-visual img{width:min(100%,430px)}.hero-monogram{left:58%;top:44%;transform:translate(-42%,-44%);font-size:clamp(190px,72vw,310px)}.hero-tag{right:4px;bottom:18px;min-width:220px;padding:16px 18px;font-size:11px}.hero-footer{padding-top:0}.mouse-icon{width:26px;height:42px}
  .metrics{grid-template-columns:1fr}.metric-card{min-height:160px}.display-heading{font-size:48px}.section-heading-row{align-items:flex-start;gap:30px;flex-direction:column}.case-copy,.compact{padding:30px}.case-results{grid-template-columns:1fr}.expertise-number{font-size:130px}.timeline-item{grid-template-columns:1fr;gap:8px}.personal-image{height:440px}.hire-me h2{font-size:56px}.site-footer{gap:18px;flex-direction:column}.cursor-glow{display:none}
}

/* Hero fidelity pass — match the approved mockup */
.hero{
  min-height:100svh;
  padding:118px 4vw 34px;
  grid-template-columns:minmax(420px,.92fr) minmax(560px,1.08fr);
  background:
    radial-gradient(circle at 67% 45%, rgba(82,88,86,.72) 0%, rgba(48,53,52,.74) 24%, rgba(26,30,29,.93) 52%, #0a0c0c 100%);
}
.hero::before{
  inset:88px 0 0;
  background:
    linear-gradient(123deg,
      transparent 0 16%,
      rgba(255,255,255,.16) 16.4% 30%,
      rgba(255,255,255,.055) 30.4% 41%,
      transparent 41.4% 100%);
  filter:blur(7px);
  opacity:.72;
  mix-blend-mode:screen;
}
.hero::after{
  content:"";
  position:absolute;
  inset:88px 0 0;
  background:linear-gradient(90deg,rgba(5,7,7,.68) 0%,rgba(5,7,7,.18) 31%,transparent 52%,rgba(5,7,7,.08) 100%);
  pointer-events:none;
  z-index:1;
}
.hero-copy{
  z-index:8;
  align-self:center;
  padding-top:0;
  max-width:650px;
}
.hero h1{font-size:clamp(86px,8.2vw,142px)}
.hero-visual{
  z-index:4;
  min-height:calc(100svh - 118px);
  align-self:end;
  overflow:visible;
  transform:translateX(-4.2vw);
}
.hero-visual img{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:-7.5vh;
  width:auto;
  height:92vh;
  max-height:none;
  max-width:none;
  transform:translateX(-50%);
  object-fit:contain;
  filter:grayscale(1) contrast(1.035);
  margin:0;
}
.hero-monogram{
  z-index:2;
  left:57%;
  top:45%;
  transform:translate(-35%,-50%);
  font-size:clamp(360px,39vw,650px);
  color:rgba(255,255,255,.105);
}
.hero-monogram span{color:rgba(82,145,137,.92)}
.hero-tag{
  z-index:9;
  right:-2.5vw;
  bottom:3.5vh;
  min-width:250px;
}
.hero-footer{z-index:9;padding-left:1vw}

@media(max-width:1200px){
  .hero{grid-template-columns:minmax(360px,.9fr) minmax(500px,1.1fr)}
  .hero-visual{transform:translateX(-2vw)}
  .hero-visual img{height:86vh;bottom:-5vh}
  .hero-monogram{left:58%;font-size:clamp(310px,40vw,540px)}
  .hero-tag{right:-1vw}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:112px}
  .hero-copy{padding-top:38px}
  .hero-visual{transform:none;min-height:660px}
  .hero-visual img{position:absolute;height:720px;bottom:-55px}
  .hero-monogram{left:56%;top:47%;transform:translate(-39%,-50%);font-size:clamp(270px,61vw,460px)}
  .hero-tag{right:5vw;bottom:28px}
}

@media(max-width:720px){
  .hero{padding:94px 22px 28px}
  .hero-copy{padding-top:30px}
  .hero-visual{min-height:520px}
  .hero-visual img{height:565px;bottom:-42px}
  .hero-monogram{left:58%;top:45%;font-size:clamp(195px,72vw,305px)}
  .hero-tag{right:0;bottom:16px}
}


/* Final desktop hero correction — match the approved mockup exactly */
@media (min-width: 901px){
  .hero{
    min-height:100vh;
    padding:112px 4vw 34px;
    grid-template-columns:42% 58%;
    grid-template-rows:1fr;
    align-items:center;
    overflow:hidden;
    background:
      radial-gradient(ellipse at 64% 42%, rgba(72,79,78,.46) 0%, rgba(32,37,37,.56) 28%, rgba(12,15,15,.88) 58%, #050607 100%),
      linear-gradient(90deg, #040505 0%, #0a0d0d 42%, #101515 100%);
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:84px 0 0;
    background:linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 35%, rgba(255,255,255,.02) 72%, transparent 100%);
    clip-path:polygon(16% 0%, 34% 0%, 61% 100%, 43% 100%);
    filter:blur(12px);
    opacity:.9;
    pointer-events:none;
    z-index:1;
  }

  .hero::after{
    content:"";
    position:absolute;
    inset:84px 0 0;
    background:linear-gradient(90deg, rgba(3,5,5,.84) 0%, rgba(3,5,5,.52) 18%, rgba(3,5,5,.18) 38%, rgba(3,5,5,.06) 56%, transparent 72%);
    pointer-events:none;
    z-index:1;
  }

  .hero-copy{
    position:relative;
    z-index:8;
    align-self:center;
    max-width:620px;
    padding:76px 0 0 1vw;
  }

  .hero .eyebrow{
    margin:0 0 26px;
    font-size:14px;
    letter-spacing:.16em;
    color:rgba(255,255,255,.58);
  }

  .hero h1{
    margin:0 0 28px;
    font-size:clamp(96px, 8.4vw, 146px);
    line-height:.84;
    color:#f6f5f1;
  }

  .hero-intro{
    max-width:560px;
    margin:0 0 46px;
    font-size:17px;
    line-height:1.7;
    color:rgba(255,255,255,.88);
  }

  .hero-actions{margin-top:0}

  .hero-work-link{
    font-size:14px;
    letter-spacing:.14em;
    color:#ffffff;
  }

  .hero-work-link::after{background:var(--teal-bright)}

  .hero-visual{
    position:relative;
    z-index:4;
    align-self:end;
    min-height:calc(100vh - 112px);
    height:calc(100vh - 112px);
    overflow:visible;
    transform:none !important;
    background:none;
  }

  .hero-visual img{
    position:absolute;
    z-index:5;
    left:38%;
    bottom:-1px;
    width:auto;
    height:90vh;
    max-width:none;
    max-height:none;
    transform:translateX(-50%);
    object-fit:contain;
    filter:grayscale(1) contrast(1.03);
    margin:0;
  }

  .hero-monogram{
    position:absolute;
    z-index:2;
    left:48%;
    top:47%;
    transform:translate(-50%,-50%);
    font:700 clamp(410px, 41vw, 700px)/.82 var(--display);
    letter-spacing:-.1em;
    color:rgba(255,255,255,.11);
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
  }

  .hero-monogram span{
    color:var(--teal-bright);
    display:inline-block;
    margin-left:.015em;
    opacity:1;
  }

  .hero-tag{
    display:block;
    position:absolute;
    z-index:9;
    right:2vw;
    bottom:48px;
    min-width:270px;
    padding:24px 28px;
    background:rgba(1,2,2,.96);
    color:#ffffff;
    font:500 11px/1.9 var(--mono);
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:0 20px 36px rgba(0,0,0,.18);
  }

  .hero-footer{
    position:absolute;
    left:4vw;
    bottom:18px;
    z-index:10;
    grid-column:auto;
    padding:0;
  }

  .scroll-cue{
    display:flex;
    align-items:center;
    gap:16px;
    font:500 12px/1 var(--mono);
    text-transform:uppercase;
    letter-spacing:.16em;
    color:#ffffff;
  }
}


/* Personal-brand image alignment fix */
.personal-brand{
  align-items:start;
}
.personal-image{
  height:auto;
  aspect-ratio:4 / 5;
  align-self:start;
  overflow:hidden;
  transform:none !important;
}
.personal-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
  transform:none;
  filter:grayscale(1);
}
.personal-copy{
  align-self:start;
}
@media(max-width:900px){
  .personal-image{aspect-ratio:16 / 10;height:auto}
  .personal-image img{object-position:center 26%}
}
@media(max-width:720px){
  .personal-image{aspect-ratio:4 / 5;height:auto}
  .personal-image img{object-position:center 22%}
}


/* Mobile optimization pass */
@media (max-width: 900px){
  html{scroll-padding-top:72px}
  body{overflow-x:hidden}
  .site-header{height:72px;padding:0 20px;background:rgba(8,10,10,.94);backdrop-filter:blur(14px)}
  .brand-mark{font-size:31px;position:relative;z-index:42}
  .nav-toggle{display:block;position:relative;z-index:42;width:38px;height:38px;padding:7px;background:none;border:0}
  .nav-toggle span{display:block;width:24px;height:1px;background:#fff;margin:7px auto;transition:transform .25s ease,opacity .25s ease}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .site-nav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);height:100dvh;padding:112px 30px 36px;background:#090b0b;display:flex;flex-direction:column;align-items:flex-start;gap:30px;transform:translateX(100%);right:auto;transition:transform .32s cubic-bezier(.22,.61,.36,1);box-shadow:-24px 0 70px rgba(0,0,0,.45);z-index:41}
  .site-nav.open{transform:translateX(0)}
  .site-nav a{font-size:14px;width:100%;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .section-pad{padding:78px 22px}
  .hero{min-height:auto;padding:104px 22px 28px;display:block;background:radial-gradient(circle at 66% 58%,#313636 0,#181c1c 34%,#090b0b 75%)}
  .hero::before{inset:72px 0 0;background:linear-gradient(132deg,transparent 0 17%,rgba(255,255,255,.12) 17.5% 31%,transparent 31.5%);filter:blur(5px);opacity:.65}
  .hero::after{display:none}
  .hero-copy{padding:28px 0 0;max-width:none}
  .hero .eyebrow{font-size:11px;letter-spacing:.13em;margin-bottom:18px}
  .hero h1{font-size:clamp(62px,19vw,88px);line-height:.82;margin:18px 0 22px;max-width:100%}
  .hero-intro{font-size:16px;line-height:1.6;max-width:33rem;margin-bottom:28px}
  .hero-work-link{font-size:12px}
  .hero-visual{height:560px;min-height:560px;margin:18px -22px 0;overflow:hidden;transform:none !important}
  .hero-visual img{position:absolute;left:50%;bottom:-10px;width:auto;height:540px;max-width:none;transform:translateX(-50%);object-fit:contain}
  .hero-monogram{left:50%;top:45%;transform:translate(-50%,-50%);font-size:clamp(230px,72vw,360px);color:rgba(255,255,255,.09)}
  .hero-tag{right:18px;bottom:20px;min-width:214px;padding:15px 17px 13px;font-size:10px;line-height:1.85}
  .hero-footer{position:absolute;left:22px;bottom:26px;padding:0;z-index:10}
  .scroll-cue{font-size:10px}.mouse-icon{width:24px;height:38px;padding-top:7px}
  .intro-grid,.brands-head,.feature-case,.expertise,.experience-grid,.personal-brand,.hire-me{grid-template-columns:1fr}
  .intro-grid{gap:28px;margin-top:26px}
  .display-heading{font-size:clamp(42px,12vw,62px);line-height:.9}
  .intro-copy{font-size:17px;padding-top:0}
  .metrics{grid-template-columns:1fr 1fr}
  .metric-card{min-height:170px;padding:30px 22px}
  .metric-value{font-size:clamp(48px,14vw,70px)}
  .brands-head{gap:24px;margin:28px 0 44px}
  .brands-head h2,.section-heading-row h2,.expertise h2,.experience h2,.personal-copy h2{font-size:clamp(42px,12vw,64px);line-height:.94}
  .brand-marquee{padding:20px 0}.marquee-track{font-size:26px;gap:34px}
  .section-heading-row{align-items:flex-start;gap:24px;flex-direction:column;margin-bottom:34px}
  .feature-case{min-height:auto}.case-media{min-height:360px;background-position:center 35%}
  .case-copy,.compact{padding:30px 24px}
  .case-copy h3,.compact h3{font-size:clamp(34px,10vw,50px)}
  .case-results{grid-template-columns:repeat(3,1fr);gap:10px}.case-results strong{font-size:23px}
  .case-grid{grid-template-columns:1fr}.compact{min-height:auto}
  .expertise{gap:32px}.expertise-number{font-size:130px}.expertise-main h2{margin:18px 0 38px}
  .accordion-item button{padding:20px 0;font-size:19px;gap:16px}
  .experience-grid{gap:34px}.timeline-item{grid-template-columns:1fr;gap:8px;padding:26px 0}.timeline-item h3{font-size:25px}
  .personal-brand{gap:38px;align-items:start}
  .personal-image{height:auto;aspect-ratio:4/5;overflow:hidden}
  .personal-image img{width:100%;height:100%;object-fit:cover;object-position:center 24%;transform:none}
  .personal-copy p{font-size:17px}.personal-copy blockquote{font-size:23px;margin-top:32px}
  .hire-me{gap:32px}.hire-me h2{font-size:clamp(50px,15vw,76px)}
  .site-footer{padding:26px 22px;gap:14px;flex-direction:column;align-items:flex-start}
  .cursor-glow{display:none}
}

@media (max-width: 600px){
  .section-pad{padding:66px 18px}
  .hero{padding:96px 18px 22px}
  .hero-visual{margin-left:-18px;margin-right:-18px;height:500px;min-height:500px}
  .hero-visual img{height:485px;bottom:-4px}
  .hero-monogram{font-size:clamp(205px,76vw,310px);top:44%}
  .hero-tag{right:10px;bottom:16px;min-width:194px;padding:13px 14px 11px}
  .hero-footer{left:18px;bottom:20px}
  .metrics{grid-template-columns:1fr}
  .metric-card{min-height:145px}
  .case-media{min-height:300px}
  .case-results{grid-template-columns:1fr;gap:14px}
  .case-results li{padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
  .case-results li:last-child{border-bottom:0}
  .expertise-number{font-size:112px}
  .personal-image{aspect-ratio:1/1.18}
  .button{width:100%;justify-content:space-between}
}

@media (max-width: 390px){
  .hero h1{font-size:58px}
  .hero-intro{font-size:15px}
  .hero-visual{height:465px;min-height:465px}
  .hero-visual img{height:450px}
  .hero-tag{font-size:9px;min-width:180px}
  .display-heading{font-size:39px}
}

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

/* Mobile navigation containment fix */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 720px) {
  .site-header {
    overflow: visible;
  }

  .site-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(86vw, 360px) !important;
    max-width: calc(100vw - 44px);
    height: 100dvh !important;
    margin: 0 !important;
    transform: translate3d(calc(100% + 40px), 0, 0) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: transform;
    transition:
      transform .32s cubic-bezier(.22,.61,.36,1),
      opacity .2s ease,
      visibility 0s linear .32s;
  }

  .site-nav.open {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform .32s cubic-bezier(.22,.61,.36,1),
      opacity .2s ease,
      visibility 0s;
  }

  .nav-toggle {
    position: relative;
    z-index: 43;
  }
}