/* ============================================================
   THEME — CH - style layout, adjusted palette (charcoal + orange)
   ============================================================ */
:root{
  --bg:        #101010;
  --bg-soft:   #151514;
  --surface:   #191918;
  --surface-2: #1f1f1d;
  --text:      #f1efe9;
  --muted:     #9a978e;
  --faint:     #6d6a61;
  --line:      rgba(255,255,255,0.09);
  --line-soft: rgba(255,255,255,0.05);
  --accent:    rgb(255 134 49);
  --accent-2:  rgb(255 158 92);
  --accent-ink:#141007;

  --maxw: 1500px;
  --pad: clamp(1.1rem, 3.5vw, 3.4rem);
  --radius: 16px;
  
  --tl-marker-x: clamp(1px, 1.8vw, 1px);
  --tl-pad-left: clamp(2.4rem, 5.2vw, 4.2rem);

  --font-display: "Bricolage Grotesque", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}
html{ font-size:102%; }
@media (min-width:2200px){ html{ font-size:120%; } :root{ --maxw:1780px; } }
@media (min-width:2800px){ html{ font-size:142%; } :root{ --maxw:2200px; } }
@media (min-width:3600px){ html{ font-size:174%; } :root{ --maxw:2800px; } }
@media (min-width:5000px){ html{ font-size:234%; } :root{ --maxw:3700px; } }
@media (min-width:7000px){ html{ font-size:322%; } :root{ --maxw:5000px; } }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-weight:450; line-height:1.6; letter-spacing:-0.01em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:var(--accent-ink); }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

#progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:100; transition:width .1s linear; }

/* ============================================================ NAV */
header.nav{ position:fixed; inset:0 0 auto 0; z-index:90; border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease); }
header.nav.scrolled{ background:rgba(16,16,16,.75); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:clamp(60px,7.5vh,84px); }
.brand{ display:flex; align-items:center; font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; font-size:1.45rem; }
.brand .dot{ color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); list-style:none; }
/* roll-up hover (ch-style) */
.nav-links a.link{ font-size:.9rem; color:var(--muted); position:relative; overflow:hidden; display:inline-block; line-height:1.4; }
.link .roll{ display:block; position:relative; transition:transform .4s cubic-bezier(.22,.61,.36,1); }
.link .roll .rt2{ position:absolute; left:0; top:100%; color:var(--accent); }
.link:hover .roll{ transform:translateY(-100%); }
.nav-right{ display:flex; align-items:center; gap:1rem; }
.langs{ display:flex; align-items:center; gap:.1rem; border:1px solid var(--line); border-radius:999px; padding:.2rem; }
.langs button{ font-family:var(--font-display); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; background:transparent; color:var(--muted); border:0; cursor:pointer; padding:.35rem .5rem; border-radius:999px; transition:all .2s; }
.langs button.active{ background:var(--text); color:var(--bg); }
.langs button.soon{ opacity:.5; cursor:not-allowed; }
.langs button:not(.active):not(.soon):hover{ color:var(--text); }
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:.88rem; padding:.68rem 1.15rem; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .2s, background .2s, color .2s, border-color .2s; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--accent-2); }
.btn-ghost{ border-color:var(--line); color:var(--text); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:rgba(255,134,49,.5); }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translate(3px,-3px); }
.burger{ display:none; flex-direction:column; gap:5px; background:transparent; border:0; cursor:pointer; padding:.4rem; }
.burger span{ width:24px; height:2px; background:var(--text); transition:.3s; }
.mobile-menu{ position:fixed; inset:0; z-index:80; background:rgba(16,16,16,.97); backdrop-filter:blur(6px); display:flex; flex-direction:column; justify-content:center; gap:.3rem; padding:var(--pad); transform:translateY(-100%); transition:transform .45s var(--ease); pointer-events:none; }
.mobile-menu.open{ transform:translateY(0); pointer-events:auto; }
.mobile-menu a{ font-family:var(--font-display); font-size:clamp(2rem,9vw,3rem); font-weight:600; padding:.3rem 0; }
.mobile-menu a span:first-child{ color:var(--accent); font-size:1rem; margin-right:1rem; }
.mobile-menu .m-langs{ margin-top:2rem; display:flex; gap:.5rem; }

