/* ============================================================
   Salma Nouidai — Marketing Portfolio
   Design language lifted from the original Canva deck:
   deep-maroon / blush / sage / cream, Instrument Serif display,
   folder tabs, polka dots, torn paper and striped barcodes.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:      #290008;
  --ink-soft: #3B0E17;
  --wine:     #651B34;
  --blush:    #ECC7C1;
  --blush-2:  #F1CAC3;
  --sage:     #DDDBB5;
  --sage-2:   #BFD6B1;
  --cream:    #FEFCE3;
  --paper:    #FFFDFB;
  --slate:    #82909C;
  --coral:    #DC5730;

  --display: "Instrument Serif", "Playfair Display", Georgia, serif;
  --head:    "Playfair Display", Georgia, serif;
  --mono:    "Space Mono", ui-monospace, monospace;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1320px;
  --rail-w: 46px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur: .9s;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.is-locked, body.is-locked{ overflow:hidden; }
body{
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--coral); color:var(--cream); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.skip{
  position:fixed; top:-100px; left:1rem; z-index:999; padding:.7rem 1.2rem;
  background:var(--cream); color:var(--ink); border-radius:99px; font-weight:600;
}
.skip:focus{ top:1rem; }
:focus-visible{ outline:2px dashed var(--coral); outline-offset:4px; border-radius:4px; }

/* ---------- 3. Typography primitives ---------- */
.display{
  font-family:var(--display); font-weight:400; line-height:.92;
  letter-spacing:-.012em; font-size:clamp(2.6rem,7vw,6rem);
}
.display--xl{ font-size:clamp(3rem,11vw,9.5rem); line-height:.86; }
.display--md{ font-size:clamp(2.1rem,5.4vw,4.6rem); }
.display--sm{ font-size:clamp(1.7rem,3.2vw,3.1rem); }
.display--it{ font-style:italic; }

.kicker{
  display:inline-block; font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; opacity:.72; margin-bottom:.9rem;
}

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.62em 1.5em; border-radius:99px;
  font-size:clamp(.8rem,1.15vw,1rem); font-weight:500; line-height:1.2;
  white-space:nowrap;
}
.pill--cream{ background:var(--cream); color:var(--ink); }
.pill--blush{ background:var(--blush-2); color:var(--ink); }

.rule-dotted{
  height:3px; margin:clamp(1.6rem,3vw,2.8rem) 0;
  background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 11px);
  transform-origin:left center;
}

/* buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.75em;
  padding:.95em 1.9em; border-radius:99px; overflow:hidden;
  font-weight:500; font-size:clamp(.92rem,1.15vw,1.05rem); letter-spacing:.005em;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), color .4s var(--ease);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn svg{
  position:relative; z-index:2; width:1.05em; height:1.05em; fill:none;
  stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s var(--ease-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:var(--ink); transform:translateY(101%);
  transition:transform .6s var(--ease-out);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(5px); }
.btn--cream{ background:var(--cream); color:var(--ink); box-shadow:0 2px 0 rgba(41,0,8,.16); }
.btn--cream:hover{ color:var(--cream); transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.btn--ghost{ border:1px solid currentColor; color:var(--blush); }
.btn--ghost::before{ background:var(--blush); }
.btn--ghost:hover{ color:var(--ink); transform:translateY(-3px); }
.btn--lg{ padding:1.1em 2.2em; font-size:clamp(1rem,1.5vw,1.3rem); }

/* ---------- 4. Decorative motifs ---------- */

/* polka-dot field (irregular, like the deck) */
.dotfield{
  background-color:transparent;
  background-image:
    radial-gradient(circle at 22% 6%,  var(--ink) 0 26px, transparent 27px),
    radial-gradient(circle at 78% 14%, var(--ink) 0 13px, transparent 14px),
    radial-gradient(circle at 12% 30%, var(--ink) 0 33px, transparent 34px),
    radial-gradient(circle at 66% 40%, var(--ink) 0 19px, transparent 20px),
    radial-gradient(circle at 25% 56%, var(--ink) 0 22px, transparent 23px),
    radial-gradient(circle at 80% 66%, var(--ink) 0 30px, transparent 31px),
    radial-gradient(circle at 30% 82%, var(--ink) 0 36px, transparent 37px),
    radial-gradient(circle at 72% 93%, var(--ink) 0 16px, transparent 17px);
  background-repeat:no-repeat;
}

/* folder tabs bleeding off the right edge */
.tabs{
  position:absolute; top:0; right:0; bottom:0; width:clamp(46px,7vw,120px);
  display:flex; flex-direction:column; pointer-events:none; z-index:1;
}
.tabs i{ display:block; flex:1; border-radius:14px 0 0 14px; margin-left:auto; }
.tabs i:nth-child(1){ width:52%; background:var(--sage); }
.tabs i:nth-child(2){ width:74%; background:var(--cream); }
.tabs i:nth-child(3){ width:88%; background:var(--blush); }
.tabs i:nth-child(4){ width:100%; background:var(--cream); }
.tabs--alt i:nth-child(1){ background:var(--sage-2); }
.tabs--alt i:nth-child(2){ background:var(--cream); }
.tabs--alt i:nth-child(3){ background:var(--blush); }
.tabs--alt i:nth-child(4){ background:var(--cream); }

