:root{
  --black:#000000;
  --bg-deep:#000000;
  --bg-mid:#0c0c0c;
  --bg-card:#111111;
  --white:#fff;
  --cream:#ffffff;
  --gray:#8a8a8a;
  --gray2:#d6d6d6;
  --accent:#ffbb00;
  --accent2:#cc9600;
  --line:rgba(255,187,0,.14);
  --paper:#f4f1e8;
  --ink:#18140c;
  --ink2:#5c5646;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --label: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide: "Unbounded", -apple-system, sans-serif;
}

/* ---------- brand star motif: a faint tiled field for texture, and a
   single large slow-rotating mark for quiet, meditative presence behind
   a headline. Both reuse the same four-point sparkle used everywhere
   as "✦", just drawn as a path so it can tile and glow at low opacity. */
.star-field{
  position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 34 C51.2 44.4 55.6 48.8 66 50 C55.6 51.2 51.2 55.6 50 66 C48.8 55.6 44.4 51.2 34 50 C44.4 48.8 48.8 44.4 50 34 Z' fill='%23ffffff' fill-opacity='.55'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:120px 120px;
  opacity:.09;
}
.star-field.star-field--ink{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 34 C51.2 44.4 55.6 48.8 66 50 C55.6 51.2 51.2 55.6 50 66 C48.8 55.6 44.4 51.2 34 50 C44.4 48.8 48.8 44.4 50 34 Z' fill='%2318140c' fill-opacity='.6'/%3E%3C/svg%3E");
  opacity:.09;
}
.star-mark{
  position:absolute;pointer-events:none;z-index:-1;
  width:560px;height:560px;max-width:80vw;max-height:80vw;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C52.6 30 34.7 32.6 6 50 C34.7 32.6 52.6 65.4 50 94 C47.4 65.4 65.3 67.4 94 50 C65.3 67.4 47.4 34.6 50 6 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;
  opacity:.1;
  animation:star-spin 200s linear infinite;
}
.star-mark.star-mark--ink{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C52.6 30 34.7 32.6 6 50 C34.7 32.6 52.6 65.4 50 94 C47.4 65.4 65.3 67.4 94 50 C65.3 67.4 47.4 34.6 50 6 Z' fill='%2318140c'/%3E%3C/svg%3E");
  opacity:.12;
}
@keyframes star-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .star-mark{animation:none;} }

/* ---------- depth field: a layered texture for black sections, so they
   don't read as flat dead-black. A barely-there pixel grid plus two soft
   off-center glows (one warm accent, one cool white), both given a very
   slow opacity "breathe" so the depth never looks perfectly static. Pure
   CSS, no markup inside — an empty, absolutely-positioned, non-interactive
   div. Where scattered shapes are wanted too (currently just #work),
   a sibling .depth-field-shapes container holds them instead — see
   initDepthFieldShapes() in main.js — so the random scatter and the
   grid/glow can move independently. */
.depth-field, .depth-field--minimal{
  position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-position:0 0,0 0,0 0,0 0;
  background-size:72px 72px,72px 72px,100% 100%,100% 100%;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 14% 20%, rgba(255,187,0,.09), transparent 55%),
    radial-gradient(circle at 86% 82%, rgba(255,255,255,.06), transparent 55%);
  animation:dfGlowBreathe 17s ease-in-out infinite alternate;
}
.depth-field--minimal{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 14% 20%, rgba(255,187,0,.08), transparent 55%),
    radial-gradient(circle at 86% 82%, rgba(255,255,255,.055), transparent 55%);
  animation-duration:21s;
}
@keyframes dfGlowBreathe{
  0%{opacity:.82;}
  100%{opacity:1;}
}

/* scattered circles/sparkles: never a repeating tile — each shape is its
   own element, individually randomized in JS (position, size, initial
   rotation, fill vs outline) and given its own drift (position) and spin
   (rotation) so no two move the same way or in sync. Two elements per
   shape rather than one: the outer .df-shape carries the slow positional
   drift (a wander back and forth, own distance and duration per shape via
   --tx/--ty), the inner .df-shape-spin carries the rotation, either a
   continuous full turn (.df-spin-cw/.df-spin-ccw, own duration) or a
   smaller back-and-forth wobble (.df-spin-wobble, own degrees via --rot).
   Splitting drift and spin onto separate elements lets both run at once
   without one CSS animation overwriting the other's transform. */
.depth-field-shapes{
  position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden;
}
.df-shape{
  position:absolute;
  transform:translate(-50%,-50%);
  animation-name:dfDrift;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  will-change:transform;
}
.df-shape-spin{
  width:100%;height:100%;
  transform:rotate(var(--r0,0deg));
  will-change:transform;
}
.df-shape-spin.df-spin-cw{ animation:dfSpinCW linear infinite; }
.df-shape-spin.df-spin-ccw{ animation:dfSpinCCW linear infinite; }
.df-shape-spin.df-spin-wobble{ animation-name:dfWobble; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; }
.df-shape svg{display:block;width:100%;height:100%;}
@keyframes dfDrift{
  from{transform:translate(-50%,-50%) translate(0,0);}
  to{transform:translate(-50%,-50%) translate(var(--tx,14px),var(--ty,-14px));}
}
@keyframes dfSpinCW{
  from{transform:rotate(var(--r0,0deg));}
  to{transform:rotate(calc(var(--r0,0deg) + 360deg));}
}
@keyframes dfSpinCCW{
  from{transform:rotate(var(--r0,0deg));}
  to{transform:rotate(calc(var(--r0,0deg) - 360deg));}
}
@keyframes dfWobble{
  from{transform:rotate(var(--r0,0deg));}
  to{transform:rotate(calc(var(--r0,0deg) + var(--rot,25deg)));}
}
@media (prefers-reduced-motion:reduce){
  .depth-field, .depth-field--minimal{animation:none;}
  .df-shape, .df-shape-spin{animation:none !important;}
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg-deep);scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{
  font-family:var(--font);
  background:var(--bg-deep);color:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;cursor:none;
  width:100%;
  /* mobile: a sideways swipe should only ever scroll internal horizontal
     strips (the timeline scrubber, work-flora), never drag/rubber-band the
     whole page left or right. touch-action:pan-y restricts touch gestures
     on the page to vertical panning; overscroll-behavior-x turns off the
     horizontal elastic bounce some mobile browsers still apply at the
     edges even without real overflow. */
  touch-action:pan-y;
  overscroll-behavior-x:none;
}
a{color:inherit;text-decoration:none;}
em{font-style:italic;color:var(--accent);}
i.star{font-style:normal;}
@media (hover:none){ body{cursor:auto;} #cursor{display:none;} }

#cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--accent);mix-blend-mode:difference;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:width .25s,height .25s;will-change:transform;
}
#cursor.big{width:56px;height:56px;background:var(--cream);}

