:root{
  --bg:#080909;
  --bg2:#0d0f0e;
  --panel:#121413;
  --panel2:#181b19;
  --panel3:#202420;
  --text:#f1f1ed;
  --muted:#8e9490;
  --muted2:#b0b5b1;
  --accent:#d8ff35;
  --accent-rgb:216,255,53;
  --accent-ink:#080909;
  --shadow:0 28px 75px rgba(0,0,0,.34);
  --soft-shadow:0 14px 36px rgba(0,0,0,.18);
  --max:1220px;
}
html[data-theme="light"]{
  --bg:#f3f5ef;
  --bg2:#ecefe7;
  --panel:#ffffff;
  --panel2:#f8f9f5;
  --panel3:#e9ede4;
  --text:#111313;
  --muted:#747b76;
  --muted2:#4f5751;
  --accent:#9fbd00;
  --accent-rgb:159,189,0;
  --accent-ink:#101210;
  --shadow:0 26px 65px rgba(42,52,43,.13);
  --soft-shadow:0 12px 30px rgba(42,52,43,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
  transition:background .35s,color .35s;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
.wrap{max-width:var(--max);margin:auto;padding:0 28px}

/* NAV */
header{
  height:76px;
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4vw;
  background:color-mix(in srgb,var(--bg) 83%,transparent);
  backdrop-filter:blur(16px);
}
.logo{font-size:18px;font-weight:850;letter-spacing:-.05em}
.logo span{color:var(--accent)}
.nav-side{display:flex;align-items:center;gap:26px}
nav{display:flex;gap:27px;align-items:center;color:var(--muted2);font-size:13px}
nav a{transition:color .2s,transform .2s}
nav a:hover{color:var(--text);transform:translateY(-1px)}
.hire{
  padding:9px 14px;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:700;
}
.theme-switch{
  width:68px;height:34px;padding:4px;border:0;border-radius:999px;
  background:var(--panel3);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(128,138,130,.16);
}
.theme-knob{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
html[data-theme="light"] .theme-knob{transform:translateX(34px)}
.theme-knob svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
.menu-btn{display:none;border:0;border-radius:999px;background:var(--panel3);padding:9px 12px}

/* HOME */
.home{
  height:100vh;
  min-height:700px;
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding-top:76px;
  background:var(--bg);
}
.video-zone{
  flex:1;
  min-height:0;
  display:grid;
  place-items:center;
  padding:34px 5vw 24px;
}
.video-shell{
  position:relative;
  width:min(1120px,92vw);
  height:min(64vh,650px);
  min-height:360px;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.11),transparent 35%),
    var(--panel);
  box-shadow:var(--shadow);
}
.video-shell video{
  width:100%;height:100%;object-fit:cover;
  display:none;
  background:#000;
}
.video-shell.has-video video{display:block}
.video-shell.has-video .video-empty{display:none}
.video-shell::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.38),transparent 30%);
  opacity:.75;
}
html[data-theme="light"] .video-shell::after{opacity:.25}

.video-empty{
  position:absolute;inset:0;
  display:grid;place-items:center;
  text-align:center;
  padding:30px;
}
.video-empty-inner{max-width:520px}
.video-label{
  color:var(--accent);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.video-empty h2{
  margin:10px 0 10px;
  font-size:clamp(29px,4vw,55px);
  line-height:.96;letter-spacing:-.055em;
}
.video-empty p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.video-controls{
  position:absolute;left:18px;right:18px;bottom:17px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.video-controls-left{display:flex;gap:8px;align-items:center}
.video-btn{
  border:0;border-radius:999px;
  padding:9px 13px;
  cursor:pointer;
  font-size:10px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:rgba(10,12,11,.74);
  color:#f3f4ef;
  backdrop-filter:blur(9px);
}
.video-btn.accent{background:var(--accent);color:var(--accent-ink)}
.video-name{
  color:#d8dcd8;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  max-width:44vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
#videoUpload{display:none}

.home-bottom{
  min-height:124px;
  padding:20px 4vw 24px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.home-bottom small{
  display:block;color:var(--accent);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;
}
.home-bottom h1{
  margin:0;font-size:clamp(22px,2.8vw,39px);
  line-height:1;letter-spacing:-.045em;font-weight:730;
}
.home-bottom h1 em{font-style:normal;color:var(--muted)}
.home-actions{display:flex;gap:9px;flex-wrap:wrap}
.btn{
  border:0;border-radius:999px;
  background:var(--panel3);color:var(--text);
  padding:11px 16px;cursor:pointer;font-weight:700;font-size:11px;
  transition:transform .22s,background .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}

/* PROJECT SHEET slides over home */
.projects-sheet{
  position:relative;
  z-index:5;
  min-height:100vh;
  border-radius:34px 34px 0 0;
  background:var(--bg2);
  box-shadow:0 -30px 90px rgba(0,0,0,.28);
  transform:translateY(26px);
  transition:transform .75s cubic-bezier(.2,.8,.2,1);
  scroll-margin-top:76px;
}
.projects-sheet.visible,.projects-sheet.page-visible{transform:translateY(0)}
.projects-inner{padding:82px 0 105px}

/* HEADING + FADED HIGHLIGHTS */
.heading-block{
  position:relative;
  isolation:isolate;
  margin-bottom:48px;
}
.heading-ghost{
  position:absolute;
  left:-4px;
  top:-46px;
  z-index:-1;
  font-size:clamp(75px,13vw,190px);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.08em;
  color:rgba(var(--accent-rgb),.045);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
}
.kicker{
  color:var(--accent);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.heading-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:34px;margin-top:12px;
}
.heading-row h2{
  position:relative;
  display:inline-block;
  margin:0;
  font-size:clamp(46px,7vw,92px);
  line-height:.88;
  letter-spacing:-.07em;
}
.heading-row h2::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:8%;right:-5%;bottom:3%;
  height:25%;
  border-radius:50%;
  background:rgba(var(--accent-rgb),.12);
  filter:blur(9px);
  transform:rotate(-1.5deg);
}
.heading-row p{
  max-width:430px;margin:0;color:var(--muted);
  font-size:13px;line-height:1.65;
}

/* PROJECT CARDS — fanned stack, matching the reference composition */
.project-stage{
  position:relative;
  min-height:610px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:36px;
}
.project-pile{
  position:relative;
  width:min(980px,92vw);
  height:520px;
  perspective:1200px;
}

/* Industrial rectangular bezel with subtly chamfered corners */
.project-card{
  --fan-x:0px;
  --fan-r:0deg;
  --hover-x:0px;

  position:absolute;
  top:34px;
  left:50%;
  width:350px;
  height:470px;
  margin-left:-175px;
  overflow:hidden;
  background:
    radial-gradient(circle at 63% 16%,rgba(var(--accent-rgb),.16),transparent 31%),
    linear-gradient(145deg,#1b211c 0%,#111513 48%,#0c0f0d 100%);
  color:#f1f1ed;
  box-shadow:0 26px 65px rgba(0,0,0,.33);
  clip-path:polygon(
    0 12px,12px 0,
    calc(100% - 12px) 0,100% 12px,
    100% calc(100% - 12px),calc(100% - 12px) 100%,
    12px 100%,0 calc(100% - 12px)
  );

  opacity:0;
  transform:translateX(0) translateY(70px) rotate(0deg) scale(.93);
  transition:
    opacity .7s ease,
    transform .85s cubic-bezier(.16,.8,.2,1),
    filter .32s ease,
    box-shadow .32s ease;
}

/* custom thin bezel instead of a plain rectangle */
.project-card::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:8;
  pointer-events:none;
  clip-path:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(190,204,194,.28),
    inset 0 0 0 5px rgba(255,255,255,.012);
}
.project-card::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  top:13px;
  height:1px;
  z-index:9;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.42;
}

/* fan positions */
.project-card:nth-child(1){
  --fan-x:-275px;
  --fan-r:-7deg;
  z-index:1;
}
.project-card:nth-child(2){
  --fan-x:0px;
  --fan-r:0deg;
  z-index:3;
}
.project-card:nth-child(3){
  --fan-x:275px;
  --fan-r:7deg;
  z-index:2;
}

.project-card.show{
  opacity:1;
  transform:translateX(var(--fan-x)) translateY(0) rotate(var(--fan-r)) scale(1);
}
.project-card:nth-child(2).show{
  transform:translateX(0) translateY(-25px) rotate(0deg) scale(1.025);
}

.project-card:hover{
  z-index:20;
  filter:brightness(1.09);
  box-shadow:0 35px 85px rgba(0,0,0,.46);
  transform:translateX(var(--fan-x)) translateY(-20px) rotate(0deg) scale(1.045);
}
.project-card:nth-child(2):hover{
  transform:translateX(0) translateY(-40px) rotate(0deg) scale(1.045);
}

/* decorative bezel hardware */
.bezel-corner{
  position:absolute;
  z-index:10;
  width:18px;
  height:18px;
  pointer-events:none;
}
.bezel-corner::before,
.bezel-corner::after{
  content:"";
  position:absolute;
  background:rgba(var(--accent-rgb),.58);
}
.bezel-corner::before{width:13px;height:1px}
.bezel-corner::after{width:1px;height:13px}
.bezel-corner.tl{top:8px;left:8px}
.bezel-corner.tr{top:8px;right:8px;transform:rotate(90deg)}
.bezel-corner.bl{bottom:8px;left:8px;transform:rotate(-90deg)}
.bezel-corner.br{bottom:8px;right:8px;transform:rotate(180deg)}

.project-media{
  height:260px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:transparent;
}
.project-index{
  position:absolute;
  top:18px;
  left:20px;
  z-index:3;
  color:var(--accent);
  font:700 9px ui-monospace,Consolas,monospace;
  letter-spacing:.11em;
}
.project-type{
  position:absolute;
  right:18px;
  top:18px;
  z-index:3;
  font:8px ui-monospace,Consolas,monospace;
  letter-spacing:.08em;
  color:#8d968f;
  text-transform:uppercase;
}
.project-media svg{
  width:76%;
  height:71%;
  margin-top:42px;
  opacity:.83;
  filter:drop-shadow(0 15px 18px rgba(0,0,0,.35));
}
.project-content{
  padding:0 20px 18px;
  position:relative;
  z-index:3;
}
.discipline{
  color:#7f887f;
  font-size:8px;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:7px;
}

/* preserve the title animation */
.project-title{
  margin:0 0 10px;
  font-size:27px;
  line-height:.96;
  letter-spacing:-.052em;
  color:#f4f5ef;
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity .62s ease .22s,
    transform .7s cubic-bezier(.2,.8,.2,1) .22s,
    color .28s ease;
}
.project-card.show .project-title{
  opacity:1;
  transform:translateY(0);
}
.project-card:hover .project-title{
  transform:translateX(5px);
  color:var(--accent);
}

.summary{
  margin:0;
  min-height:50px;
  color:#959c96;
  font-size:10px;
  line-height:1.58;
}
.card-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:13px;
}
.card-spec{
  padding:8px 9px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px rgba(170,182,173,.10);
}
.card-spec small{
  display:block;
  color:#667068;
  font-size:7px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:3px;
}
.card-spec b{
  display:block;
  color:#b8beb9;
  font-size:9px;
  font-weight:520;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:13px;
}
.mini-tags{
  display:flex;
  gap:5px;
  min-width:0;
}
.mini-tag{
  padding:4px 6px;
  background:rgba(var(--accent-rgb),.07);
  color:#929b93;
  font-size:7px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.project-open{
  border:0;
  background:transparent;
  color:var(--accent);
  font:700 8px ui-monospace,Consolas,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  padding:5px 0;
}
.project-open:hover{color:#fff}

/* separate detail drawer: cards keep the exact fan shape */
.project-drawer{
  width:min(920px,88vw);
  max-height:0;
  overflow:hidden;
  margin:0 auto;
  opacity:0;
  transform:translateY(-12px);
  transition:max-height .55s ease,opacity .4s ease,transform .55s ease,margin .4s ease;
}
.project-drawer.open{
  max-height:360px;
  opacity:1;
  transform:translateY(0);
  margin-top:-5px;
}
.drawer-inner{
  position:relative;
  padding:22px 24px 24px;
  background:var(--panel2);
  clip-path:polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px));
  box-shadow:inset 0 0 0 1px rgba(128,138,130,.18);
}
.drawer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:18px;
}
.drawer-kicker{
  color:var(--accent);
  font:700 8px ui-monospace,Consolas,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.drawer-title{
  margin:6px 0 0;
  font-size:24px;
  letter-spacing:-.04em;
}
.drawer-close{
  border:0;
  background:var(--panel3);
  color:var(--muted2);
  width:30px;height:30px;
  cursor:pointer;
}
.drawer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.drawer-cell{
  padding:12px;
  background:var(--panel);
  min-height:76px;
}
.drawer-cell small{
  display:block;
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.09em;
  margin-bottom:6px;
}
.drawer-cell b{
  color:var(--muted2);
  font-size:10px;
  font-weight:540;
  line-height:1.45;
}

/* no faded card outlines; only a soft floor glow */
.project-stage::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:52px;
  width:min(760px,75vw);
  height:95px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(var(--accent-rgb),.055),transparent 67%);
  filter:blur(8px);
  pointer-events:none;
  z-index:-1;
}