/* striped barcode bar */
.barcode{
  height:clamp(26px,3.4vw,54px); width:100%;
  background:
    repeating-linear-gradient(90deg, var(--wine) 0 5px, transparent 5px 13px),
    repeating-linear-gradient(90deg, var(--wine) 0 3px, transparent 3px 27px),
    var(--sage-2);
}
.barcode--sage{ background:
    repeating-linear-gradient(90deg, var(--wine) 0 5px, transparent 5px 13px),
    repeating-linear-gradient(90deg, var(--wine) 0 3px, transparent 3px 27px),
    var(--sage-2);
}
.stripe-top{
  height:clamp(22px,2.6vw,40px); width:100%;
  background:
    repeating-linear-gradient(90deg, #5A2A1F 0 18px, transparent 18px 46px),
    var(--blush);
}

/* green blob "Project N" tag */
.blob{
  position:relative; display:inline-grid; place-items:center;
  width:clamp(120px,13vw,178px); aspect-ratio:1.35/1; margin-bottom:1.4rem;
  filter:drop-shadow(0 6px 14px rgba(41,0,8,.10));
}
.blob::before,.blob::after{
  content:""; position:absolute; background:var(--sage-2); border-radius:50%;
}
.blob::before{ inset:8% 26% 22% 0; }
.blob::after{ inset:22% 0 8% 26%; }
.blob em{
  position:relative; z-index:2; font-family:var(--mono); font-style:normal;
  font-weight:700; font-size:clamp(.7rem,1.05vw,.9rem); letter-spacing:.08em;
  color:var(--ink); transform:rotate(-8deg);
}

/* marquee ticker */
.marquee{ overflow:hidden; padding:clamp(1.4rem,3vw,2.4rem) 0; }
.marquee__track{
  display:flex; align-items:center; gap:clamp(1.2rem,2.6vw,2.6rem); width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee__track span{
  font-family:var(--display); font-size:clamp(1.6rem,4vw,3.4rem);
  color:var(--blush); white-space:nowrap;
}
.marquee__track i{ color:var(--sage); font-style:normal; font-size:clamp(.8rem,1.4vw,1.2rem); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* floaters */
[data-float]{ will-change:transform; }
.dot{ position:absolute; border-radius:50%; background:var(--ink); }

/* ---------- 5. Preloader ---------- */
.loader{ position:fixed; inset:0; z-index:9000; background:var(--ink); display:grid; place-items:center; }
.loader__inner{ text-align:center; color:var(--blush); }
.loader__mark{
  display:block; font-family:var(--display); font-size:clamp(3rem,9vw,6rem);
  line-height:1; letter-spacing:.02em;
}
.loader__word{
  display:block; font-family:var(--display); font-style:italic; color:var(--cream);
  font-size:clamp(1.4rem,4vw,2.6rem); margin-top:-.18em;
}
.loader__bar{ display:block; width:min(220px,44vw); height:2px; margin:1.6rem auto 0; background:rgba(236,199,193,.22); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--cream); transition:width .35s var(--ease); }
.loader{ clip-path:inset(0 0 0 0); transition:clip-path 1s var(--ease-out) .25s; }
.loader.is-done{ pointer-events:none; clip-path:inset(0 0 100% 0); }
.loader.is-done .loader__inner{ opacity:0; transform:translateY(-26px); transition:opacity .45s var(--ease), transform .7s var(--ease-out); }
.loader.is-hidden{ display:none; }

/* ---------- 6. Chrome: progress, cursor, topbar, rail, menu ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:600; background:transparent; }
.progress i{ display:block; height:100%; width:0%; background:var(--coral); transition:width .1s linear; }

.cursor{ position:fixed; top:0; left:0; z-index:800; pointer-events:none; mix-blend-mode:difference; opacity:0; transition:opacity .3s; }
.cursor.is-on{ opacity:1; }
.cursor__dot,.cursor__ring{ position:absolute; border-radius:50%; transform:translate(-50%,-50%); }
.cursor__dot{ width:6px; height:6px; background:#fff; }
.cursor__ring{ width:34px; height:34px; border:1px solid rgba(255,255,255,.75); transition:width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s; }
.cursor.is-hover .cursor__ring{ width:60px; height:60px; border-color:#fff; }
.cursor.is-hover .cursor__dot{ opacity:0; }

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2vw,1.7rem) var(--gutter);
  color:var(--cream);
  transition:transform .6s var(--ease-out), opacity .4s;
}
.topbar::before{
  content:""; position:absolute; inset:-40% 0 -110% 0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,rgba(41,0,8,.82),rgba(41,0,8,.42) 55%,transparent);
}
.topbar.is-up{ transform:translateY(-110%); opacity:0; }
.brand{ display:flex; align-items:baseline; gap:.6rem; }
.brand__mark{ font-family:var(--display); font-size:1.5rem; line-height:1; }
.brand__name{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
@media (max-width:560px){ .brand__name{ display:none; } }

.menu-btn{ display:flex; align-items:center; gap:.7rem; padding:.4rem 0; }
.menu-btn__label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.menu-btn__lines{ display:grid; gap:5px; width:26px; }
.menu-btn__lines i{ display:block; height:1.5px; background:currentColor; transition:transform .45s var(--ease-out), width .45s var(--ease-out); }
.menu-btn__lines i:nth-child(1){ width:26px; }
.menu-btn__lines i:nth-child(2){ width:17px; margin-left:auto; }
.menu-btn:hover .menu-btn__lines i:nth-child(2){ width:26px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:nth-child(1){ transform:translateY(3.25px) rotate(15deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:nth-child(2){ width:26px; transform:translateY(-3.25px) rotate(-15deg); }

/* folder-tab rail */
.rail{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:450;
  display:none; flex-direction:column; gap:6px;
}
@media (min-width:1100px){ .rail{ display:flex; } }
.rail__tab{
  display:flex; align-items:center; justify-content:center;
  width:var(--rail-w); height:clamp(78px,10vh,112px);
  border-radius:12px 0 0 12px; color:var(--ink);
  transition:width .5s var(--ease-out), filter .4s;
  box-shadow:-2px 0 10px rgba(41,0,8,.12);
}
.rail__tab span{
  font-family:var(--mono); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.rail__tab--blush{ background:var(--blush); }
.rail__tab--cream{ background:var(--cream); }
.rail__tab--sage{ background:var(--sage); }
.rail__tab:hover{ width:calc(var(--rail-w) + 16px); }
.rail__tab.is-active{ width:calc(var(--rail-w) + 24px); background:var(--coral); color:var(--cream); }

/* fullscreen menu */
.menu{
  position:fixed; inset:0; z-index:490; background:var(--ink); color:var(--cream);
  display:grid; grid-template-rows:1fr auto; align-items:center;
  padding:clamp(5rem,12vh,9rem) var(--gutter) clamp(2rem,5vh,3.5rem);
  clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease-out);
  overflow:hidden;
}
.menu[hidden]{ display:none; }
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu__dots{
  position:absolute; inset:0 auto 0 0; width:clamp(60px,14vw,240px); opacity:.5;
  background-image:
    radial-gradient(circle at 40% 8%,  var(--wine) 0 22px, transparent 23px),
    radial-gradient(circle at 70% 26%, var(--wine) 0 12px, transparent 13px),
    radial-gradient(circle at 25% 46%, var(--wine) 0 28px, transparent 29px),
    radial-gradient(circle at 66% 68%, var(--wine) 0 17px, transparent 18px),
    radial-gradient(circle at 30% 88%, var(--wine) 0 24px, transparent 25px);
  background-repeat:no-repeat;
}
.menu__nav{ display:grid; gap:clamp(.05rem,.7vh,.5rem); position:relative; z-index:2;
  max-height:100%; overflow-y:auto; overscroll-behavior:contain; }
.menu__nav > *{ opacity:0; transform:translateY(40px); transition:opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.menu.is-open .menu__nav > *{ opacity:1; transform:none; }
.menu.is-open .menu__nav > *:nth-child(1){ transition-delay:.16s; }
.menu.is-open .menu__nav > *:nth-child(2){ transition-delay:.21s; }
.menu.is-open .menu__nav > *:nth-child(3){ transition-delay:.26s; }
.menu.is-open .menu__nav > *:nth-child(4){ transition-delay:.31s; }
.menu.is-open .menu__nav > *:nth-child(5){ transition-delay:.36s; }
.menu.is-open .menu__nav > *:nth-child(6){ transition-delay:.41s; }
.menu.is-open .menu__nav > *:nth-child(7){ transition-delay:.46s; }
.menu__nav > a{
  display:flex; align-items:baseline; gap:clamp(.8rem,2vw,1.8rem);
  font-family:var(--display); font-size:clamp(1.95rem,6.6vw,4.6rem); line-height:1.06;
  color:var(--blush);
  transition:color .35s var(--ease), opacity .7s var(--ease-out), transform .8s var(--ease-out);
}

/* jump straight to any single project */
.menu__sub{
  display:grid; justify-items:start; gap:.42rem;
  margin:.55rem 0 .95rem; padding-left:clamp(2.2rem,7vw,5.4rem);
}
.menu__sub a{
  display:inline-flex; padding:.5em 1.05em; border-radius:99px;
  border:1px solid rgba(236,199,193,.34); color:var(--sage);
  font-family:var(--mono); font-size:clamp(.62rem,1.5vw,.74rem);
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.menu__sub a:hover,.menu__sub a:focus-visible{ background:var(--blush); border-color:var(--blush); color:var(--ink); }
.menu__nav > a em{ font-family:var(--mono); font-style:normal; font-size:.7rem; letter-spacing:.2em; color:var(--sage); }
.menu__nav > a:hover{ color:var(--cream); font-style:italic; }
.menu__foot{
  position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sage);
  border-top:1px solid rgba(221,219,181,.22); padding-top:1.4rem;
}
.menu__foot a:hover{ color:var(--coral); }
.menu__flower{
  position:absolute; z-index:1; right:-7%; bottom:-16%; width:clamp(140px,18vw,300px);
  opacity:0; transform:rotate(-18deg) scale(.7);
  transition:opacity .9s var(--ease-out) .3s, transform 1.2s var(--ease-out) .3s;
  pointer-events:none;
}
.menu.is-open .menu__flower{ opacity:.95; transform:rotate(0) scale(1); }

/* ---------- 7. Hero ---------- */
.hero,.contact{
  position:relative; min-height:100svh; display:grid; place-items:center;
  background:var(--ink); color:var(--cream); overflow:hidden;
  padding:clamp(6rem,14vh,9rem) var(--gutter) clamp(4rem,10vh,6rem);
}
.hero__panel{
  position:absolute; inset:0 auto 0 0; width:clamp(90px,23vw,360px);
  background:var(--blush); z-index:0;
}
.hero__dots{
  position:absolute; inset:0 auto 0 0; width:clamp(90px,23vw,360px); z-index:1;
  background-image:
    radial-gradient(circle at 26% 4%,  var(--ink) 0 5%, transparent 5.4%),
    radial-gradient(circle at 72% 14%, var(--ink) 0 2.6%, transparent 3%),
    radial-gradient(circle at 8% 31%,  var(--ink) 0 6.4%, transparent 6.8%),
    radial-gradient(circle at 40% 52%, var(--ink) 0 4.4%, transparent 4.8%),
    radial-gradient(circle at 82% 62%, var(--ink) 0 3%, transparent 3.4%),
    radial-gradient(circle at 22% 79%, var(--ink) 0 7.6%, transparent 8%),
    radial-gradient(circle at 68% 92%, var(--ink) 0 4%, transparent 4.4%);
  background-repeat:no-repeat;
}
.hero__orb{
  position:absolute; left:clamp(2%,7vw,10%); top:50%; z-index:2;
  width:clamp(220px,32vw,470px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; transform:translateY(-50%);
}
.hero__orb img{ width:100%; height:100%; object-fit:cover; }
.hero__orb-glass{
  position:absolute; inset:0; backdrop-filter:blur(3px);
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(41,0,8,.14));
  mix-blend-mode:soft-light;
}
.hero__orb--contact{ left:clamp(2%,6vw,9%); }

.hero__inner,.contact__inner{
  position:relative; z-index:4; width:100%; max-width:var(--maxw);
  margin-inline:auto; text-align:center;
}
.hero__inner,.contact__inner{
  padding-left:calc(clamp(90px,23vw,360px) - var(--gutter) + .75rem);
}
@media (min-width:1100px){
  .hero__inner,.contact__inner{ padding-left:clamp(120px,17vw,300px); padding-right:56px; }
}
.hero__eyebrow{
  max-width:100%; font-family:var(--mono); font-size:clamp(.58rem,.85vw,.72rem);
  letter-spacing:.18em; text-transform:uppercase; color:var(--sage);
  margin-bottom:clamp(1rem,3vh,2rem);
}
.hero__eyebrow span{ display:block; }
.hero__eyebrow span + span{ margin-top:.5em; opacity:.78; }
.hero__title,.contact__title{ display:block; font-family:var(--display); font-weight:400; }
.hero__line{ display:block; line-height:.84; letter-spacing:-.02em; }
.hero__line--1{ font-size:clamp(3.4rem,13.5vw,12rem); color:var(--blush); }
.hero__line--2{
  font-size:clamp(3.4rem,13.5vw,12rem); font-style:italic; color:var(--cream);
  margin-top:-.16em; margin-left:.06em;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  margin-top:clamp(1.6rem,4vh,2.8rem);
}
.hero__flower{ position:absolute; z-index:3; pointer-events:none; }
.hero__flower--pink{ top:13%; right:clamp(1rem,6vw,7.5rem); width:clamp(110px,16vw,250px); }
.hero__flower--coral{ top:37%; right:clamp(.5rem,2.5vw,3.5rem); width:clamp(140px,20vw,310px); }
.hero__scroll{
  position:absolute; bottom:clamp(1.2rem,4vh,2.4rem); left:50%; transform:translateX(-50%);
  z-index:5; display:grid; gap:.6rem; justify-items:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--sage);
}
.hero__scroll i{ display:block; width:1px; height:44px; background:linear-gradient(var(--sage),transparent); animation:scrollcue 2.2s var(--ease-soft) infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 46%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- 8. Statement ---------- */
.statement{
  position:relative; background:var(--blush); color:var(--ink);
  min-height:100svh; display:grid; place-items:center; overflow:hidden;
  padding:clamp(5rem,12vh,8rem) var(--gutter);
}
.statement__dots{
  position:absolute; inset:0 auto 0 0; width:clamp(56px,13vw,190px); z-index:1;
  background-image:
    radial-gradient(circle at 34% 4%,  var(--ink) 0 34px, transparent 35px),
    radial-gradient(circle at 80% 13%, var(--ink) 0 17px, transparent 18px),
    radial-gradient(circle at 18% 25%, var(--ink) 0 42px, transparent 43px),
    radial-gradient(circle at 74% 37%, var(--ink) 0 26px, transparent 27px),
    radial-gradient(circle at 26% 52%, var(--ink) 0 46px, transparent 47px),
    radial-gradient(circle at 78% 65%, var(--ink) 0 22px, transparent 23px),
    radial-gradient(circle at 24% 79%, var(--ink) 0 38px, transparent 39px),
    radial-gradient(circle at 70% 93%, var(--ink) 0 28px, transparent 29px);
  background-repeat:no-repeat;
}
.statement__stripe{
  position:absolute; top:0; bottom:0; left:clamp(48px,13vw,190px);
  width:clamp(6px,1.1vw,16px); background:var(--ink); z-index:1;
}
.statement__card{
  position:relative; z-index:3; overflow:visible;
  width:min(1000px,100%); margin-inline:auto;
  padding:clamp(2.6rem,5.5vw,4.4rem) clamp(1.6rem,4vw,3.6rem) clamp(2rem,5vw,4.4rem);
  border-radius:clamp(14px,2vw,26px);
  background:#F2EFEA;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(0,0,0,.028) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 74%, rgba(0,0,0,.03) 0 1px, transparent 1.4px),
    radial-gradient(circle at 84% 12%, rgba(0,0,0,.022) 0 1px, transparent 1.4px);
  background-size:9px 9px, 13px 13px, 7px 7px;
  box-shadow:0 26px 60px rgba(41,0,8,.14);
}
.statement__text{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,7.2vw,6.3rem); line-height:.95;
  letter-spacing:-.015em; text-align:center; color:var(--ink);
}
.statement__pill{ position:relative; z-index:4; }
.statement__pill--name{ font-size:clamp(1.05rem,2.4vw,1.55rem); padding:.6em 1.6em;
   position:absolute; top:clamp(4.5rem,11vh,8rem); right:clamp(1rem,10vw,13rem); }
.statement__pill--role{ position:absolute; bottom:clamp(4rem,11vh,8rem); left:clamp(5rem,22vw,20rem); }
.deco{ position:absolute; z-index:6; display:block; pointer-events:none; }
.deco img{ width:100%; display:block; }
/* both sit ON the paper like the deck — clear of the type, never past the viewport */
.deco--buttons{
  top:0; left:0; width:clamp(70px,12vw,158px);
  transform:translate(-34%,-62%);
}
.deco--clip{
  right:0; bottom:12%; width:clamp(40px,5.4vw,80px);
  transform:translate(26%,0) rotate(14deg);
}
@media (max-width:860px){
  /* no room to hang off the left edge on a phone — sit them on the card instead */
  .deco--buttons{ width:clamp(60px,16vw,98px); transform:translate(8%,-54%); }
  .deco--clip{ right:4%; bottom:8%; transform:translate(0,0) rotate(14deg); }
}
@media (max-width:860px){
  .statement__pill--name{ font-size:clamp(1.05rem,2.4vw,1.55rem); padding:.6em 1.6em;
   top:auto; bottom:auto; position:static; display:inline-flex; margin-bottom:1.2rem; }
  .statement__pill--role{ position:static; display:inline-flex; margin-top:1.2rem; }
  .statement{ grid-auto-rows:min-content; align-content:center; text-align:center; }
}

/* ---------- 9. Introduction ---------- */
.intro{
  position:relative; background:var(--sage); color:var(--ink); overflow:hidden;
  padding:clamp(5rem,14vh,9rem) 0 clamp(5rem,14vh,9rem);
}
.intro .wrap{ position:relative; z-index:3; }
.intro__badge{
  display:inline-flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem);
  margin:clamp(1rem,3vh,2rem) 0 clamp(2rem,6vh,4rem);
  padding:.75em 1.6em; border-radius:14px; background:var(--ink); color:var(--cream);
}
.intro__badge em{ font-family:var(--display); font-style:italic; font-size:clamp(1.1rem,2.4vw,2rem); }
.intro__beads{ display:flex; gap:.45em; }
.intro__beads i{ width:clamp(11px,1.5vw,22px); aspect-ratio:1; border-radius:50%; background:var(--cream); }
.intro__lead{
  max-width:64ch; font-size:clamp(1.02rem,1.75vw,1.55rem); line-height:1.52;
}
.intro__stats{ display:flex; flex-wrap:wrap; gap:clamp(1.6rem,5vw,4.5rem); }
.intro__stats li{ display:grid; gap:.2rem; }
.intro__stats strong{ font-family:var(--display); font-size:clamp(2rem,4.4vw,3.6rem); line-height:1; font-weight:400; }
.intro__stats span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; opacity:.68; }
.intro__flower{
  position:absolute; z-index:2; right:clamp(1rem,4vw,6rem); bottom:6%;
  width:clamp(120px,16vw,260px); pointer-events:none;
}
@media (max-width:900px){ .intro__flower{ right:-6%; top:auto; bottom:-4%; opacity:.55; } }

