/* ============================================
   KHALID XAIFI — PORTFOLIO
   Tokens
   ============================================ */
:root{
  --bg: #f3f2ee;
  --ink: #0b0b0b;
  --orange: #ff4a1c;
  --orange-deep: #e23d12;
  --line: rgba(11,11,11,0.14);
  --cream-card: #ffffff;

  --display: "Anton", Impact, "Arial Black", sans-serif;
  --body: "Rajdhani", Inter, sans-serif;
  --mono: "JetBrains Mono", monospace;

  --frame-pad: 14px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 26px;

  --ease: cubic-bezier(.16,.84,.32,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--ink);
  font-family:var(--body);
  font-weight:500;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ display:block; max-width:100%; }

::selection{ background:var(--orange); color:var(--bg); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

/* ============================================
   GRAIN
   ============================================ */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--orange); z-index:9998; transition:width .08s linear;
}

/* ============================================
   LOADER
   ============================================ */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.hidden{ opacity:0; visibility:hidden; }
.loader-inner{ text-align:center; }
.loader-word{
  font-family:var(--display);
  color:var(--bg);
  font-size:clamp(2.5rem, 8vw, 5rem);
  letter-spacing:.01em;
  display:inline-block;
  opacity:0;
  animation:loaderWordIn .5s var(--ease) .1s forwards;
}
@keyframes loaderWordIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.loader-line{
  width:0; height:3px; background:var(--orange);
  margin:14px auto 10px; animation:loaderSweep .6s var(--ease) .35s forwards;
}
@keyframes loaderSweep{ to{ width:180px; } }
.loader-tag{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.25em;
  color:var(--orange); opacity:0; display:block;
  animation:loaderWordIn .4s var(--ease) .55s forwards;
}

/* ============================================
   FRAME
   ============================================ */
.frame{
  position:relative;
  background:var(--bg);
  border:var(--frame-pad) solid var(--ink);
  border-radius:var(--radius);
  margin:10px;
  overflow:hidden;
}

.bg-circle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,74,28,0.10), rgba(255,74,28,0) 70%);
  pointer-events:none; z-index:0;
}
.c1{ width:520px; height:520px; top:-120px; right:-160px; }
.c2{ width:360px; height:360px; top:60vh; left:-140px; }
.c3{ width:300px; height:300px; top:150vh; right:-100px; }

/* signal spine — signature element */
.signal-spine{
  display:none;
}
.signal-spine path{
  fill:none; stroke:var(--orange); stroke-width:2;
  stroke-dasharray:1 1;
  vector-effect:non-scaling-stroke;
}
@media (max-width:900px){ .signal-spine{ display:none; } }

/* ============================================
   NAV
   ============================================ */
.nav{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,48px);
  opacity:0; transform:translateY(-16px);
}
.nav.in{ animation:navIn .6s var(--ease) forwards; }
@keyframes navIn{ to{ opacity:1; transform:translateY(0); } }