@media(max-width:980px){
  .project-stage{min-height:565px}
  .project-pile{transform:scale(.86);transform-origin:top center;width:980px}
  .project-drawer{margin-top:-70px}
  .project-drawer.open{margin-top:-55px}
}
@media(max-width:720px){
  .project-stage{min-height:1030px;padding-top:15px}
  .project-pile{width:100%;height:980px;transform:none}
  .project-card{
    left:50%;
    width:min(360px,88vw);
    margin-left:calc(min(360px,88vw) / -2);
  }
  .project-card:nth-child(1){--fan-x:0px;--fan-r:-1.5deg;top:0}
  .project-card:nth-child(2){--fan-x:0px;--fan-r:1deg;top:260px}
  .project-card:nth-child(3){--fan-x:0px;--fan-r:-1deg;top:520px}
  .project-card:nth-child(2).show{transform:translateX(0) translateY(0) rotate(1deg) scale(1)}
  .project-card:hover,
  .project-card:nth-child(2):hover{transform:translateX(0) translateY(-10px) rotate(0deg) scale(1.02)}
  .project-drawer,
  .project-drawer.open{margin-top:0}
  .drawer-grid{grid-template-columns:1fr 1fr}
}

/* OTHER SECTIONS */
.section{position:relative;z-index:6;padding:118px 0;background:var(--bg)}
.about-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw}
.section-heading{
  position:relative;
  isolation:isolate;
}
.section-heading .ghost{
  position:absolute;z-index:-1;left:-4px;top:-34px;
  font-size:clamp(75px,10vw,145px);font-weight:900;
  letter-spacing:-.08em;line-height:.8;
  color:rgba(var(--accent-rgb),.045);
}
.section-heading h2{
  position:relative;display:inline-block;
  margin:12px 0 0;
  font-size:clamp(38px,5vw,67px);
  line-height:.94;letter-spacing:-.06em;
}
.section-heading h2::after{
  content:"";position:absolute;z-index:-1;
  left:8%;right:2%;bottom:2%;height:24%;
  border-radius:50%;background:rgba(var(--accent-rgb),.11);
  filter:blur(8px);
}
.about-copy{color:var(--muted);font-size:14px;line-height:1.75}
.specs{margin-top:28px;display:grid;gap:7px}
.spec{
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 16px;border-radius:12px;background:var(--panel);
  font-size:12px;
}
.spec b{color:var(--text);font-weight:600}.spec span{color:var(--muted)}
.contact-section{background:var(--bg2)}
.contact-grid{
  margin-top:38px;display:grid;grid-template-columns:.78fr 1.22fr;
  border-radius:22px;overflow:hidden;background:var(--panel);box-shadow:var(--soft-shadow)
}
.contact-copy{padding:31px}
.contact-copy h3{font-size:clamp(34px,4vw,56px);margin:0 0 13px;letter-spacing:-.055em;line-height:.94}
.contact-copy p{color:var(--muted);font-size:12px;line-height:1.65}
.contact-line{padding:11px 0;font-size:11px}
.contact-line small{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px}
form{display:grid;gap:12px;padding:31px;background:var(--panel2)}
.field{display:grid;gap:6px}
.field label{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.field input,.field textarea{
  width:100%;padding:12px 13px;border:0;border-radius:11px;
  background:var(--bg);color:var(--text);outline:none;
  box-shadow:inset 0 0 0 1px rgba(128,138,130,.12)
}
.field input:focus,.field textarea:focus{box-shadow:inset 0 0 0 1px var(--accent)}
.field textarea{min-height:120px;resize:vertical}
footer{
  position:relative;z-index:6;background:var(--bg);
  color:var(--muted);font-size:10px
}
.footer{padding:25px 28px;max-width:var(--max);margin:auto;display:flex;justify-content:space-between}


@media(max-width:820px){
  nav{
    position:absolute;top:68px;right:15px;display:none;min-width:200px;
    flex-direction:column;align-items:stretch;gap:0;background:var(--panel);
    padding:10px;border-radius:16px;box-shadow:var(--shadow)
  }
  nav.open{display:flex}
  nav a{padding:11px}
  header{height:68px}
  .menu-btn{display:block}
  .nav-side{gap:9px}
  .home{padding-top:68px}
  .video-zone{padding:22px 20px 17px}
  .video-shell{width:100%;height:min(58vh,550px);min-height:340px;border-radius:20px}
  .home-bottom{align-items:flex-start;flex-direction:column;padding:17px 20px 22px}
  .heading-row{display:block}.heading-row p{margin-top:18px}
  .about-layout,.contact-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .project-media{height:235px}
  .video-controls{align-items:flex-end}
  .video-controls-left{flex-direction:column;align-items:flex-start}
  .video-name{max-width:55vw}
  .wrap{padding:0 18px}
  .footer{padding:22px 18px}
}

/* ===== Revision: slogan, heading bezels, scroll-more projects ===== */
.brand-cluster{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.slogan{
  font-size:11px;
  font-weight:720;
  letter-spacing:.015em;
  color:var(--text);
  white-space:nowrap;
}
.slogan .accent-word{color:var(--accent)}
.cv-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 13px;
  border-radius:999px;
  background:var(--panel3);
  color:var(--muted2);
  font-size:10px;
  font-weight:760;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.cv-download:hover{
  transform:translateY(-2px);
  background:var(--accent);
  color:var(--accent-ink);
}

/* visible highlighted bezel headings */
.page-heading-bezel{
  display:inline-flex;
  align-items:center;
  min-height:58px;
  padding:0 23px;
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.035)),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.42),
    0 0 0 5px rgba(var(--accent-rgb),.035),
    0 12px 34px rgba(0,0,0,.12);
  position:relative;
  isolation:isolate;
}
.page-heading-bezel::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.10);
  pointer-events:none;
}
.page-heading-bezel h2,
.page-heading-bezel h1{
  margin:0;
  position:relative;
  z-index:1;
}
.home-heading-wrap{
  position:absolute;
  left:4vw;
  top:98px;
  z-index:3;
}
.home-heading-wrap .page-heading-bezel{
  min-height:48px;
  padding:0 18px;
}
.home-heading-wrap h1{
  font-size:21px;
  letter-spacing:-.035em;
}
.projects-heading-only{
  margin-bottom:44px;
}
.projects-heading-only .page-heading-bezel h2{
  font-size:clamp(46px,7vw,92px);
  line-height:.88;
  letter-spacing:-.07em;
}

