/* =========================================================
   TOKENS
========================================================= */
:root{
  --black: #0a0a0a;
  --true-black: #000000;
  --white: #ffffff;
  --paper: #fafafa;
  --accent: #ed01ee;
  --accent-2: #ff5ee2;
  --accent-soft: rgba(237,1,238,.08);
  --accent-soft-2: rgba(237,1,238,.16);
  --gray-700: #4a4a4a;
  --gray-500: #7a7a7a;
  --gray-300: #d4d4d4;
  --line: rgba(10,10,10,.12);
  --line-dark: rgba(255,255,255,.14);
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --wrap: 1280px;
  --radius: 14px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

/* =========================================================
   RESET
========================================================= */
*,*::before,*::after{
  box-sizing:border-box;
}
html {
  scroll-behavior: smooth;
}
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{
  max-width:100%;
  display:block;
}
a{
  color:inherit;
  text-decoration:none;
}
h1,h2,h3{
  font-family:var(--font-display);
  margin:0;
  letter-spacing:-0.02em;
}
p{
  margin:0;
}
ul,ol{
  margin:0;
  padding:0;
  list-style:none;
}
button{
  font:inherit;
  background:none;
  border:0;
  cursor:pointer;
  color:inherit;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  left:0;
  top:-100px;
  background:var(--accent);
  color:var(--white);
  padding:.75rem 1.25rem;
  z-index:1000;
  transition:top .2s var(--ease);
  font-family:var(--font-mono);
  font-size:.85rem;
}
.skip-link:focus{
  top:0;
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-700);
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:1rem;
}
.eyebrow-light{
  color:rgba(255,255,255,.65);
}

.pulse-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(237,1,238,.6);
  animation:pulse 2.2s infinite;
  flex:none;
}
@keyframes pulse{
  0%{
    box-shadow:0 0 0 0 rgba(237,1,238,.55);
  }
  70%{
    box-shadow:0 0 0 8px rgba(237,1,238,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(237,1,238,0);
  }
}

.mark{
  position:relative;
  white-space:nowrap;
  isolation:isolate;
}
.mark::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:.05em;
  height:.28em;
  background:var(--accent);
  z-index:-1;
  opacity:.9;
  transform:scaleX(0);
  transform-origin:left;
  animation:underline .7s var(--ease) forwards;
  animation-delay:.5s;
}
.hero-heading .mark:nth-of-type(2)::after{
  animation-delay:.75s;
}
@keyframes underline{
  to{
    transform:scaleX(1);
  }
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  padding:.9rem 1.6rem;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:var(--black);
  color:var(--white);
}
.btn-primary:hover{
  background:var(--accent);
  color:var(--white);
}

.btn-outline{
  background:transparent;
  color:var(--black);
  border-color:var(--black);
}
.btn-outline:hover{
  background:var(--black);
  color:var(--white);
  border-color:var(--black);
}

.btn-accent{
  background:var(--accent);
  color:var(--white);
}
.btn-accent:hover{
  background:var(--white);
  color:var(--black);
}

.btn-small{
  padding:.6rem 1.2rem;
  font-size:.85rem;
}
.btn-large{
  padding:1.1rem 2.1rem;
  font-size:1.05rem;
}

.hero-actions .btn, .cta-final .btn{
  transform:translate(0,0);
}

/* =========================================================
   HEADER / NAV
========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled{
  border-bottom-color:var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:14px;
}

/* =========================================================
   LOGO / WORDMARK
========================================================= */

.logo{
  display:inline-flex;
  align-items:center;
  color:var(--black);
}

.logo-name{
  font-family:var(--font-display);
  font-size:1.12rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
}

.logo-dot{
  display:inline-block;
  color:var(--accent);
  margin-left:.02em;
  transition:
    transform .3s var(--ease),
    color .25s var(--ease);
}

.logo:hover .logo-dot{
  transform:translateY(-2px);
}

.site-nav{
  display:flex;
  align-items:center;
  gap:2rem;
}
.site-nav a{
  font-size:.92rem;
  font-weight:500;
  color:var(--gray-700);
  position:relative;
  padding:.25rem 0;
  transition:color .2s var(--ease);
}
.site-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease);
}
.site-nav a:hover{
  color:var(--black);
}
.site-nav a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