.wrap{max-width:1180px;margin:0 auto;}
section{position:relative;padding:0 28px;}

/* ---------- shared section head ----------
   sizes intentionally inverted from the original design: the small yellow
   "✦ tag" is now the primary, large headline, and what used to be the big
   white h2 is now a small secondary subtitle sitting above it. */
.section-head{max-width:620px;margin-bottom:60px;}
.section-head .tag{font-family:var(--wide);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.12;letter-spacing:0;color:var(--accent);font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:14px;}
.section-head.center .tag{justify-content:center;}
.section-head h2{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--cream);}
.section-head p{margin-top:18px;color:var(--gray2);font-size:1.02rem;line-height:1.6;max-width:520px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:999px;font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.01em;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease;}
.btn-primary{background:var(--accent);color:#161200;}
.btn-primary:hover{background:var(--cream);transform:translateY(-2px);}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:var(--cream);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.btn .go{transition:transform .25s ease;}
.btn:hover .go{transform:translate(3px,-2px);}

/* ---------- header: full-width solid bar ----------
   A solid bar as wide as the screen, sticky at the top: avatar + name
   and role on the left, section links and the "Get in touch" button
   on the right. Scrolling down tucks it away, scrolling up brings it
   back. Same layout on every page; it simply tightens on small
   screens (role line and avatar shrink, nothing wraps). */
header{position:sticky;top:0;z-index:1000;width:100%;}
html{scroll-padding-top:76px;}
.site-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;height:68px;padding:0 28px;
  background:#000;border-bottom:1px solid rgba(255,255,255,.12);
  transition:transform .35s ease;
}
.site-banner.sb-hidden{transform:translateY(-100%);}
.sb-brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--cream);}
.sb-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--accent);}
.sb-id{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.sb-name{font-family:var(--label);font-size:14px;font-weight:700;color:var(--cream);line-height:1.3;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.sb-name .sb-star{color:var(--accent);font-size:12px;}
.sb-role{font-family:var(--label);font-size:11px;color:var(--gray2);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-right{display:flex;align-items:center;gap:22px;flex-shrink:0;}
.sb-nav ul{list-style:none;display:flex;gap:6px;}
.sb-nav a{
  display:block;white-space:nowrap;padding:9px 16px;border-radius:999px;
  font-family:var(--label);font-weight:600;font-size:14px;
  color:var(--gray2);border:1px solid transparent;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.sb-nav a.current,.sb-nav a:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,187,0,.12);}
.sb-cta{flex-shrink:0;white-space:nowrap;padding:10px 22px;font-size:13px;}
@media (max-width:640px){
  .site-banner{height:60px;padding:0 14px;gap:8px;}
  .sb-avatar{width:34px;height:34px;}
  .sb-brand{gap:9px;}
  .sb-name{font-size:13px;}
  .sb-role{display:none;}
  .sb-right{gap:4px;}
  .sb-nav a{padding:8px 10px;font-size:13px;}
  .sb-cta{padding:9px 14px;font-size:12px;}
  html{scroll-padding-top:68px;}
}
@media (max-width:380px){
  .sb-id{display:none;}
  .sb-nav a{padding:8px 8px;}
  .sb-cta{padding:9px 11px;}
}
@media (prefers-reduced-motion:reduce){.site-banner{transition:none;}}
body{padding-top:0;}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:120px 28px 70px;background:var(--bg-deep);border-bottom:1px solid var(--line);position:relative;z-index:0;overflow:hidden;}
.page-hero .star-mark{top:-140px;right:-160px;}
.page-hero .tag{font-family:var(--wide);font-size:clamp(2.1rem,5.4vw,3.8rem);line-height:1.08;color:var(--accent);font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:16px;text-transform:uppercase;}
.page-hero h1{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--cream);text-transform:none;}
.page-hero p{margin-top:22px;max-width:560px;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.6;color:var(--gray2);}

