/* ==========================================================
   Adejumo Olaoluwa — Portfolio
   Reference styling: warm black, inset orange frame, Poppins
   ========================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#130f0d;
  --bg-inner:#1a1512;
  --panel:#1f1815;
  --white:#f2efec;
  --muted:#9a8f88;
  --muted-2:#6b615b;
  --orange:#e2582a;
  --orange-lt:#f07a4d;
  --orange-dk:#a83d18;
  --line:rgba(226,88,42,.35);
  --hair:rgba(242,239,236,.08);
}

html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--white);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,h4{font-weight:600;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* ── Inset orange frame ── */
.frame{
  position:fixed;inset:34px;
  border:1px solid var(--line);
  pointer-events:none;z-index:500;
}
.page{
  position:relative;
  margin:34px;
  background:var(--bg-inner);
  min-height:calc(100vh - 68px);
  overflow:hidden;
}
.inner{padding:0 clamp(1.5rem,6vw,6rem)}
@media(max-width:760px){
  .frame{inset:14px}
  .page{margin:14px;min-height:calc(100vh - 28px)}
  .inner{padding:0 1.4rem}
}

/* ── Floating cubes ── */
.cube{position:absolute;width:var(--s,54px);height:var(--s,54px);pointer-events:none;z-index:0;opacity:.95}
.cube svg{width:100%;height:100%;display:block}
.cube.dim{opacity:.35}

/* ── Top bar ── */
.topbar{
  position:relative;z-index:600;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.8rem clamp(1.5rem,6vw,4rem);
}
.burger{background:none;border:none;color:var(--white);cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:4px}
.burger span{display:block;width:26px;height:2px;background:var(--white);transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.brand{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;position:absolute;left:50%;transform:translateX(-50%)}
.brand .o{color:var(--orange)}
.topbar .spacer{width:34px}

/* ── Overlay menu ── */
.menu{
  position:fixed;inset:34px;background:rgba(19,15,13,.985);
  z-index:590;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.menu.open{opacity:1;pointer-events:auto}
.menu a{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:500;color:var(--muted);transition:color .2s}
.menu a:hover,.menu a.active{color:var(--orange)}
.menu-socials{display:flex;gap:1.6rem;margin-top:1.6rem}
.menu-socials a{font-size:1.1rem;color:var(--muted-2)}
.menu-socials a:hover{color:var(--orange)}
@media(max-width:760px){.menu{inset:14px}}

/* ── Vertical rails ── */
.rail-social{
  position:absolute;left:clamp(1.4rem,3.4vw,2.6rem);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:1.5rem;z-index:5;
}
.rail-social a{font-size:.95rem;color:var(--muted);transition:color .2s}
.rail-social a:hover{color:var(--orange)}
.rail-scroll{
  position:absolute;left:clamp(1.4rem,3.4vw,2.6rem);bottom:2.6rem;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.66rem;letter-spacing:.14em;color:var(--muted-2);
}
.rail-scroll .vt{writing-mode:vertical-rl}
.rail-scroll i{font-size:.65rem;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
@media(max-width:900px){.rail-social,.rail-scroll{display:none}}

/* ── Hero ── */
.hero{position:relative;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:2rem;
  padding:2rem clamp(1.5rem,6vw,6rem) 6rem;min-height:calc(100vh - 68px - 90px)}
.hero-copy{padding-left:clamp(0rem,4vw,4.5rem)}
.eyebrow{display:flex;align-items:center;gap:.8rem;font-size:.9rem;color:var(--muted);margin-bottom:1.1rem;font-weight:300}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--muted)}
.hero h1{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:300;margin-bottom:.9rem;letter-spacing:-.02em}
.hero h1 b{font-weight:700}
.hero-sub{font-size:.98rem;color:var(--muted);margin-bottom:2.2rem;font-weight:300}
.hero-vis{position:relative;display:flex;align-items:center;justify-content:center}
.hero-vis dotlottie-wc{width:100%;max-width:640px}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-bottom:3rem;text-align:left;min-height:0}
  .hero-copy{padding-left:0}
  .hero-vis{order:-1}
  .hero-vis dotlottie-wc{max-width:420px}
}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.7rem;font-family:inherit;
  font-size:.82rem;font-weight:400;border:none;cursor:pointer;border-radius:3px;transition:background .2s,transform .2s,color .2s,border-color .2s}