.nav-left, .nav-right{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.nav-plus{ font-family:var(--mono); font-size:.85rem; }
.nav-link{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  position:relative; padding-bottom:3px;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--orange); transition:width .3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-resume{
  border:1.5px solid var(--ink); border-radius:20px; padding:6px 16px;
}

.hamburger{
  width:36px; height:36px; border:1.5px solid var(--ink); border-radius:50%;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.hamburger span{ width:14px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.hamburger.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:50;
  background:var(--ink); color:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 32px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-link{
  font-family:var(--display); font-size:clamp(2rem,9vw,3rem);
  display:flex; align-items:baseline; gap:14px;
  padding:10px 0; border-bottom:1px solid rgba(243,242,238,.15);
  color:var(--bg);
}
.mobile-link span{ font-family:var(--mono); font-size:.9rem; color:var(--orange); }

/* ============================================
   SQUARE BUTTON
   ============================================ */
.btn-square{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--ink); color:var(--bg);
  padding:15px 22px; border-radius:6px;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn-square:hover{ background:var(--orange-deep); }
.btn-square .btn-arrow{
  display:inline-block; transition:transform .35s var(--ease);
}
.btn-square:hover .btn-arrow{ transform:translateX(6px); }
.btn-square.small{
  width:42px; height:42px; padding:0; justify-content:center; border-radius:8px;
}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative; z-index:2;
  min-height:calc(100vh - 28px);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:0 clamp(20px,4vw,48px) 30px;
}

.hero-vnum{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:.75rem;
  margin:6px 0 0 0; writing-mode:vertical-rl;
  position:absolute; left:clamp(20px,4vw,48px); top:110px;
}
.hero-vnum .vline{ width:1px; height:60px; background:var(--ink); }

.hero-main{
  display:grid; grid-template-columns:1.05fr 1fr;
  align-items:center; gap:clamp(20px,4vw,40px);
  flex:1; padding-top:20px;
}

.hero-word{ line-height:.85; }
.mask{ display:block; overflow:hidden; }
.mask-inner{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(4.2rem, 11vw, 9.5rem);
  color:var(--ink);
  transform:translateY(100%);
  animation:maskReveal .9s var(--ease) .15s forwards;
}
@keyframes maskReveal{ to{ transform:translateY(0); } }

.hero-role{
  font-family:var(--body); font-weight:600; font-size:clamp(1.1rem,2vw,1.5rem);
  margin-top:10px; letter-spacing:.01em;
}
.hero-focus{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-deep); margin-top:10px;
}
.hero-desc{
  max-width:480px; margin-top:22px; font-size:1rem; line-height:1.55; color:rgba(11,11,11,.78);
}
.hero-text .btn-square{ margin-top:28px; }

.hero-visual{ position:relative; height:clamp(340px,52vw,560px); }
.orange-block{
  position:absolute; top:8%; right:0; width:78%; height:70%;
  background:var(--orange); border-radius:10px;
  transform:translateX(60px); opacity:0;
}
.orange-block.in{ animation:blockSlide .8s var(--ease) .25s forwards; }
@keyframes blockSlide{ to{ transform:translateX(0); opacity:1; } }

.hero-photo-wrap{
  position:absolute; top:-7%; left:-18%; right:-4%; bottom:22%;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transform:translateY(26px);
}
.hero-photo-wrap.in{ animation:photoIn 1s var(--ease) .45s forwards; }
@keyframes photoIn{ to{ opacity:1; transform:translateY(0); } }
.hero-photo{
  height:124%;
  max-width:none;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.18));
  transform:none !important;
}

.hero-micro{
  position:absolute; right:0; bottom:-8px;
  text-align:right; font-family:var(--mono);
}
.micro-name{ font-size:.85rem; font-weight:700; }
.micro-loc, .micro-focus{ font-size:.68rem; color:rgba(11,11,11,.6); margin-top:2px; }
.hero-socials{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.social-dot{
  width:28px; height:28px; border:1.5px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  transition:background .25s, color .25s;
}
.social-dot:hover{ background:var(--ink); color:var(--bg); }

.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.2em;
  margin:0 auto; color:rgba(11,11,11,.55);
}
.scroll-line{ width:1px; height:34px; background:var(--ink); animation:scrollPulse 1.8s ease-in-out infinite; }
@keyframes scrollPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ============================================
   SECTION SHELL
   ============================================ */
.section{
  position:relative; z-index:2;
  padding:120px clamp(20px,4vw,48px);
  border-top:1px solid var(--line);
}
.section-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:36px; color:rgba(11,11,11,.6);
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none; }

.huge-text{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.4rem, 9vw, 7.5rem);
  line-height:.86; letter-spacing:-.01em;
  color:var(--ink);
}
.huge-orange{ color:var(--orange); }