/* ---------- HERO ---------- */
#hero{padding-top:76px;padding-bottom:90px;background:var(--bg-deep);text-align:center;position:relative;z-index:0;overflow:hidden;}
#hero .star-mark{top:-120px;right:-140px;}
#hero .hero-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
@keyframes heroBreathe{
  0%,100%{transform:scale(1);opacity:.92;}
  50%{transform:scale(1.035);opacity:1;}
}
@keyframes heroLoud{
  0%,100%{transform:translateY(0) scale(1);text-shadow:0 0 0 rgba(255,187,0,0);}
  20%{transform:translateY(-2px) scale(1.03) rotate(-0.5deg);text-shadow:0 0 18px rgba(255,187,0,.55);}
  40%{transform:translateY(1px) scale(0.99) rotate(0.5deg);text-shadow:0 0 6px rgba(255,187,0,.3);}
  60%{transform:translateY(-1px) scale(1.02);text-shadow:0 0 22px rgba(255,187,0,.6);}
  80%{transform:translateY(0) scale(1);text-shadow:0 0 4px rgba(255,187,0,.25);}
}
#hero .lead{margin-top:28px;max-width:560px;font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.6;color:var(--gray2);opacity:0;}
#hero .hero-cta{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap;opacity:0;justify-content:center;}
#hero .stats{margin-top:70px;display:flex;gap:48px;flex-wrap:wrap;opacity:0;justify-content:center;}
#hero .stat{display:flex;flex-direction:column;align-items:center;}
#hero .stat b{display:flex;align-items:flex-end;justify-content:center;height:2.1rem;font-family:var(--wide);font-size:1.7rem;font-weight:800;color:var(--cream);line-height:1;}
#hero .stat b.stat-infinity{font-size:2.9rem;transform:translateY(8px);}
#hero .stat span{font-family:var(--label);font-size:11px;letter-spacing:.06em;color:var(--gray);text-transform:uppercase;margin-top:4px;display:block;}

/* ---------- HERO BACKGROUND VIDEO ---------- */
#heroBgVideo{position:relative;height:76vh;min-height:440px;max-height:800px;overflow:hidden;background:var(--bg-deep);}
#heroBgVideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;}
#heroBgVideo .hbv-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 70%,var(--bg-deep) 100%);}
#heroBgVideo .hbv-caption{position:absolute;left:28px;bottom:32px;font-family:var(--label);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.65);text-transform:uppercase;}

/* headline lives over the background video rather than in the black #hero
   section below. It spans the FULL height of #heroBgVideo (top:0;bottom:0)
   so its flex-centered midpoint lands exactly on 50% of the block — the
   same reference point .hbv-orbit uses (left:50%;top:50% of this same
   container) — keeping the title perfectly concentric with the ring on
   every viewport, desktop and mobile alike. The caption sits safely below
   at bottom:32px with plenty of clearance from the centered title. */
#heroBgVideo .hbv-content{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 28px;text-align:center;
  /* this wrapper spans the whole hero (inset:0) purely to center the
     headline; without this it silently sits on top of the orbit buttons
     (same DOM-order/z-index tie) and swallows every hover/click meant for
     them. pointer-events:none here, with .htw.active re-enabling auto
     below, keeps the headline's own behavior unchanged while letting
     clicks/hover through to whatever's underneath everywhere else. */
  pointer-events:none;
}
#heroBgVideo .hbv-content h1{
  font-family:var(--wide);font-weight:900;font-size:clamp(1.1rem,3.6vw,2.2rem);line-height:1.15;
  letter-spacing:-0.02em;color:var(--cream);text-transform:uppercase;
  position:relative;width:min(300px,72vw);height:2.6em;text-align:center;
}
/* two phrases stacked in the same spot, cross-fading one at a time so the
   headline never grows wider than the orbit ring behind it */
#heroBgVideo .hbv-content h1 .htw{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(8px);
  width:100%;opacity:0;filter:blur(8px);
  transition:opacity .5s ease,transform .5s ease,filter .5s ease;
  pointer-events:none;
}
#heroBgVideo .hbv-content h1 .htw.active{
  opacity:1;filter:blur(0px);transform:translate(-50%,-50%) translateY(0);pointer-events:auto;
}
#heroBgVideo .hbv-content h1 .htw-in{display:inline-block;}
#heroBgVideo .hbv-content h1 .htw.active .htw-in.breathe{animation:heroBreathe 3.2s ease-in-out infinite;}
#heroBgVideo .hbv-content h1 .htw-in.loud{color:var(--accent);}
#heroBgVideo .hbv-content h1 .htw.active .htw-in.loud{animation:heroLoud 2.6s ease-in-out infinite;}
@media (max-width:640px){
  #heroBgVideo .hbv-content h1{width:min(230px,78vw);}
}

/* the three role tags now ride a slow-spinning orbit ring centered on the
   video block, sitting behind the headline (painted before .hbv-content in
   the DOM, so the title always reads on top even where the ring/tags pass
   behind it). --r is the orbit radius in px, kept as a variable so the
   mobile breakpoint only needs to change one number and have every child
   transform pick it up via calc().
   Placement trick per tag ("clock hand"): .hbv-orbit-pt applies
   rotate(angle) translateX(r) rotate(-angle) in one transform, which walks
   the point out to its spot on the circle and then cancels the rotation
   again — so the point sits correctly but isn't itself rotated.
   Continuous spin: .hbv-orbit-spin (parent, holds the ring's rotation) and
   .hbv-orbit-counter (child, inside each pt) run the exact same linear
   infinite keyframes in opposite directions at the same duration, so at
   every instant they cancel out — the ring keeps slowly turning while the
   pill labels inside stay upright and readable throughout. */
#heroBgVideo .hbv-orbit{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:460px;height:460px;--r:196px;z-index:1;
}
/* soft, squishy ring: a closed spline through ~64 points around a plain
   circle, redrawn every frame in JS (see initSoftRing() below). Each
   point's radius is its own tiny mass-spring, at rest sitting exactly on
   the circle; only wherever the cursor/finger actually comes near does
   that point get pulled inward (a gentle "give", like pressing into
   something soft), then it springs back with a little elastic overshoot.
   The SVG's own viewBox (-50 -50 100 100) is unit-less, so the same path
   math works unchanged at any CSS size — no resize handling needed for
   the ring itself, only for reading the pointer's position back out of
   screen pixels. */