.nav-cta{
  flex:none;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
}
.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--black);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  padding-top:clamp(64px, 10vw, 120px);
  padding-bottom:clamp(48px, 8vw, 80px);
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  width:640px;
  height:640px;
  left:var(--gx, 60%);
  top:var(--gy, -10%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(237,1,238,.28) 0%, rgba(237,1,238,.10) 40%, rgba(237,1,238,0) 70%);
  filter:blur(10px);
  pointer-events:none;
  z-index:0;
  transition:left 1.2s var(--ease), top 1.2s var(--ease);
}
.hero-grid{
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 75%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 75%);
  pointer-events:none;
  z-index:0;
}
.hero-inner{
  position:relative;
  z-index:1;
}

.hero-heading{
  font-size:clamp(1.8rem, 4.2vw, 3.4rem);
  font-weight:700;
  line-height:1.06;
  margin-bottom:1.6rem;
}

.hero-copy{
  max-width:620px;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  margin-bottom:2.2rem;
}
.hero-copy p{
  font-size:1.05rem;
  color:var(--gray-700);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

/* =========================================================
   HERO EDITOR VISUAL
========================================================= */

.hero-inner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(420px, .82fr);
  align-items:center;
  gap:clamp(3rem, 6vw, 6rem);
  max-width:1280px;
}

.hero-content{
  max-width:760px;
}

.hero-editor{
  position:relative;
  width:100%;
  perspective:1400px;
}

.editor-window{
  position:relative;
  width:100%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  overflow:hidden;
  background:#111;
  box-shadow:
    0 35px 80px -35px rgba(0,0,0,.55),
    0 0 0 1px rgba(10,10,10,.08);
  transform:rotateY(-3deg) rotateX(2deg);
  transition:transform .7s var(--ease), box-shadow .7s var(--ease);
}

.hero-editor:hover .editor-window{
  transform:rotateY(0) rotateX(0) translateY(-5px);
  box-shadow:
    0 45px 90px -35px rgba(0,0,0,.6),
    0 0 45px -20px rgba(237,1,238,.25);
}


/* ---------- Browser chrome ---------- */

.editor-chrome{
  height:44px;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0 .9rem;
  background:#181818;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.editor-dots{
  display:flex;
  gap:6px;
  flex:none;
}

.editor-dot{
  width:9px;
  height:9px;
  border-radius:50%;
}

.editor-dot-red{
  background:#ff5f57;
}
.editor-dot-yellow{
  background:#febc2e;
}
.editor-dot-green{
  background:#28c840;
}

.editor-address{
  flex:1;
  min-width:0;
  max-width:230px;
  margin:auto;
  padding:.35rem .75rem;
  border-radius:6px;
  background:#101010;
  color:rgba(255,255,255,.38);
  font-family:var(--font-mono);
  font-size:.62rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

.editor-lock{
  color:rgba(255,255,255,.3);
  margin-right:.25rem;
}

.editor-menu{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:none;
}

.editor-menu span{
  display:block;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
}


/* ---------- Editor body ---------- */

.editor-body{
  display:grid;
  grid-template-columns:145px 1fr;
  min-height:370px;
}


/* ---------- Layers ---------- */

.editor-layers{
  background:#151515;
  border-right:1px solid rgba(255,255,255,.08);
  padding:.85rem .65rem;
  color:rgba(255,255,255,.48);
  font-family:var(--font-mono);
  font-size:.62rem;
}

.layers-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.35rem .45rem .75rem;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:.58rem;
}

.layers-icon{
  color:var(--accent);
  font-size:.85rem;
}

.layer-group{
  padding-bottom:.75rem;
}

.layer-group.second{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:.7rem;
}

.layer{
  display:flex;
  align-items:center;
  gap:.45rem;
  min-height:29px;
  padding:.3rem .4rem;
  border-radius:5px;
  white-space:nowrap;
}

.layer-parent{
  color:rgba(255,255,255,.65);
}

.layer-child{
  padding-left:1.25rem;
  color:rgba(255,255,255,.38);
}

.layer.active{
  color:rgba(255,255,255,.8);
}

.layer.selected{
  background:rgba(237,1,238,.13);
  color:#fff;
}

.layer-chevron{
  width:7px;
  color:rgba(255,255,255,.3);
}