/* ============================================================ HERO — ch-style */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.hero-stage{ position:relative; flex:1 1 auto; min-height:100svh; }
.hero-stage::before{ /* warm glow behind figure */
  content:""; position:absolute; left:50%; bottom:-12%; transform:translateX(-50%);
  width:min(70vw,900px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,134,49,.20) 0%, rgba(255,134,49,.06) 45%, transparent 70%);
  z-index:1; pointer-events:none;
}
.hero-kicker{ position:absolute; top:clamp(80px,11vh,130px); left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-display); font-size:clamp(.75rem,1.2vw,1rem); letter-spacing:.34em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.hero-title{ position:absolute; top:clamp(110px,15vh,190px); left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em; line-height:.9; text-align:center; white-space:nowrap; }
.hero-title .line{ display:block; font-size:clamp(3.6rem,16vw,14.5rem); color:var(--text); }
.hero-title .line.l2{ color:var(--accent); }
.meta{ position:absolute; z-index:4; font-family:var(--font-display); font-size:clamp(.8rem,1vw,.95rem); color:var(--muted); transition:color .2s; }
a.meta:hover{ color:var(--accent); }
.m-tl{ left:clamp(4rem,16vw,22rem); top:clamp(96px,13vh,150px); }
.m-tr{ right:clamp(4rem,16vw,22rem); top:clamp(96px,13vh,150px); text-align:right; }
/* glass cards (hero) */
.glass{ position:absolute; z-index:4; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:18px; backdrop-filter:blur(26px) saturate(1.3); -webkit-backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:0 24px 60px rgba(0,0,0,.4); }
.glass-years{ left:clamp(4rem,15vw,20rem); bottom:clamp(70px,14vh,170px); padding:clamp(1rem,1.6vw,1.5rem) clamp(1.2rem,1.8vw,1.7rem); max-width:240px; }
.g-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,4.5vw,3.8rem); line-height:1; letter-spacing:-0.03em; }
.g-num span{ color:var(--accent); }
.g-lbl{ color:var(--muted); font-size:.9rem; margin-top:.35rem; line-height:1.4; }
.glass-svc{ right:clamp(4rem,15vw,20rem); bottom:clamp(70px,14vh,170px); padding:clamp(1rem,1.5vw,1.4rem) clamp(1.1rem,1.6vw,1.5rem); display:grid; gap:.7rem; }
.svc{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:500; font-size:clamp(.85rem,1vw,.98rem); color:var(--text); }
.svc svg{ width:17px; height:17px; color:var(--accent); flex:none; }



/* ============================================================ SIDE RAIL (docked glass sidebar) */
.side-rail{ position:fixed; left:clamp(12px,1.4vw,26px); top:50%; z-index:95;
  width:clamp(224px,16.5vw,280px); max-height:92vh; overflow:auto; scrollbar-width:none;
  transform:translateY(-50%) translateX(calc(-100% - 40px)); opacity:0; pointer-events:none;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); border-radius:20px;
  backdrop-filter:blur(26px) saturate(1.3); -webkit-backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  padding:clamp(1rem,1.4vw,1.4rem);
  transition:transform .65s cubic-bezier(.22,.61,.36,1), opacity .55s var(--ease); }
.side-rail::-webkit-scrollbar{ display:none; }
body.docked .side-rail{ transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }
body.docked header.nav{ transform:translateY(-100%); }
.rail-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.85rem; }
.rail-brand{ font-size:1.25rem; display:inline-flex; margin:0; }
.rail-social{ display:flex; align-items:center; gap:.4rem; }
.rail-social a{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--muted); border:1px solid var(--line); transition:color .2s, border-color .2s, background .2s, transform .25s var(--ease); }
.rail-social a:hover{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.rail-social svg{ width:14px; height:14px; }
.rail-nav{ display:grid; gap:.15rem; }
.rail-nav a{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:500;
  font-size:.95rem; color:var(--muted); padding:.42rem .5rem; border-radius:10px;
  transition:color .2s, background .2s, transform .25s var(--ease); }
.rail-nav a i{ width:6px; height:6px; border-radius:50%; background:var(--faint); flex:none; transition:background .2s, box-shadow .2s; }
.rail-nav a:hover{ color:var(--text); background:rgba(255,255,255,.04); transform:translateX(3px); }
.rail-nav a.cur{ color:var(--text); background:rgba(255,255,255,.05); }
.rail-nav a.cur i{ background:var(--accent); box-shadow:0 0 10px rgba(255,134,49,.8); }
.rail-sep{ height:1px; background:var(--line); margin:.85rem 0; }
.rail-years .g-num{ font-size:1.9rem; }
.rail-years .g-lbl{ font-size:.78rem; margin-top:.2rem; }
.rail-svc{ display:grid; gap:.5rem; }
.rail-svc .svc{ font-size:.82rem; gap:.55rem; }
.rail-svc .svc svg{ width:14px; height:14px; }
.rail-langs{ border:0; padding:0; gap:.25rem; }
/* content shifts right while docked (desktop only) */
@media (min-width:1200px){
  main, footer{ transition:padding-left .65s cubic-bezier(.22,.61,.36,1); }
  body.docked main, body.docked footer{ padding-left:clamp(240px,19vw,320px); }
}
@media (max-width:1199px){ .side-rail{ display:none; } }

/* ============================================================ SECTIONS */
section{ position:relative; z-index:1; padding-block:clamp(4rem,10vh,8.5rem); }
.eyebrow{ font-family:var(--font-display); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.3rem; }
.eyebrow::before{ content:""; width:1.6rem; height:1px; background:var(--accent); display:inline-block; }
.h-sec{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.03em; line-height:1.02; font-size:clamp(2rem,5.5vw,3.8rem); }
.lead{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.18rem); max-width:46ch; }