#heroBgVideo .hbv-orbit-ring{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
}
#heroBgVideo .hbv-orbit-spin{
  position:absolute;inset:0;animation:hbvOrbitSpin 50s linear infinite;
}
#heroBgVideo .hbv-orbit-pt{
  position:absolute;left:50%;top:50%;width:max-content;
  transform:rotate(var(--angle)) translateX(var(--r)) rotate(calc(-1 * var(--angle))) translate(-50%,-50%);
}
#heroBgVideo .hbv-orbit-counter{
  display:inline-block;animation:hbvOrbitSpin 50s linear infinite reverse;
}
@keyframes hbvOrbitSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
#heroBgVideo .hbv-tag{
  position:relative;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--label);font-size:12px;letter-spacing:.06em;
  color:var(--gray2);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 16px 8px 8px;opacity:0;
  background:rgba(0,0,0,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transform:translateY(16px);--near:0;
  transition:border-color .25s ease,color .25s ease,transform .2s ease;
}
#heroBgVideo .hbv-tag .dot{color:var(--accent);font-size:12px;flex-shrink:0;}
#heroBgVideo .hbv-tag:hover{border-color:var(--accent);color:var(--accent);}
/* proximity glow: same mechanism as the portfolio cards (see
   initProximityGlow() in main.js) — a yellow frame that lights up as the
   pointer or a finger gets close, not just on direct hover. */
#heroBgVideo .hbv-tag::after{
  content:'';position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;z-index:2;
  border:1.5px solid rgba(255,187,0,var(--near));
  box-shadow:0 0 20px rgba(255,187,0,calc(var(--near) * .65));
}
@media (max-width:640px){
  #heroBgVideo .hbv-orbit{width:280px;height:280px;--r:118px;}
  #heroBgVideo .hbv-tag{font-size:11px;padding:7px 13px 7px 7px;}
}
@media (prefers-reduced-motion:reduce){
  /* no JS proximity loop in this case (see initProximityGlow()) — fall
     back to a plain instant highlight on actual hover/keyboard focus */
  #heroBgVideo .hbv-tag::after{transition:border-color .25s ease, box-shadow .25s ease;}
  #heroBgVideo .hbv-tag:hover::after, #heroBgVideo .hbv-tag:focus-visible::after{--near:1;}
}

/* rotating role word */
/* the rotating job title is the hero's second focal point (after the
   headline): sized up and bolded, in the display font and accent color,
   so it reads as a statement rather than a caption. Sizing/weight/color
   live on the .role-rotate container itself (not on .rw) so a plain
   ".rw"-classed measurer — appended straight into that container — always
   inherits the exact same styling as the visible word; giving it only to
   ".role-rotate .rw" previously under-measured the width and clipped the
   bold text (see the width-measuring script below). */
.role-rotate{
  position:relative;overflow:hidden;display:inline-block;vertical-align:top;text-align:left;
  font-family:var(--wide);font-weight:800;font-size:1.4em;letter-spacing:-0.01em;color:var(--accent);
  height:1.5em;line-height:1.5em;
}
.role-rotate .rw{position:absolute;left:0;top:0;line-height:1.5em;white-space:nowrap;opacity:0;transform:translateY(60%);transition:opacity .5s ease,transform .5s ease;}
.role-rotate .rw.active{opacity:1;transform:translateY(0);}
.role-rotate .rw.leaving{opacity:0;transform:translateY(-60%);}

/* ---------- trusted-by marquee ---------- */
#marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;background:var(--bg-mid);}
#marquee .m-label{text-align:center;font-family:var(--label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:16px;}
#marquee .track{
  --marquee-shift:-50%;
  display:flex;gap:60px;white-space:nowrap;width:max-content;
  animation:scroll-x 28s linear infinite;
  will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
#marquee span{font-family:var(--wide);font-size:14px;letter-spacing:.02em;color:var(--gray2);font-weight:600;text-transform:uppercase;}
#marquee span i{color:var(--accent);font-style:normal;margin-right:60px;}
@keyframes scroll-x{from{transform:translate3d(0,0,0);}to{transform:translate3d(var(--marquee-shift),0,0);}}

/* ---------- PROCESS ---------- */
#process{padding:140px 28px;background:var(--bg-deep);position:relative;z-index:0;overflow:hidden;}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.process-step{
  background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;
  transition:opacity .7s ease, transform .7s ease, border-color .4s ease;
  opacity:0;transform:translateY(30px);
}
.process-step.is-visible{opacity:1;transform:translateY(0);}
.process-grid.has-active .process-step{opacity:.38;transform:scale(.97);}
.process-grid.has-active .process-step.active{opacity:1;transform:scale(1);border-color:rgba(255,187,0,.4);}
.process-step .step-visual{
  position:relative;width:62%;aspect-ratio:1/1;margin:36px auto 0;background:var(--bg-mid);
  border-radius:16px;
  transition:transform .4s ease;overflow:hidden;
}
.process-step:hover .step-visual, .process-step.active .step-visual{transform:scale(1.06) rotate(4deg);}
.process-step .step-visual canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.process-step .step-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.process-step .step-tag{margin:18px auto 0;text-align:center;font-family:var(--label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);}
.process-step .step-body{padding:18px 30px 32px;text-align:center;}
.process-step .step-num{font-family:var(--wide);font-size:13px;font-weight:800;color:var(--accent);display:block;margin-bottom:16px;}
.process-step h3{font-family:var(--wide);font-size:1.2rem;font-weight:800;color:var(--cream);letter-spacing:0;text-transform:uppercase;}
.process-step p{margin-top:12px;color:var(--gray2);font-size:.94rem;line-height:1.6;}

