/* ============================================================
   Sina Sadeghian - Online Portfolio
   Palette sampled from SinaSadeghian-Portfolio-May26.pdf
   Type: Geist (display) + Inter (body/UI), self-hosted
   Theme: locked dark. One accent. One radius system.
   ============================================================ */

/* ---------- Self-hosted variable fonts ---------- */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/inter-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist'; font-style:normal; font-weight:500 800;
  font-display:swap; src:url('../fonts/geist-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;

  /* Surfaces */
  --navy:          #001C29;   /* PDF hero navy */
  --navy-2:        #021019;   /* page base */
  --ink:           #F2F3F3;
  --ink-2:         #C6CBCB;
  --muted:         #9BA3A3;
  --muted-2:       #7E8686;

  /* One accent, locked for the whole site */
  --accent:        #FFAC70;   /* PDF orange */
  --accent-2:      #F08A3C;
  --accent-3:      #E07437;
  --accent-soft:   rgba(255,172,112,.13);
  --accent-line:   rgba(255,172,112,.34);
  --on-accent:     #24170C;

  --line:          rgba(255,255,255,.09);
  --line-2:        rgba(255,255,255,.15);

  /* Glass: panels float in front of the photograph */
  --glass:         rgba(9,19,26,.44);
  --glass-strong:  rgba(6,14,20,.66);
  --glass-brd:     rgba(255,255,255,.12);
  --glass-blur:    blur(30px) saturate(155%);
  --glass-hi:      inset 0 1px 0 rgba(255,255,255,.1);

  /* Radius lock: interactive = pill, containers = 16, small = 10 */
  --r-pill:        999px;
  --r-card:        16px;
  --r-sm:          10px;

  /* Shadows tinted to the background hue, never pure black */
  --sh-1:          0 10px 30px -12px rgba(1,12,19,.8);
  --sh-2:          0 28px 60px -24px rgba(1,10,17,.9);
  --sh-3:          0 50px 90px -34px rgba(1,8,14,.95);

  --ease:          cubic-bezier(.22,1,.36,1);
  --ease-2:        cubic-bezier(.65,0,.35,1);

  /* Spacing rhythm */
  --s-section:     clamp(42px,5.5vw,84px);
  --maxw:          1200px;
  --gutter:        clamp(20px,5vw,64px);
  --nav-h:         84px;   /* floating capsule plus its top margin */

  /* z-index scale */
  --z-scene:       0;
  --z-content:     1;
  --z-nav:         60;
  --z-progress:    70;
  --z-modal:       80;
  --z-skip:        90;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  touch-action:manipulation;
  overflow-x:clip;            /* clip, not hidden: keeps the viewport scrolling */
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--navy-2);
  color:var(--ink-2);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(15px,.35vw + 14px,16.5px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
img,svg,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{
  margin:0; color:var(--ink);
  font-family:'Geist','Inter',ui-sans-serif,system-ui,sans-serif;
  font-weight:700; line-height:1.08; letter-spacing:-.03em;
  text-wrap:balance;
}
p{ margin:0 0 1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
:where(section,[id]){ scroll-margin-top:calc(var(--nav-h) + 28px); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:var(--z-skip);
  padding:12px 20px; background:var(--accent); color:var(--on-accent);
  font-weight:600; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

main,.foot{ position:relative; z-index:var(--z-content); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--s-section); position:relative; }
.section--tight{ padding-block:clamp(30px,4vw,55px); }

.eyebrow{
  display:block; font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 14px;
}
.h-sec{ font-size:clamp(2.1rem,4.6vw,3.5rem); margin-bottom:.42em; }
.lead{
  color:var(--ink-2); font-size:clamp(1.02rem,.5vw + .92rem,1.18rem);
  max-width:58ch; line-height:1.6;
}
.num{ font-variant-numeric:tabular-nums; }

/* ============================================================
   Glass surfaces
   ============================================================ */
.glass,.panel,.sol,.form,.clink,.roles,.pnav__card{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-hi),var(--sh-1);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
@media (prefers-reduced-transparency: reduce){
  .glass,.panel,.sol,.form,.clink,.roles,.pnav__card{
    background:#0a141b; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* Pointer-tracked sheen plus tilt: panels read as objects in the room */
/* No isolation here: isolation:isolate forms a backdrop root, which stops a
   panel from sampling the page behind it with backdrop-filter. */
[data-tilt]{ position:relative; }
[data-tilt]::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:2;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.085),transparent 45%);
  opacity:0; transition:opacity .45s var(--ease);
}
[data-tilt]:hover::after{ opacity:1; }
[data-tilt].tilt-ready{ transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease); }
[data-tilt].tilt-ready:hover{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-5px,0);
  border-color:var(--accent-line);
  box-shadow:var(--glass-hi),var(--sh-3);
}

/* ============================================================
   Scene: fixed photograph behind the site
   ============================================================ */
.scene{ position:fixed; inset:0; z-index:var(--z-scene); overflow:hidden; pointer-events:none; background:var(--navy-2); }

/* Pointer parallax only. Cheap and updated rarely, so it can stay in JS. */
.scene__pan{ position:absolute; inset:0; transform:translate3d(var(--px,0px),var(--py,0px),0); }

/* The photo rises at 22% of page speed. --scene-bottom is how far it must
   travel to clear the top, derived from the same numbers the layout uses. */
.scene__img{
  position:absolute; inset:0;
  --scene-bottom:calc(34vh + 75.93vw + 6vh);
  transform:translate3d(0,calc(var(--scroll,0px) * -0.07),0) scale(1.04);
  will-change:transform;
}
.scene__img img{
  position:absolute; right:0; width:66vw; height:auto; max-width:none;
  top:calc(34vh - 41.07vw);
  /* fade the left edge into the navy, and the bottom edge so it has no hard cut */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(180deg,#000 58%,transparent 92%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(180deg,#000 58%,transparent 92%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
@media (max-aspect-ratio: 1/1){
  .scene__img{
    --scene-h:max(130vh,177.78vw);
    --scene-bottom:calc(24vh + 0.65 * var(--scene-h) + 6vh);
  }
  .scene__img img{
    right:auto; height:var(--scene-h); width:calc(var(--scene-h) * .5625);
    top:calc(24vh - var(--scene-h) * .35);
    left:clamp(calc(100vw - var(--scene-h) * .5625),calc(60vw - var(--scene-h) * .2897),0px);
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 92%);
    mask-image:linear-gradient(180deg,#000 58%,transparent 92%);
    -webkit-mask-composite:source-over; mask-composite:add;
  }
}
/* Blur is a real filter on the one photo, not a cross-fade to a second
   pre-blurred copy. The cross-fade left sharp detail showing through. */
.scene__img img{ filter:blur(calc(max(var(--sp,0) - .66, 0) * 18px)); }
.sub .scene__img img{ filter:blur(calc(3px + var(--sp,0) * 3px)); }

.scene__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(1,14,21,.94) 0%,rgba(1,18,27,.78) 28%,rgba(1,20,30,.28) 52%,rgba(0,0,0,.06) 72%),
    linear-gradient(180deg,rgba(1,10,16,.45) 0%,transparent 22%,transparent 68%,rgba(2,16,25,.75) 100%);
}
.scene__shade::after{ content:''; position:absolute; inset:0; background:rgba(4,12,17,.42); opacity:var(--sp,0); }
@media (max-aspect-ratio: 1/1){
  .scene__shade{
    background:linear-gradient(180deg,rgba(1,12,19,.5) 0%,rgba(1,12,19,.12) 16%,rgba(1,12,19,.2) 30%,rgba(1,14,21,.72) 46%,rgba(2,16,25,.9) 100%);
  }
}