.btn-solid{background:var(--orange);color:#fff}
.btn-solid:hover{background:var(--orange-lt);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--white);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--orange);color:var(--orange)}
.btn-sm{padding:.45rem 1.1rem;font-size:.72rem}

/* ── Sections ── */
section{position:relative;padding:5.5rem clamp(1.5rem,6vw,6rem)}
.sec-title{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;margin-bottom:2.6rem}

/* ── About block ── */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3.5rem;align-items:start}
.about-photo{border:1px solid var(--line);background:var(--panel);aspect-ratio:3/4;display:flex;
  align-items:center;justify-content:center;color:var(--muted-2);font-size:.78rem;text-align:center;padding:1.5rem;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-copy h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:500;margin-bottom:1.4rem;line-height:1.3}
.about-copy h2 .hl{color:var(--orange)}
.about-copy p{color:var(--muted);font-size:.92rem;margin-bottom:1.1rem;max-width:620px}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:2rem}.about-photo{max-width:280px;aspect-ratio:1/1}}

/* ── Featured works ── */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.work-card{
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(226,88,42,.16) 0%,rgba(226,88,42,.04) 55%,transparent 100%),var(--panel);
  padding:1.6rem;display:flex;flex-direction:column;transition:border-color .25s,transform .25s;
}
.work-card:hover{border-color:var(--orange);transform:translateY(-4px)}
.work-card h3{font-size:1.02rem;font-weight:600;margin-bottom:.45rem}
.work-card p{font-size:.78rem;color:var(--muted);line-height:1.6;margin-bottom:1.4rem;flex:1}
.work-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.2rem}
.work-tags span{font-size:.62rem;padding:.16rem .5rem;border:1px solid var(--line);color:var(--muted)}
@media(max-width:980px){.works-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.works-grid{grid-template-columns:1fr}}