/* ---------- EDIT TIMELINE (DaVinci-style) ---------- */
.tl-pin{padding-top:100px;background:var(--bg-deep);}
.tl-head{margin-bottom:40px;}
.tl-head .tag{font-family:var(--wide);font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--accent);font-weight:800;letter-spacing:0;display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.tl-head h3{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--cream);}

.timeline-wrap{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.tl-toolbar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);}
.tl-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);}
.tl-filename{margin-left:10px;font-family:var(--label);font-size:11px;letter-spacing:.04em;color:var(--gray);}

.tl-scroll{overflow-x:auto;overflow-y:hidden;padding:26px 26px 30px;position:relative;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.tl-scroll::-webkit-scrollbar{display:none;}
.tl-inner{position:relative;}
.tl-ruler{position:relative;height:22px;margin-bottom:14px;border-bottom:1px solid var(--line);}
.tl-tick{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;}
.tl-tick::before{content:'';width:1px;height:8px;background:rgba(255,255,255,.25);}
.tl-tick span{font-family:var(--label);font-size:10px;font-weight:600;color:var(--gray2);letter-spacing:.02em;margin-top:2px;white-space:nowrap;}

.tl-tracks{display:flex;flex-direction:column;gap:10px;transform-origin:center top;}
.tl-track{display:flex;align-items:stretch;gap:12px;}
.tl-track-label{flex:0 0 40px;display:flex;align-items:center;justify-content:center;font-family:var(--wide);font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--gray2);background:rgba(255,255,255,.05);border-radius:8px;}
.tl-lane{position:relative;height:58px;flex:1;background:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 40px);border-radius:8px;}

.tl-clip{
  position:absolute;top:5px;bottom:5px;border-radius:8px;
  background:rgba(255,187,0,.16);border:1.5px solid rgba(255,187,0,.4);
  padding:8px 12px;overflow:hidden;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .2s ease,opacity .4s ease,filter .4s ease;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  opacity:.32;filter:saturate(.25) brightness(.8);
}
.tl-clip.filled{opacity:1;filter:saturate(1) brightness(1);}
.tl-clip:hover, .tl-clip.tl-active{background:rgba(255,187,0,.3);border-color:var(--accent);transform:translateY(-2px);}
.tl-clip.v2{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.25);}
.tl-clip.v2:hover, .tl-clip.v2.tl-active{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);}
.tl-clip.a1{background:rgba(255,187,0,.1);border-color:rgba(255,187,0,.28);background-image:repeating-linear-gradient(90deg, rgba(255,187,0,.3) 0 2px, transparent 2px 7px);background-position:0 65%;background-size:100% 34%;background-repeat:no-repeat;}
.tl-clip .tl-clip-tag{font-size:18px;color:var(--accent);margin-right:8px;font-weight:800;transition:opacity .3s ease;}
.tl-clip .tl-clip-label{font-family:var(--wide);font-size:14px;font-weight:800;color:var(--cream);letter-spacing:0;white-space:nowrap;transition:opacity .3s ease;}

.tl-pin--mini .tl-lane{height:44px;}
.tl-pin--mini .tl-clip{padding:6px 10px;}
.tl-pin--mini .tl-clip .tl-clip-tag{font-size:15px;}
.tl-pin--mini .tl-clip .tl-clip-label{font-size:12px;}

.tl-tip{
  position:absolute;left:0;bottom:calc(100% + 10px);width:220px;
  background:var(--bg-mid);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;z-index:5;
}
.tl-clip:hover .tl-tip{opacity:1;transform:translateY(0);}
.tl-tip b{display:block;font-size:12px;color:var(--cream);margin-bottom:4px;}
.tl-tip span{font-size:11.5px;line-height:1.5;color:var(--gray2);}

.tl-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 10px rgba(255,187,0,.6);pointer-events:none;}
.tl-playhead::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--accent);}

/* ---------- work: category list + live preview (flora-style) ---------- */
#work{position:relative;background:var(--bg-deep);padding:140px 28px;z-index:2;}
/* .work-pin — title + list/preview together — is what GSAP now pins
   (position:fixed) for the whole scroll-through-projects phase, so
   "Selected work" stays on screen the entire time instead of scrolling
   away before the pin engages. While pinned it otherwise has no explicit
   z-index/background of its own, so once the #process section below
   scrolls up it can paint OVER the still-pinned, still-fixed work block
   (position:fixed always opens its own stacking context, and without a
   z-index it sorts by DOM order among same-level siblings — #process,
   being later in the document and itself z-index:0, would otherwise win).
   Giving it a z-index above #process's, plus an opaque background matching
   the section, keeps it reliably on top and solid while pinned. */
.work-pin{position:relative;z-index:2;background:var(--bg-deep);padding-top:8px;}
.work-pin .section-head{margin-bottom:36px;}
.work-flora{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;}
.work-list{display:flex;flex-direction:column;}
.work-cat{
  display:flex;align-items:baseline;gap:16px;background:none;border:none;border-top:1px solid var(--line);
  text-align:left;padding:14px 4px;cursor:pointer;font-family:var(--wide);color:rgba(255,255,255,.3);
  transition:color .35s ease,padding-left .35s ease;
}
.work-list .work-cat:last-child{border-bottom:1px solid var(--line);}
.work-cat .wc-num{font-family:var(--label);font-size:11px;color:var(--gray);flex-shrink:0;width:20px;}
.work-cat .wc-name{font-size:clamp(1.15rem,2vw,1.55rem);font-weight:800;letter-spacing:0;text-transform:uppercase;}
.work-cat:hover{color:rgba(255,255,255,.6);}
.work-cat.active{color:var(--cream);padding-left:14px;}
.work-cat.active .wc-num{color:var(--accent);}