/* eliminate numbering/kicker visuals */
.project-index,
.project-type,
.kicker,
.heading-ghost{
  display:none !important;
}

/* More projects section */
.more-projects{
  margin-top:52px;
  text-align:center;
}
.more-projects-heading{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background:var(--panel3);
  color:var(--text);
  font-size:12px;
  font-weight:780;
  letter-spacing:.04em;
  margin-bottom:20px;
}
.more-scroll-shell{
  position:relative;
}
.more-scroll{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px,31%);
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:4px 3px 14px;
}
.more-scroll::-webkit-scrollbar{display:none}
.more-card{
  scroll-snap-align:center;
  min-height:185px;
  padding:20px;
  border-radius:18px;
  background:
    radial-gradient(circle at 85% 10%,rgba(var(--accent-rgb),.09),transparent 35%),
    var(--panel2);
  box-shadow:var(--soft-shadow);
  text-align:left;
  transition:transform .25s ease,box-shadow .25s ease;
}
.more-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
}
.more-card small{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:8px;
}
.more-card h4{
  margin:12px 0 8px;
  font-size:20px;
  letter-spacing:-.035em;
}
.more-card p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.more-card .mini-tags{margin-top:18px}
.scroll-controls{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.scroll-arrow{
  width:38px;height:38px;border:0;border-radius:50%;
  background:var(--panel3);color:var(--text);cursor:pointer;
  transition:background .2s,transform .2s;
}
.scroll-arrow:hover{
  transform:translateY(-2px);
  background:var(--accent);color:var(--accent-ink);
}

/* Social profile area */
.social-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:18px;
}
.social-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-radius:11px;
  background:var(--panel2);
  color:var(--muted2);
  font-size:10px;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.social-link:hover{
  transform:translateY(-2px);
  background:var(--accent);
  color:var(--accent-ink);
}
.social-link span:last-child{opacity:.7}

/* section heading cleanup: no numbered kicker, just heading */
.section-heading > .ghost,
.section-heading > .kicker{display:none!important}
.section-heading h2{margin-top:0}