/* reveal utility classes (toggled by JS) */
.reveal-up{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-up.visible{ opacity:1; transform:translateY(0); }

.slide-left{ opacity:0; transform:translateX(-60px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.slide-left.visible{ opacity:1; transform:translateX(0); }

.clip-reveal{ clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease); }
.clip-reveal.visible{ clip-path:inset(0 0 0% 0); }

/* ============================================
   ABOUT
   ============================================ */
.about-grid{
  display:grid; grid-template-columns:.9fr 1fr .8fr; gap:clamp(20px,4vw,40px);
  align-items:start;
}
.about-copy p{ font-size:1.05rem; line-height:1.6; max-width:440px; }
.micro-block{ margin-top:34px; display:flex; flex-direction:column; gap:10px; }
.micro-row{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:rgba(11,11,11,.65);
}
.thin-line{ width:100%; height:1px; background:var(--line); margin-top:30px; }
.about-image{
  position:relative;
  border-radius:14px;
  overflow:visible;
  aspect-ratio:5/3;
  background:transparent;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-top:clamp(120px, 11vw, 180px);
}
.about-image.clip-reveal.visible{
  clip-path:inset(-90% -12% 0 -12%);
}
.about-image::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:100%;
  border-radius:14px;
  background:linear-gradient(135deg, #101010, #383838);
  z-index:0;
}
.about-photo{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:1;
  width:auto;
  height:205%;
  max-width:none;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.22));
}
.about-photo.duotone{ filter:none; mix-blend-mode:normal; }

/* ============================================
   PORTFOLIO
   ============================================ */
.portfolio-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:60px; flex-wrap:wrap;
}
.portfolio-note{ max-width:280px; font-size:.95rem; line-height:1.5; color:rgba(11,11,11,.7); }

.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.work-card{
  background:var(--cream-card); border:1.5px solid var(--ink); border-radius:16px;
  padding:26px; display:flex; flex-direction:column; gap:14px; min-height:400px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
}
.work-card:hover{ box-shadow:10px 14px 0 var(--ink); }
.work-num{ font-family:var(--mono); font-size:.8rem; color:var(--orange-deep); }
.work-visual{
  height:150px; border-radius:10px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line);
}
.node-svg{ width:80%; height:80%; }
.node-svg circle{ fill:var(--orange); }
.node-svg line{ stroke:var(--ink); stroke-width:1.4; }
.node-svg .ring{ fill:none; stroke:var(--orange); stroke-width:3; }
.work-title{ font-family:var(--body); font-weight:700; font-size:1.25rem; }
.work-desc{ font-size:.9rem; line-height:1.5; color:rgba(11,11,11,.72); flex:1; }
.work-role{ font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(11,11,11,.5); }

/* ============================================
   AXIS MOTION LAB — scroll-driven 3D feature
   Not a project card: a full-width visual scene.
   Desktop: a tall "scroll track" pins the scene via
   position:sticky while the user scrolls through it,
   so the arm's pose animates in place. Mobile: sticky
   is disabled and the track height collapses to avoid
   any dead scroll space — the same progress formula
   in script.js still drives the pose either way.
   ============================================ */
.motion-lab-section{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.ml-scroll-track{
  position:relative;
  height:220vh; /* scroll distance available to "scrub" the pose on desktop */
}
.ml-sticky{
  position:sticky; top:0;
  height:100vh;
  display:flex; align-items:center;
  padding:0 clamp(20px,4vw,48px);
}
.ml-grid{
  width:100%;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,56px);
  align-items:center;
}

.ml-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-deep);
}
.ml-headline{
  font-family:var(--display); font-weight:400; color:var(--ink);
  font-size:clamp(2.4rem, 4.6vw, 4rem);
  line-height:.95; letter-spacing:-.01em; margin-top:18px;
}
.ml-desc{ font-size:1rem; line-height:1.6; color:rgba(11,11,11,.75); margin-top:20px; max-width:400px; }
.ml-micro{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.ml-chip{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:16px; padding:6px 12px; color:rgba(11,11,11,.6);
}

/* live scroll-activation readout — reflects the same progress value driving the arm */
.ml-activation{
  display:flex; align-items:center; gap:12px; margin-top:32px; max-width:320px;
}
.ml-activation-label{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; color:rgba(11,11,11,.5); flex:none;
}
.ml-activation-track{
  flex:1; height:2px; background:var(--line); position:relative; border-radius:2px; overflow:hidden;
}
.ml-activation-fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:var(--orange); transition:width .05s linear;
}
.ml-activation-pct{
  font-family:var(--mono); font-size:.68rem; font-weight:700; color:var(--orange-deep); width:38px; text-align:right; flex:none;
}