.layer-icon{
  width:13px;
  color:rgba(255,255,255,.35);
  text-align:center;
}

.layer.selected .layer-icon{
  color:var(--accent);
}


/* ---------- Canvas ---------- */

.editor-canvas{
  position:relative;
  background:#292929;
  padding:28px 24px 24px;
}

.canvas-toolbar{
  position:absolute;
  top:9px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.3);
  font-family:var(--font-mono);
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.canvas-page{
  position:relative;
  min-height:315px;
  overflow:hidden;
  background:#fff;
  color:#0a0a0a;
  box-shadow:0 12px 25px rgba(0,0,0,.25);
}


/* ---------- Mock website ---------- */

.canvas-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 17px;
  border-bottom:1px solid rgba(10,10,10,.08);
}

.canvas-logo{
  width:24px;
  height:24px;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0a0a0a;
  color:#fff;
  font-family:var(--font-display);
  font-size:.55rem;
  font-weight:700;
}

.canvas-nav-links{
  display:flex;
  gap:12px;
  font-family:var(--font-body);
  font-size:.46rem;
  color:#777;
}

.canvas-hero{
  position:relative;
  padding:40px 28px 30px;
}

.canvas-eyebrow{
  display:block;
  margin-bottom:9px;
  color:#ed01ee;
  font-family:var(--font-mono);
  font-size:.45rem;
  letter-spacing:.1em;
}

.canvas-heading-wrap{
  position:relative;
  display:inline-block;
}

.canvas-heading{
  position:relative;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  line-height:1.02;
  letter-spacing:-.055em;
  font-weight:700;
}

.canvas-heading span:not(.typing-caret){
  position:relative;
}

.canvas-heading span:not(.typing-caret)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:.02em;
  height:.18em;
  background:rgba(237,1,238,.22);
}

.typing-caret{
  display:inline-block;
  width:3px;
  height:.8em;
  margin-left:3px;
  vertical-align:-.08em;
  background:var(--accent);
  animation:editor-caret 1s step-end infinite;
}

@keyframes editor-caret{
  50%{
    opacity:0;
  }
}

.canvas-lines{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:68%;
  margin-top:16px;
}

.canvas-lines span{
  display:block;
  height:4px;
  border-radius:4px;
  background:#e7e7e7;
}

.canvas-lines span:nth-child(2){
  width:82%;
}

.canvas-lines span:nth-child(3){
  width:57%;
}

.canvas-buttons{
  display:flex;
  gap:6px;
  margin-top:18px;
}

.canvas-button{
  display:inline-flex;
  padding:6px 10px;
  border:1px solid #111;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:.44rem;
  font-weight:700;
}

.canvas-button.filled{
  background:#0a0a0a;
  color:#fff;
}


/* ---------- Selection box ---------- */

.canvas-selection{
  position:absolute;
  left:27px;
  top:90px;
  width:250px;
  height:75px;
  border:1px solid var(--accent);
  pointer-events:none;
  animation:selection-pulse 2.8s ease-in-out infinite;
}

@keyframes selection-pulse{
  0%,100%{
    opacity:.45;
  }
  50%{
    opacity:1;
  }
}

.selection-label{
  position:absolute;
  left:-1px;
  top:-17px;
  padding:2px 5px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.42rem;
  line-height:1.2;
}

.selection-handle{
  position:absolute;
  width:5px;
  height:5px;
  border:1px solid var(--accent);
  background:#fff;
}

.selection-handle.top-left{
  left:-3px;
  top:-3px;
}

.selection-handle.top-right{
  right:-3px;
  top:-3px;
}

.selection-handle.bottom-left{
  left:-3px;
  bottom:-3px;
}

.selection-handle.bottom-right{
  right:-3px;
  bottom:-3px;
}


/* ---------- Status bar ---------- */

.editor-status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1rem;
  min-height:28px;
  padding:0 .75rem;
  background:#111;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.35);
  font-family:var(--font-mono);
  font-size:.52rem;
}

.editor-status span{
  display:flex;
  align-items:center;
  gap:.3rem;
}

.editor-status i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#3ee08a;
  box-shadow:0 0 8px rgba(62,224,138,.5);
}


/* ---------- Entrance animation ---------- */

.js .hero-editor{
  opacity:0;
  transform:translateY(24px) scale(.98);
  animation:editor-enter .9s var(--ease) .15s forwards;
}