/* ---------- 10. About ---------- */
.about{
  position:relative; background:var(--cream); color:var(--ink); overflow:hidden;
  padding:clamp(5rem,14vh,9rem) 0;
}
.about__grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,6vw,6rem); align-items:center;
}
@media (max-width:900px){ .about__grid{ grid-template-columns:1fr; } }
.about__left{ position:relative; }
.about__title{ position:relative; z-index:3; margin-bottom:-1.6em; pointer-events:none; }
.about__title .display{ display:block; font-size:clamp(3rem,9.5vw,7.4rem); }
.about__me{ margin-left:clamp(2rem,10vw,7rem); margin-top:-.28em; }
.about__photo{ position:relative; margin:0; width:min(440px,90%); aspect-ratio:1; }
.about__photo-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:0;
  -webkit-mask-image:url("../img/deco/torn-disc.png"); mask-image:url("../img/deco/torn-disc.png");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.about__photo-frame{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 8px 18px rgba(41,0,8,.14));
}
.about__left .dot--a{ width:26px; height:26px; top:8%;  left:56%; }
.about__left .dot--b{ width:48px; height:48px; top:16%; left:64%; }
.about__left .dot--c{ width:15px; height:15px; top:14%; left:47%; }
.about__left .dot--d{ width:34px; height:34px; bottom:8%; left:26%; }
.about__right{ position:relative; }
.about__body{
  margin-top:clamp(1.4rem,3vh,2.2rem); padding-left:clamp(1.2rem,2.6vw,2.4rem);
  border-left:3px solid var(--ink);
  display:grid; gap:clamp(1rem,2.4vh,1.6rem);
}
.about__body p{ font-size:clamp(1rem,1.5vw,1.32rem); line-height:1.55; }
.about__body strong{ font-weight:600; }
.about__squiggle{ width:clamp(60px,7vw,100px); margin-top:2rem; opacity:.85; }