/* ── Skills ── */
.skills-wrap{text-align:center}
.skills-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2.5rem 1.5rem;margin-top:1rem}
.skill{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.skill i{font-size:1.9rem;color:var(--white);transition:color .2s}
.skill:hover i{color:var(--orange)}
.skill span{font-size:.7rem;color:var(--muted)}
@media(max-width:820px){.skills-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.skills-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Quote / contact ── */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.quote-left h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;margin-bottom:1.2rem}
.quote-left p{color:var(--muted);font-size:.9rem;margin-bottom:1.8rem;max-width:430px}
.quote-socials{display:flex;gap:1.2rem;margin-bottom:1.8rem}
.quote-socials a{color:var(--muted);font-size:1rem}
.quote-socials a:hover{color:var(--orange)}
.quote-details{display:flex;flex-direction:column;gap:.9rem}
.qd-row{display:flex;gap:1.2rem;font-size:.84rem}
.qd-row .k{color:var(--orange);min-width:78px;font-size:.68rem;letter-spacing:.06em;padding-top:.15rem}
.qd-row .v{color:var(--white)}

.quote-form{background:var(--orange);padding:2rem;display:flex;flex-direction:column;gap:1.3rem}
.qf-field{display:flex;flex-direction:column;gap:.35rem}
.qf-field label{font-size:.6rem;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.qf-field input,.qf-field select{
  background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.4);
  color:#fff;font-family:inherit;font-size:.88rem;padding:.35rem 0;outline:none;font-weight:300}
.qf-field input::placeholder{color:rgba(255,255,255,.6)}
.qf-field input:focus,.qf-field select:focus{border-bottom-color:#fff}
.qf-field select option{background:var(--orange-dk);color:#fff}
.qf-btn{align-self:flex-end;background:#fff;color:var(--orange-dk);border:none;padding:.6rem 1.6rem;
  font-family:inherit;font-size:.78rem;cursor:pointer;border-radius:3px;transition:opacity .2s}
.qf-btn:hover{opacity:.85}
.qf-note{font-size:.72rem;color:rgba(255,255,255,.85)}
@media(max-width:820px){.quote-grid{grid-template-columns:1fr;gap:2.4rem}}

/* ── Footer ── */
footer{padding:2rem clamp(1.5rem,6vw,6rem) 3rem;text-align:center;border-top:1px solid var(--hair)}
.f-copy{font-size:.74rem;color:var(--muted-2)}

/* ── Page heading (inner pages) ── */
.page-head{padding:3rem clamp(1.5rem,6vw,6rem) 0}
.page-head h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:300}
.page-head h1 b{font-weight:700}
.page-head p{color:var(--muted);font-size:.92rem;margin-top:.8rem;max-width:520px}

/* ── Reveal ── */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.rail-scroll i{animation:none}}

/* ── Chatbot ── */
.cb-wrap{position:fixed;bottom:3rem;right:3rem;z-index:800}
.cb-trigger{width:48px;height:48px;border-radius:50%;background:var(--orange);border:none;color:#fff;font-size:1.05rem;cursor:pointer;box-shadow:0 8px 22px rgba(226,88,42,.4)}
.cb-win{display:none;flex-direction:column;width:300px;height:400px;background:var(--panel);border:1px solid var(--line);position:absolute;bottom:0;right:0}
.cb-head{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1rem;border-bottom:1px solid var(--hair);font-size:.8rem}
.cb-head button{background:none;border:none;color:var(--muted);cursor:pointer}
.cb-msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.cmsg{font-size:.78rem;line-height:1.5;padding:.55rem .75rem;max-width:85%}
.cmsg.bot{background:rgba(255,255,255,.05);align-self:flex-start}
.cmsg.user{background:var(--orange);color:#fff;align-self:flex-end}
.cb-inp{display:flex;border-top:1px solid var(--hair)}
.cb-inp input{flex:1;background:transparent;border:none;padding:.75rem .9rem;color:var(--white);font-size:.78rem;outline:none;font-family:inherit}
.cb-inp button{width:42px;border:none;background:none;color:var(--orange);cursor:pointer}
.dots span{display:inline-block;width:5px;height:5px;background:var(--muted);border-radius:50%;margin-right:3px;animation:blink 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
@media(max-width:760px){.cb-wrap{bottom:1.6rem;right:1.6rem}.cb-win{width:min(80vw,290px)}}

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

/* ==========================================================
   MOTION
   ========================================================== */

/* ── Cubes: slow drift + rotation ── */
.cube{animation:drift 14s ease-in-out infinite}
.cube svg{animation:spin 26s linear infinite;transform-origin:50% 50%}
.cube:nth-of-type(2){animation-duration:18s;animation-delay:-4s}
.cube:nth-of-type(2) svg{animation-duration:34s;animation-direction:reverse}
.cube:nth-of-type(3){animation-duration:16s;animation-delay:-7s}
.cube:nth-of-type(3) svg{animation-duration:30s}
.cube:nth-of-type(4){animation-duration:12s;animation-delay:-2s}
.cube:nth-of-type(4) svg{animation-duration:22s;animation-direction:reverse}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(10px,-16px,0)}
  66%{transform:translate3d(-8px,10px,0)}
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── Hero entrance sequence ── */
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .hero-sub,
.hero-copy .btn{opacity:0;animation:riseIn .8s cubic-bezier(.22,1,.36,1) forwards}
.hero-copy .eyebrow{animation-delay:.15s}
.hero-copy h1{animation-delay:.3s}
.hero-copy .hero-sub{animation-delay:.45s}
.hero-copy .btn{animation-delay:.6s}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.hero-vis{opacity:0;animation:scaleIn 1.1s cubic-bezier(.22,1,.36,1) .35s forwards}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

.hero-vis dotlottie-wc{animation:hover 6s ease-in-out infinite 1.4s}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* eyebrow rule draws itself */
.eyebrow::before{transform-origin:left;animation:drawLine .7s cubic-bezier(.22,1,.36,1) .2s backwards}
@keyframes drawLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* frame draws in on load */
.frame{animation:frameIn 1.1s ease .1s backwards}
@keyframes frameIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

/* ── Staggered reveals ── */
.js .stagger > *{opacity:0;transform:translateY(22px)}
.stagger.visible > *{animation:riseIn .7s cubic-bezier(.22,1,.36,1) forwards}
.stagger.visible > *:nth-child(1){animation-delay:.05s}
.stagger.visible > *:nth-child(2){animation-delay:.13s}
.stagger.visible > *:nth-child(3){animation-delay:.21s}
.stagger.visible > *:nth-child(4){animation-delay:.29s}
.stagger.visible > *:nth-child(5){animation-delay:.37s}
.stagger.visible > *:nth-child(6){animation-delay:.45s}
.stagger.visible > *:nth-child(7){animation-delay:.53s}
.stagger.visible > *:nth-child(8){animation-delay:.61s}
.stagger.visible > *:nth-child(9){animation-delay:.69s}
.stagger.visible > *:nth-child(10){animation-delay:.77s}
.stagger.visible > *:nth-child(11){animation-delay:.85s}
.stagger.visible > *:nth-child(12){animation-delay:.93s}

/* ── Work cards: lift + sheen ── */
.work-card{position:relative;overflow:hidden}
.work-card::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent);
  transition:left .7s ease;pointer-events:none;
}
.work-card:hover::after{left:130%}
.work-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.45)}
.work-card h3{transition:color .25s}
.work-card:hover h3{color:var(--orange-lt)}