.work-preview{position:relative;}
.preview-visual{width:100%;aspect-ratio:16/11;border-radius:12px;overflow:hidden;position:relative;background:var(--bg-mid);box-shadow:0 24px 60px rgba(0,0,0,.55);}
.preview-visual canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.preview-visual iframe{position:absolute;top:50%;left:50%;width:100%;height:177.77%;transform:translate(-50%,-50%);border:0;pointer-events:none;}
.preview-visual .grain{position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;pointer-events:none;}
.preview-visual .cut-tag{position:absolute;top:16px;left:18px;font-family:var(--label);font-weight:600;font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.8);text-transform:uppercase;}
.preview-visual img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.preview-link{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;}
.preview-link span{background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,187,0,.55);color:var(--accent);font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.05em;padding:9px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;transition:background .2s ease,transform .2s ease;}
.preview-link:hover span{background:var(--accent);color:#161200;transform:translateY(-2px);}
.preview-info{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;}
.preview-info h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;color:var(--cream);}
.preview-info span{font-size:11px;color:var(--gray);letter-spacing:.06em;}
.preview-tags{margin-top:6px;font-size:13px;color:var(--gray2);letter-spacing:.02em;}
/* the full project description was making the fixed preview panel too tall
   (crowding the list beside it), so it's collapsed by default and only
   opens on click; the toggle itself carries the affordance since a closed
   paragraph gives no visual hint there's more to read. */
.desc-toggle{
  margin-top:12px;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.05em;
  color:var(--accent);text-transform:uppercase;
}
.desc-toggle .dt-arrow{transition:transform .25s ease;}
.desc-toggle[aria-expanded="true"] .dt-arrow{transform:rotate(180deg);}
.preview-desc{
  font-size:.92rem;color:var(--gray2);line-height:1.55;max-width:540px;
  max-height:0;overflow:hidden;opacity:0;margin-top:0;
  transition:max-height .4s ease,opacity .3s ease,margin-top .4s ease;
}
.preview-desc.open{max-height:220px;opacity:1;margin-top:10px;}

/* ---------- work: mobile scroll-spotlight (name + its own visual, stacked) ---------- */
.work-mobile{display:none;}
.work-mobile-head{display:none;}
.wm-item{padding:44px 0;border-top:1px solid var(--line);opacity:.4;transform:scale(.97);transition:opacity .45s ease,transform .45s ease;}
.wm-item:first-child{border-top:none;}
.wm-item.active{opacity:1;transform:scale(1);}
.wm-name{display:flex;align-items:baseline;gap:10px;font-family:var(--wide);font-weight:800;font-size:1.25rem;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:18px;transition:color .45s ease;}
.wm-item.active .wm-name{color:var(--cream);}
.wm-name .wm-num{font-family:var(--label);font-size:11px;color:var(--gray);}
.wm-item.active .wm-name .wm-num{color:var(--accent);}
.wm-visual{width:100%;aspect-ratio:16/11;border-radius:10px;overflow:hidden;position:relative;background:var(--bg-mid);box-shadow:0 16px 40px rgba(0,0,0,.45);}
.wm-visual canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.wm-visual iframe{position:absolute;top:50%;left:50%;width:100%;height:177.77%;transform:translate(-50%,-50%);border:0;pointer-events:none;}
.wm-visual .grain{position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;pointer-events:none;}
.wm-visual .cut-tag{position:absolute;top:14px;left:16px;font-family:var(--label);font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.8);text-transform:uppercase;}
.wm-info{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;}
.wm-info h3{font-size:1.05rem;font-weight:700;color:var(--cream);}
.wm-info span{font-size:11px;color:var(--gray);}
.wm-tags{margin-top:5px;font-size:12px;color:var(--gray2);}
.wm-item .desc-toggle{
  margin-top:10px;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.05em;
  color:var(--accent);text-transform:uppercase;
}
.wm-item .desc-toggle .dt-arrow{transition:transform .25s ease;}
.wm-item .desc-toggle[aria-expanded="true"] .dt-arrow{transform:rotate(180deg);}
.wm-desc{
  font-size:.88rem;color:var(--gray2);line-height:1.5;
  max-height:0;overflow:hidden;opacity:0;margin-top:0;
  transition:max-height .4s ease,opacity .3s ease,margin-top .4s ease;
}
.wm-desc.open{max-height:260px;opacity:1;margin-top:8px;}
.wm-link{position:absolute;right:14px;bottom:14px;z-index:3;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,187,0,.55);color:var(--accent);font-family:var(--label);font-weight:600;font-size:10px;letter-spacing:.05em;padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
.wm-visual img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- PORTFOLIO GRID (portfolio.html) ---------- */
#portfolio-grid{padding:60px 28px 140px;background:var(--bg-deep);}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pf-card{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:border-color .3s ease,transform .3s ease;--near:0;}
.pf-card:hover{border-color:rgba(255,187,0,.4);transform:translateY(-4px);}
/* proximity glow: a yellow frame that lights up as the pointer (or a
   dragging finger) gets close, not just on direct hover — see
   initPortfolioProximity() in portfolio.html, which drives --near every
   frame (0 = far, 1 = right on the card). Sits above the card's own
   border so it reads as a highlight, not a layout change. */