/* ---------- 11. Skills ---------- */
.skills{
  position:relative; background:var(--ink); color:var(--cream); overflow:hidden;
  padding:clamp(3.5rem,9vh,6rem) 0 0;
}
.skills__dots{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:flex-end;
  gap:clamp(.5rem,2vw,1.4rem);
  height:clamp(150px,17vw,220px); padding-inline:var(--gutter);
  margin-top:clamp(1rem,3vh,2.2rem); opacity:.85;
}
.skills__head{ position:relative; z-index:3; display:flex; justify-content:flex-end; }
.skills__ellipse{
  display:grid; place-items:center; padding:clamp(1.6rem,3.4vw,3rem) clamp(2.4rem,5vw,4.6rem);
  border-radius:50%; background:var(--slate); color:var(--cream); text-align:center;
}
.skills__ellipse .display{ font-family:var(--display); line-height:.95; }
@media (max-width:760px){ .skills__head{ justify-content:center; } }

.skills__cols{
  position:relative; z-index:3;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1.8rem,4vw,3.4rem); margin-top:clamp(2rem,6vh,4rem);
}
.skillcol .pill{ margin-bottom:clamp(1.1rem,2.6vh,1.9rem); }
.skillcol ul{ display:grid; gap:.55em; }
.skillcol li{
  position:relative; padding-left:1.4em; font-size:clamp(1rem,1.45vw,1.28rem);
  color:var(--cream);
}
.skillcol li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--blush);
}
.skills__dots i{
  flex:0 0 auto; width:var(--s); height:var(--s); border-radius:50%;
  background:var(--cream); translate:0 var(--y);
}
@media (max-width:560px){ .skills__dots i{ scale:.78; } }
.skills .marquee{ position:relative; z-index:3; margin-top:clamp(2rem,7vh,5rem); border-top:1px solid rgba(236,199,193,.16); }
.skills .barcode{ position:relative; z-index:3; }