/* ── Buttons: sheen ── */
.btn-solid{position:relative;overflow:hidden}
.btn-solid::after{
  content:'';position:absolute;top:0;left:-100%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .6s ease;
}
.btn-solid:hover::after{left:140%}

/* ── Skills: pop ── */
.skill{transition:transform .25s}
.skill:hover{transform:translateY(-6px)}
.skill i{transition:color .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.skill:hover i{transform:scale(1.22)}

/* ── About photo: mask reveal + slow zoom ── */
.about-photo{position:relative}
.about-photo img{transition:transform 1.2s cubic-bezier(.22,1,.36,1);transform:scale(1.04)}
.about-photo:hover img{transform:scale(1.12)}
.js .about-photo::after{
  content:'';position:absolute;inset:0;background:var(--bg-inner);
  transform-origin:top;transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.about-photo.visible::after{transform:scaleY(0)}

/* ── Heading highlight sweep ── */
.about-copy h2 .hl{
  background-image:linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;
  transition:background-size .8s ease .3s;
}
.about-copy.visible h2 .hl{background-size:100% 2px}

/* ── Menu links stagger ── */
.menu.open a{animation:menuIn .5s cubic-bezier(.22,1,.36,1) backwards}
.menu.open a:nth-child(1){animation-delay:.05s}
.menu.open a:nth-child(2){animation-delay:.11s}
.menu.open a:nth-child(3){animation-delay:.17s}
.menu.open a:nth-child(4){animation-delay:.23s}
.menu.open .menu-socials{animation:menuIn .5s cubic-bezier(.22,1,.36,1) .3s backwards}
@keyframes menuIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── Social rail hover ── */
.rail-social a{transition:color .2s,transform .25s}
.rail-social a:hover{transform:translateX(4px) scale(1.15)}

/* ── Page head ── */
.page-head h1{animation:riseIn .8s cubic-bezier(.22,1,.36,1) .1s backwards}
.page-head p{animation:riseIn .8s cubic-bezier(.22,1,.36,1) .25s backwards}

/* ── Chatbot extras ── */
.cb-trigger{transition:transform .25s,box-shadow .25s}
.cb-trigger:hover{transform:scale(1.08) rotate(-6deg)}
.cb-trigger::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--orange);opacity:0;animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{0%{opacity:.6;transform:scale(.9)}70%{opacity:0;transform:scale(1.35)}100%{opacity:0}}
.cb-win{animation:winIn .3s cubic-bezier(.22,1,.36,1)}
@keyframes winIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.cmsg{animation:msgIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* quick-reply chips */
.cb-chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 1rem .7rem}
.chip{
  font-family:inherit;font-size:.68rem;padding:.3rem .7rem;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:20px;transition:.2s;
}
.chip:hover{border-color:var(--orange);color:var(--orange);background:rgba(226,88,42,.08)}

/* voice controls */
.cb-actions{display:flex;align-items:center;gap:.6rem}
.cb-head .cb-spk.on{color:var(--orange)}
.cb-inp .cb-mic{width:36px;color:var(--muted);transition:color .2s}
.cb-inp .cb-mic:hover{color:var(--orange)}
.cb-inp .cb-mic.listening{color:var(--orange);animation:micPulse 1s ease-in-out infinite}
@keyframes micPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Respect reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .cube,.cube svg,.hero-vis dotlottie-wc,.cb-trigger::before,.cb-mic.listening{animation:none}
  .hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-sub,.hero-copy .btn,
  .hero-vis,.frame,.page-head h1,.page-head p,.menu.open a,.menu.open .menu-socials{
    animation:none;opacity:1;transform:none}
  .stagger > *{opacity:1;transform:none}
  .stagger.visible > *{animation:none}
  .about-photo::after{display:none}
  .about-copy h2 .hl{background-size:100% 2px;transition:none}
  .eyebrow::before{animation:none}
}