.pf-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  border:2px solid rgba(255,187,0,var(--near));
  box-shadow:0 0 0 1px rgba(255,187,0,calc(var(--near) * .5)) inset, 0 0 32px rgba(255,187,0,calc(var(--near) * .55));
}
.pf-visual{width:100%;aspect-ratio:16/10;position:relative;background:var(--bg-mid);overflow:hidden;}
/* the preview picture: YouTube's own paused embed (see posterUrl() in
   portfolio.html) — not a plain <img>, which hotlinking img.youtube.com
   doesn't render here. Oversized + centered to crop 16:9 video into this
   card's 16:10 box, the same way the old hover-only iframe did. Always
   visible now (not faded in on hover), since it IS the resting-state
   thumbnail; hover just swaps its src to the autoplaying version. */
.pf-visual iframe{position:absolute;top:50%;left:50%;width:100%;height:177.77%;transform:translate(-50%,-50%);border:0;pointer-events:none;background:var(--bg-mid);}
@media (prefers-reduced-motion:reduce){
  /* no JS proximity loop in this case (see the script) — fall back to a
     plain instant highlight on actual hover/keyboard focus */
  .pf-card::after{transition:border-color .25s ease, box-shadow .25s ease;}
  .pf-card:hover::after, .pf-card:focus-within::after{--near:1;}
}
.pf-yt-link{position:absolute;right:12px;bottom:12px;z-index:4;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,187,0,.55);color:var(--accent);font-family:var(--label);font-weight:600;font-size:10px;letter-spacing:.05em;padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
.pf-yt-link:hover{background:var(--accent);color:#161200;}
.pf-body{padding:20px 22px 24px;}
.pf-body h3{font-family:var(--wide);font-size:1.02rem;font-weight:800;color:var(--cream);letter-spacing:0;}
.pf-body .pf-meta{margin-top:10px;font-size:12px;color:var(--gray);line-height:1.7;}
.pf-body .pf-desc{margin-top:10px;font-size:.88rem;color:var(--gray2);line-height:1.55;}
.pf-filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:48px;}
.pf-filter{padding:9px 18px;border-radius:999px;border:1px solid var(--line);font-family:var(--label);font-size:12px;font-weight:600;color:var(--gray2);cursor:pointer;transition:all .2s ease;background:none;}
.pf-filter:hover{border-color:var(--accent);color:var(--accent);}
.pf-filter.active{background:var(--accent);color:#161200;border-color:var(--accent);}

/* ---------- ABOUT ---------- */
#about{background:var(--bg-mid);padding:140px 28px;border-top:1px solid var(--line);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
#about .bio{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.65;font-weight:400;color:var(--gray2);}
#about .bio em{font-weight:600;color:var(--accent);}
.storyboard h4{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;margin-bottom:26px;}
.sb-row{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line);opacity:0;transform:translateX(-20px);}
.sb-row:last-child{border-bottom:1px solid var(--line);}
.sb-row .yr{font-family:var(--label);font-size:12px;color:var(--accent);font-weight:700;}
.sb-row .role{font-size:.98rem;font-weight:500;color:var(--cream);}
.sb-row .place{font-size:11px;color:var(--gray);white-space:nowrap;}

/* ---------- ABOUT PAGE (about.html) ---------- */
.about-hero{padding:190px 28px 100px;background:var(--bg-deep);position:relative;z-index:0;overflow:hidden;}
.about-hero .star-mark{top:-100px;right:-140px;}
.about-hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;}
.about-photo{width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;background:var(--bg-card);
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.about-hero .bio-lg{font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.6;color:var(--gray2);}
.about-hero .bio-lg strong{color:var(--cream);font-weight:700;}
.about-hero .bio-lg em{font-weight:600;}
.awards-section{padding:100px 28px 140px;background:var(--bg-mid);border-top:1px solid var(--line);position:relative;z-index:0;overflow:hidden;}
.awards-list{display:flex;flex-direction:column;}
.award-row{display:grid;grid-template-columns:128px 1fr;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line);}
.award-row:last-child{border-bottom:1px solid var(--line);}
.award-row .aw-yr{font-family:var(--wide);font-size:1rem;font-weight:800;color:var(--accent);white-space:nowrap;}
.award-row .aw-title{font-size:1.02rem;color:var(--cream);font-weight:600;}
.award-row .aw-sub{margin-top:4px;font-size:.88rem;color:var(--gray);}