.about-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.about-lead-lg{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.28; }
.about-lead-lg b{ color:var(--accent); font-weight:500; font-style:italic; }
.about-body{ margin-top:1.6rem; color:var(--muted); font-size:1.05rem; max-width:58ch; }
.about-chips{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ border:1px solid var(--line); border-radius:999px; padding:.5rem .95rem; font-size:.85rem; background:rgba(255,255,255,.02); }
.about-side{ position:sticky; top:104px; }
.about-card{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,2.5vw,2rem); background:linear-gradient(180deg,var(--surface),var(--bg-soft)); position:relative; overflow:hidden; }
.about-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--accent); }
.about-card h3{ font-family:var(--font-display); font-size:1rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:1.1rem; line-height:1.3; }
.kv{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-top:1px solid var(--line-soft); }
.kv:first-of-type{ border-top:0; }
.kv .k{ color:var(--muted); font-size:.92rem; }
.kv .v{ font-family:var(--font-display); font-weight:500; text-align:right; }

.timeline{ position:relative; margin-top:clamp(2.5rem,5vw,4rem); }
.timeline::before{ content:""; position:absolute; left:var(--tl-marker-x); top:6px; bottom:6px; width:1px; background:var(--line); transform:translateX(-50%); }
.tl-item{ position:relative; padding-left:var(--tl-pad-left); padding-bottom:clamp(2.4rem,5vw,3.6rem); }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:var(--tl-marker-x); top:5px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); transition:background .3s, box-shadow .3s; transform:translateX(-50%); }
.tl-item:hover::before{ background:var(--accent); box-shadow:0 0 0 6px rgba(255,134,49,.14); }
.tl-year{ font-family:var(--font-display); color:var(--accent); font-weight:600; font-size:.95rem; }
.tl-role{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,2.4vw,1.9rem); letter-spacing:-0.02em; margin-top:.3rem; }
.tl-company{ color:var(--muted); margin-top:.15rem; }
.tl-company b{ color:var(--text); font-weight:500; }
.tl-desc{ color:var(--muted); margin-top:.8rem; max-width:60ch; }

.acc-list{ margin-top:clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc-head{ width:100%; background:transparent; border:0; cursor:pointer; color:inherit; text-align:left; font-family:inherit;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem); padding:clamp(1.4rem,2.6vw,2.1rem) 0; transition:padding-left .35s var(--ease); }
.acc-head:hover{ padding-left:.5rem; }
.acc-meta{ flex:0 0 auto; width:clamp(190px,27%,320px); display:flex; flex-direction:column; gap:.28rem; }
.acc-period{ font-family:var(--font-display); color:var(--accent); font-weight:600; font-size:.9rem; }
.acc-company{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,2.3vw,1.8rem); letter-spacing:-0.02em; line-height:1.05; }
.acc-role{ color:var(--muted); font-size:.96rem; }
.acc-short{ flex:1 1 auto; color:var(--muted); font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.5; max-width:56ch; }
.acc-ico{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); transition:background .35s var(--ease); }
.acc-head:hover .acc-ico{ background:rgba(255,255,255,.16); }
.acc-ico svg{ width:15px; height:15px; overflow:visible; display:block; }
.acc-ico line{ stroke:var(--text); stroke-width:2.2; stroke-linecap:round; transition:stroke .3s; }
.acc-ico line.v{ transition:transform .45s cubic-bezier(.32,.72,0,1); transform-origin:center; }
.acc.open .acc-ico{ background:var(--accent); }
.acc.open .acc-ico line{ stroke:var(--accent-ink); }
.acc.open .acc-ico line.v{ transform:scaleY(0); }
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.32,.72,0,1); }
.acc.open .acc-panel{ grid-template-rows:1fr; }
.acc-panel-in{ overflow:hidden; }
.acc-panel-in p{ color:var(--muted); max-width:74ch; margin-left:clamp(0px,27%,320px); padding:0 0 clamp(1.4rem,2.6vw,2.1rem); font-size:1.02rem; line-height:1.62; opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s; }
.acc.open .acc-panel-in p{ opacity:1; transform:none; }