/* ---------- 12. Work ---------- */
.work{ position:relative; background:var(--paper); color:var(--ink); }
/* torn-paper edge carrying the dark Skills section into the light Work section */
.torn{
  position:absolute; left:0; right:0; top:0; height:clamp(24px,3.4vw,50px);
  background:
    repeating-linear-gradient(90deg, var(--wine) 0 5px, transparent 5px 13px),
    repeating-linear-gradient(90deg, var(--wine) 0 3px, transparent 3px 27px),
    var(--sage-2);
  -webkit-mask-image:url("../img/deco/torn-edge.png"); mask-image:url("../img/deco/torn-edge.png");
  -webkit-mask-size:auto 100%; mask-size:auto 100%;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-position:bottom center; mask-position:bottom center;
  pointer-events:none; z-index:4;
}
.project{ position:relative; }
.project__intro{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4.5rem,12vh,8rem) var(--gutter);
}
.project__intro--stack,.project__intro--split{ grid-template-columns:1fr; }
.project__intro--split{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); }
@media (max-width:900px){
  .project__intro,.project__intro--split{ grid-template-columns:1fr; }
}
.project__title{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3.9rem); line-height:1.02;
  letter-spacing:-.008em; color:var(--wine); margin-bottom:clamp(1rem,2.6vh,1.8rem);
}
.project__lead{ max-width:56ch; font-size:clamp(1rem,1.4vw,1.22rem); line-height:1.58; }
.project__lead strong{ font-weight:700; }
.project__logo{
  position:absolute; top:0; right:0; z-index:3;
  width:clamp(66px,9vw,118px); border-radius:8px; rotate:-13deg;
  box-shadow:0 10px 24px rgba(41,0,8,.20);
}
.project--03 .project__intro-copy{ position:relative; }
@media (min-width:900px){
  .project--03 .project__intro-copy{ padding-right:clamp(96px,11vw,150px); }
}
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:clamp(1.2rem,3vh,2rem); }
.tags li{
  padding:.45em 1em; border-radius:99px; border:1px solid rgba(101,27,52,.32);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wine);
}