/* Where the browser supports it, every scroll-linked value runs on the
   compositor instead of a scroll listener, which is what makes it smooth. */
@supports (animation-timeline: scroll()){
  .scene__img{
    transform:scale(1.04);
    animation:scene-rise linear both;
    animation-timeline:scroll(root block);
    animation-range:0 calc(var(--scene-bottom) / 0.07);
  }
  @keyframes scene-rise{ to{ transform:translate3d(0,calc(-1 * var(--scene-bottom)),0) scale(1.04); } }

  .scene__img img{
    filter:blur(0px);
    animation:scene-soften linear both;
    animation-timeline:scroll(root block);
    animation-range:200vh 300vh;      /* stays sharp for the first two screens */
  }
  @keyframes scene-soften{ from{ filter:blur(0px) } to{ filter:blur(6px) } }
  .sub .scene__img img{ animation-name:scene-soften-sub; animation-range:100vh 200vh; }
  @keyframes scene-soften-sub{ from{ filter:blur(3px) } to{ filter:blur(6px) } }

  .scene__shade::after{
    opacity:0; animation:scene-dim linear both;
    animation-timeline:scroll(root block); animation-range:0 85vh;
  }
  @keyframes scene-dim{ to{ opacity:1; } }
}

/* grain lives on the fixed layer only, never on scrolling content */
.scene::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;
}

/* ============================================================
   Icons
   ============================================================ */
.ico{ width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ico--fill{ fill:currentColor; stroke:none; }

/* ============================================================
   Nav
   ============================================================ */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:var(--z-progress);
  background:linear-gradient(90deg,var(--accent-3),var(--accent));
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}
@supports (animation-timeline: scroll()){
  .progress{ animation:progress-grow linear both; animation-timeline:scroll(root block); }
  @keyframes progress-grow{ to{ transform:scaleX(1); } }
}
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  padding-top:calc(14px + env(safe-area-inset-top));
  pointer-events:none;              /* only the capsule itself is clickable */
}
/* Floating capsule, like a pill sitting over the page */
.nav__inner{
  pointer-events:auto; position:relative;
  display:flex; align-items:center; gap:20px;
  padding:9px 10px 9px 20px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 26px -14px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(10px) saturate(135%); backdrop-filter:blur(10px) saturate(135%);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-stuck .nav__inner{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px -18px rgba(0,0,0,.8);
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); }
.brand__mark{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent-3));
  color:var(--on-accent);
}
.brand__mark .ico{ font-size:20px; }
/* All caps, with the first S set larger: the rest read as the small caps
   under it rather than as a second word. */
.brand__txt{
  font-family:'Geist',sans-serif; font-size:1.02rem; font-weight:700;
  line-height:1; letter-spacing:.005em; white-space:nowrap;
}
.brand__txt span{ font-size:.76em; letter-spacing:.05em; }

.nav__links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.nav__links a{
  position:relative; display:block; padding:7px 12px; border-radius:var(--r-pill);
  font-size:.86rem; font-weight:450; color:var(--ink-2); white-space:nowrap;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:rgba(255,255,255,.07); }