@keyframes editor-enter{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}


/* ---------- Responsive ---------- */

@media (max-width:1000px){
  .hero-inner{
    grid-template-columns:1fr;
    gap:3.5rem;
  }
  .hero-content{
    max-width:800px;
  }
  .hero-editor{
    max-width:720px;
    margin-inline:auto;
  }
  .editor-window{
    transform:none;
  }
}

@media (max-width:560px){
  .hero-editor{
    display:none;
  }
}

/* =========================================================
   MARQUEE
========================================================= */
.marquee{
  background:var(--black);
  color:var(--white);
  overflow:hidden;
  padding-block:16px;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:2.5rem;
  align-items:center;
  animation:scroll-left 26s linear infinite;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.marquee:hover .marquee-track{
  animation-play-state:paused;
}
.marquee-track span.dot{
  color:var(--accent);
  font-size:.6rem;
}
@keyframes scroll-left{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

/* =========================================================
   SECTION HEAD (shared)
========================================================= */
.section-head{
  max-width:680px;
  margin-bottom:3rem;
}
.section-head h2{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight:700;
  line-height:1.15;
}
.section-intro{
  margin-top:1rem;
  color:rgba(255,255,255,.72);
  font-size:1.02rem;
  max-width:560px;
}

section{
  padding-block:clamp(64px, 9vw, 110px);
}

/* =========================================================
   WORK
========================================================= */
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.4rem;
}
.work-card{
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:1.7rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:var(--white);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.js .work-card{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.js .work-card.in-view{
  opacity:1;
  transform:translateY(0);
}
.work-card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 18px 40px -22px rgba(237,1,238,.35);
}
.work-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
.work-card h3{
  font-size:1.15rem;
  font-weight:600;
}
.tags{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}
.tags span{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:.28rem .55rem;
  border-radius:6px;
  background:var(--accent-soft);
  color:#a301a4;
}
.work-card p{
  color:var(--gray-700);
  font-size:.95rem;
  flex:1;
}
.card-link{
  font-weight:700;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--black);
}
.card-link span{
  transition:transform .25s var(--ease);
}
.card-link:hover span{
  transform:translateX(4px);
}
.card-link:hover{
  color:var(--accent);
}

/* =========================================================
   WORK SCREENSHOT PREVIEWS
========================================================= */

.work-preview{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#eee;
  box-shadow:0 12px 30px -20px rgba(0,0,0,.3);
}


/* ---------- Screenshot viewport ---------- */

.preview-screen{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#eee;
}


/* ---------- Full-page screenshot ---------- */

.preview-screen img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  max-width:none;
  display:block;
  filter:none;
}

/* =========================================================
   APPROACH (dark)
========================================================= */
.approach{
  background:var(--black);
  color:var(--white);
}

.steps{
  position:relative;
  max-width:760px;
}
.steps::before{
  content:"";
  position:absolute;
  left:23px;
  top:8px;
  bottom:8px;
  width:1px;
  background:linear-gradient(to bottom, var(--line-dark), var(--accent) 50%, var(--line-dark));
  opacity:.5;
}
.step{
  display:flex;
  gap:1.6rem;
  padding-block:1.3rem;
}
.js .step{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.js .step.in-view{
  opacity:1;
  transform:translateY(0);
}
.step-num{
  flex:none;
  width:47px;
  height:47px;
  border-radius:50%;
  border:1.5px solid var(--line-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--accent);
  background:var(--black);
  position:relative;
  z-index:1;
}
.step-body h3{
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:.35rem;
}
.step-body p{
  color:rgba(255,255,255,.66);
  font-size:.96rem;
  max-width:520px;
}

/* =========================================================
   ABOUT
========================================================= */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4rem;
  align-items:center;
}
.about-copy p{
  color:var(--gray-700);
  margin-bottom:1rem;
  font-size:1rem;
}
.about-copy p:last-child{
  margin-bottom:0;
  color:var(--black);
  font-weight:500;
}
.about-copy h2{
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom:1.4rem;
}

/* =========================================================
   ABOUT PORTRAIT
========================================================= */

.about-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:460px;
}

.portrait-wrap{
  position:relative;
  width:min(390px, 82%);
}


/* ---------- Pink offset frame ---------- */