.project__block{ position:relative; padding-top:clamp(3rem,8vh,5.5rem); }
.project__block--wine{ background:var(--wine); color:var(--cream); }
.project__block--tight{ padding-top:clamp(2.5rem,7vh,4.5rem); }
.project__block .wrap{ padding-bottom:clamp(3rem,8vh,5.5rem); position:relative; z-index:2; }
.project__block .barcode{ position:absolute; left:0; right:0; bottom:0; }
.project__block .stripe-top{ position:absolute; left:0; right:0; top:0; }
.project__block:has(.stripe-top){ padding-top:clamp(4.5rem,11vh,7.5rem); }
.blockhead{ margin-bottom:clamp(2rem,5vh,3.4rem); }
.blockhead--center{ text-align:center; }
.blockhead .display{ color:var(--cream); }
.project--01 .blockhead .display,.project--02 .blockhead .display,
.project--03 .blockhead .display,.project--04 .blockhead .display{ color:var(--cream); }
.project__note{
  max-width:78ch; margin-top:clamp(2rem,5vh,3.2rem);
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.6; font-weight:500;
}

/* device: monitor */
.screens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(1.2rem,3vw,2.6rem); align-items:end; }
.screens--wide{ margin-top:clamp(2rem,5vh,3.4rem); }
.screen{ margin:0; }
.screen--lift{ transform:translateY(-6%); }
@media (max-width:760px){ .screen--lift{ transform:none; } }
.screen__bezel{
  display:block; position:relative; padding:6px 6px 8px; border-radius:12px;
  background:linear-gradient(#5D5D5D,#454545);
  box-shadow:0 18px 34px rgba(0,0,0,.32);
}
.screen__bezel img{ width:100%; border-radius:5px; display:block; }
.screen__bezel::before{
  content:""; position:absolute; top:1px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#8A8A8A;
}
.screen__bezel::after{
  content:""; position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  width:34%; height:18px; background:#E7E5DE;
  clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);
}
.screen{ padding-bottom:20px; }