.ml-right{ position:relative; height:min(64vh, 620px); }
.ml-canvas-wrap{
  position:relative; width:100%; height:100%;
  border-radius:18px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, rgba(255,74,28,0.14), rgba(255,74,28,0) 62%), var(--bg);
  border:1.5px solid var(--ink);
}
#armCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ml-corner{ position:absolute; width:18px; height:18px; pointer-events:none; }
.ml-corner.tl{ top:16px; left:16px; border-top:1.5px solid var(--orange); border-left:1.5px solid var(--orange); }
.ml-corner.br{ bottom:16px; right:16px; border-bottom:1.5px solid var(--orange); border-right:1.5px solid var(--orange); }

/* ============================================
   EXPERIENCE
   ============================================ */
.exp-layout{ display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:start; }
.exp-vertical{ writing-mode:vertical-rl; justify-self:end; align-self:center; }

.timeline{ position:relative; padding-left:34px; margin-top:20px; }
.timeline-line{
  position:absolute; left:6px; top:0; width:1.5px; height:0%;
  background:var(--orange); transition:height 1.2s var(--ease);
}
.timeline-item{
  position:relative; padding-bottom:52px;
}
.timeline-item::before{
  content:''; position:absolute; left:-34px; top:4px; width:9px; height:9px;
  border-radius:50%; background:var(--ink); border:2px solid var(--orange);
}
.t-phase{ font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; color:var(--orange-deep); }
.timeline-item h4{ font-family:var(--body); font-weight:700; font-size:1.3rem; margin-top:8px; }
.timeline-item p{ margin-top:8px; font-size:.92rem; line-height:1.5; max-width:420px; color:rgba(11,11,11,.72); }