/* on light mode keep the fanned project-card body dark, matching chosen reference */
html[data-theme="light"] .project-card{
  background:
    radial-gradient(circle at 63% 16%,rgba(159,189,0,.14),transparent 31%),
    linear-gradient(145deg,#252b25 0%,#181c19 48%,#101311 100%);
  color:#f1f1ed;
}
html[data-theme="light"] .project-title{color:#f4f5ef}
html[data-theme="light"] .summary{color:#a9afa9}
html[data-theme="light"] .card-spec{background:rgba(255,255,255,.035)}
html[data-theme="light"] .card-spec b{color:#c3c8c3}
html[data-theme="light"] .mini-tag{color:#afb6af}

/* responsive */
@media(max-width:1040px){
  .slogan{font-size:10px;max-width:310px;white-space:normal;line-height:1.15}
  .cv-download{padding:0 10px}
}
@media(max-width:820px){
  .brand-cluster{gap:8px;max-width:65vw}
  .slogan{max-width:230px}
  .cv-download{font-size:9px}
  .home-heading-wrap{left:20px;top:86px}
  .more-scroll{grid-auto-columns:minmax(250px,72%)}
}
@media(max-width:560px){
  .slogan{max-width:170px;font-size:9px}
  .cv-download{min-height:30px;padding:0 8px;font-size:8px}
  .more-scroll{grid-auto-columns:86%}
  .social-grid{grid-template-columns:1fr}
}


/* =========================================================
   SHARED PAGE ANIMATION SYSTEM
   Every main page now uses the same upward-sheet language
   as the Projects page.
   ========================================================= */

/* Projects, About and Contact become stacked sheets */
.projects-sheet,
.about-sheet,
.contact-sheet{
  position:sticky;
  top:76px;
  min-height:calc(100vh - 76px);
  transform:translateY(34px);
  opacity:.985;
  transition:
    transform .82s cubic-bezier(.16,.8,.2,1),
    opacity .55s ease,
    border-radius .55s ease;
  will-change:transform;
}

.projects-sheet.page-visible,
.about-sheet.page-visible,
.contact-sheet.page-visible{
  transform:translateY(0);
  opacity:1;
}

/* progressively stack above the previous page */
.projects-sheet{z-index:5}
.about-sheet{z-index:6}
.contact-sheet{z-index:7}

.about-sheet,
.contact-sheet{
  border-radius:34px 34px 0 0;
  box-shadow:0 -30px 90px rgba(0,0,0,.26);
  overflow:hidden;
}
.about-sheet{background:var(--bg)}
.contact-sheet{background:var(--bg2)}

html[data-theme="light"] .projects-sheet,
html[data-theme="light"] .about-sheet,
html[data-theme="light"] .contact-sheet{
  box-shadow:0 -28px 70px rgba(44,55,45,.11);
}

/* small handle: same physical-sheet cue on every page */
.page-handle{
  width:82px;
  height:5px;
  border-radius:999px;
  background:color-mix(in srgb,var(--muted) 33%,transparent);
  margin:13px auto 0;
}

/* heading reveal like project titles */
.page-reveal-heading{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .68s ease .10s,
    transform .72s cubic-bezier(.2,.8,.2,1) .10s;
}
.page-visible .page-reveal-heading,
.home-ready .page-reveal-heading{
  opacity:1;
  transform:translateY(0);
}

/* content reveal */
.page-reveal-content{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .72s ease .20s,
    transform .78s cubic-bezier(.2,.8,.2,1) .20s;
}
.page-visible .page-reveal-content,
.home-ready .page-reveal-content{
  opacity:1;
  transform:translateY(0);
}

/* home uses the same reveal timing on first load */
.home-heading-wrap{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease .08s,transform .72s cubic-bezier(.2,.8,.2,1) .08s;
}
.video-shell{
  opacity:0;
  transform:translateY(38px) scale(.985);
  transition:
    opacity .78s ease .16s,
    transform .9s cubic-bezier(.16,.8,.2,1) .16s,
    box-shadow .35s ease;
}
.home-bottom{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .72s ease .28s,transform .78s cubic-bezier(.2,.8,.2,1) .28s;
}
body.home-ready .home-heading-wrap,
body.home-ready .video-shell,
body.home-ready .home-bottom{
  opacity:1;
  transform:none;
}

/* About detail rows fan/stagger in like project elements */
.spec{
  opacity:0;
  transform:translateY(22px) rotate(.25deg);
  transition:opacity .55s ease,transform .62s cubic-bezier(.2,.8,.2,1);
}
.about-sheet.page-visible .spec{opacity:1;transform:none}
.about-sheet.page-visible .spec:nth-child(1){transition-delay:.26s}
.about-sheet.page-visible .spec:nth-child(2){transition-delay:.32s}
.about-sheet.page-visible .spec:nth-child(3){transition-delay:.38s}
.about-sheet.page-visible .spec:nth-child(4){transition-delay:.44s}
.about-sheet.page-visible .spec:nth-child(5){transition-delay:.50s}

/* Contact panels arrive with opposing motion, then settle */
.contact-copy{
  opacity:0;
  transform:translateX(-30px) translateY(20px);
  transition:opacity .72s ease .22s,transform .8s cubic-bezier(.2,.8,.2,1) .22s;
}
.contact-grid form{
  opacity:0;
  transform:translateX(30px) translateY(20px);
  transition:opacity .72s ease .30s,transform .8s cubic-bezier(.2,.8,.2,1) .30s;
}
.contact-sheet.page-visible .contact-copy,
.contact-sheet.page-visible .contact-grid form{
  opacity:1;
  transform:none;
}

/* Social buttons stagger after contact panel */
.social-link{
  opacity:0;
  transform:translateY(14px);
}
.contact-sheet.page-visible .social-link{
  opacity:1;
  transform:none;
}
.contact-sheet.page-visible .social-link:nth-child(1){transition-delay:.42s}
.contact-sheet.page-visible .social-link:nth-child(2){transition-delay:.47s}
.contact-sheet.page-visible .social-link:nth-child(3){transition-delay:.52s}
.contact-sheet.page-visible .social-link:nth-child(4){transition-delay:.57s}
.contact-sheet.page-visible .social-link:nth-child(5){transition-delay:.62s}
.contact-sheet.page-visible .social-link:nth-child(6){transition-delay:.67s}

/* See-more shelf also animates upward */
.more-projects{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .72s ease .26s,transform .8s cubic-bezier(.2,.8,.2,1) .26s;
}
.projects-sheet.page-visible .more-projects{
  opacity:1;
  transform:none;
}
.more-card{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .58s ease,
    transform .65s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease;
}
.projects-sheet.page-visible .more-card{opacity:1;transform:none}
.projects-sheet.page-visible .more-card:nth-child(1){transition-delay:.34s}
.projects-sheet.page-visible .more-card:nth-child(2){transition-delay:.39s}
.projects-sheet.page-visible .more-card:nth-child(3){transition-delay:.44s}
.projects-sheet.page-visible .more-card:nth-child(4){transition-delay:.49s}
.projects-sheet.page-visible .more-card:nth-child(5){transition-delay:.54s}
.more-card:hover{transform:translateY(-5px)}

/* Keep enough scrolling room so sticky pages can layer naturally */
.page-spacer{
  height:18vh;
  min-height:120px;
  position:relative;
  z-index:4;
  pointer-events:none;
}

/* mobile top offset follows the smaller header */
@media(max-width:820px){
  .projects-sheet,
  .about-sheet,
  .contact-sheet{
    top:68px;
    min-height:calc(100vh - 68px);
    border-radius:25px 25px 0 0;
  }
}


/* =========================================================
   FINAL REFINEMENT — readability, matching bezels,
   professional motion, About intro, More Projects
   ========================================================= */

body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Stronger light-theme typography and contrast */
html[data-theme="light"]{
  --bg:#f2f4ee;
  --bg2:#e9ede5;
  --panel:#ffffff;
  --panel2:#f8faf5;
  --panel3:#e2e7dc;
  --text:#111511;
  --muted:#4d594f;
  --muted2:#29342c;
  --accent:#667b00;
  --accent-rgb:102,123,0;
  --accent-ink:#ffffff;
  --shadow:0 26px 65px rgba(35,48,37,.13);
  --soft-shadow:0 12px 30px rgba(35,48,37,.09);
}
html[data-theme="light"] body{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  letter-spacing:.002em;
}
html[data-theme="light"] .slogan,
html[data-theme="light"] nav,
html[data-theme="light"] .home-bottom h1,
html[data-theme="light"] .page-heading-bezel h1,
html[data-theme="light"] .page-heading-bezel h2,
html[data-theme="light"] .section-heading h2,
html[data-theme="light"] .about-copy,
html[data-theme="light"] .contact-copy,
html[data-theme="light"] .more-card{
  color:var(--text);
}
html[data-theme="light"] nav a,
html[data-theme="light"] .about-copy,
html[data-theme="light"] .contact-copy p,
html[data-theme="light"] .more-card p,
html[data-theme="light"] .spec span,
html[data-theme="light"] .summary{
  color:var(--muted);
}
html[data-theme="light"] nav a{font-weight:650}
html[data-theme="light"] .home-bottom h1,
html[data-theme="light"] .page-heading-bezel h1,
html[data-theme="light"] .page-heading-bezel h2,
html[data-theme="light"] .section-heading h2{
  font-weight:800;
}
html[data-theme="light"] .home-bottom h1 em{color:#58645a}
html[data-theme="light"] .video-empty p{color:#465248}
html[data-theme="light"] .cv-download{
  background:#dde3d7;
  color:#1e291f;
}
html[data-theme="light"] .theme-switch{background:#dce2d6}
html[data-theme="light"] .page-heading-bezel{
  background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.035)),
    #fff;
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.46),
    0 0 0 5px rgba(var(--accent-rgb),.035),
    0 12px 28px rgba(49,62,49,.08);
}

/* One consistent bezel component for Projects, About and Contact */
.section-heading{
  margin-bottom:32px;
}
.section-heading .page-heading-bezel{
  display:inline-flex;
}
.section-heading .page-heading-bezel h2{
  font-size:clamp(42px,6vw,78px);
  line-height:.9;
  letter-spacing:-.065em;
}
.section-heading .page-heading-bezel h2::before,
.section-heading .page-heading-bezel h2::after{
  display:none !important;
}

/* Remove the previous decorative underline/glint and use a cleaner bezel settle */
.page-heading-bezel::after{
  display:none !important;
}
@keyframes professionalBezelSettle{
  0%{
    box-shadow:
      inset 0 0 0 1px rgba(var(--accent-rgb),.16),
      0 0 0 0 rgba(var(--accent-rgb),0),
      0 8px 22px rgba(0,0,0,.06);
  }
  55%{
    box-shadow:
      inset 0 0 0 1px rgba(var(--accent-rgb),.48),
      0 0 0 5px rgba(var(--accent-rgb),.04),
      0 13px 34px rgba(0,0,0,.12);
  }
  100%{
    box-shadow:
      inset 0 0 0 1px rgba(var(--accent-rgb),.42),
      0 0 0 5px rgba(var(--accent-rgb),.035),
      0 12px 30px rgba(0,0,0,.10);
  }
}
body.home-ready .home-heading-wrap .page-heading-bezel,
.projects-sheet.page-visible .projects-heading-only .page-heading-bezel,
.about-sheet.page-visible .section-heading .page-heading-bezel,
.contact-sheet.page-visible .section-heading .page-heading-bezel{
  animation:professionalBezelSettle .72s cubic-bezier(.2,.8,.2,1) .08s both;
}

/* More professional text motion: no blur, no flashy effects */
.soft-text-reveal{
  opacity:0;
  filter:none !important;
  transform:translateY(10px);
  transition:
    opacity .55s ease,
    transform .68s cubic-bezier(.2,.8,.2,1);
}
.soft-text-reveal.text-in{
  opacity:1;
  transform:none;
}
.slogan .accent-word{
  animation:none !important;
  text-shadow:none !important;
}
body.home-ready .slogan .accent-word{
  animation:none !important;
}

/* Keep page animation dominant; child movement stays understated */
.page-reveal-heading{
  transform:translateY(14px);
  transition:
    opacity .58s ease .08s,
    transform .72s cubic-bezier(.2,.8,.2,1) .08s;
}
.page-reveal-content{
  transform:translateY(22px);
  transition:
    opacity .64s ease .16s,
    transform .76s cubic-bezier(.2,.8,.2,1) .16s;
}

/* About introduction block directly below heading */
.about-sheet .wrap{
  max-width:var(--max);
}
.about-section-layout{
  display:block;
}
.about-intro-panel{
  max-width:900px;
  margin:0 0 34px;
  padding:23px 25px 24px;
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(var(--accent-rgb),.055),transparent 44%),
    var(--panel);
  box-shadow:var(--soft-shadow);
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .62s ease .18s,
    transform .74s cubic-bezier(.2,.8,.2,1) .18s;
}
.about-sheet.page-visible .about-intro-panel{
  opacity:1;
  transform:none;
}
.about-intro-label{
  display:block;
  margin-bottom:9px;
  color:var(--accent);
  font-size:9px;
  font-weight:780;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.about-intro-panel p{
  margin:0;
  max-width:800px;
  color:var(--muted2);
  font-size:clamp(14px,1.55vw,18px);
  line-height:1.72;
}
html[data-theme="light"] .about-intro-panel p{color:#354138}

.about-profile-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:38px;
  align-items:start;
}
.about-note{
  padding:22px 24px;
  border-radius:17px;
  background:var(--panel2);
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  box-shadow:var(--soft-shadow);
}
.about-note strong{
  display:block;
  margin-bottom:8px;
  color:var(--text);
  font-size:14px;
}
.about-profile-grid .specs{
  margin-top:0;
}

/* Ensure More Projects is clearly present and visually separated */
.more-projects{
  display:block !important;
  opacity:0;
  transform:translateY(22px);
  margin-top:62px;
  padding-top:4px;
}
.projects-sheet.page-visible .more-projects{
  opacity:1;
  transform:none;
}
.more-projects-heading{
  min-width:190px;
  background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),.025)),
    var(--panel3);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.22);
}
.more-scroll{
  padding-top:7px;
}
.more-card{
  min-height:195px;
  border-radius:18px;
  box-shadow:
    inset 0 0 0 1px rgba(125,138,128,.08),
    var(--soft-shadow);
}
html[data-theme="light"] .more-card{
  background:
    radial-gradient(circle at 85% 10%,rgba(var(--accent-rgb),.06),transparent 36%),
    #fff;
}
html[data-theme="light"] .more-card h4{color:#172019}
html[data-theme="light"] .more-card p{color:#536056}

/* Cleaner focus/hover motion */
.btn,
.cv-download,
.social-link,
.scroll-arrow{
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}
.btn:hover,
.cv-download:hover,
.social-link:hover,
.scroll-arrow:hover{
  transform:translateY(-2px);
}
.btn::after,
.cv-download::after{
  display:none !important;
}

/* Contact section text clarity */
.contact-copy h3{
  font-weight:780;
}
html[data-theme="light"] .contact-line{
  color:#1f2921;
}
html[data-theme="light"] .contact-line small{
  color:#657166;
}
html[data-theme="light"] .social-link{
  background:#f1f4ed;
  color:#2d382f;
}
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea{
  background:#fff;
  color:#101510;
  box-shadow:inset 0 0 0 1px rgba(57,72,59,.16);
}
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder{
  color:#778178;
}

/* Reduced motion stays respected */
@media(prefers-reduced-motion:reduce){
  .about-intro-panel{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .page-heading-bezel{
    animation:none !important;
  }
}

@media(max-width:820px){
  .about-profile-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .about-intro-panel{
    padding:19px 20px;
  }
}


/* =========================================================
   MORE PROJECTS — visibility/accessibility fix
   Kept permanently rendered so it cannot be hidden by the
   stacked-page IntersectionObserver.
   ========================================================= */

/* Projects can grow naturally to contain the fan + More Projects shelf.
   It still rises over Home using its existing transform animation. */
.projects-sheet{
  position:relative !important;
  top:auto !important;
  min-height:100vh;
}

/* Always show the More Projects area once the Projects page is reached. */
.more-projects{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  position:relative;
  z-index:30;
  width:100%;
  margin-top:64px !important;
  padding:24px 0 12px !important;
}

/* Clear centred heading so the section cannot be missed */
.more-projects-heading{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:210px;
  min-height:44px;
  margin:0 auto 24px !important;
  padding:0 20px !important;
  border-radius:12px !important;
  background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.025)),
    var(--panel) !important;
  color:var(--text) !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.035em !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.32),
    0 0 0 4px rgba(var(--accent-rgb),.025),
    0 10px 28px rgba(0,0,0,.10) !important;
}

/* Horizontal shelf is always present and scrollable */
.more-scroll-shell{
  display:block !important;
  visibility:visible !important;
  position:relative;
  width:100%;
}
.more-scroll{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns:minmax(270px,31%);
  gap:15px;
  width:100%;
  overflow-x:auto !important;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:8px 4px 18px !important;
}
.more-scroll::-webkit-scrollbar{display:none}

/* Do not let inherited reveal states hide these cards */
.more-card,
.projects-sheet.page-visible .more-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  scroll-snap-align:center;
  min-height:205px !important;
}