.portrait-frame{
  position:absolute;
  inset:18px -18px -18px 18px;
  border:2px solid var(--accent);
  border-radius:18px;
  background:var(--accent-soft);
  transform:rotate(3deg);
  transition:
    transform .5s var(--ease),
    inset .5s var(--ease);
}

.about-visual:hover .portrait-frame{
  transform:rotate(1deg);
  inset:12px -12px -12px 12px;
}


/* ---------- Image ---------- */

.portrait-image{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:16px;
  background:#eee;
  box-shadow:
    0 30px 60px -35px rgba(0,0,0,.45),
    0 0 0 1px rgba(10,10,10,.08);
}

.portrait-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .7s var(--ease);
}

.about-visual:hover .portrait-image img{
  transform:scale(1.025);
}


/* ---------- Credential chips ---------- */

.credential-chip{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem .85rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:
    0 14px 30px -18px rgba(0,0,0,.35);
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:
    transform .45s var(--ease),
    box-shadow .35s var(--ease);
}

.chip-top{
  top:12%;
  right:-38px;
}

.chip-bottom{
  bottom:12%;
  left:-42px;
}

.about-visual:hover .chip-top{
  transform:translate(4px,-3px);
}

.about-visual:hover .chip-bottom{
  transform:translate(-4px,3px);
}


/* ---------- Chip details ---------- */

.chip-dot{
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:var(--accent);
  box-shadow:
    0 0 0 4px var(--accent-soft);
}

.chip-icon{
  width:17px;
  height:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--accent);
  color:var(--white);
  font-size:.58rem;
  font-family:var(--font-body);
  font-weight:700;
}


/* ---------- Mobile ---------- */

@media (max-width:900px){
  .about-visual{
    min-height:420px;
  }
  .portrait-wrap{
    width:min(360px, 78%);
  }
  .chip-top{
    right:-25px;
  }
  .chip-bottom{
    left:-25px;
  }
}

@media (max-width:560px){
  .about-visual{
    min-height:380px;
  }
  .portrait-wrap{
    width:76%;
  }
  .chip-top{
    right:-30px;
    top:8%;
  }
  .chip-bottom{
    left:-30px;
    bottom:8%;
  }
  .credential-chip{
    font-size:.58rem;
    padding:.55rem .7rem;
  }
}

@keyframes blink{
  50%{
    opacity:0;
  }
}

/* =========================================================
   FINAL CTA + FOOTER (dark)
========================================================= */
.cta-final{
  background:var(--black);
  color:var(--white);
  text-align:center;
  padding-bottom:clamp(48px, 7vw, 80px);
}
.cta-inner{
  max-width:680px;
  margin-inline:auto;
}
.cta-final .eyebrow{
  justify-content:center;
}
.cta-final h2{
  font-size:clamp(2rem, 4.6vw, 3.2rem);
  font-weight:700;
  line-height: 1.4em;
  margin-bottom:1.1rem;
}
.cta-copy{
  color:rgba(255,255,255,.68);
  font-size:1.05rem;
  margin-bottom:2.2rem;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  background:var(--black);
  color:rgba(255,255,255,.5);
  border-top:1px solid var(--line-dark);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:1.6rem;
  text-align:center;
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.01em;
}

/* =========================================================
   SCROLL REVEAL (generic)
========================================================= */
.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:900px){
  .about-grid{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .about-visual{
    order:-1;
  }
}

@media (max-width:760px){
  .site-header{
    background:#fff;
  }
  .header-inner{
    position:relative;
  }
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:calc(100vh - 63px);
    background:#fff;
    color:var(--black);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:1.5rem 24px;
    transform:translateX(100%);
    transition:transform .35s var(--ease);
    z-index:200;
    overflow-y:auto;
    box-shadow:0 20px 35px -25px rgba(0,0,0,.3);
  }
  .site-nav.open{
    transform:translateX(0);
  }
  .site-nav a{
    width:100%;
    padding:1rem 0;
    border-bottom:1px solid var(--line);
    font-size:1.05rem;
  }
  .nav-cta{
    display:none;
  }
  .nav-toggle{
    display:flex;
  }
  .logo-text em{
    display:none;
  }
}

@media (max-width:560px){
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn{
    justify-content:center;
  }
  .work-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-glow{
    transition:none;
  }
}