/* device: phone */
.phones{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem,3vw,2.6rem); }
.phones--pair{ gap:clamp(1rem,3vw,2.2rem); }
.phones--six{ gap:clamp(1rem,2.4vw,2rem); }
.phones--scroll{
  flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
  padding-bottom:1.2rem; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  scrollbar-color:rgba(254,252,227,.4) transparent;
}
.phones--scroll .phone{ flex:0 0 auto; width:clamp(180px,22vw,250px); scroll-snap-align:center; }
.scrollhint{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  margin-top:.4rem; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sage); opacity:.75;
}
.scrollhint i{ display:block; width:22px; height:1px; background:currentColor; animation:hint 1.9s var(--ease-soft) infinite; }
@keyframes hint{ 0%,100%{ transform:translateX(-4px); opacity:.4 } 50%{ transform:translateX(4px); opacity:1 } }
@media (min-width:1100px){ .scrollhint{ display:none; } }
.phones--scroll::-webkit-scrollbar{ height:6px; }
.phones--scroll::-webkit-scrollbar-thumb{ background:rgba(254,252,227,.35); border-radius:99px; }
.phone{ margin:0; display:grid; justify-items:center; gap:.9rem; }
.phone__frame{
  display:block; position:relative; width:clamp(160px,20vw,225px);
  padding:9px 6px; border-radius:26px; background:#141414;
  box-shadow:0 20px 40px rgba(0,0,0,.34), inset 0 0 0 1.5px #3A3A3A;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.phone__frame::before{
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:38%; height:12px; background:#141414; border-radius:0 0 9px 9px; z-index:2;
}
.phone__frame img{
  width:100%; aspect-ratio:259/560; object-fit:cover; object-position:center top;
  border-radius:19px; display:block;
}
.phone:hover .phone__frame{ transform:translateY(-10px); box-shadow:0 30px 54px rgba(0,0,0,.42); }
.phone figcaption{
  font-family:var(--mono); font-weight:700; font-size:clamp(.68rem,1vw,.86rem);
  letter-spacing:.14em; text-transform:uppercase; text-align:center;
  color:currentColor; opacity:.8;
}
.project__block--wine .phone figcaption{ color:var(--sage); opacity:1; }
.phone--num figcaption,
.project__block--wine .phone--num figcaption{
  display:grid; place-items:center; width:2.6em; aspect-ratio:1; border-radius:50%;
  background:var(--blush); color:var(--ink); opacity:1;
  font-family:var(--display); font-size:clamp(1rem,1.6vw,1.35rem); letter-spacing:0;
}
.phones--fan{ justify-content:center; }
.phones--fan .phone__frame{ width:clamp(190px,24vw,270px); }

/* flat cards */
.cards{ display:grid; gap:clamp(1.2rem,3vw,2.4rem); }
.cards--3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card{ margin:0; border-radius:6px; overflow:hidden; transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.card img{ width:100%; display:block; }
.card--paper{ background:var(--paper); box-shadow:0 14px 30px rgba(0,0,0,.24); }
.card--dark{ border-radius:14px; box-shadow:0 18px 38px rgba(0,0,0,.36); }
.card--offset{ transform:translateY(8%); }
.card:hover{ transform:translateY(-8px) scale(1.014); box-shadow:0 26px 52px rgba(0,0,0,.34); }
.card--offset:hover{ transform:translateY(calc(8% - 8px)) scale(1.014); }

/* split layouts */
.split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.6rem,5vw,4.5rem); align-items:center; }
.split--reverse{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
@media (max-width:860px){ .split,.split--reverse{ grid-template-columns:1fr; } }
.split__media{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.4vw,2rem); align-items:start; }
/* the chatbot shots have very different proportions — stack them as a composition */
.chatstack{ display:grid; grid-template-columns:1fr; }
.chatstack__panel{ width:52%; justify-self:start; position:relative; z-index:2; }
.chatstack__site{ width:74%; justify-self:end; margin-top:-16%; }
@media (max-width:600px){
  .chatstack__panel{ width:66%; }
  .chatstack__site{ width:88%; margin-top:-12%; }
}
.split__copy{ position:relative; }
.split__copy p{ font-size:clamp(1.05rem,1.7vw,1.5rem); line-height:1.5; }
.split__copy strong{ color:var(--blush); font-weight:600; }
.split__squiggle{ height:clamp(70px,8vw,120px); width:auto; margin-bottom:1.4rem; opacity:.9; filter:hue-rotate(-70deg) saturate(.6) brightness(1.5); }
.split__single{ max-width:640px; }
.proto__squiggle{ height:clamp(64px,7vw,104px); width:auto; margin:0 auto clamp(1.2rem,3vh,2.2rem); opacity:.5; }