/* SKILLS — big typographic rows (ch services style) */
.skill-groups{ display:grid; grid-template-columns:1fr; margin-top:clamp(2.5rem,5vw,3.5rem); }
.skill-card{ display:grid; grid-template-columns:auto 1fr; column-gap:clamp(1.2rem,3vw,2.6rem); align-items:start;
  padding:clamp(1.6rem,3vw,2.4rem) 0; border-top:1px solid var(--line); background:transparent; transition:background .25s; }
.skill-card:last-child{ border-bottom:1px solid var(--line); }
.skill-card:hover{ background:rgba(255,255,255,.02); }
.skill-card .idx{ font-family:var(--font-display); color:var(--faint); font-size:clamp(.9rem,1.2vw,1.05rem); padding-top:.55em; }
.skill-card h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.03em; font-size:clamp(1.8rem,4.4vw,3.4rem); line-height:1.05; transition:color .25s; }
.skill-card:hover h3{ color:var(--accent); }
.skill-tags{ grid-column:2; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.skill-tags span{ font-size:.85rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.4rem .8rem; }

.work-head{ display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:1rem; }
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(2.5rem,5vw,3.5rem); }
.work-card{ position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); min-height:clamp(280px,32vw,420px); display:flex; flex-direction:column; justify-content:space-between; padding:clamp(1.5rem,2.5vw,2.2rem); transition:border-color .3s, transform .3s; }
.work-card:hover{ border-color:rgba(255,134,49,.4); transform:translateY(-4px); }
.work-card .thumb{ position:absolute; inset:0; z-index:0; opacity:.55; background:radial-gradient(30rem 20rem at 20% 0%,rgba(255,134,49,.15),transparent 60%),linear-gradient(160deg,#191817,#121211); }
.work-card>*{ position:relative; z-index:1; }
.work-top{ display:flex; justify-content:space-between; align-items:start; }
.work-num{ font-family:var(--font-display); color:var(--faint); font-size:.85rem; }
.work-badge{ font-family:var(--font-display); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(255,134,49,.4); border-radius:999px; padding:.3rem .6rem; }
.work-card h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-0.02em; }
.work-card p{ color:var(--muted); margin-top:.6rem; max-width:42ch; }
.work-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.2rem; }
.work-tags span{ font-size:.78rem; color:var(--faint); border:1px solid var(--line); border-radius:999px; padding:.3rem .65rem; }
.work-badge.live{ color:var(--accent); border-color:rgba(255,134,49,.5); }
.work-link{ display:inline-block; margin-top:1.15rem; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--accent); }
.work-card:hover .work-link{ text-decoration:underline; text-underline-offset:3px; }

.contact{ text-align:center; }
.contact .h-sec{ font-size:clamp(2.6rem,9vw,7rem); }
.contact .h-sec .accent{ color:var(--accent); font-style:italic; font-weight:500; }
.contact-sub{ color:var(--muted); max-width:48ch; margin:1.4rem auto 0; font-size:1.1rem; }
.contact-actions{ margin-top:clamp(2rem,4vw,3rem); display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.contact-links{ margin-top:clamp(2.5rem,5vw,3.5rem); display:inline-flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem); justify-content:center; border-top:1px solid var(--line); padding-top:2rem; }
.cl-item{ display:inline-flex; flex-direction:column; align-items:center; gap:.3rem; }
.cl-line{ display:inline-flex; align-items:center; gap:.55rem; }
.contact-links .cl-k{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.contact-links .cl-v{ font-family:var(--font-display); font-size:1.05rem; transition:color .2s; }
.contact-links a.cl-v:hover{ color:var(--accent); }

/* ============================================================ CONTACT FORM */
.contact-form-wrap{ margin:clamp(2.2rem,4.5vw,3.2rem) auto 0; max-width:720px; }
.contact-form{ text-align:left;
  display:grid; gap:1.1rem; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface),var(--bg-soft));
  padding:clamp(1.4rem,3vw,2.2rem); }