/* ============================================
   SERVICES
   ============================================ */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px;
}
.service-card{
  border:1px solid var(--line); border-radius:14px; padding:26px;
  position:relative; overflow:hidden;
}
.service-card::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--orange);
  transition:width .4s var(--ease);
}
.service-card:hover::after{ width:100%; }
.s-num{ font-family:var(--mono); font-size:.7rem; color:rgba(11,11,11,.4); }
.service-card h4{ font-family:var(--body); font-weight:700; font-size:1.1rem; margin-top:10px; }
.service-card p{ font-size:.88rem; margin-top:8px; color:rgba(11,11,11,.65); line-height:1.45; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:50px; }
.chip{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  border:1px solid var(--ink); border-radius:20px; padding:8px 16px;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.chip:hover{ background:var(--ink); color:var(--bg); }

/* ============================================
   CONNECT / SOCIAL
   ============================================ */
.connect-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.connect-thumb{
  width:120px; height:150px; border-radius:10px; overflow:hidden; border:1.5px solid var(--ink);
  background:var(--ink); flex:none;
}
.connect-photo{ width:100%; height:100%; object-fit:cover; object-position:top; }

.connect-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px;
}
.connect-card{
  display:block; border:1.5px solid var(--ink); border-radius:14px; padding:24px;
  background:var(--cream-card);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.connect-card:hover{
  transform:translateY(-6px);
  border-color:var(--orange);
  box-shadow:8px 10px 0 var(--ink);
}
.cc-top{ display:flex; align-items:center; justify-content:space-between; }
.cc-num{ font-family:var(--mono); font-size:.75rem; color:var(--orange-deep); }
.cc-arrow{ pointer-events:none; }
.cc-label{
  font-family:var(--body); font-weight:700; font-size:1.15rem; letter-spacing:.04em;
  margin-top:20px; text-transform:uppercase;
}
.cc-text{ font-size:.88rem; line-height:1.5; color:rgba(11,11,11,.7); margin-top:10px; }

.cc-phone-row{
  margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.cc-phone{ font-family:var(--mono); font-size:.82rem; font-weight:700; }
.copy-btn{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid var(--ink); border-radius:20px; padding:7px 14px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.copy-btn:hover{ background:var(--ink); color:var(--bg); }
.copy-btn.copied{ background:var(--orange); border-color:var(--orange); color:var(--ink); }

.availability-card{
  margin-top:36px; display:flex; gap:14px; align-items:flex-start;
  border:1px solid var(--line); border-radius:14px; padding:24px 26px;
}
.availability-card .dot{ margin-top:7px; }
.availability-card h4{ font-family:var(--body); font-weight:700; font-size:1.05rem; }
.availability-list{
  list-style:none; margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px;
}
.availability-list li{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:rgba(11,11,11,.7);
  position:relative; padding-left:14px;
}
.availability-list li::before{
  content:''; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%; background:var(--orange);
}

/* ============================================
   CONTACT
   ============================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.contact-cta{ font-size:1.4rem; font-weight:600; max-width:420px; line-height:1.35; }
.contact-rows{ margin-top:34px; display:flex; flex-direction:column; gap:16px; }
.c-row{ display:flex; gap:16px; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:12px; }
.c-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:rgba(11,11,11,.5); width:90px; flex:none; }
.c-value{ font-size:1rem; font-weight:600; }
a.c-value:hover{ color:var(--orange-deep); }
.contact-info .btn-square{ margin-top:32px; }
.globe-icon{
  width:90px; height:90px; margin-top:40px; opacity:.85;
}
.globe-icon circle, .globe-icon ellipse, .globe-icon line{
  fill:none; stroke:var(--ink); stroke-width:1.2;
}

.footer{
  margin-top:100px; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; color:rgba(11,11,11,.5);
  border-top:1px solid var(--line); padding-top:20px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1100px){
  .about-grid{ grid-template-columns:1fr 1fr; }
  .about-image{ grid-column:span 2; aspect-ratio:5/3; margin-top:48px; }
  .about-image.clip-reveal.visible{ clip-path:inset(-55% 0 0 0); }
  .about-photo{ height:155%; }
  .work-grid{ grid-template-columns:1fr 1fr; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .connect-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:1300px) and (min-width:1101px){
  .about-grid{
    grid-template-columns:.75fr 1fr;
  }
  .about-image{
    grid-column:1 / -1;
    justify-self:end;
    width:min(620px, 56vw);
    aspect-ratio:5/3;
    margin-top:72px;
  }
  .about-image.clip-reveal.visible{
    clip-path:inset(-55% 0 0 0);
  }
  .about-photo{
    height:155%;
  }
}

@media (max-width:900px){
  .connect-grid{ grid-template-columns:1fr; }
  .availability-list{ grid-template-columns:1fr; }
  .nav-left{ gap:14px; }
  .nav-link:not(.nav-resume){ display:none; }
  .hamburger{ display:flex; }
  .hero-vnum{ display:none; }
  .hero-main{ grid-template-columns:1fr; }
  .hero-visual{ order:2; height:380px; margin-top:20px; }
  .hero-photo-wrap{ left:-10%; right:-6%; top:-4%; bottom:22%; }
  .hero-text{ order:1; }
  .exp-layout{ grid-template-columns:1fr; }
  .exp-vertical{ writing-mode:horizontal-tb; justify-self:start; margin-top:20px; }
  .contact-grid{ grid-template-columns:1fr; }

  /* AXIS Motion Lab: disable the sticky scrub on touch/tablet so there is
     no dead scroll space — the section becomes a normal stacked block.
     script.js uses the same progress formula either way. */
  .ml-scroll-track{ height:auto; }
  .ml-sticky{ position:static; height:auto; padding:80px clamp(20px,4vw,48px); }
  .ml-grid{ grid-template-columns:1fr; }
  .ml-right{ height:56vh; margin-top:10px; }
}

@media (max-width:700px){
  .frame{ margin:6px; border-width:8px; border-radius:18px; }
  .section{ padding:80px 20px; }
  .work-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .about-image{ grid-column:1; aspect-ratio:5/3; margin-top:110px; }
  .about-image.clip-reveal.visible{ clip-path:inset(-55% 0 0 0); }
  .about-photo{ height:150%; }
  .connect-head{ align-items:flex-start; }
  .connect-thumb{ width:84px; height:104px; }
  .copy-btn{ padding:9px 16px; }
  .footer{ flex-direction:column; gap:6px; }
  .hero-micro{ text-align:left; left:0; right:auto; }
  .hero-photo-wrap{ left:-18%; right:-12%; width:auto; top:-2%; bottom:22%; }
  .ml-sticky{ padding:56px 20px; }
  .ml-right{ height:44vh; }
  .ml-activation{ max-width:none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}


/* ============================================
   AXIS BLUEPRINT — replacement for old arm section
   Keeps the same portfolio style, but uses useful
   details/modules instead of a 3D or fake arm visual.
   ============================================ */
.axis-detail-section{
  position:relative;
  z-index:2;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(70px, 8vw, 120px) clamp(20px,4vw,48px);
  overflow:hidden;
}
.axis-detail-section::before{
  content:'AXIS';
  position:absolute;
  right:-.08em;
  top:-.12em;
  font-family:var(--display);
  font-size:clamp(7rem, 18vw, 18rem);
  line-height:.8;
  letter-spacing:-.04em;
  color:rgba(255,74,28,.07);
  pointer-events:none;
}
.axis-detail-grid{
  position:relative;
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:clamp(28px,5vw,70px);
  align-items:center;
}
.axis-detail-tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-deep);
}
.axis-detail-headline{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  font-size:clamp(3.2rem, 8vw, 7.2rem);
  line-height:.86;
  letter-spacing:-.015em;
  margin-top:20px;
}
.axis-detail-desc{
  max-width:480px;
  margin-top:24px;
  font-size:1.04rem;
  line-height:1.65;
  color:rgba(11,11,11,.76);
}
.axis-detail-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:32px;
}
.axis-detail-meta div{
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  background:rgba(255,255,255,.45);
}
.axis-detail-meta span{
  display:block;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(11,11,11,.45);
}
.axis-detail-meta b{
  display:block;
  margin-top:8px;
  font-size:1rem;
  line-height:1.05;
}