/* Keep hover refined */
.more-card:hover{
  transform:translateY(-5px) !important;
}

/* Scroll controls always visible */
.scroll-controls{
  display:flex !important;
  justify-content:center;
  gap:9px;
  margin-top:12px !important;
  visibility:visible !important;
  opacity:1 !important;
}
.scroll-arrow{
  display:inline-grid !important;
  place-items:center;
}

/* Light theme clarity */
html[data-theme="light"] .more-projects-heading{
  background:#fff !important;
  color:#152015 !important;
}
html[data-theme="light"] .more-card{
  background:
    radial-gradient(circle at 85% 10%,rgba(var(--accent-rgb),.055),transparent 36%),
    #fff !important;
  color:#172019;
}
html[data-theme="light"] .more-card h4{color:#172019 !important}
html[data-theme="light"] .more-card p{color:#4f5d51 !important}
html[data-theme="light"] .more-card small{color:var(--accent) !important}

@media(max-width:820px){
  .more-scroll{grid-auto-columns:minmax(255px,72%)}
}
@media(max-width:560px){
  .more-scroll{grid-auto-columns:88%}
}



/* =========================================================
   Full-stack dynamic refinements
   ========================================================= */
[hidden]{display:none!important}
body.loading main,body.loading footer{visibility:hidden}
body.loading::after{content:"Loading portfolio…";position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);color:var(--muted);font-size:12px;letter-spacing:.08em;z-index:500}

.cv-download.disabled{opacity:.55;pointer-events:none}

.video-shell .portfolio-media{width:100%;height:100%;object-fit:cover;background:#000;display:none}
.video-shell.has-video .portfolio-media{display:block}
.video-shell.has-video .video-empty{display:none}
.video-controls.no-video #playPause{display:none}
.video-controls{pointer-events:none}.video-controls button{pointer-events:auto}

.project-media.has-upload{background:#0d100e}
.project-media.has-upload img,.project-media.has-upload video{width:100%;height:100%;object-fit:cover;margin:0;opacity:.9;filter:none;position:absolute;inset:0}
.project-media.has-upload::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.54),transparent 55%);pointer-events:none}
.project-media.has-upload .project-media-label{position:absolute;left:17px;bottom:14px;z-index:4;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#d9ddd9;background:rgba(7,9,8,.62);padding:5px 7px;backdrop-filter:blur(6px)}

.empty-featured{width:min(720px,90vw);margin:70px auto;text-align:center;padding:32px;border-radius:18px;background:var(--panel);color:var(--muted);box-shadow:var(--soft-shadow)}

.more-card{cursor:pointer}
.more-card-media{height:78px;margin:-4px -4px 14px;border-radius:12px;overflow:hidden;background:var(--panel3);position:relative}
.more-card-media img,.more-card-media video{width:100%;height:100%;object-fit:cover;opacity:.82}
.more-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.36),transparent)}

.contact-line a{color:inherit;text-decoration:none}
.contact-line a:hover{color:var(--accent)}
.social-link.is-disabled{display:none}

