@import url("base.css");
@import url("video-previews.css");
@import url("identity-case.css");
@import url("design-viewer-fit.css");
@import url("experience-photos.css");
@import url("glass-labels.css");

body { background:radial-gradient(900px 620px at 82% 5%,rgb(62 105 142 / .12),transparent 68%),radial-gradient(850px 680px at 12% 52%,rgb(57 87 112 / .06),transparent 72%),radial-gradient(760px 620px at 88% 92%,rgb(49 83 112 / .06),transparent 72%),linear-gradient(155deg,#04060e,#080f1c 48%,#04070d);background-attachment:fixed; }
.availability-pill{display:inline-flex;align-items:center;width:max-content;padding:9px 13px;border:1px solid #8bcfff55;border-radius:999px;background:#0c1b36b8;box-shadow:inset 0 1px #ffffff1c,0 10px 24px #001a4733;backdrop-filter:blur(12px)}.availability-pill i{margin-right:8px}.lead strong{color:#f0f7ff;font-weight:700}

/* Home credentials: a stronger hierarchy without changing the bar's layout. */
.facts b{font-size:27px;color:#fff}.facts span{color:#cbd5e1}@media(max-width:600px){.facts b{font-size:22px}}

/* Identity cards: clearer supporting labels with a compact, consistent rhythm. */
.identity-grid small{margin-top:4px;color:#b8c7da}

/* Keep credential headings on a shared baseline when supporting copy wraps differently. */
.facts article{align-items:flex-start}

/* Photo avatar and year labels used throughout the identity project grid. */
.brand>b{overflow:hidden;padding:0}.brand>b img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.08)}.identity-art{position:relative}.identity-art .identity-year{position:absolute;top:12px;right:12px;z-index:2;margin:0}

/* A more energetic availability signal, while keeping the heading's scripted phrase intact. */
.availability-pill{border-color:#3576b4;background:linear-gradient(135deg,#0c2c54b8,#091a33cc);box-shadow:inset 0 1px #b9e6ff1c,0 6px 18px #075cff26;cursor:default;transition:transform .28s var(--ease),background .28s,border-color .28s,box-shadow .28s}.availability-pill:hover{transform:translateY(-2px) rotate(-.5deg);border-color:#76b5ee;background:linear-gradient(135deg,#0d3d78,#09234a);box-shadow:0 10px 22px #075cff42,inset 0 1px #d9f2ff33}.availability-pill:hover i{transform:scale(1.2);box-shadow:0 0 12px #61dfff}.availability-pill i{transition:transform .28s var(--ease),box-shadow .28s}.hero h1{font-weight:500}
.availability-pill{border-color:rgb(170 215 245 / .36);background:rgb(15 31 49 / .46);box-shadow:inset 0 1px rgb(255 255 255 / .16);backdrop-filter:blur(14px);cursor:default;transition:border-color .2s,background .2s}.availability-pill:hover{transform:none;border-color:rgb(190 226 250 / .5);background:rgb(21 40 60 / .52);box-shadow:inset 0 1px rgb(255 255 255 / .18)}.availability-pill i,.availability-pill:hover i{transform:none;box-shadow:none}.hero h1{font-weight:500}
.availability-link{color:#d8e9fb;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s!important}.availability-link b{display:inline-block;margin-left:8px;color:#70c9ff;font-size:15px;line-height:1;opacity:0;transform:translateX(-7px);transition:opacity .25s,transform .25s}.availability-link:hover{transform:translateY(-3px) rotate(-1deg)!important;border-color:#79caff!important;background:#0b3a70c9!important;box-shadow:0 10px 24px #075cff4d,inset 0 1px #ffffff38!important}.availability-link:hover i{animation:availabilityPulse .9s ease-in-out infinite!important;box-shadow:0 0 14px #58e7d2!important}.availability-link:hover b{opacity:1;transform:translateX(0)}

/* Contact footer: a restrained framed panel inspired by the supplied reference. */
.cta{margin-top:54px;padding:24px 0;background:transparent;box-shadow:none}.cta-inner{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:52px;padding:52px;border:1px solid #ffffff1c;border-radius:22px;background:radial-gradient(620px 380px at 4% 0,#0e347744,transparent 66%),#070d18;box-shadow:inset 0 1px #ffffff09,0 24px 70px #0005}.cta .eyebrow{color:#69baff}.cta h2{font-size:clamp(44px,5vw,68px);line-height:1.03}.cta h2 em{background:linear-gradient(105deg,#57aaff,#e8f4ff 58%,#75b7ff);color:transparent;background-clip:text}.cta-copy>p:not(.eyebrow){max-width:650px;color:#9eacc0}.cta-expertise li{border-color:#5b79a455;background:#0e192b;color:#c8d6e9}.cta .actions{margin-top:28px}.cta .button{min-height:50px;border-radius:10px;font-weight:600}.cta .white{background:#2563eb;color:#fff;border:1px solid #4c8dff;box-shadow:0 12px 24px #1d4ed84d}.cta .white:hover{background:#3474f4;box-shadow:0 15px 28px #1d4ed875}.cta .ghost{border-color:#ffffff22;background:#141d2c;color:#dbe7f7}.cta .ghost:hover{border-color:#ffffff42;background:#1b273a}.cta small{color:#8494aa}.cta-proof{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}.cta-proof .eyebrow{margin-bottom:10px}.cta-proof div{padding:16px 0;border-color:#ffffff18}.cta-proof strong{font-size:16px}.cta-proof span{color:#8fa0b8}@media(max-width:760px){.cta{padding:18px 0}.cta-inner{grid-template-columns:1fr;gap:30px;padding:34px 26px;border-radius:18px}.cta-proof{margin-top:0}}

.cta-navigation nav{display:grid;border-top:1px solid #ffffff18}.cta-navigation nav a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #ffffff18;color:#dce9fa;font-size:16px;font-weight:600;text-decoration:none;transition:color .2s,transform .2s}.cta-navigation nav a span{color:#69baff}.cta-navigation nav a:hover{color:#75c9ff;transform:translateX(4px)}.cta-copy>small{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center}.copyright-badge{display:block;color:#aebdd1;font-size:14px;line-height:1.5}.cta-copy .actions+.cta-expertise{margin:18px 0 0}

.cta-navigation nav .back-to-top{margin-top:16px;padding:10px 13px;border:1px solid #4e8fca77;border-radius:999px;background:#0b2344;color:#9bd6ff;font-size:13px}.cta-navigation nav .back-to-top:hover{border-color:#8fd0ff;background:#0d3970;color:#fff;transform:translateY(-2px)}

.cta-navigation nav .back-to-top{margin-top:22px;padding:0;border:0;border-radius:0;background:transparent;color:#93a6bd;font-size:13px}.cta-navigation nav .back-to-top:hover{background:transparent;color:#dce9fa;transform:translateX(3px)}

.cta-inner{gap:42px;padding:40px 44px}.cta h2{font-size:clamp(40px,4.3vw,58px)}.hero .button.outline{border-color:#ffffff22;background:#141d2c;color:#dbe7f7;box-shadow:none}.hero .button.outline:hover{border-color:#ffffff42;background:#1b273a;box-shadow:none}

/* Give the footer's primary contact action a clearer, more inviting target. */
.cta .button.white{min-width:210px;min-height:54px;padding:15px 30px;font-size:14px}
@media(max-width:600px){.cta .button.white{min-width:180px;min-height:52px;padding:14px 24px}}

/* Testimonials are temporarily hidden until final client quotes are ready. */
.testimonials{display:none}
.nav { position:sticky;top:0;z-index:100;height:84px; }
.nav::before { content:"";position:absolute;inset:8px -16px;z-index:-1;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(4,8,20,.72);box-shadow:0 14px 38px rgba(0,0,0,.18);backdrop-filter:blur(20px) saturate(125%); }
.stagger-item { opacity:0;filter:blur(4px);transform:translateY(14px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),filter .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:var(--stagger-delay,0ms); }
.stagger-item.is-clear { opacity:1;filter:blur(0);transform:none; }

.wrap {
  width: calc(100% - 48px);
  max-width: none;
  margin-inline: auto;
}

.reels {
  align-items: start;
}

.reel {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
}

.tiktok-reels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.tiktok-reels .tiktok-embed {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: #0d1326;
}

.youtube-reel, .vimeo-reel {
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  background: #0d1326;
}

.youtube-reel iframe, .vimeo-reel iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tiktok-reels .tiktok-embed,.youtube-reel,.vimeo-reel { border:1px solid rgba(255,255,255,.12);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s; }
.tiktok-reels .tiktok-embed:hover,.youtube-reel:hover,.vimeo-reel:hover { transform:translateY(-5px);border-color:rgba(117,201,255,.55);box-shadow:0 18px 48px rgba(0,82,255,.18),0 0 24px rgba(84,176,255,.08); }
.identity-grid>a:hover,.client-grid>a:hover,.reel:hover { filter:drop-shadow(0 12px 22px rgba(0,82,255,.13)); }

@media (max-width: 1050px) {
  .tiktok-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .tiktok-reels { grid-template-columns: 1fr; }
}

.thumb-row {
  height: auto;
  align-items: start;
}

.thumb-row img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Single native stats bar with subtle dividers only. */
.facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 34px 0 82px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts article {
  min-height: 92px;
  padding: 12px 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.facts article + article { border-left: 1px solid var(--line); }
.facts article:hover { transform: none; border-color: var(--line); background: transparent; }

@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts article:nth-child(3) { border-left: 0; }
  .facts article:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .facts { grid-template-columns: 1fr; }
  .facts article + article { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
}

.photo-track { display:grid!important;grid-template-rows:repeat(2,180px);grid-auto-flow:column;grid-auto-columns:290px;gap:12px; }
.photo-track div { width:auto!important;height:auto!important; }

.client-grid header>.client-logo { width:42px;height:42px;flex:0 0 42px;padding:4px;border:1px solid #3e82d8;border-radius:8px;background:white;object-fit:contain; }
.thumb-row.single-preview{grid-template-columns:1fr;height:auto;max-height:520px}.thumb-row.single-preview img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#071024}
.thumb-row.preview-four{grid-template-columns:repeat(4,minmax(0,1fr));height:auto}.thumb-row.preview-four img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.facts{border-top:0}


.hero-portrait.hero-portrait-unframed {
  width:min(380px,100%);
  height:auto;
  margin:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.hero-portrait-unframed::after { display:none; }
.hero-portrait-unframed::before{content:"";position:absolute;z-index:0;left:50%;top:46%;width:105%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#4f9fff2e 0,#1769d020 32%,transparent 68%);filter:blur(20px);transform:translate(calc(-50% - 50px),calc(-50% + 24px));pointer-events:none}.hero-portrait-unframed img{position:relative;z-index:1}
.hero-portrait.hero-portrait-unframed img,
.hero-portrait.hero-portrait-unframed:hover img {
  display:block;
  width:100%;
  height:auto;
  max-height:540px;
  object-fit:contain;
  transform:none;
  filter:none;
}
@media(min-width:901px) {
  .hero-portrait.hero-portrait-unframed img,
  .hero-portrait.hero-portrait-unframed:hover img {
    width:110%;
    max-width:none;
    max-height:none;
    margin-left:-16%;
  }
}
@media(max-width:900px) {
  .hero-portrait.hero-portrait-unframed { justify-self:center; }
  .hero-portrait.hero-portrait-unframed img { max-height:460px; }
}

/* Keep every page comfortably inside a phone viewport and remove desktop-sized air. */
@media(max-width:600px){
  .wrap{width:calc(100% - 24px)}
  .section{padding:52px 0}
  .section-top{gap:18px}
  .facts{padding:18px 0 42px}
  .testimonials{padding:52px 0}
  .cta{margin-top:26px;padding:12px 0}
  .cta-inner{grid-template-columns:1fr;gap:30px;padding:28px 22px}
  .cta h2{font-size:clamp(34px,10vw,44px)}
}

/* One persistent top navigation across every page and breakpoint. */
.nav.site-navigation{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px;min-height:84px;padding:0}
.nav.site-navigation .brand{margin-right:auto}
.nav.site-navigation .tabs{position:static;display:flex;flex-direction:row;flex:0 1 auto;min-width:0;width:auto;padding:5px;transform:none;box-shadow:none}
.nav.site-navigation .tabs a{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:7px;padding:11px 15px;border-radius:999px;white-space:nowrap}
.nav.site-navigation .hire{flex:0 0 auto;white-space:nowrap}
.resume-nav-cta{border-color:transparent;background:var(--blue);color:#fff;box-shadow:0 8px 20px #075cff40}.resume-nav-cta:hover{border-color:transparent;background:#1769f4;color:#fff}
.nav.site-navigation .nav-toggle{display:none}

/* A quiet active state keeps navigation orientation clear without competing with content. */
.nav .tabs .active{
  background:rgb(100 190 255 / .24);
  box-shadow:inset 0 0 0 1px rgb(151 216 255 / .42);
  color:#fff;
}

@media(max-width:900px){
  body{padding-bottom:0}
  .nav.site-navigation{height:76px;min-height:76px;gap:12px}
  .nav.site-navigation .tabs{position:static;left:auto;bottom:auto;z-index:auto;width:auto;justify-content:initial;padding:4px;transform:none;background:#0d1326ba;border-color:var(--line);box-shadow:none}
  .nav.site-navigation .tabs a{padding:10px 12px;font-size:13px}
  .nav.site-navigation .nav-toggle{display:none}
}
@media(max-width:760px){
  .nav.site-navigation .brand>span{display:none}
  .nav.site-navigation .brand{margin-right:0}
  .nav.site-navigation .tabs a{gap:5px;padding:9px 9px;font-size:12px}
  .nav.site-navigation .tabs svg{width:14px;height:14px}
  .nav.site-navigation .hire{padding:10px 12px;font-size:12px}
}
@media(max-width:420px){
  .nav.site-navigation{height:68px;min-height:68px;gap:7px}
  .nav.site-navigation .brand{display:none}
  .nav.site-navigation .tabs{flex:1;gap:1px}
  .nav.site-navigation .tabs a{flex:1;gap:3px;padding:9px 4px;font-size:10px}
  .nav.site-navigation .tabs svg{display:none}
  .nav.site-navigation .hire{padding:9px 10px;font-size:11px}
  .nav.site-navigation::before{inset:4px -4px}
}

/* Viewport safety: wide media, grids, and animated artwork must never widen the page. */
html,body{max-width:100%;overflow-x:clip}
main,.wrap,.section-top,.hero,.work-layout,.about-hero,.cta-inner,.contact-main{max-width:100%;min-width:0}
.hero>*,.section-top>*,.work-layout>*,.about-hero>*,.cta-inner>*,.contact-main>*{min-width:0}
img,video,iframe{max-width:100%}

/* Keep below-the-fold media from delaying the landing page's first render. */
#identity,#social,#video,.about-section,.photo-marquee,.work-section,.cta{content-visibility:auto;contain-intrinsic-size:auto 760px}

/* Homepage entrance: navigation remains usable; the story unfolds in a single, paced sequence. */
.hero.hero-intro{--hero-intro-ease:cubic-bezier(.22,.61,.36,1);opacity:1;transform:none;transition:none}
html:not(.landing-seen) body:has(.hero) .site-navigation{opacity:0;transform:translateY(-20px);will-change:opacity,transform}
html:not(.landing-seen) body:has(.hero) .site-navigation.is-hero-nav-intro-ready{animation:heroNavIn .7s 3.05s cubic-bezier(.22,.61,.36,1) forwards}
.hero-intro .hero-word{display:inline-block;opacity:0;transform:translateY(.28em);filter:blur(4px);clip-path:inset(0 0 0 8%);will-change:opacity,transform,filter,clip-path}
.hero-intro h1 em .hero-word{background:linear-gradient(105deg,#4baeff,#eff7ff 58%,#4f91ff);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero-intro .availability-pill,.hero-intro .lead,.hero-intro .actions,.hero-intro .hero-portrait{opacity:0;will-change:opacity,transform}
.hero-intro .lead .hero-lead-word{display:inline-block;opacity:0;transform:translateY(.25em);filter:blur(2px);will-change:opacity,transform,filter}
.hero-intro .availability-pill{transform:translateY(10px)}
.hero-intro .lead{transform:translateY(14px)}
.hero-intro .actions{transform:translateY(12px)}
.hero-intro .hero-portrait{transform:translateX(48px)}
.hero-intro.is-hero-intro-ready .hero-heading-prefix{animation:heroHeadlineIn .4s 40ms var(--hero-intro-ease) forwards}
.hero-intro.is-hero-intro-ready .hero-heading-focus{animation:heroHeadlineIn .42s var(--hero-focus-delay) var(--hero-intro-ease) forwards}
.hero-intro.is-hero-intro-ready .hero-heading-connector{animation:heroHeadlineIn .32s 980ms var(--hero-intro-ease) forwards}
.hero-intro.is-hero-intro-ready .hero-heading-suffix{animation:heroHeadlineIn .4s 1.52s var(--hero-intro-ease) forwards}
.hero-intro.is-hero-intro-ready .lead{animation:heroCopyIn .28s 2.02s var(--hero-intro-ease) forwards}
.hero-intro.is-hero-intro-ready .hero-lead-word{animation:heroWordIn .26s calc(2.02s + var(--hero-lead-word-delay)) var(--hero-intro-ease) forwards}
.hero-intro.is-hero-intro-ready .availability-pill,.hero-intro.is-hero-intro-ready .actions{animation:heroCopyIn .52s 2.78s var(--hero-intro-ease) forwards}
.hero-intro.is-hero-intro-ready .hero-portrait{animation:heroPortraitIn .82s 3.05s var(--hero-intro-ease) forwards}
@keyframes heroHeadlineIn{to{opacity:1;transform:translateY(0);filter:blur(0);clip-path:inset(0)}}
@keyframes heroWordIn{to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes heroCopyIn{to{opacity:1;transform:translateY(0)}}
@keyframes heroPortraitIn{to{opacity:1;transform:translateX(0)}}
@keyframes heroNavIn{to{opacity:1;transform:translateY(0)}}
@keyframes availabilityPulse{50%{transform:scale(1.45);opacity:.65}}
html.landing-seen .hero{opacity:1;transform:none;transition:none}
.facts-intro article{opacity:0;transform:translateY(14px);filter:blur(3px);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1),filter .65s cubic-bezier(.22,.61,.36,1)}
.facts-intro.is-facts-intro-ready article{opacity:1;transform:none;filter:none}
.facts-intro.is-facts-intro-ready article:nth-child(2){transition-delay:90ms}
.facts-intro.is-facts-intro-ready article:nth-child(3){transition-delay:180ms}
.facts-intro.is-facts-intro-ready article:nth-child(4){transition-delay:270ms}
@media(prefers-reduced-motion:reduce){body:has(.hero) .site-navigation,.hero-intro .hero-word,.hero-intro .hero-lead-word,.hero-intro .availability-pill,.hero-intro .lead,.hero-intro .actions,.hero-intro .hero-portrait,.facts-intro article{opacity:1;transform:none;filter:none;animation:none!important}}

/* Keep every section action aligned to the final line of its introductory copy. */
@media(min-width:601px){
  .section-top .see{align-self:flex-end;margin-top:0}
}

/* Tablet navigation has one deliberate row: avatar, destinations, then Contact. */
@media(min-width:601px) and (max-width:900px){
  .nav.site-navigation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;height:72px;min-height:72px;gap:10px}
  .nav.site-navigation .brand{margin:0}
  .nav.site-navigation .brand>span{display:none}
  .nav.site-navigation .tabs{display:flex;justify-content:center;min-width:0;width:100%;padding:4px;overflow:hidden}
  .nav.site-navigation .tabs a{flex:1 1 0;min-width:0;gap:5px;padding:9px 5px;font-size:12px}
  .nav.site-navigation .tabs svg{width:14px;height:14px}
  .nav.site-navigation .hire{padding:10px 12px;font-size:12px}
  .nav.site-navigation .nav-toggle{display:none}
}

/* Continuous sizing between device breakpoints. */
.wrap{width:calc(100% - clamp(24px,4vw,64px));max-width:1600px;margin-inline:auto}
.a1{right:0;width:min(450px,100%)}
.a2{left:0;width:min(300px,100%)}
.availability-pill{max-width:100%;width:fit-content;font-size:clamp(9px,1.2vw,12px);line-height:1.5}
.availability-pill i{flex:none}
p,h1,h2,h3,.button,.org-link{overflow-wrap:break-word}

/* Keep display titles in Plus Jakarta Sans at the lighter section-heading weight. */
h1,h2{font-family:"Plus Jakarta Sans",sans-serif!important;font-weight:500!important}
h1 em,h2 em{font-family:"Instrument Serif",serif!important;font-weight:400!important}
.identity-grid,.client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.identity-grid>a,.client-grid>a,.facts article>div{min-width:0}
.identity-art{height:auto;aspect-ratio:4/3}
.section-top .see{flex:none}
.button{max-width:100%;justify-content:center}
@media(min-width:901px){
  .hero{min-height:470px;padding:18px 0 24px}
}
@media(max-width:1100px){
  .nav.site-navigation .brand>span{display:none}
  .hero{gap:30px}
}
@media(max-width:900px){
  .nav.site-navigation .tabs{top:auto;right:auto;bottom:auto;left:auto;flex-direction:row}
  .hero{min-height:0;padding:34px 0 42px;gap:26px}
  .hero-portrait.hero-portrait-unframed{width:min(300px,75%)}
  .hero-portrait.hero-portrait-unframed img{max-height:380px}
  .identity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .client-grid{grid-template-columns:minmax(0,1fr)}
  .cta-inner{grid-template-columns:minmax(0,1fr);gap:28px}
  .cta-mark{width:160px;height:160px;justify-self:center}
}
@media(max-width:600px){
  html{scroll-padding-top:84px}
  body{padding-top:76px}
  .nav.site-navigation{position:fixed;top:0;left:12px;right:12px;z-index:100;width:auto;margin:0;display:flex;height:68px;min-height:68px;gap:8px}
  .nav.site-navigation .brand{display:none}
  .nav.site-navigation .tabs{flex:1;align-items:center;justify-content:space-between;height:48px;padding:4px;gap:2px;border:1px solid var(--line);border-radius:999px;background:#0d1326ba}
  .nav.site-navigation .tabs a{flex:1;gap:4px;height:38px;min-height:38px;padding:0 5px;font-size:11px;border-radius:999px}
  .nav.site-navigation .tabs svg{width:13px;height:13px}
  .nav.site-navigation .hire{height:48px;min-height:48px;padding:0 12px;font-size:12px;border-radius:999px}
  .resume-nav-cta span{display:none}.resume-nav-cta{width:48px;justify-content:center;padding:0!important}
  /* With the profile mark hidden, the tab rail is the only needed mobile frame. */
  .nav.site-navigation::before{display:none}
  .hero h1{font-size:clamp(32px,8.5vw,48px);line-height:1.08}
  .hero-portrait.hero-portrait-unframed{width:min(240px,72%)}
  .hero-portrait.hero-portrait-unframed img{max-height:320px}
  .lead,.section-top p:not(.eyebrow){font-size:15px;line-height:1.65}
  .hero .actions{gap:9px}
  .button{padding:12px 15px;font-size:12px;min-height:44px}
  .identity-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .identity-grid>a{width:100%;max-width:360px;justify-self:center}
  .identity-grid b{font-size:20px}
  .client-grid>a{padding:14px}
  .client-grid b{font-size:16px}
  .thumb-row.preview-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts article{padding:16px 6px}
  .section-top .see{margin-top:16px;font-size:14px}
  .testimonial-heading{align-items:flex-end;gap:12px}
  .testimonial-heading h2{font-size:clamp(28px,7.5vw,38px)}
  .testimonial-controls button{width:36px;height:36px}
  .testimonial-card{width:min(320px,85vw);padding:20px}
  .testimonial-card blockquote{font-size:15px}
  .cta-inner{padding:26px 18px;border-radius:16px}
  .cta p:not(.eyebrow){font-size:15px}
  .cta .button{font-size:12px}
}
@media(max-width:380px){
  .nav.site-navigation .tabs svg{display:none}
  .nav.site-navigation .tabs a{font-size:10px}
  .nav.site-navigation .hire{padding-inline:10px;font-size:11px}
  .testimonial-heading{flex-wrap:wrap}
}

/* Final mobile containment: prevent any desktop grid track or visual from
   creating a horizontal canvas on narrow devices. */
@media (max-width: 600px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { position: relative; }

  .wrap { width: calc(100% - 24px); max-width: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-portrait, .hero-portrait.hero-portrait-unframed { min-width: 0; max-width: 100%; }
  .hero-portrait.hero-portrait-unframed { justify-self: center; }
  .hero-portrait.hero-portrait-unframed::before { width: 100%; transform: translate(-50%, -50%); }

  .nav.site-navigation { min-width: 0; }
  .nav.site-navigation .tabs { min-width: 0; overflow: hidden; }
  .nav.site-navigation .tabs a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  .identity-grid, .client-grid, .reels { width: 100%; min-width: 0; }
  .facts article, .identity-grid > a, .client-grid > a, .reel { min-width: 0; }
}

.home-experience-preview{padding-top:22px}.home-experience-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}.home-experience-list article{padding:20px;border:1px solid var(--line);border-radius:12px;background:#0b1429}.home-experience-list header{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px}.home-experience-list header img{width:58px;height:58px;border:1px solid #ffffff25;border-radius:8px;background:#fff;object-fit:contain}.home-experience-list h3{margin:0;font-size:17px}.home-experience-list header div p,.home-experience-description{margin:3px 0 0;color:#aebdd1;font-size:13px;line-height:1.55}.home-experience-year{align-self:start}.home-experience-description{margin-top:16px}
@media(max-width:600px){.home-experience-list{grid-template-columns:1fr;gap:12px}.home-experience-list article{padding:16px}.home-experience-list header{grid-template-columns:50px minmax(0,1fr) auto;gap:11px}.home-experience-list header img{width:50px;height:50px}.home-experience-list h3{font-size:16px}}