.axis-detail-right{
  min-height:560px;
}
.axis-panel{
  position:relative;
  height:560px;
  border:1.5px solid var(--ink);
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,74,28,.16), rgba(255,74,28,0) 44%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.38)),
    var(--bg);
  box-shadow:8px 10px 0 rgba(11,11,11,.08);
}
.axis-panel::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(11,11,11,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,11,11,.04) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at 50% 50%, #000, transparent 74%);
  pointer-events:none;
}
.axis-panel-top{
  position:absolute;
  z-index:8;
  top:22px;
  left:22px;
  right:22px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,11,11,.46);
}
.axis-core-visual{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:4;
}
.axis-core-dot{
  width:112px;
  height:112px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%, #fff 0 12%, rgba(255,255,255,.1) 24%, transparent 34%),
    radial-gradient(circle at 58% 62%, var(--orange), #151515 72%);
  box-shadow:
    0 0 0 20px rgba(255,74,28,.08),
    0 18px 50px rgba(11,11,11,.18);
  animation:axisCoreFloat 4.2s ease-in-out infinite;
}
.axis-core-ring{
  position:absolute;
  border:1px solid rgba(11,11,11,.14);
  border-radius:50%;
  animation:axisRingSpin 14s linear infinite;
}
.axis-core-ring.ring-one{ width:210px; height:210px; }
.axis-core-ring.ring-two{ width:320px; height:145px; animation-duration:18s; }
.axis-core-ring.ring-three{ width:145px; height:320px; animation-duration:20s; animation-direction:reverse; }
@keyframes axisCoreFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-10px) scale(1.04); }
}
@keyframes axisRingSpin{ to{ transform:rotate(360deg); } }