.form-feedback{font-size:10px;min-height:18px;margin-top:3px;color:var(--accent)}
.form-feedback.error{color:#ff7c89}

.footer a{color:inherit}

@media(max-width:640px){
  .home-bottom h1{font-size:clamp(20px,7vw,30px)}
  .home-actions{width:100%}.home-actions .btn{flex:1;text-align:center}
  .project-card{height:485px}
  .drawer-grid{grid-template-columns:1fr}
  .drawer-inner{padding:18px}
  .contact-copy,.contact-grid form{padding:22px}
}


/* =========================================================
   TALL STACKED-SHEET SCROLL FIX
   Editable About/Contact content can exceed the viewport.
   When JavaScript marks a sheet as .long-sheet, it leaves
   sticky mode so every part of the section can be reached.
   ========================================================= */
.about-sheet.long-sheet,
.contact-sheet.long-sheet{
  position:relative !important;
  top:auto !important;
  min-height:100vh;
  overflow:visible !important;
  scroll-margin-top:88px;
  border-radius:34px 34px 0 0;
}

.about-sheet.long-sheet .wrap,
.contact-sheet.long-sheet .wrap{
  padding-bottom:24px;
}

@media(max-width:820px){
  .about-sheet.long-sheet,
  .contact-sheet.long-sheet{
    scroll-margin-top:78px;
    border-radius:25px 25px 0 0;
  }
}


/* =========================================================
   PRO V3 — SEO content, filters, career, accessibility,
   performance-friendly media, and all-device responsiveness
   ========================================================= */
.skip-link{position:fixed;left:12px;top:8px;z-index:1000;transform:translateY(-160%);padding:10px 14px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:800}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.home-copy{max-width:820px}
.home-name-line{margin:0;font-size:clamp(22px,2.8vw,39px);line-height:1;letter-spacing:-.045em;font-weight:730}
.home-name-line em{font-style:normal;color:var(--muted)}
.home-summary{max-width:780px;margin:12px 0 0;color:var(--muted2);font-size:clamp(12px,1.25vw,15px);line-height:1.62}
.service-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}
.service-label{color:var(--muted);font-size:8px;letter-spacing:.11em;text-transform:uppercase}
.service-chips{display:flex;gap:6px;flex-wrap:wrap}
.service-chip{padding:5px 8px;border-radius:999px;background:rgba(var(--accent-rgb),.07);color:var(--muted2);font-size:8px;letter-spacing:.04em}

.media-placeholder{width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:5px;text-align:center;background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.075),transparent 38%),var(--panel);color:var(--muted)}
.media-placeholder span{color:var(--accent);font:700 8px ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.12em}
.media-placeholder b{font-size:10px;font-weight:560;color:var(--muted2)}
.project-media.has-upload img,.project-media.has-upload video{opacity:.95}
.project-media.has-upload .media-placeholder{position:absolute;inset:0}
.more-card-media .media-placeholder{min-height:78px}