/* ---------- ABOUT: skills/toolkit section ---------- */
.skills-section{padding:100px 28px 100px;background:var(--bg-deep);border-top:1px solid var(--line);position:relative;z-index:0;}
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;margin-top:48px;}
.skill-col h4{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;margin-bottom:20px;}
.skill-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);}
.skill-row:last-child{border-bottom:1px solid var(--line);}
.skill-row .sk-name{font-size:.92rem;color:var(--cream);font-weight:500;}
.skill-row .sk-level{font-family:var(--label);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.skill-row .sk-level.adv{color:var(--accent);border:1px solid rgba(255,187,0,.4);}
.skill-row .sk-level.int{color:var(--gray);border:1px solid var(--line);}
.style-list,.lang-list{list-style:none;margin:0;padding:0;}
.style-list li,.lang-list li{position:relative;padding:11px 0 11px 20px;border-top:1px solid var(--line);font-size:.92rem;color:var(--gray2);}
.style-list li:last-child,.lang-list li:last-child{border-bottom:1px solid var(--line);}
.style-list li::before{content:'✦';position:absolute;left:0;top:11px;color:var(--accent);font-size:11px;}
.lang-list li{padding-left:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.lang-list li b{color:var(--cream);font-weight:600;}
.lang-list .lang-level{color:var(--gray);font-size:.82rem;white-space:nowrap;}
@media (max-width:900px){
  .skills-grid{grid-template-columns:repeat(2,1fr);row-gap:40px;}
}
@media (max-width:640px){
  .skills-section{padding:70px 18px 70px;}
  .skills-grid{grid-template-columns:1fr;}
}

/* ---------- CTA / CONTACT ---------- */
#contact{text-align:left;padding:160px 28px;background:var(--accent);color:var(--bg-deep);}
#contact .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;}
#contact h2{font-family:var(--wide);font-size:clamp(1.8rem,4.6vw,3.4rem);font-weight:900;letter-spacing:0;text-transform:uppercase;transform:scale(.94);opacity:0;line-height:1.12;max-width:640px;}
#contact h2 em{color:var(--bg-deep);text-decoration:underline;text-decoration-color:rgba(0,0,0,.35);}
#contact .cta-side{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
#contact .email{font-family:var(--label);font-size:clamp(1rem,1.8vw,1.2rem);color:var(--bg-deep);font-weight:700;border-bottom:2px solid var(--bg-deep);}
.social-row{display:flex;flex-wrap:wrap;gap:22px;}
.social-row a{font-family:var(--label);font-size:12px;letter-spacing:.03em;text-transform:uppercase;font-weight:600;color:var(--bg-deep);border-bottom:1px solid transparent;transition:border-color .2s;}
.social-row a:hover{border-color:var(--bg-deep);}

/* ---------- CONTACT PAGE (contact.html) ---------- */
.contact-page{padding:190px 28px 140px;background:var(--bg-deep);position:relative;z-index:0;overflow:hidden;}
.contact-page .star-mark{top:-140px;left:-160px;}
.contact-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.contact-form{display:flex;flex-direction:column;gap:22px;}
.f-row{display:flex;flex-direction:column;gap:8px;}
.f-row label{font-family:var(--label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);}
.f-row input, .f-row select, .f-row textarea{
  background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:15px 16px;
  color:var(--cream);font-family:var(--font);font-size:.98rem;transition:border-color .2s ease;
}
.f-row input:focus, .f-row select:focus, .f-row textarea:focus{outline:none;border-color:var(--accent);}
.f-row textarea{resize:vertical;min-height:130px;font-family:var(--font);}
.contact-form .hp{position:absolute;left:-9999px;}
.contact-form button{align-self:flex-start;margin-top:6px;border:none;cursor:pointer;font-family:var(--label);}
.contact-side{display:flex;flex-direction:column;gap:44px;}
.contact-side .c-block h4{font-family:var(--label);font-size:11px;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;margin-bottom:14px;}
.contact-side .c-block a, .contact-side .c-block p{font-size:1.15rem;color:var(--cream);font-weight:600;}
.contact-side .social-row2{display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.contact-side .social-row2 a{font-size:1rem;color:var(--gray2);font-weight:500;transition:color .2s;}
.contact-side .social-row2 a:hover{color:var(--accent);}
.form-success{display:none;padding:24px;border:1px solid var(--accent);border-radius:12px;color:var(--accent);font-family:var(--label);font-size:.95rem;}
.form-success.show{display:block;}

/* ---------- FOOTER ----------
   the one paper-toned, light moment on the site — a quiet close to
   each page, the brand star settling rather than glowing. */
footer{background:var(--paper);color:var(--ink2);padding:70px 28px 36px;border-top:1px solid var(--line);position:relative;z-index:0;overflow:hidden;}
footer .star-mark--ink{bottom:-160px;right:-120px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;}
.foot-grid .f-logo{font-family:var(--wide);font-size:1.1rem;font-weight:800;color:var(--ink);}
.foot-grid .f-logo p{margin-top:14px;font-family:var(--font);font-size:.92rem;color:var(--ink2);line-height:1.6;max-width:260px;}
.foot-col h5{font-family:var(--label);font-size:11px;letter-spacing:.08em;color:#9a927c;text-transform:uppercase;margin-bottom:18px;}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.foot-col a{font-size:.92rem;color:var(--ink2);transition:color .2s;}
.foot-col a:hover{color:var(--accent2);}
.foot-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--label);font-size:11px;letter-spacing:.03em;color:#9a927c;text-transform:uppercase;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:56px;}
  .about-hero-grid{grid-template-columns:1fr;gap:44px;}
  .contact-page-grid{grid-template-columns:1fr;gap:56px;}
  .process-grid{grid-template-columns:1fr;}
  .tl-track-label{flex:0 0 28px;font-size:9px;}
  .tl-lane{height:48px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .pf-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:800px){
  body{cursor:auto;}
  section{padding:0 18px;}
  #hero{padding-top:56px;padding-bottom:60px;}
  #hero .stats{gap:32px;margin-top:52px;}
  #process{padding:90px 18px;}
  .process-step .step-visual{width:52%;margin-top:30px;}
  .process-step .step-body{padding:16px 22px 26px;}
  .tl-pin{padding-top:70px;}
  .tl-head{margin-bottom:28px;}
  .tl-scroll{padding:20px 18px 24px;}
  #work{padding:48px 18px 90px;}
  .work-desktop{display:none;}
  .work-mobile-head{display:block;}
  .work-mobile{display:block;}
  #about{padding:90px 18px;}
  #contact{padding:100px 18px;}
  #contact .wrap{align-items:flex-start;}
  footer{padding:56px 18px 28px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .page-hero{padding:130px 18px 50px;}
  .about-hero{padding:130px 18px 70px;}
  .awards-section{padding:70px 18px 90px;}
  .contact-page{padding:130px 18px 90px;}
  #portfolio-grid{padding:40px 18px 90px;}
  .pf-grid{grid-template-columns:1fr;}
}
@media (max-width:460px){
  .foot-grid{grid-template-columns:1fr;}
}