.axis-lines{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.axis-lines path{
  fill:none;
  stroke:rgba(11,11,11,.18);
  stroke-width:1.3;
  stroke-dasharray:9 9;
  animation:axisDash 12s linear infinite;
}
@keyframes axisDash{ to{ stroke-dashoffset:-180; } }

.axis-module{
  position:absolute;
  z-index:7;
  width:205px;
  border:1px solid rgba(11,11,11,.16);
  border-radius:14px;
  padding:16px;
  background:rgba(251,250,246,.88);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 34px rgba(11,11,11,.06);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.axis-module:hover{
  transform:translateY(-5px);
  border-color:var(--orange);
  box-shadow:6px 8px 0 var(--ink);
}
.axis-module span{
  font-family:var(--mono);
  font-size:.62rem;
  color:var(--orange-deep);
}
.axis-module b{
  display:block;
  margin-top:8px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
}
.axis-module small{
  display:block;
  margin-top:8px;
  color:rgba(11,11,11,.62);
}
.module-one{ top:88px; left:58px; }
.module-two{ top:88px; right:58px; }
.module-three{ bottom:88px; left:58px; }
.module-four{ bottom:88px; right:58px; }

.axis-detail-strip{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:28px;
}
.axis-detail-strip div{
  border-top:1px solid var(--ink);
  padding-top:16px;
}
.axis-detail-strip span{
  display:block;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-deep);
}
.axis-detail-strip b{
  display:block;
  margin-top:10px;
  font-size:1rem;
  line-height:1.35;
}

/* ============================================
   RESUME
   ============================================ */
.resume{
  background:var(--bg);
}
.resume-head{
  display:grid;
  grid-template-columns:1fr minmax(260px, 420px);
  gap:clamp(24px,4vw,52px);
  align-items:end;
  margin-bottom:48px;
}
.resume-subtitle{
  margin-top:18px;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(11,11,11,.58);
}
.resume-intro{
  font-size:1.18rem;
  line-height:1.45;
  color:rgba(11,11,11,.76);
}
.resume-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:18px;
}
.resume-profile,
.resume-block{
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  background:rgba(255,255,255,.46);
}
.resume-profile{
  grid-row:span 2;
  border:1.5px solid var(--ink);
  background:var(--cream-card);
}
.loader-logo {
  width: clamp(96px, 12vw, 170px);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 28px;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.25));
}

.resume-block-label{
  display:block;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-deep);
  margin-bottom:14px;
}
.resume-profile p{
  font-size:1.08rem;
  line-height:1.58;
  color:rgba(11,11,11,.76);
}
.resume-list{
  list-style:none;
  display:grid;
  gap:8px;
}
.resume-list.two-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 16px;
}
.resume-list li{
  position:relative;
  padding-left:14px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:rgba(11,11,11,.72);
}
.resume-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--orange);
}
.resume-contact-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.resume-contact-row b{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(11,11,11,.48);
}
.resume-contact-row a,
.resume-contact-row span{
  font-weight:700;
  overflow-wrap:anywhere;
}
.resume-contact-row a:hover{
  color:var(--orange-deep);
}
.resume-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}
.resume-secondary{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.resume-secondary:hover{
  background:var(--orange-deep);
  color:var(--bg);
  border-color:var(--orange-deep);
}

.nav-logo {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 700px) {
  .nav-logo {
    width: 36px;
    height: 36px;
  }
}

@media(max-width:980px){
  .axis-detail-grid{
    grid-template-columns:1fr;
  }
  .axis-detail-right{
    min-height:auto;
  }
  .axis-panel{
    height:520px;
  }
  .axis-detail-meta,
  .axis-detail-strip{
    grid-template-columns:1fr;
  }
  .resume-head,
  .resume-grid{
    grid-template-columns:1fr;
  }
  .resume-profile{
    grid-row:auto;
  }
}
@media(max-width:620px){
  .axis-detail-section{
    padding:64px 18px;
  }
  .axis-detail-headline{
    font-size:clamp(3.5rem, 18vw, 5.8rem);
  }
  .axis-panel{
    height:620px;
    border-radius:14px;
    background:rgba(255,255,255,.5);
  }
  .axis-panel::before{
    display:none;
  }
  .axis-panel-top{
    flex-direction:column;
  }
  .axis-module{
    width:calc(100% - 36px);
    left:18px !important;
    right:auto !important;
  }
  .module-one{ top:72px; }
  .module-two{ top:185px; }
  .module-three{ bottom:185px; }
  .module-four{ bottom:72px; }
  .axis-core-visual,
  .axis-core-dot,
  .axis-core-ring,
  .axis-lines{
    display:none !important;
  }
  .resume-list.two-col{
    grid-template-columns:1fr;
  }
  .resume-contact-row{
    grid-template-columns:1fr;
    gap:4px;
  }
}