/* work-card CTA sits small, left-aligned (flex column would stretch it) */
.work-card .btn{align-self:flex-start}


/* ==========================================================
   LAYERING FIXES
   - the topbar (burger) now sits above the open menu, so the burger can close it
   - floating cubes sit behind text, photos and buttons instead of on top of them
   ========================================================== */
.hero,section,.page-head,footer{position:relative;z-index:1}
@media(max-width:760px){
  .cube{width:calc(var(--s,54px)*.6);height:calc(var(--s,54px)*.6)}
  .cube.dim{display:none}
}

/* ==========================================================
   CYBERSECURITY BADGES + CV LINKS
   ========================================================== */
.hero-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
.hero-tags span{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;letter-spacing:.03em;padding:.3rem .85rem;border:1px solid var(--line);color:var(--muted);border-radius:20px}
.hero-tags .cy{border-color:rgba(62,230,196,.45);color:#3ee6c4;background:rgba(62,230,196,.07)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.skill.cy i{color:#3ee6c4}
.skill.cy:hover i{color:#3ee6c4}
.skill em{display:block;font-style:normal;font-size:.62rem;letter-spacing:.08em;color:#3ee6c4;text-transform:uppercase;margin-top:-.35rem}
.about-copy .hl-cy{color:#3ee6c4}
.about-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.6rem}

/* ==========================================================
   LOGO INTRO (preloader.js)
   ========================================================== */
#preloader{position:fixed;inset:0;z-index:2000;background:#130f0d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;
  background-image:radial-gradient(circle at 50% 46%,rgba(226,88,42,.16),transparent 60%);transition:transform .85s cubic-bezier(.76,0,.24,1);cursor:pointer}
#preloader::before{content:'';position:absolute;inset:34px;border:1px solid var(--line);pointer-events:none}
.pl-logo{width:min(560px,74vw);height:auto;overflow:visible}
.pl-bar{width:min(220px,40vw);height:2px;background:rgba(242,239,236,.12);overflow:hidden}
.pl-bar i{display:block;height:100%;background:var(--orange);transform-origin:left;animation:plBar 2.3s cubic-bezier(.65,0,.35,1) both}
.pl-mw,.pl-mo,.pl-l,.pl-sheen{transform-box:fill-box}
.pl-mw{animation:plWhite .95s cubic-bezier(.2,.9,.25,1.12) .15s both}
.pl-mo{animation:plOrange .95s cubic-bezier(.2,.9,.25,1.12) .15s both}
.pl-sheen{animation:plSheen .95s ease-in-out 1.15s both}
.pl-l{animation:plLetter .7s cubic-bezier(.2,.8,.2,1) calc(1.05s + var(--i) * .07s) both}
@keyframes plWhite{from{transform:translate(-130px,-130px);opacity:0}to{transform:none;opacity:1}}
@keyframes plOrange{from{transform:translate(130px,130px);opacity:0}to{transform:none;opacity:1}}
@keyframes plSheen{from{transform:translateX(-120px) skewX(-22deg)}to{transform:translateX(560px) skewX(-22deg)}}
@keyframes plLetter{from{transform:translateY(150px)}to{transform:none}}
@keyframes plBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#preloader.pl-out{transform:translateY(-100%);pointer-events:none}
#preloader.pl-out .pl-logo,#preloader.pl-out .pl-bar{opacity:0;transition:opacity .35s ease}
/* hold the page's own entrance animations until the intro lifts */
.pl-active .hero-copy .eyebrow,.pl-active .hero-copy h1,.pl-active .hero-copy .hero-sub,.pl-active .hero-copy .hero-tags,.pl-active .hero-copy .btn,
.pl-active .hero-vis,.pl-active .frame,.pl-active .page-head h1,.pl-active .page-head p,.pl-active .eyebrow::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  #preloader *{animation:none!important}
  #preloader{transition:opacity .2s}
  #preloader.pl-out{transform:none;opacity:0}
}

/* ==========================================================
   CV PAGE
   ========================================================== */
.cv-wrap{padding:2.5rem clamp(1.5rem,6vw,6rem) 4.5rem;max-width:1100px;margin:0 auto}
.cv-top h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:300}
.cv-top h1 b{font-weight:700}
.cv-role{color:var(--orange-lt);font-size:1rem;margin:.5rem 0 1rem}
.cv-contact{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;color:var(--muted);font-size:.84rem}
.cv-contact a:hover{color:var(--orange)}
.cv-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.cv-sec{border-top:1px solid var(--line);padding:1.6rem 0 0;margin-top:2.4rem}
.cv-sec h2{font-size:.78rem;letter-spacing:.2em;color:var(--orange);font-weight:600;margin-bottom:1.2rem;break-after:avoid}
.cv-sec p,.cv-sec li,.cv-sec dd{color:var(--muted);font-size:.9rem;line-height:1.75}
.cv-sec ul{margin-top:.4rem}
.cv-sec li{padding-left:1.1rem;position:relative}
.cv-sec li::before{content:'';position:absolute;left:0;top:.95em;width:6px;height:1px;background:var(--orange)}
.cv-skills{display:grid;grid-template-columns:230px 1fr;gap:.55rem 1.4rem}
.cv-skills dt{color:var(--white);font-weight:500;font-size:.86rem;line-height:1.75}
.cv-skills .cy{color:#3ee6c4}
.cv-job{margin-bottom:2rem}
.cv-job:last-child{margin-bottom:0}
.cv-job-head{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1.2rem;flex-wrap:wrap}
.cv-job h3{font-size:1.04rem;font-weight:600}
.cv-date{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem;color:var(--muted-2);letter-spacing:.04em}
.cv-meta{color:var(--orange-lt);font-size:.8rem;margin:.25rem 0 .6rem}
@media(max-width:700px){.cv-skills{grid-template-columns:1fr;gap:0}.cv-skills dd{margin-bottom:.8rem}}
@media print{
  @page{size:A4}
  html,body{background:#fff!important}
  body{color:#1a1512}
  .frame,.menu,.topbar,.cube,.cb-wrap,footer,.cv-actions,#preloader{display:none!important}
  .page{margin:0;background:#fff;min-height:0;overflow:visible}
  .cv-wrap{padding:0;max-width:none}
  .reveal,.stagger>*{opacity:1!important;transform:none!important;animation:none!important}
  .cv-top h1{color:#1a1512;font-size:25pt}
  .cv-role{color:#c4461b;font-size:10.5pt;margin:.3rem 0 .6rem}
  .cv-contact{color:#4a3f39;font-size:8.6pt;gap:.2rem 1.1rem}
  .cv-sec{border-top:1px solid #d9cfc8;padding:.7rem 0 0;margin-top:.95rem}
  .cv-sec h2{color:#c4461b;font-size:8pt;margin-bottom:.55rem}
  .cv-sec p,.cv-sec li,.cv-sec dd{color:#3b322d;font-size:9pt;line-height:1.5}
  .cv-skills{grid-template-columns:150px 1fr;gap:.15rem 1rem}
  .cv-skills dt{color:#1a1512;font-size:8.8pt;line-height:1.5}
  .cv-skills .cy{color:#0f8f78}
  .cv-job h3{color:#1a1512;font-size:10pt}
  .cv-date{color:#6b615b;font-size:8pt}
  .cv-meta{color:#c4461b;font-size:8.4pt;margin:.1rem 0 .3rem}
  .cv-job{margin-bottom:.8rem;break-inside:avoid}
  .cv-sec li::before{background:#c4461b;top:.8em}
  a{color:inherit}
}