.project-filters{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:-5px auto 22px}
.filter-chip{border:0;border-radius:999px;padding:8px 12px;background:var(--panel3);color:var(--muted2);font-size:9px;font-weight:740;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.filter-chip:hover{transform:translateY(-2px);color:var(--text)}
.filter-chip.active{background:var(--accent);color:var(--accent-ink)}
.drawer-actions{display:flex;justify-content:flex-end;margin-top:17px}
.drawer-actions .btn{display:inline-flex}

.career-sheet{position:sticky;top:76px;z-index:6;min-height:calc(100vh - 76px);border-radius:34px 34px 0 0;background:var(--bg2);box-shadow:0 -30px 90px rgba(0,0,0,.25);transform:translateY(34px);opacity:.985;transition:transform .82s cubic-bezier(.16,.8,.2,1),opacity .55s ease;overflow:hidden}
.career-sheet.page-visible{transform:translateY(0);opacity:1}
.career-sheet.long-sheet{position:relative!important;top:auto!important;min-height:100vh;overflow:visible!important;scroll-margin-top:88px}
.career-sheet .wrap{padding-top:65px;padding-bottom:90px}
.career-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.career-column>h3,.credentials-block>h3{margin:0 0 16px;color:var(--text);font-size:18px;letter-spacing:-.025em}
.timeline-list{display:grid;gap:12px}
.timeline-item{padding:19px 20px;border-radius:17px;background:var(--panel);box-shadow:var(--soft-shadow)}
.timeline-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.timeline-top h4{margin:0 0 5px;font-size:17px;letter-spacing:-.025em}
.timeline-top b{color:var(--muted2);font-size:11px;font-weight:600}
.timeline-top>span{color:var(--accent);font-size:9px;white-space:nowrap}
.timeline-meta{margin-top:6px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.timeline-item p{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.65}
.timeline-skills{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.timeline-skills span{padding:5px 7px;border-radius:999px;background:var(--panel3);color:var(--muted2);font-size:8px}
.credentials-block{margin-top:38px}
.credentials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.credential-card{padding:18px;border-radius:16px;background:var(--panel);box-shadow:var(--soft-shadow)}
.credential-card small{color:var(--accent);font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.credential-card h4{margin:9px 0 5px;font-size:16px}
.credential-meta{color:var(--muted2);font-size:9px}
.credential-card p{margin:11px 0;color:var(--muted);font-size:10px;line-height:1.6}
.credential-card a{color:var(--accent);font-size:9px;font-weight:700}
.empty-copy{color:var(--muted);font-size:11px}

html[data-theme="light"] .timeline-item,html[data-theme="light"] .credential-card{background:#fff}
html[data-theme="light"] .home-summary{color:#3e4a40}
html[data-theme="light"] .service-chip{background:#e9eedf;color:#334035}
html[data-theme="light"] .filter-chip{background:#e3e8de;color:#344036}
html[data-theme="light"] .filter-chip.active{background:var(--accent);color:#fff}
html[data-theme="light"] .career-sheet{background:#eef1e9}

/* Standalone project/case-study SEO pages */
.case-page{min-height:100vh;background:var(--bg);color:var(--text)}
.case-wrap{width:min(980px,90vw);margin:auto;padding:60px 0 100px}
.case-back{display:inline-flex;margin-bottom:45px;color:var(--muted2);font-size:11px}
.case-category{color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.case-wrap>h1{margin:10px 0 14px;font-size:clamp(44px,8vw,92px);line-height:.9;letter-spacing:-.065em}
.case-lead{max-width:760px;color:var(--muted);font-size:15px;line-height:1.7}
.case-tags{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}
.case-tag{padding:6px 8px;border-radius:999px;background:var(--panel3);color:var(--muted2);font-size:9px}
.case-media,.case-media-placeholder{width:100%;max-height:650px;min-height:330px;object-fit:cover;border-radius:22px;background:var(--panel);box-shadow:var(--shadow);margin:22px 0}
.case-media-placeholder{display:grid;place-items:center;color:var(--muted);font-size:12px}
.case-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}
.case-specs>div,.case-grid article{padding:18px;border-radius:15px;background:var(--panel)}
.case-specs small,.case-grid small{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px}
.case-specs b{font-size:12px}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0 28px}
.case-grid p{margin:0;color:var(--muted);font-size:11px;line-height:1.7}
.case-cta{display:inline-flex}

/* Avoid unnecessarily loading offscreen media until close to viewport */
img{max-width:100%}

/* All-device refinements */
@media(max-width:1180px){
  header{padding-inline:24px}
  .slogan{max-width:340px;white-space:normal;line-height:1.15}
  nav{gap:18px}
}
@media(max-width:980px){
  .credentials-grid{grid-template-columns:1fr 1fr}
  .career-grid{grid-template-columns:1fr}
  .home-bottom{align-items:flex-start}
  .home-summary{max-width:650px}
}
@media(max-width:820px){
  .career-sheet{top:68px;min-height:calc(100vh - 68px);border-radius:25px 25px 0 0}
  .career-sheet.long-sheet{top:auto}
  .career-sheet .wrap{padding-top:48px}
  .home-bottom{gap:15px}
  .home-actions{width:100%}
  .home-actions .btn{flex:1;text-align:center}
  .service-row{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
  .credentials-grid{grid-template-columns:1fr}
  .timeline-top{flex-direction:column;gap:6px}
  .timeline-top>span{white-space:normal}
  .home-name-line{font-size:clamp(20px,7vw,30px)}
  .home-summary{font-size:12px}
  .service-chips{max-height:62px;overflow:auto}
  .project-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:3px 2px 7px;scrollbar-width:none}
  .project-filters::-webkit-scrollbar{display:none}
  .filter-chip{white-space:nowrap}
  .case-grid,.case-specs{grid-template-columns:1fr}
  .case-wrap{padding-top:35px}
  .case-media,.case-media-placeholder{min-height:230px;border-radius:16px}
}
@media(max-width:430px){
  header{padding-inline:12px}
  .slogan{max-width:145px;font-size:8.5px}
  .cv-download{font-size:7.5px;padding-inline:7px}
  .theme-switch{width:60px}
  .home-heading-wrap{left:14px}
  .video-zone{padding-inline:14px}
  .home-bottom{padding-inline:14px}
  .page-heading-bezel{padding-inline:16px}
  .section-heading .page-heading-bezel h2{font-size:clamp(34px,11vw,48px)}
  .timeline-item,.credential-card{padding:15px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* =========================================================
   IMMERSIVE V4 — stable layout, navigation bezels,
   cinematic page depth and user-selectable color palettes
   ========================================================= */

/* Palette system: each palette supports both dark and light mode. */
html[data-palette="lime"][data-theme="dark"]{
  --bg:#080909;--bg2:#0d0f0e;--panel:#121413;--panel2:#181b19;--panel3:#202420;
  --text:#f1f1ed;--muted:#8e9490;--muted2:#b0b5b1;--accent:#d8ff35;--accent-rgb:216,255,53;--accent-ink:#080909;
}
html[data-palette="lime"][data-theme="light"]{
  --bg:#f2f4ee;--bg2:#e9ede5;--panel:#ffffff;--panel2:#f8faf5;--panel3:#e2e7dc;
  --text:#111511;--muted:#4d594f;--muted2:#29342c;--accent:#667b00;--accent-rgb:102,123,0;--accent-ink:#ffffff;
}
html[data-palette="steel"][data-theme="dark"]{
  --bg:#071018;--bg2:#0a141e;--panel:#101b25;--panel2:#15222e;--panel3:#1c2c3a;
  --text:#eef6ff;--muted:#8497a8;--muted2:#b5c4d1;--accent:#70b7ff;--accent-rgb:112,183,255;--accent-ink:#06111b;
}
html[data-palette="steel"][data-theme="light"]{
  --bg:#f2f7fb;--bg2:#e8f0f6;--panel:#ffffff;--panel2:#f5f9fc;--panel3:#dce8f1;
  --text:#101820;--muted:#536779;--muted2:#2d4356;--accent:#1e5e97;--accent-rgb:30,94,151;--accent-ink:#ffffff;
}
html[data-palette="copper"][data-theme="dark"]{
  --bg:#0d0a08;--bg2:#130e0a;--panel:#19120d;--panel2:#21170f;--panel3:#2b1e13;
  --text:#fff3e8;--muted:#a18f81;--muted2:#c9b8a9;--accent:#ffad5c;--accent-rgb:255,173,92;--accent-ink:#140b04;
}
html[data-palette="copper"][data-theme="light"]{
  --bg:#faf5ef;--bg2:#f1e9df;--panel:#fffdfa;--panel2:#fbf6f0;--panel3:#eadccc;
  --text:#20150d;--muted:#705d4f;--muted2:#49372a;--accent:#945111;--accent-rgb:148,81,17;--accent-ink:#ffffff;
}
html[data-palette="cyan"][data-theme="dark"]{
  --bg:#061011;--bg2:#091617;--panel:#0f1d1e;--panel2:#132526;--panel3:#1a3031;
  --text:#edffff;--muted:#82a3a3;--muted2:#b3d1d0;--accent:#5ee7df;--accent-rgb:94,231,223;--accent-ink:#041111;
}
html[data-palette="cyan"][data-theme="light"]{
  --bg:#f0f8f7;--bg2:#e5f1ef;--panel:#ffffff;--panel2:#f4fbfa;--panel3:#d8eae8;
  --text:#0e1d1c;--muted:#506d6a;--muted2:#294b48;--accent:#16756f;--accent-rgb:22,117,111;--accent-ink:#ffffff;
}
html[data-palette="titanium"][data-theme="dark"]{
  --bg:#0b0b12;--bg2:#10101a;--panel:#161622;--panel2:#1c1c2a;--panel3:#252538;
  --text:#f3f2ff;--muted:#9291aa;--muted2:#bdbcd2;--accent:#b6b7ff;--accent-rgb:182,183,255;--accent-ink:#0b0b15;
}
html[data-palette="titanium"][data-theme="light"]{
  --bg:#f5f4fb;--bg2:#eceaf5;--panel:#ffffff;--panel2:#f8f7fc;--panel3:#e3e1ef;
  --text:#181724;--muted:#5f5d72;--muted2:#39374f;--accent:#5455a5;--accent-rgb:84,85,165;--accent-ink:#ffffff;
}

/* Avoid the earlier short-screen collision: the home can grow naturally. */
.home{
  height:auto !important;
  min-height:100svh !important;
}
.video-zone{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding-top:26px;
  padding-bottom:18px;
}
.video-shell{
  height:clamp(260px,50svh,590px) !important;
  min-height:0 !important;
}
.home-bottom{
  flex:0 0 auto;
}
@media(max-height:760px) and (min-width:821px){
  .video-zone{padding-top:16px;padding-bottom:12px}
  .video-shell{height:clamp(245px,45svh,455px) !important}
  .home-bottom{padding-top:14px;padding-bottom:16px;min-height:108px}
  .home-heading-wrap{top:84px}
}
@media(max-width:820px){
  .video-shell{height:clamp(235px,43svh,450px) !important;min-height:0 !important}
  .home{min-height:100svh !important}
}
@media(max-width:560px){
  .video-shell{height:clamp(220px,38svh,390px) !important}
}

/* Navigation: subtle engineering bezel on normal links, stronger Hire Me CTA. */
nav a:not(.hire){
  position:relative;
  padding:8px 11px;
  border-radius:999px;
  color:var(--muted2);
  background:transparent;
  box-shadow:inset 0 0 0 1px transparent,0 0 0 0 rgba(var(--accent-rgb),0);
  transition:color .25s ease,background .25s ease,box-shadow .3s ease,transform .25s cubic-bezier(.2,.8,.2,1);
}
nav a:not(.hire)::after{display:none!important}
nav a:not(.hire):hover,nav a:not(.hire):focus-visible{
  color:var(--text);
  background:rgba(var(--accent-rgb),.055);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.38),0 0 0 4px rgba(var(--accent-rgb),.026);
  transform:translateY(-1px);
}
nav .hire{
  padding:9px 15px!important;border-radius:999px;background:var(--accent);color:var(--accent-ink)!important;font-weight:780;
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,filter .25s ease;
}
nav .hire:hover,nav .hire:focus-visible{
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.08),0 8px 24px rgba(var(--accent-rgb),.14);
  filter:brightness(1.04);
}
#projects,#career,#about,#contact,#palette{scroll-margin-top:90px}
@media(max-width:820px){#projects,#career,#about,#contact,#palette{scroll-margin-top:78px}}

/* Immersive global pointer light and scroll progress. */
:root{--pointer-x:50%;--pointer-y:36%;--scroll-progress:0}
.ambient-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle 520px at var(--pointer-x) var(--pointer-y),rgba(var(--accent-rgb),.055),transparent 68%);
  opacity:.9;transition:opacity .25s ease;
}
.scroll-progress{
  position:fixed;left:0;top:0;z-index:180;width:100%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.45));
  transform:scaleX(var(--scroll-progress));transform-origin:left center;
  box-shadow:0 0 14px rgba(var(--accent-rgb),.28);
}
main,footer{position:relative}

/* Every major page gets an atmospheric layer without replacing existing motion. */
.projects-sheet,.career-sheet,.about-sheet,.contact-sheet,.palette-section{isolation:isolate}
.projects-sheet>.wrap,.career-sheet>.wrap,.about-sheet>.wrap,.contact-sheet>.wrap,.palette-section>.wrap,
.projects-sheet>.page-handle,.career-sheet>.page-handle,.about-sheet>.page-handle,.contact-sheet>.page-handle,.palette-section>.page-handle{
  position:relative;z-index:2;
}
.page-atmosphere{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit;
}
.page-atmosphere::before{
  content:"";position:absolute;width:min(62vw,820px);aspect-ratio:1;right:-18%;top:-28%;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.11),rgba(var(--accent-rgb),.03) 38%,transparent 70%);
  filter:blur(18px);opacity:0;transform:translate3d(0,var(--section-drift,0px),0) scale(.92);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.page-visible>.page-atmosphere::before{opacity:1;transform:translate3d(0,var(--section-drift,0px),0) scale(1)}
.page-atmosphere::after{
  content:"";position:absolute;left:-45%;top:0;width:42%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.6),transparent);
  opacity:0;transform:translateX(0);
}
.page-visible>.page-atmosphere::after{animation:immersiveSweep 1.45s cubic-bezier(.16,.8,.2,1) .12s both}
@keyframes immersiveSweep{0%{opacity:0;transform:translateX(0)}18%{opacity:.8}100%{opacity:0;transform:translateX(360%)}}

/* Existing reveals stay dominant; these add depth and stagger to page internals. */
.career-sheet .timeline-item,.career-sheet .credential-card{
  opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .58s ease,transform .72s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.career-sheet.page-visible .timeline-item,.career-sheet.page-visible .credential-card{opacity:1;transform:none}
.career-sheet.page-visible .timeline-item:nth-child(1){transition-delay:.25s}.career-sheet.page-visible .timeline-item:nth-child(2){transition-delay:.32s}.career-sheet.page-visible .timeline-item:nth-child(3){transition-delay:.39s}.career-sheet.page-visible .timeline-item:nth-child(4){transition-delay:.46s}
.career-sheet.page-visible .credential-card:nth-child(1){transition-delay:.34s}.career-sheet.page-visible .credential-card:nth-child(2){transition-delay:.41s}.career-sheet.page-visible .credential-card:nth-child(3){transition-delay:.48s}.career-sheet.page-visible .credential-card:nth-child(4){transition-delay:.55s}.career-sheet.page-visible .credential-card:nth-child(5){transition-delay:.62s}
.contact-grid .field{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.contact-sheet.page-visible .contact-grid .field{opacity:1;transform:none}
.contact-sheet.page-visible .field:nth-child(2){transition-delay:.38s}.contact-sheet.page-visible .field:nth-child(3){transition-delay:.44s}.contact-sheet.page-visible .field:nth-child(4){transition-delay:.50s}.contact-sheet.page-visible .field:nth-child(5){transition-delay:.56s}

/* Pointer-responsive highlight on engineering cards; does not disturb the fan transforms. */
.project-card::before{
  background:radial-gradient(circle 150px at var(--card-x,50%) var(--card-y,30%),rgba(var(--accent-rgb),.12),transparent 72%);
}
.more-card,.timeline-item,.credential-card{position:relative;isolation:isolate}
.more-card::after,.timeline-item::after,.credential-card::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle 180px at var(--card-x,50%) var(--card-y,30%),rgba(var(--accent-rgb),.09),transparent 72%);
  opacity:.75;
}
.more-card>*,.timeline-item>*,.credential-card>*{position:relative;z-index:1}
.project-media.has-upload img,.project-media.has-upload video,.more-card-media img,.more-card-media video{
  transform:translate3d(var(--media-x,0),var(--media-y,0),0) scale(1.015);
  transition:transform .28s ease,opacity .25s ease;
}

/* Final palette sheet / interactive swatches. */
.palette-spacer{height:12vh;min-height:90px}
.palette-section{
  position:relative;z-index:10;min-height:72vh;padding:0 0 86px;border-radius:34px 34px 0 0;
  background:var(--bg);box-shadow:0 -30px 90px rgba(0,0,0,.25);
  opacity:.99;transform:translateY(28px);
  transition:transform .82s cubic-bezier(.16,.8,.2,1),opacity .55s ease;
}
.palette-section.page-visible{transform:translateY(0);opacity:1}
.palette-wrap{padding-top:62px}
.palette-copy{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 30px}
.palette-copy>div:first-child{max-width:670px}
.palette-kicker{display:block;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:9px}
.palette-copy h3{margin:0 0 10px;font-size:clamp(28px,4vw,50px);line-height:.96;letter-spacing:-.05em}
.palette-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.7;max-width:600px}
.active-palette{flex:0 0 auto;padding:11px 13px;border-radius:12px;background:var(--panel2);color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.14)}
.active-palette strong{display:block;margin-top:5px;color:var(--text);font-size:12px;letter-spacing:0;text-transform:none}
.palette-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.palette-option{
  appearance:none;border:0;text-align:left;cursor:pointer;min-height:124px;padding:15px;border-radius:17px;
  background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1px rgba(130,140,133,.12),var(--soft-shadow);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .25s ease;
  opacity:0;transform:translateY(18px);
}
.palette-section.page-visible .palette-option{opacity:1;transform:none}
.palette-section.page-visible .palette-option:nth-child(1){transition-delay:.24s}.palette-section.page-visible .palette-option:nth-child(2){transition-delay:.30s}.palette-section.page-visible .palette-option:nth-child(3){transition-delay:.36s}.palette-section.page-visible .palette-option:nth-child(4){transition-delay:.42s}.palette-section.page-visible .palette-option:nth-child(5){transition-delay:.48s}
.palette-option:hover{transform:translateY(-5px)!important;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.32),0 18px 38px rgba(0,0,0,.16)}
.palette-option.active{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.72),0 0 0 4px rgba(var(--accent-rgb),.045),var(--soft-shadow)}
.palette-swatches{display:flex;gap:6px;margin-bottom:19px}
.palette-swatches i{display:block;width:24px;height:24px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(127,127,127,.18)}
.palette-option b{display:block;font-size:12px;margin-bottom:4px}
.palette-option small{display:block;color:var(--muted);font-size:9px}