/* collage */
.collage{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(1rem,2.6vw,2rem); margin-top:clamp(1.5rem,4vh,2.5rem);
}
.collage__item{
  margin:0; border-radius:4px; overflow:hidden; background:var(--paper);
  box-shadow:0 16px 34px rgba(41,0,8,.18);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.collage__item img{ width:100%; display:block; }
.collage__item:hover{ transform:rotate(0deg) translateY(-8px) scale(1.02); box-shadow:0 28px 52px rgba(41,0,8,.26); z-index:3; }

/* ---------- 13. Contact & footer ---------- */
.contact__sub{
  max-width:44ch; margin:clamp(1.2rem,3vh,2rem) auto 0; color:var(--sage);
  font-size:clamp(1rem,1.4vw,1.2rem);
}
.contact__inner .btn{ margin-top:clamp(1.4rem,3.5vh,2.4rem); }
.contact .hero__line--2{ margin-left:0; }

.footer{ background:var(--ink); color:var(--sage); padding:clamp(1.6rem,4vh,2.6rem) 0; border-top:1px solid rgba(221,219,181,.16); }
.footer__grid{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
}
.footer__top:hover{ color:var(--coral); }

/* ---------- 14. Reveal system ---------- */
[data-reveal]{ will-change:transform,opacity; }

[data-reveal="up"]     { opacity:0; transform:translateY(38px); transition:opacity .8s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal="rise"]   { opacity:0; transform:translateY(64px) scale(.95); transition:opacity .8s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal="pop"]    { opacity:0; transform:scale(.55) rotate(-8deg); transition:opacity .6s var(--ease-out), transform .8s cubic-bezier(.34,1.56,.64,1); }
[data-reveal="drop"]   { opacity:0; transform:translateY(-70px) rotate(-40deg); transition:opacity .5s var(--ease-out), transform 1s cubic-bezier(.34,1.4,.64,1); }
[data-reveal="card"]   { opacity:0; transform:translateY(50px) scale(.94); filter:blur(6px); transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out); }
[data-reveal="tilt"]   { opacity:0; transform:perspective(1200px) rotateX(16deg) translateY(60px); transform-origin:bottom; transition:opacity .8s var(--ease-out), transform 1.1s var(--ease-out); }
[data-reveal="wipe"]   { transform:scaleX(0); transition:transform 1s var(--ease-out); }
[data-reveal="scatter"]{ opacity:0; transform:translateY(56px) rotate(0deg) scale(.92); transition:opacity .8s var(--ease-out), transform 1s var(--ease-out); }

[data-reveal].is-in{ opacity:1; filter:none; }
[data-reveal="up"].is-in,[data-reveal="rise"].is-in,[data-reveal="card"].is-in,
[data-reveal="drop"].is-in,[data-reveal="tilt"].is-in{ transform:none; }
[data-reveal="mask"] .about__photo-clip{
  display:block; position:absolute; inset:0;
  clip-path:inset(0 0 100% 0); transform:scale(1.08);
  transition:clip-path 1.2s var(--ease-out), transform 1.4s var(--ease-out);
}
[data-reveal="mask"].is-in .about__photo-clip{ clip-path:inset(0 0 0 0); transform:none; }
[data-reveal="pop"].is-in{ transform:scale(1) rotate(0deg); }
[data-reveal="wipe"].is-in{ transform:scaleX(1); }
[data-reveal="scatter"].is-in{ transform:rotate(var(--r,0deg)); }

/* split text */
.wd{ display:inline-block; }
.ch,.ln{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.ch{ padding:.2em 0 .26em; margin:-.2em 0 -.26em; }
.ln{ padding:.14em 0 .22em; margin:-.14em 0 -.22em; }
.chi,.lni{
  display:inline-block; transform:translateY(115%);
  transition:transform 1s var(--ease-out);
}
.lni{ transition-duration:1.05s; }
.is-in .chi,.is-in .lni{ transform:translateY(0); }
[data-split]{ opacity:0; }
[data-split].is-ready{ opacity:1; }

/* ---------- 15. Responsive touch-ups ---------- */
@media (max-width:1099px){ body{ padding-right:0; } }
@media (min-width:1100px){ .work,.footer,.skills,.about,.intro{ padding-right:0; } }

@media (max-width:760px){
  .hero__flower--pink{ top:7%; right:-6%; width:40vw; }
  .hero__flower--coral{ top:auto; bottom:3%; right:-12%; width:50vw; opacity:.85; }
  .hero__orb{ left:-14%; opacity:.85; }
  .split__media{ grid-template-columns:1fr; }
  .card--offset{ transform:none; }
  .card--offset:hover{ transform:translateY(-8px) scale(1.014); }
  .about__title{ margin-bottom:-.6em; }
  .about__me{ margin-left:22%; }
  .tabs{ width:34px; }
}

@media (hover:none){
  .cursor{ display:none; }
}

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; }
  [data-reveal="scatter"]{ transform:rotate(var(--r,0deg)) !important; }
  .chi,.lni{ transform:none !important; }
  [data-split]{ opacity:1 !important; }
  .marquee__track{ animation:none; }
  .loader{ display:none; }
}