.contact-form[hidden]{ display:none; }   /* display:grid would otherwise beat [hidden] */
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.cf-field{ display:grid; gap:.45rem; }
.cf-field label{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.cf-field input,.cf-field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--text); line-height:1.55;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1rem; width:100%; resize:vertical;
  transition:border-color .2s, background .2s, box-shadow .2s; }
.cf-field textarea{ min-height:9rem; }
.cf-field input::placeholder,.cf-field textarea::placeholder{ color:var(--faint); }
.cf-field input:hover,.cf-field textarea:hover{ border-color:rgba(255,255,255,.16); }
.cf-field input:focus,.cf-field textarea:focus{ outline:none; border-color:rgba(255,134,49,.6);
  background:rgba(255,255,255,.05); box-shadow:0 0 0 3px rgba(255,134,49,.12); }
.cf-err{ font-size:.82rem; color:#ff7a6b; display:none; }
.cf-field.invalid input,.cf-field.invalid textarea{ border-color:rgba(255,122,107,.65); }
.cf-field.invalid .cf-err{ display:block; }
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cf-captcha{ gap:.5rem; }
.cf-captcha .h-captcha{ min-height:78px; }          /* reserve space so the card doesn't jump on load */
.cf-captcha iframe{ border-radius:10px; }
@media (max-width:400px){                            /* widget is a fixed 303px — shrink it, don't overflow */
  .cf-captcha .h-captcha{ transform:scale(.86); transform-origin:left top; min-height:68px; }
}
.cf-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:.9rem 1.1rem; margin-top:.2rem; }
.cf-send[disabled]{ opacity:.6; cursor:progress; }
.cf-status{ font-size:.9rem; color:var(--muted); margin:0; }
.cf-status.err{ color:#ff7a6b; }

/* result panel — takes the form's place after submit */
.cf-result{ border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface),var(--bg-soft));
  padding:clamp(2rem,4vw,3rem) clamp(1.4rem,3vw,2.2rem); text-align:center;
  display:grid; justify-items:center; gap:.6rem;
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.cf-result[hidden]{ display:none; }
.cf-result.in{ opacity:1; transform:none; }
.cfr-ico{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; margin-bottom:.4rem;
  background:rgba(255,134,49,.12); color:var(--accent); }