.nav__links a.is-active:not(.btn){ color:var(--accent); }
.nav__inner > nav{ margin-inline:auto; }   /* links sit centred in the capsule */
.nav__inner .nav__cta{
  flex:none; position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,172,112,.26),rgba(255,172,112,.08));
  border:1px solid rgba(255,172,112,.42);
  color:var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,196,150,.85),       /* crisp orange line on the top edge */
    inset 0 2px 1px -1px rgba(0,0,0,.45),      /* the step under it: shallow emboss */
    inset 0 -1px 0 rgba(0,0,0,.35),            /* bottom edge */
    0 6px 18px -8px rgba(255,172,112,.45),     /* soft glow */
    0 2px 6px -2px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.nav__inner .nav__cta:hover{
  background:linear-gradient(180deg,rgba(255,172,112,.38),rgba(255,172,112,.16));
  border-color:rgba(255,172,112,.6); color:var(--accent); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,214,180,.95),
    inset 0 2px 1px -1px rgba(0,0,0,.4),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 10px 24px -8px rgba(255,172,112,.6),
    0 2px 6px -2px rgba(0,0,0,.5);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer;
  font-family:'Geist',sans-serif; font-weight:600; font-size:.9rem; letter-spacing:-.005em; white-space:nowrap;
  background:linear-gradient(145deg,var(--accent),var(--accent-3)); color:var(--on-accent);
  box-shadow:0 10px 24px -14px rgba(255,172,112,.8);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease),
             background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -16px rgba(255,172,112,.9); filter:brightness(1.05); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--ghost{
  background:rgba(8,18,25,.5); color:var(--ink); border-color:var(--glass-brd);
  box-shadow:var(--glass-hi);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.btn--ghost:hover{ background:rgba(255,172,112,.12); border-color:var(--accent-line); color:var(--accent); box-shadow:var(--glass-hi); }
.btn--sm{ padding:9px 17px; font-size:.83rem; }
.btn .ico{ font-size:1.05em; }

.nav__toggle{
  display:none; width:42px; height:42px; border-radius:50%; flex:none;
  background:rgba(8,18,25,.5); border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  cursor:pointer; position:relative;
}
.nav__toggle i{
  position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.nav__toggle i:nth-child(1){ top:15px; }
.nav__toggle i:nth-child(2){ top:20px; }
.nav__toggle i:nth-child(3){ top:25px; }
.nav.is-open .nav__toggle i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav.is-open .nav__toggle i:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:1000px){
  .nav__toggle{ display:block; order:3; }
  .brand{ margin-right:auto; }
  /* the capsule has to hold brand, CTA and toggle on one line */
  .nav__inner{ padding:8px 8px 8px 14px; gap:10px; }
  .nav__links{
    position:absolute; top:calc(100% + 10px); left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:12px; border-radius:var(--r-card);
    /* near solid: the capsule above is a backdrop root, so the blur here
       cannot sample the page and only the fill keeps the menu readable */
    background:rgba(5,15,22,.985);
    -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--glass-brd); box-shadow:var(--glass-hi),var(--sh-2);
    transform:translateY(-10px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
    max-height:calc(100dvh - var(--nav-h) - 24px); overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.is-open .nav__links{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
  .nav__links a{ padding:13px 14px; font-size:1rem; border-radius:var(--r-sm); }
  .nav__cta{ font-size:.78rem; padding:8px 13px; }
}

/* ============================================================
   Hero - asymmetric split, copy left, photograph right
   ============================================================ */
.hero{
  position:relative; min-height:100dvh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 72px); padding-bottom:clamp(60px,9vh,110px);
  overflow:hidden;   /* no isolation: it would stop the status pill blurring the photo */
}
.hero__content{
  max-width:min(640px,100%);
  transform:translate3d(calc(var(--px,0px) * -.6),calc(var(--py,0px) * -.6),0);
}
.hero__status{
  display:inline-flex; align-items:center; gap:9px; padding:7px 16px;
  border-radius:var(--r-pill); background:var(--glass); border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-size:.78rem; font-weight:450; color:var(--ink-2); letter-spacing:.01em;
}
.hero__status .ico{ color:var(--accent); font-size:1.05rem; }
.hero h1{
  font-size:clamp(3rem,8.4vw,6.2rem);
  font-weight:800; letter-spacing:-.05em; line-height:.9;
  margin:22px 0 18px;
}
.hero h1 em{
  font-style:normal; display:block;
  /* background-clip:text paints inside this box and nowhere else, so with a
     line-height under 1 the descender of the g in Sadeghian falls outside it
     and disappears. Grow the box downward, then take the same amount back
     off the margin so nothing below it moves. */
  padding-bottom:.16em; margin-bottom:-.16em;
  background:linear-gradient(100deg,var(--accent) 8%,#FFD9BC 52%,var(--accent-2) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  color:var(--ink-2); max-width:46ch;
  font-size:clamp(1.05rem,.5vw + .95rem,1.26rem); line-height:1.5; font-weight:420;
}
.hero__sub strong{ color:var(--ink); font-weight:600; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }

@media (max-width:880px){ .hero{ padding-top:calc(var(--nav-h) + 56px); } }
@media (max-aspect-ratio: 1/1){
  .hero{ align-items:flex-start; padding-top:calc(var(--nav-h) + 24vh); min-height:auto; padding-bottom:clamp(70px,12vh,120px); }
  .sub .phero{ padding-top:calc(var(--nav-h) + 20vh); }
}

/* ============================================================
   Reveal
   ============================================================ */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease),transform .75s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.07s } .rv-d2{ transition-delay:.14s } .rv-d3{ transition-delay:.21s }
.rv-d4{ transition-delay:.28s } .rv-d5{ transition-delay:.35s } .rv-d6{ transition-delay:.42s }
.tilt-ready{ transition-delay:0s !important; }

/* ============================================================
   Showreel - one featured film, one secondary. Not a 2-up grid.
   ============================================================ */
.reel__head{ display:grid; gap:18px; margin-bottom:clamp(34px,4vw,54px); max-width:70ch; }
.reel__grid{ display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:clamp(16px,2vw,24px); align-items:end; }
@media (max-width:860px){ .reel__grid{ grid-template-columns:1fr; } }

/* ============================================================
   Video cards
   ============================================================ */
.vcard{
  position:relative; display:block; width:100%; padding:0; cursor:pointer;
  background:var(--glass-strong); border:1px solid var(--glass-brd);
  border-radius:var(--r-card); overflow:hidden; text-align:left; color:inherit;
  box-shadow:var(--sh-1);
  transition:transform .45s var(--ease),border-color .4s var(--ease),box-shadow .45s var(--ease);
}
.vcard:hover{ transform:translateY(-5px); border-color:var(--accent-line); box-shadow:var(--sh-3); }
.vcard:active{ transform:translateY(-1px) scale(.995); }
.vcard__thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--navy); }
.vcard--v .vcard__thumb{ aspect-ratio:9/16; }
.vcard__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease),filter .45s var(--ease);
  filter:saturate(.92) brightness(.84);
}
.vcard:hover .vcard__thumb img{ transform:scale(1.05); filter:saturate(1.04) brightness(1); }
.vcard__thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(1,8,13,.82)); }
.vcard__play{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(242,243,243,.16); border:1.5px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .45s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.vcard__play .ico{ font-size:18px; fill:#fff; stroke:none; margin-left:2px; transition:fill .35s var(--ease); }
.vcard:hover .vcard__play{ background:var(--accent); border-color:var(--accent); transform:translate(-50%,-50%) scale(1.1); }
.vcard:hover .vcard__play .ico{ fill:var(--on-accent); }
.vcard__cap{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:16px 18px;
  font-family:'Geist',sans-serif; font-size:.92rem; font-weight:600; color:#fff;
  line-height:1.3; letter-spacing:-.015em;
}
.vcard__cap small{ display:block; font-family:'Inter',sans-serif; font-size:.76rem; font-weight:400; color:rgba(255,255,255,.72); margin-top:3px; letter-spacing:0; }
.vcard--lg .vcard__cap{ padding:22px 24px; font-size:1.12rem; }

/* a film and its badge travel together as one grid cell */
.vcell{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.vcell .vcard{ width:100%; }

.featured{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:7px 15px; border-radius:var(--r-pill);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  font-size:.78rem; font-weight:500; color:var(--accent);
}
.featured .ico{ font-size:1rem; }

/* credit strip - mirrors the PDF credit bars */
.roles{ display:flex; flex-wrap:wrap; margin:0 0 20px; border-radius:var(--r-sm); overflow:hidden; width:fit-content; max-width:100%; }
.roles span{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  font-size:.76rem; font-weight:450; color:var(--ink-2); white-space:nowrap;
  border-right:1px solid var(--line);
}
.roles span:last-child{ border-right:0; }
.roles .ico{ font-size:.95rem; color:var(--accent); opacity:.85; }

/* ============================================================
   Solutions - bento, five cells, no three-equal-card row
   ============================================================ */
.bento{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:clamp(34px,4vw,52px); }
@media (min-width:760px){
  .bento{ grid-template-columns:repeat(6,1fr); }
  .bento > :nth-child(1){ grid-column:span 4; }
  .bento > :nth-child(2){ grid-column:span 2; }
  .bento > :nth-child(3){ grid-column:span 2; }
  .bento > :nth-child(4){ grid-column:span 2; }
  .bento > :nth-child(5){ grid-column:span 2; }
}
.sol{
  position:relative; display:flex; flex-direction:column; gap:10px;
  min-height:208px; padding:24px; overflow:hidden; border-radius:var(--r-card);
}
.sol__ico{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  transition:transform .5s var(--ease);
}
.sol__ico .ico{ font-size:20px; }
.sol:hover .sol__ico{ transform:scale(1.07) rotate(-4deg); }
.sol h3{ font-size:clamp(1.1rem,1.5vw,1.32rem); margin-top:6px; }
.sol p{ color:var(--muted); font-size:.9rem; margin:0; }
.sol__foot{
  margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:flex-end;
  gap:12px; font-size:.8rem; font-weight:500; color:var(--accent);
}
.sol__go{ display:inline-flex; align-items:center; gap:6px; }
.sol__go .ico{ font-size:1rem; transition:transform .4s var(--ease); }
.sol:hover .sol__go .ico{ transform:translateX(4px); }
.sol__link{ position:absolute; inset:0; z-index:3; }
/* the lead cell carries a film still so the grid is not six text tiles */
.sol--lead{ min-height:260px; }
.sol--lead .sol__bg{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  /* treated as texture, not as a competing picture */
  opacity:.26; filter:saturate(.7) brightness(.62) blur(1.5px); transform:scale(1.03);
  transition:opacity .6s var(--ease),transform .9s var(--ease);
}
.sol--lead:hover .sol__bg{ opacity:.36; transform:scale(1.07); }
.sol--lead::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,rgba(2,12,19,.97) 34%,rgba(2,12,19,.72) 78%);
}

/* ============================================================
   About - editorial, pull quote carries the section
   ============================================================ */
/* Both columns run to the same depth so the section reads as one block
   rather than a long text column beside a longer stack of panels. */
.about__grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,74px); align-items:stretch;
}
.about__grid > *{ display:flex; flex-direction:column; min-width:0; }
/* The right column is the taller of the two, so the left one carries the
   slack. Sharing it between the quote, the prose and the languages panel
   lands that panel's bottom edge on the soft skills panel's bottom edge
   instead of leaving it hanging short. Both gaps start from the same base,
   so the extra splits evenly, and on one column there is no slack to
   share and the base spacing is what you get. */