/* Keep palette-specific light modes readable despite older hard-coded light refinements. */
html[data-theme="light"] .palette-section{box-shadow:0 -28px 70px rgba(44,55,45,.11)}
html[data-theme="light"] .palette-option{background:var(--panel);color:var(--text)}
html[data-theme="light"] .palette-option small,.palette-copy p{color:var(--muted)}

@media(max-width:1050px){.palette-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){
  .palette-section{border-radius:25px 25px 0 0;padding-bottom:66px}
  .palette-wrap{padding-top:48px}
  .palette-copy{align-items:flex-start;flex-direction:column}
  .palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){.palette-options{grid-template-columns:1fr}.palette-option{min-height:104px}}

/* Mobile nav bezels keep a comfortable touch target. */
@media(max-width:820px){nav a:not(.hire){padding:11px 13px}.hire{margin-top:4px;text-align:center}}

/* Reduced motion: all content remains visible and interaction stays usable. */
@media(prefers-reduced-motion:reduce){
  .ambient-glow{display:none}
  .page-atmosphere::before,.page-atmosphere::after{display:none!important}
  .career-sheet .timeline-item,.career-sheet .credential-card,.contact-grid .field,.palette-option{opacity:1!important;transform:none!important;transition:none!important}
  .palette-section{transform:none!important;transition:none!important}
  .project-media.has-upload img,.project-media.has-upload video,.more-card-media img,.more-card-media video{transform:none!important;transition:none!important}
}
/* Remove visible gaps between stacked pages */
.page-spacer{
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* =====================================================
   SOFT IMMERSIVE PAGE EDGES
   Makes stacked pages visually blend into each other
   ===================================================== */

.projects-sheet,
.career-sheet,
.about-sheet,
.contact-sheet{
  position:relative;

  /* softer transition shadow */
  box-shadow:
    0 -18px 38px rgba(0,0,0,.10),
    0 -5px 18px rgba(var(--accent-rgb),.035),
    0 -1px 5px rgba(255,255,255,.035);
}


/* soft blurred upper edge */
.projects-sheet::before,
.career-sheet::before,
.about-sheet::before,
.contact-sheet::before{
  content:"";

  position:absolute;

  top:0;
  left:2.5%;
  right:2.5%;

  height:42px;

  border-radius:
    34px 34px
    45% 45%;

  background:
    linear-gradient(
      to bottom,

      rgba(var(--accent-rgb),.055) 0%,

      rgba(var(--accent-rgb),.025) 28%,

      transparent 100%
    );

  filter:blur(13px);

  opacity:.85;

  pointer-events:none;

  z-index:1;
}


/* very soft inner light at the page join */
.projects-sheet::after,
.career-sheet::after,
.about-sheet::after,
.contact-sheet::after{
  content:"";

  position:absolute;

  top:1px;
  left:5%;
  right:5%;

  height:24px;

  border-radius:50%;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.045),
      transparent
    );

  filter:blur(9px);

  opacity:.8;

  pointer-events:none;

  z-index:1;
}


/* light theme adjustment */
html[data-theme="light"] .projects-sheet,
html[data-theme="light"] .career-sheet,
html[data-theme="light"] .about-sheet,
html[data-theme="light"] .contact-sheet{
  box-shadow:
    0 -16px 34px rgba(76,65,52,.07),
    0 -5px 20px rgba(var(--accent-rgb),.045),
    0 -1px 7px rgba(255,255,255,.75);
}


html[data-theme="light"] .projects-sheet::before,
html[data-theme="light"] .career-sheet::before,
html[data-theme="light"] .about-sheet::before,
html[data-theme="light"] .contact-sheet::before{
  background:
    linear-gradient(
      to bottom,

      rgba(255,255,255,.60) 0%,

      rgba(var(--accent-rgb),.045) 38%,

      transparent 100%
    );

  opacity:.9;
}
/* ==================================================
   REMOVE PAGE GAPS + SLIGHT IMMERSIVE OVERLAP
   ================================================== */

.page-spacer{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.projects-sheet,
.career-sheet,
.about-sheet,
.contact-sheet{
  margin-top:-10px;
}