.cfr-ico svg{ width:28px; height:28px; }
.cf-result .ico-fail,.cf-result.fail .ico-ok{ display:none; }
.cf-result.fail .ico-fail{ display:block; }
.cf-result.fail .cfr-ico{ background:rgba(255,122,107,.12); color:#ff7a6b; }
.cfr-title{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.15; }
.cfr-text{ color:var(--muted); max-width:44ch; font-size:1.02rem; }
.cfr-text a{ color:var(--accent); }
.cfr-text a:hover{ text-decoration:underline; text-underline-offset:3px; }
.cfr-retry{ margin-top:.9rem; }
.cfr-retry[hidden]{ display:none; }

/* ============================================================ COPY TO CLIPBOARD */
.copy-btn{ position:relative; width:30px; height:30px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px;
  color:var(--muted); cursor:pointer;
  transition:color .2s, border-color .2s, background .2s, transform .25s var(--ease); }
.copy-btn:hover{ color:var(--accent); border-color:rgba(255,134,49,.5); transform:translateY(-2px); }
.copy-btn svg{ width:15px; height:15px; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.copy-btn .ico-check{ position:absolute; opacity:0; transform:scale(.6); }
.copy-btn.copied{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.copy-btn.copied .ico-copy{ opacity:0; transform:scale(.6); }
.copy-btn.copied .ico-check{ opacity:1; transform:scale(1); }

/* email row in the docked side rail */
.rail-mail{ display:flex; align-items:center; gap:.5rem; }
.rail-mail .rm-ico{ display:grid; place-items:center; width:26px; height:26px; flex:none; color:var(--accent); }
.rail-mail .rm-ico svg{ width:16px; height:16px; }
.rail-mail .rm-addr{ flex:1 1 auto; min-width:0; font-size:.73rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s; }
.rail-mail .rm-addr:hover{ color:var(--text); }
.rail-mail .rm-copy{ width:26px; height:26px; border-radius:8px; }
.rail-mail .rm-copy svg{ width:13px; height:13px; }

footer{ border-top:1px solid var(--line); padding-block:clamp(2rem,4vw,3rem); position:relative; z-index:1; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; color:var(--faint); font-size:.88rem; }
.to-top{ font-family:var(--font-display); color:var(--muted); font-size:.85rem; cursor:pointer; background:transparent; border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; transition:border-color .2s,color .2s; }
.to-top:hover{ color:var(--text); border-color:rgba(255,134,49,.5); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

@media (max-width:860px){
  .nav-links, .nav-right .btn, .nav-right .langs{ display:none; }
  .burger{ display:flex; }
  .hero-stage{ min-height:auto; display:flex; flex-direction:column; align-items:center; padding-top:calc(clamp(60px,7.5vh,84px) + 1.2rem); }
  .hero-kicker{ position:static; transform:none; margin-top:.4rem; }
  .hero-title{ position:static; transform:none; white-space:normal; margin-top:.8rem; }
  .hero-title .line{ font-size:clamp(3rem,17vw,5.2rem); }
  .meta{ position:static; text-align:center !important; }
  .glass{ position:static; margin:.9rem auto 0; width:min(92%,380px); }
  .glass-years{ max-width:min(92%,380px); }
  .hero-meta-mob{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; padding:1.2rem var(--pad) 1.6rem; }
  .m-tl,.m-tr,.m-bl,.m-br{ inset:auto; }
  .about-grid{ grid-template-columns:1fr; }
  .about-side{ position:static; }
  .work-grid{ grid-template-columns:1fr; }
  .acc-head{ flex-wrap:wrap; }
  .acc-meta{ width:calc(100% - 52px); }
  .acc-ico{ order:2; }
  .acc-short{ order:3; flex-basis:100%; margin-top:.7rem; }
  .acc-panel-in p{ margin-left:0; }
  .skill-card{ grid-template-columns:1fr; }
  .skill-tags{ grid-column:1; }
  .cf-row{ grid-template-columns:1fr; }
  .cf-foot{ flex-direction:column; align-items:stretch; }
  .cf-foot .cf-send{ justify-content:center; }
  .cf-status{ text-align:center; }
}
@media (min-width:861px){ .hero-meta-mob{ display:contents; } }
/* ============================================================
   MOTION LAYER — ch-grade interactions
   ============================================================ */
/* preloader */
#loader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; align-items:center; justify-content:center;
  transition:transform .9s cubic-bezier(.76,0,.24,1); }
#loader.done{ transform:translateY(-101%); }
.loader-inner{ text-align:center; }
.loader-brand{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:-0.03em; }
.loader-brand .dot{ color:var(--accent); }
.loader-count{ font-family:var(--font-display); color:var(--muted); font-size:.95rem; margin-top:.6rem; font-variant-numeric:tabular-nums; }
body.loading{ overflow:hidden; }

/* custom cursor */
#cur,#curRing{ position:fixed; top:0; left:0; pointer-events:none; z-index:300; border-radius:50%; transform:translate(-50%,-50%); }
#cur{ width:8px; height:8px; background:var(--accent); }
#curRing{ width:38px; height:38px; border:1.5px solid rgba(255,134,49,.5);
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s; }
body.cur-hover #curRing{ width:66px; height:66px; border-color:rgba(255,134,49,.95); }
body.cur-press #curRing{ width:26px; height:26px; }
body.has-cursor, body.has-cursor a, body.has-cursor button{ cursor:none; }
@media (hover:none),(pointer:coarse){ #cur,#curRing{ display:none; } }

/* nav hide-on-scroll-down */
header.nav{ transform:translateY(0); transition:background .3s var(--ease), border-color .3s var(--ease), transform .45s var(--ease); }
header.nav.hide{ transform:translateY(-100%); }

/* nav intro (staggered drop-in) */
body.js.intro-wait .brand{ opacity:0; transform:translateY(-16px); }
body.js header.nav .brand{ transition:opacity .7s var(--ease) .3s, transform .7s var(--ease) .3s; }
body.js.intro-wait .nav-links a.link{ opacity:0; transform:translateY(-14px); }
body.js .nav-links a.link{ transition:opacity .6s var(--ease), transform .6s var(--ease); }
body.js .nav-links a.link:nth-child(1){ transition-delay:.42s; }
body.js .nav-links a.link:nth-child(2){ transition-delay:.5s; }
body.js .nav-links a.link:nth-child(3){ transition-delay:.58s; }
body.js .nav-links a.link:nth-child(4){ transition-delay:.66s; }
body.js .nav-links a.link:nth-child(5){ transition-delay:.74s; }
body.js.intro-wait .nav-right{ opacity:0; transform:translateY(-14px); }
body.js .nav-right{ transition:opacity .7s var(--ease) .85s, transform .7s var(--ease) .85s; }

/* mobile menu: staggered link entrance */
.mobile-menu a{ opacity:0; transform:translateY(26px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.mobile-menu.open a{ opacity:1; transform:none; }
.mobile-menu.open a:nth-of-type(1){ transition-delay:.1s; }
.mobile-menu.open a:nth-of-type(2){ transition-delay:.16s; }
.mobile-menu.open a:nth-of-type(3){ transition-delay:.22s; }
.mobile-menu.open a:nth-of-type(4){ transition-delay:.28s; }
.mobile-menu.open a:nth-of-type(5){ transition-delay:.34s; }
.mobile-menu.open a:nth-of-type(6){ transition-delay:.4s; }
.mobile-menu .m-langs{ opacity:0; transition:opacity .45s var(--ease); }
.mobile-menu.open .m-langs{ opacity:1; transition-delay:.48s; }

/* hero intro (masked line slide-up) */
body.js .hero-title{ overflow:hidden; padding-bottom:.06em; }
body.js.intro-wait .hero-title .line{ transform:translateY(118%); }
body.js .hero-title .line{ transition:transform 1.05s cubic-bezier(.22,.61,.36,1); will-change:transform; }
body.js .hero-title .line.l2{ transition-delay:.1s; }
body.js.intro-wait .hero-kicker{ opacity:0; filter:blur(6px); }
body.js .hero-kicker{ transition:opacity .9s var(--ease) .55s, filter .9s var(--ease) .55s; }
body.js.intro-wait .m-tl{ opacity:0; transform:translateX(-36px); }
body.js.intro-wait .m-tr{ opacity:0; transform:translateX(36px); }
body.js .m-tl,body.js .m-tr{ transition:opacity .8s var(--ease) .75s, transform .8s var(--ease) .75s; }
body.js.intro-wait .glass-years{ opacity:0; transform:translateY(46px) translateX(-24px); }
body.js.intro-wait .glass-svc{ opacity:0; transform:translateY(46px) translateX(24px); }
body.js .glass-years{ transition:opacity .9s var(--ease) .9s, transform .9s var(--ease) .9s; }
body.js .glass-svc{ transition:opacity .9s var(--ease) 1.05s, transform .9s var(--ease) 1.05s; }

/* masked heading reveals */
.mask-line{ display:block; overflow:hidden; }
.mask-line .ml-inner{ display:block; transform:translateY(115%); transition:transform 1s cubic-bezier(.22,.61,.36,1); }
.masked.in .ml-inner{ transform:translateY(0); }

/* hero parallax */
.hero-stage .meta,.hero-stage .glass,.hero-title,.hero-kicker{ will-change:transform,opacity; }

/* timeline draw-on-scroll */
.timeline::after{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--accent);
  transform-origin:top; transform:scaleY(var(--tlp,0)); }

/* 3D tilt on work cards */
.work-grid{ perspective:1100px; }
.work-card{ transform-style:preserve-3d; }
.work-card .thumb{ transition:opacity .3s; }
.work-card:hover .thumb{ opacity:.75; }

/* magnetic */
.magnetic{ will-change:transform; transition:transform .35s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .m-br .dot{ animation:none; }
  #loader,#cur,#curRing{ display:none; }
  body.loading{ overflow:auto; }
  body.js.intro-wait .hero-title .line,body.js.intro-wait .hero-kicker,
  body.js.intro-wait .m-tl,body.js.intro-wait .m-tr,
  body.js.intro-wait .glass-years,body.js.intro-wait .glass-svc{ opacity:1; transform:none; filter:none; }
  .mask-line .ml-inner{ transform:none !important; transition:none !important; }
  .timeline::after{ transform:scaleY(1); }
  .side-rail, main, footer{ transition:none !important; }
}