.about__grid > :first-child{ justify-content:space-between; }
.about__lang{ margin-top:clamp(24px,2.3vw,28px); }
@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; }
  .about__lang{ margin-top:22px; }
}
.quote{
  font-family:'Geist',sans-serif; font-size:clamp(1.3rem,2.3vw,1.85rem);
  font-weight:500; line-height:1.3; letter-spacing:-.025em; color:var(--ink);
  margin:0 0 clamp(24px,2.3vw,28px); text-wrap:balance;
}
.quote span{ color:var(--accent); }
.about__body{ color:var(--ink-2); max-width:56ch; }
.about__body p + p{ margin-top:.9em; }

/* ============================================================
   Craft - meters, software, AI cloud
   ============================================================ */
.panel{ border-radius:var(--r-card); padding:clamp(20px,2.6vw,28px); }
.panel + .panel{ margin-top:14px; }
.panel h3{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
/* Same idea as the about grid: the meters stretch to meet the bottom of
   the cloud, which squares the section off. The cloud keeps the aspect
   ratio measured from the print portfolio, so it cannot be the one to
   give way. */
.craft__grid{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:14px; align-items:stretch;
}
.craft__grid > *{ display:flex; flex-direction:column; min-width:0; }
.craft__grid > .panel{ flex:1; }
@media (max-width:900px){
  .craft__grid{ grid-template-columns:1fr; }
  .craft__grid > .panel{ flex:none; }
}

.skills{ display:grid; gap:12px; }
.craft__grid > .panel .skills{ flex:1; align-content:space-between; }
.skill{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; }
.skill__name{ font-size:.9rem; font-weight:450; color:var(--ink-2); }
.dots{ display:flex; gap:6px; }
.dots i{
  width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.15); flex:none;
  transform:scale(.4); opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.skill.is-in .dots i{ transform:none; opacity:1; }
.dots i.on{ background:var(--accent); }
.dots i.half{ background:linear-gradient(90deg,var(--accent) 50%,rgba(255,255,255,.15) 50%); }
.skill.is-in .dots i:nth-child(1){ transition-delay:.02s } .skill.is-in .dots i:nth-child(2){ transition-delay:.07s }
.skill.is-in .dots i:nth-child(3){ transition-delay:.12s } .skill.is-in .dots i:nth-child(4){ transition-delay:.17s }
.skill.is-in .dots i:nth-child(5){ transition-delay:.22s }

/* A skill reads better as a labelled row than as a loose chip, and the
   column gives the panel a shape it can stretch into. */
.slist{ display:flex; flex-direction:column; }
.panel--fill{ flex:1; }
.panel--fill .slist{ flex:1; justify-content:space-between; }
.slist span{
  display:flex; align-items:center; gap:13px;
  padding:10px 0; font-size:.92rem; font-weight:450; color:var(--ink-2);
  border-bottom:1px solid var(--line);
  transition:color .25s var(--ease);
}
.slist span:last-child{ border-bottom:0; padding-bottom:0; }
.slist span:first-child{ padding-top:0; }
.slist .ico{ font-size:18px; color:var(--accent); flex:none; }
.slist span:hover{ color:var(--ink); }

.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  padding:6px 12px; border-radius:var(--r-pill); font-size:.78rem; font-weight:450;
  background:rgba(255,255,255,.055); border:1px solid var(--line); color:var(--ink-2);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.chip:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
/* These four sit on one line wherever one line fits, and wrap where it does
   not. The old rule forced four columns on any viewport over 380px, which is
   every modern phone: the row needed 381px inside a 329px panel, so the last
   chip hung outside the card and widened the whole document. */
.chips--sw{ display:flex; flex-wrap:wrap; gap:7px; }
.chip--hot{
  padding:6px 11px; font-size:.76rem; font-weight:600; white-space:nowrap; text-align:center;
  font-family:'Geist',sans-serif; letter-spacing:-.01em;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  border-color:transparent; color:var(--on-accent);
}
.chip--hot:hover{ color:var(--on-accent); background:linear-gradient(145deg,#FFC094,var(--accent)); border-color:transparent; }
.panel__note{ font-size:.8rem; color:var(--muted-2); margin:16px 0 10px; }

/* AI word cloud - position, size and weight measured from PDF page 1 */
.cloud{ position:relative; width:100%; aspect-ratio:250/116; container-type:inline-size; }
.cloud span{
  position:absolute; line-height:1; white-space:nowrap; letter-spacing:-.025em;
  font-family:'Geist',sans-serif;
  transition:color .35s var(--ease),transform .4s var(--ease); transform-origin:left 70%;
  cursor:default;
}
.cloud span:hover{ color:var(--accent) !important; transform:scale(1.05); }
.panel.is-in .cloud span{ animation:word-in .75s var(--ease) both; animation-delay:calc(.2s + var(--i) * 50ms); }
@keyframes word-in{
  from{ opacity:0; transform:translateY(8px) scale(.94); }
  to{ opacity:1; transform:none; }
}

/* ============================================================
   Experience - full-width timeline, single column
   ============================================================ */
.tl{ position:relative; margin-top:clamp(34px,4vw,54px); }
.tl__item{
  position:relative; display:grid; grid-template-columns:140px minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(16px,3vw,40px); align-items:start;
  padding:26px 0; border-top:1px solid var(--line);
}
.tl__item:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:820px){ .tl__item{ grid-template-columns:1fr; gap:8px; } }
.tl__yr{
  font-family:'Geist',sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.04em;
  color:var(--accent); font-variant-numeric:tabular-nums; padding-top:4px;
}
.tl__item h3{ font-size:clamp(1.15rem,1.8vw,1.45rem); margin-bottom:5px; }
.tl__role{ font-size:.88rem; font-weight:450; color:var(--muted); }
.tl__item ul{ margin:0; padding:0; list-style:none; color:var(--ink-2); font-size:.9rem; display:grid; gap:6px; }
.tl__item li{ position:relative; padding-left:16px; }
.tl__item li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:1.5px; background:var(--accent); opacity:.7; }

/* ============================================================
   Contact
   ============================================================ */
.contact__grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,5vw,64px); align-items:start; margin-top:clamp(34px,4vw,50px); }
@media (max-width:920px){ .contact__grid{ grid-template-columns:1fr; } }
.clink{ display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:var(--r-card); }
.clink + .clink{ margin-top:10px; }
.clink__ico{
  width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
}
.clink__ico .ico{ font-size:18px; }
.clink b{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.clink span{ font-size:.93rem; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }

.form{ border-radius:var(--r-card); padding:clamp(22px,3.2vw,34px); background:var(--glass-strong); }
.form h3{ font-size:1.3rem; margin-bottom:6px; }
.form__intro{ color:var(--muted); font-size:.89rem; margin-bottom:22px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr; } }
.field{ margin-bottom:16px; }
.field label{ display:block; margin-bottom:7px; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field label .req{ color:var(--accent); }
.field input,.field textarea,.field select{
  width:100%; padding:12px 15px; border-radius:var(--r-sm);
  background:rgba(1,8,13,.55); border:1px solid var(--line-2); color:var(--ink);
  font-size:.95rem; font-family:inherit;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:124px; line-height:1.6; }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; color:var(--ink);
  background-color:rgba(1,8,13,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA3A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:42px;
}
.field select option{ background:#0a141b; color:var(--ink); }
.field input::placeholder,.field textarea::placeholder{ color:#79817F; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); background:rgba(1,8,13,.7);
  box-shadow:0 0 0 3px rgba(255,172,112,.16);
}
.field.has-error input,.field.has-error textarea,.field.has-error select{ border-color:#FF8A8A; }
.field__err{ display:none; margin-top:6px; font-size:.78rem; font-weight:500; color:#FF9A9A; }
.field.has-error .field__err{ display:block; }

.seg{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (max-width:420px){ .seg{ grid-template-columns:1fr; } }
.seg > div{ position:relative; }
.seg label{
  display:flex; align-items:center; gap:9px; margin:0; padding:13px 15px; cursor:pointer;
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:rgba(1,8,13,.45);
  font-size:.86rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-2);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.seg label .ico{ font-size:17px; color:var(--muted); transition:color .3s var(--ease); }
.seg input{ position:absolute; opacity:0; width:0; height:0; }
.seg label:hover{ border-color:var(--accent-line); color:var(--ink); }
.seg input:checked + label{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.seg input:checked + label .ico{ color:var(--accent); }
.seg input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; }

.form__note{ margin-top:14px; font-size:.79rem; color:var(--muted-2); text-align:center; }
.form__status{ display:none; margin-top:16px; padding:13px 17px; border-radius:var(--r-sm); font-size:.88rem; font-weight:500; text-align:center; }
.form__status.ok{ display:block; background:rgba(96,170,230,.12); border:1px solid rgba(96,170,230,.42); color:#9CCFF5; }
.form__status.err{ display:block; background:rgba(255,138,138,.12); border:1px solid rgba(255,138,138,.4); color:#FFB4B4; }
.btn[aria-busy="true"]{ pointer-events:none; opacity:.72; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* ============================================================
   Footer - compact, one row
   ============================================================ */
.foot{
  background:rgba(2,10,16,.76);
  -webkit-backdrop-filter:blur(24px) saturate(150%); backdrop-filter:blur(24px) saturate(150%);
  border-top:1px solid var(--line);
  padding:30px 0 calc(30px + env(safe-area-inset-bottom));
  font-size:.85rem; color:var(--muted-2);
}
.foot__row{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; }
.foot__links a{ color:var(--ink-2); transition:color .25s var(--ease); display:inline-flex; align-items:center; gap:7px; }
.foot__links a:hover{ color:var(--accent); }
.foot__links .ico{ font-size:1rem; }

/* ============================================================
   Lightbox
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:var(--z-modal); display:none;
  align-items:center; justify-content:center; padding:clamp(14px,4vw,52px);
  background:rgba(1,7,11,.86);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  opacity:0; transition:opacity .35s var(--ease);
  overscroll-behavior:contain;
}
.lb.is-open{ display:flex; }
.lb.is-vis{ opacity:1; }
.lb__box{ position:relative; width:100%; max-width:1040px; transform:scale(.97) translateY(10px); transition:transform .4s var(--ease); }
.lb.is-vis .lb__box{ transform:none; }
.lb__frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r-card); overflow:hidden; background:#000; box-shadow:var(--sh-3); border:1px solid var(--line-2); }
.lb--v .lb__box{ max-width:min(420px,calc((100dvh - 160px) * .5625)); }
.lb--v .lb__frame{ aspect-ratio:9/16; }
.lb__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lb__cap{ margin-top:14px; font-family:'Geist',sans-serif; font-size:.95rem; font-weight:600; color:var(--ink); text-align:center; }
.lb__cap small{ display:block; font-family:'Inter',sans-serif; font-weight:400; color:var(--muted); font-size:.8rem; margin-top:3px; }
.lb__x{
  position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid var(--line-2); color:var(--ink);
  cursor:pointer; display:grid; place-items:center;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.lb__x .ico{ font-size:17px; }
.lb__x:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); transform:rotate(90deg); }
@media (max-width:560px){
  .lb__x{ top:auto; bottom:-48px; right:50%; transform:translateX(50%); }
  .lb__x:hover{ transform:translateX(50%) rotate(90deg); }
}
body.lb-open{ overflow:hidden; }

/* ============================================================
   Solution pages
   ============================================================ */
.phero{ position:relative; padding:calc(var(--nav-h) + clamp(60px,9vw,118px)) 0 clamp(42px,6vw,72px); overflow:hidden; }
.crumb{ display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:450; color:var(--muted-2); margin-bottom:20px; flex-wrap:wrap; }
.crumb a{ color:var(--ink-2); transition:color .25s var(--ease); }
.crumb a:hover{ color:var(--accent); }
.crumb .ico{ font-size:.9rem; opacity:.5; }
.phero h1{ font-size:clamp(2.3rem,6vw,4.1rem); letter-spacing:-.045em; margin-bottom:20px; max-width:17ch; }
.phero h1 em{
  padding-bottom:.16em; margin-bottom:-.16em;   /* see .hero h1 em */
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),#FFD9BC 60%,var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.phero__lead{ color:var(--ink-2); max-width:60ch; font-size:clamp(1rem,.45vw + .92rem,1.12rem); line-height:1.6; }

.proj{ padding-block:clamp(21px,3vw,40px); }
.proj__head{ max-width:68ch; margin-bottom:28px; }
.proj__tag{
  display:inline-block; margin-bottom:12px; padding:5px 13px; border-radius:var(--r-pill);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
}
.proj__head h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
.proj__head p{ color:var(--ink-2); }
.proj__sub{ margin:34px 0 20px; max-width:68ch; color:var(--ink-2); }
.proj__sub h3{ font-size:1.1rem; margin-bottom:10px; color:var(--ink); }
.pblock + .pblock{ margin-top:clamp(28px,3.6vw,44px); }

.vgrid{ display:grid; gap:clamp(14px,2vw,22px); }
.vgrid--1{ grid-template-columns:minmax(0,1fr); max-width:820px; }
.vgrid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.vgrid--v{ grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); max-width:860px; }

/* next/previous solution: two wide rows, not a row of equal cards */
.pnav{ padding-block:clamp(40px,6vw,70px); border-top:1px solid var(--line); }
.pnav__list{ display:grid; gap:10px; margin-top:24px; }
.pnav__card{
  display:flex; align-items:center; gap:16px; padding:17px 20px; border-radius:var(--r-card);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.pnav__card:hover{ border-color:var(--accent-line); transform:translateX(5px); }
.pnav__card .sol__ico{ width:36px; height:36px; border-radius:10px; }
.pnav__card .sol__ico .ico{ font-size:18px; }
.pnav__card b{ display:block; font-family:'Geist',sans-serif; color:var(--ink); font-size:.98rem; font-weight:600; letter-spacing:-.015em; }
.pnav__card small{ color:var(--muted-2); font-size:.8rem; }
.pnav__card .pnav__go{ margin-left:auto; color:var(--accent); font-size:1.1rem; }

.cta{ padding-block:clamp(50px,7vw,92px); text-align:center; border-top:1px solid var(--line); }
.cta h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:14px; }
.cta p{ color:var(--ink-2); max-width:52ch; margin-inline:auto; }
.cta .btn{ margin-top:24px; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .panel.is-in .cloud span{ animation:none !important; }
  /* no parallax, no receding sections, no scroll-linked blur */
  .scene__img,.scene__img img,.scene__shade::after,.progress,main > section{ animation:none !important; }
  .scene__img,.hero__content,main > section{ transform:none !important; }
  main > section{ filter:none !important; opacity:1 !important; }
  .scene__img img{ filter:blur(4px) !important; }
  [data-tilt].tilt-ready:hover{ transform:none; }
  .vcard:hover{ transform:none; }
  .vcard:hover .vcard__thumb img{ transform:none; }
}

/* ============================================================
   404 - a shaft with no bottom

   Depth comes from the ring spacing, not from the darkness. The rings
   are placed on a geometric run (72%, 51%, 36%, 25% ...), so they crowd
   together toward the middle the way receding parallels do, and the eye
   reads that as distance. Evenly spaced rings would read as a flat
   target instead.
   ============================================================ */
.pit{
  position:fixed; inset:0; z-index:var(--z-scene);
  overflow:hidden; pointer-events:none;
  /* the field the hole is cut into, same wash the inner pages sit on */
  background:radial-gradient(120% 95% at 76% 6%, #052433 0%, #021320 48%, #010a11 100%);
}
/* Black at the middle, dissolving into the navy at the lip, so it reads as a
   hole in the page rather than a disc laid on top of it. Nothing marks the
   distance on the way down, which is the point: the copy promises a void. */
.pit__shaft{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(116vmin,1020px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    #000           0%,
    #000          17%,
    #01060a       30%,
    #010a10       42%,
    rgba(2,13,20,.93) 55%,
    rgba(2,16,24,.75) 68%,
    rgba(3,19,28,.45) 81%,
    rgba(3,21,32,.17) 92%,
    transparent  100%);
}

/* Three rows: the heading above the shaft, the mouth of it left completely
   clear, the answer and the way out below. The padding is deliberately equal
   top and bottom so the clear row lands on the centre of the circle, which
   is centred on the viewport. */
.nf{
  position:relative; z-index:1;
  min-height:100dvh;
  display:grid;
  grid-template-rows:1fr clamp(130px,22vh,250px) 1fr;
  padding-top:calc(var(--nav-h) + 24px);
  padding-bottom:calc(var(--nav-h) + 24px);
}
.nf__top{ grid-row:1; align-self:end; text-align:center; }
.nf__bottom{ grid-row:3; align-self:start; text-align:center; }
.nf h1{
  font-family:'Geist',sans-serif;
  font-size:clamp(1.9rem,4.6vw,3.3rem); font-weight:800;
  letter-spacing:-.045em; line-height:1.04; margin:14px 0 0;
  text-wrap:balance;
}
.nf .lead{
  max-width:54ch; margin-inline:auto;
  text-shadow:0 1px 24px rgba(0,0,0,.7);   /* legible over the dark centre */
}
.nf .btn{ margin-top:clamp(26px,3.4vw,38px); }

/* ---------- Small utilities used by the markup ---------- */
.btn--block{ width:100%; }
.craft__grid{ margin-top:clamp(28px,3.5vw,44px); }
.edu__deg{ font-size:1rem; font-weight:600; margin-bottom:3px; letter-spacing:-.02em; }
.edu__deg--2{ margin-top:18px; }
.edu__meta{ font-size:.87rem; color:var(--muted); margin:0; }

/* ============================================================
   Depth on scroll: a section settles back as it exits the top
   while the next one arrives in front of it.

   BACKDROP ROOTS - read before touching this block.
   An ancestor that carries a filter, an opacity below 1, a mask, a blend
   mode, or an ANIMATION on filter/opacity that is filled outside its own
   range becomes a new backdrop root. Glass panels inside such an ancestor
   can only sample that ancestor, never the photograph fixed behind the
   page, so their backdrop-filter silently does nothing.

   That is why the fade and the blur live in one animation with no fill:
   they exist only in the few hundred milliseconds a section is actually
   leaving the viewport, and the section is a plain, rootless box for the
   whole time its panels are on screen. Only the scale keeps its fill;
   transform does not form a backdrop root.
   ============================================================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    main > section{
      transform-origin:50% 100%;
      animation:recede-geo linear, recede-soften linear;
      animation-timeline:view(block), view(block);
      animation-range:exit 35% exit 100%, exit 35% exit 100%;
      animation-fill-mode:both, none;
    }
    @keyframes recede-geo{ to{ transform:scale(.93); } }
    @keyframes recede-soften{
      from{ opacity:1;  filter:blur(0px) }
      to{   opacity:.4; filter:blur(5px) }
    }
  }
}

/* Narrow phones: the wordmark gives way to the monogram so the capsule fits */
/* SINASAD is short enough to keep the wordmark on a phone, which the old
   two-word logotype was not. */
@media (max-width:430px){
  .nav__cta{ font-size:.75rem; padding:8px 12px; }
}



/* ============================================================
   Nav: Solutions dropdown
   ============================================================ */
.nav__has-sub{ position:relative; }
.nav__has-sub::after{ content:''; position:absolute; left:0; right:0; top:100%; height:18px; }
.nav__sub{
  position:absolute; top:calc(100% + 16px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:272px; list-style:none; margin:0; padding:8px;
  border-radius:var(--r-card);
  background:rgba(6,16,23,.92); border:1px solid var(--glass-brd);
  box-shadow:var(--glass-hi),var(--sh-2);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav__sub a{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:10px; font-size:.85rem; white-space:nowrap; color:var(--ink-2);
}
.nav__sub a:hover{ background:rgba(255,255,255,.07); color:var(--ink); }
.nav__sub .ico{ font-size:17px; color:var(--accent); flex:none; }
@media (max-width:1000px){
  .nav__has-sub::after{ display:none; }
  .nav__sub{
    position:static; transform:none; opacity:1;
    visibility:inherit; pointer-events:inherit;
    min-width:0; margin:2px 0 6px 10px; padding:0 0 0 10px;
    background:none; border:0; border-left:1px solid var(--line); box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .nav__sub a{ font-size:.92rem; padding:10px 12px; }
}

/* ============================================================
   Inner pages: a floating geometric scene, one shape family per
   page, built from gradients and CSS 3D so nothing is loaded.

   FOCUS
   The focal plane is the content cards, not the background, so no
   shape is ever sharp. Distance is carried by blur AND by colour:
   far shapes fade toward the background the way aerial perspective
   works, which keeps them opaque so they never show through one
   another.
   ============================================================ */
.scene--geo{ background:radial-gradient(120% 95% at 76% 6%, #052433 0%, #021320 48%, #010a11 100%); }
.geo-field{ position:absolute; inset:0; }

.geo{
  position:absolute; display:block;
  left:var(--x); top:var(--y);
  width:var(--s); height:var(--h,var(--s));
  perspective:620px;
  --lit:#ffd9bd; --mid:#e8a06a; --dark:#0a1620; --edge:rgba(255,190,140,.4);
}

/* Three layers, because one transform cannot carry two motions:
   .geo__in  drifts the shape through the frame (translation only)
   .geo__sp  turns the shape on its own axis
   i         the faces, or the surface band on a body that cannot show
             its own rotation through a transform                     */
.geo__in{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.geo__sp{
  position:absolute; inset:0; transform-style:preserve-3d; will-change:transform;
  animation-duration:var(--rot,70s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-direction:var(--dir,normal);
  animation-fill-mode:both;
}

/* Turn rates. Every shape on a page draws a different one, so the field
   never falls into step with itself. */
.geo--r1{ --rot:38s;  --dir:normal;  }
.geo--r2{ --rot:57s;  --dir:reverse; }
.geo--r3{ --rot:82s;  --dir:normal;  }
.geo--r4{ --rot:116s; --dir:reverse; }

.geo--d1{ filter:blur(18px); --lit:#5f564c; --mid:#473a2f; --dark:#0b1721; --edge:rgba(120,110,100,.28); }
.geo--d2{ filter:blur(10px); --lit:#a08972; --mid:#7d5a41; --dark:#0a1620; --edge:rgba(170,145,120,.32); }
.geo--d3{ filter:blur(5px); }
.geo--d5{ filter:blur(30px); --lit:#ffceab; --mid:#d8905e; --dark:#0a1620; }

.geo--glow{ filter:blur(34px); }
.geo--glow .geo__in{ border-radius:50%; background:radial-gradient(circle,rgba(0,118,170,.3),transparent 64%); }
.geo--glow2 .geo__in{ background:radial-gradient(circle,rgba(255,172,112,.2),transparent 66%); }

/* ---- Sphere ----
   A sphere cannot show rotation through its own transform, so the surface
   markings travel across it under a highlight that stays where it is. */
.s-sphere{
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 34% 27%, var(--lit), var(--mid) 26%, var(--dark) 72%);
}
.s-sphere i{
  position:absolute; top:-8%; bottom:-8%; left:0; width:300%;
  background:repeating-linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.09) 6%, transparent 13%,
    rgba(0,0,0,.14) 21%, transparent 33.3333%);
  animation:surface-turn var(--rot,70s) linear infinite var(--dir,normal);
}
.s-sphere::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 34% 27%, rgba(255,255,255,.16), transparent 40%);
  box-shadow:inset -18px -24px 52px rgba(0,0,0,.45);
}

/* ---- Pyramid: four real faces meeting on the axis ----
   Each face stands on the base ring at s/2 and leans in by 30 degrees,
   which is exactly the angle that puts all four apexes on the axis. */
.s-pyr{ animation-name:pyr-spin; }
.s-pyr i{
  position:absolute; left:0; top:0; width:100%; height:100%;
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  transform-origin:50% 100%;
  backface-visibility:hidden;
}
.s-pyr i:nth-child(1){ transform:rotateY(0deg)   translateZ(calc(var(--s) / 2)) rotateX(30deg);
  background:linear-gradient(170deg, var(--lit), var(--mid) 86%); }
.s-pyr i:nth-child(2){ transform:rotateY(90deg)  translateZ(calc(var(--s) / 2)) rotateX(30deg);
  background:linear-gradient(170deg, var(--mid), var(--dark) 88%); }
.s-pyr i:nth-child(3){ transform:rotateY(180deg) translateZ(calc(var(--s) / 2)) rotateX(30deg);
  background:linear-gradient(170deg, var(--dark), #060f16 92%); }
.s-pyr i:nth-child(4){ transform:rotateY(270deg) translateZ(calc(var(--s) / 2)) rotateX(30deg);
  background:linear-gradient(170deg, var(--mid), var(--lit) 94%); }

/* ---- Ring: a tube, turning on the axis through its hole ---- */
.s-ring{
  border-radius:50%;
  animation-name:ring-spin;
  background:
    radial-gradient(circle,
      transparent 54%,
      rgba(255,255,255,.3) 61%,
      rgba(255,255,255,.04) 69%,
      rgba(0,0,0,.34) 83%,
      rgba(0,0,0,.55) 95%,
      transparent 100%),
    conic-gradient(from 210deg, var(--mid), var(--lit) 20%, var(--dark) 52%, var(--mid) 78%, var(--lit));
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 56%,#000 98%,transparent 100%);
  mask:radial-gradient(circle,transparent 54%,#000 56%,#000 98%,transparent 100%);
}

/* ---- Cube ---- */
.s-cube{ animation-name:cube-spin; }
.s-cube i{ position:absolute; inset:0; border:1px solid var(--edge); background:var(--dark); backface-visibility:hidden; }
.s-cube i:nth-child(1){ transform:translateZ(calc(var(--s) / 2)); background:linear-gradient(145deg,var(--mid),var(--dark)); }
.s-cube i:nth-child(2){ transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); background:linear-gradient(145deg,var(--dark),#060f16); }
.s-cube i:nth-child(3){ transform:rotateY(90deg)  translateZ(calc(var(--s) / 2)); background:linear-gradient(145deg,var(--dark),#070f17); }
.s-cube i:nth-child(4){ transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); background:linear-gradient(145deg,var(--dark),#070f17); }
.s-cube i:nth-child(5){ transform:rotateX(90deg)  translateZ(calc(var(--s) / 2)); background:linear-gradient(145deg,var(--lit),var(--mid)); }
.s-cube i:nth-child(6){ transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); background:#060d13; }

/* ---- Cylinder: a barrel turning on its long axis ----
   Same reasoning as the sphere. The lit band travels around the barrel
   while the dark silhouette edges stay put, which is what a turning
   cylinder actually looks like. */
.s-cyl{
  border-radius:50% / 14%; overflow:hidden;
  background:var(--dark);
  transform:rotate(-7deg);
}
.s-cyl i:nth-child(1){
  position:absolute; top:0; bottom:0; left:0; width:300%;
  background:repeating-linear-gradient(90deg,
    var(--dark) 0%, var(--mid) 10%, var(--lit) 16.6666%, var(--mid) 23%, var(--dark) 33.3333%);
  animation:surface-turn var(--rot,70s) linear infinite var(--dir,normal);
}
.s-cyl i:nth-child(2){
  position:absolute; left:0; right:0; top:0; height:28%;
  border-radius:50%;
  background:radial-gradient(ellipse at 42% 36%, var(--lit), var(--mid) 56%, var(--dark));
}
.s-cyl::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.62), transparent 20%, transparent 80%, rgba(0,0,0,.62));
}

/* Drift is translation only, so it never competes with the turn. */
.geo--f1 .geo__in{ animation:geo-f1 21s ease-in-out infinite alternate; }
.geo--f2 .geo__in{ animation:geo-f2 26s ease-in-out infinite alternate; }
.geo--f3 .geo__in{ animation:geo-f3 31s ease-in-out infinite alternate; }
.geo--f4 .geo__in{ animation:geo-f4 36s ease-in-out infinite alternate; }
@keyframes geo-f1{ to{ transform:translate3d(-2vw,3.5vh,0); } }
@keyframes geo-f2{ to{ transform:translate3d(2.5vw,-4vh,0); } }
@keyframes geo-f3{ to{ transform:translate3d(-3vw,-3vh,0); } }
@keyframes geo-f4{ to{ transform:translate3d(2vw,4.5vh,0); } }

@keyframes cube-spin{
  from{ transform:rotateX(-24deg) rotateY(34deg); }
  to{   transform:rotateX(-24deg) rotateY(394deg); }
}
@keyframes pyr-spin{
  from{ transform:rotateX(-14deg) rotateY(0deg); }
  to{   transform:rotateX(-14deg) rotateY(360deg); }
}
@keyframes ring-spin{
  from{ transform:rotateX(64deg) rotateZ(14deg); }
  to{   transform:rotateX(64deg) rotateZ(374deg); }
}
@keyframes surface-turn{ to{ transform:translateX(-33.3333%); } }

@supports (animation-timeline: scroll()){
  .scene--geo .geo-field{
    animation:geo-drift linear both;
    animation-timeline:scroll(root block);
    animation-range:0 100%;
  }
  @keyframes geo-drift{ to{ transform:translate3d(0,-16vh,0); } }
}
.scene--geo .scene__shade{
  background:
    linear-gradient(90deg,rgba(1,14,21,.82) 0%,rgba(1,16,24,.5) 34%,rgba(1,18,26,.12) 62%,transparent 80%),
    linear-gradient(180deg,rgba(1,10,16,.4) 0%,transparent 26%,transparent 72%,rgba(2,14,22,.6) 100%);
}
.sub .scene--geo .scene__shade::after{ opacity:calc(.18 + .22 * var(--sp,0)); }
@supports (animation-timeline: scroll()){
  .scene--geo .scene__shade::after{
    opacity:.18; animation:geo-dim linear both;
    animation-timeline:scroll(root block); animation-range:0 120vh;
  }
  @keyframes geo-dim{ to{ opacity:.4; } }
}
@media (prefers-reduced-motion: reduce){
  .geo__in,.geo__sp,.geo__sp i,.scene--geo .geo-field{ animation:none !important; }
}