:root{
  --paper:#fffdf8;
  --paper2:#f8f2e7;
  --ink:#171717;
  --muted:#6f6d67;
  --line:#dfdbd0;
  --yellow:#ffd65c;
  --blue:#6ec7ff;
  --blue-deep:#2b72e8;
  --coral:#ff846d;
  --green:#76d3a9;
  --purple:#8d7cff;
  --pad:clamp(18px,4vw,58px);
  --max:1500px;
  --header:74px;
  --radius:32px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic",Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img,video{max-width:100%;display:block}::selection{background:var(--yellow);color:#000}
.wrap{width:min(100%,var(--max));padding-inline:var(--pad);margin-inline:auto}

.scroll-progress{position:fixed;z-index:120;left:0;right:0;top:0;height:4px;background:transparent;pointer-events:none}.scroll-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--coral),var(--yellow),var(--blue),var(--green),var(--purple));transform:scaleX(0);transform-origin:left}
html[dir="rtl"] .scroll-progress i{transform-origin:right}

.header{position:fixed;z-index:100;left:0;right:0;top:0;height:var(--header);background:rgba(255,253,248,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(23,23,23,.08)}
.header-inner{height:100%;display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;font:800 11px/1 Inter,sans-serif;letter-spacing:.11em;white-space:nowrap}.brand-sketch{width:34px;height:24px}.brand-sketch path{fill:none;stroke:var(--blue-deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.header-nav{display:flex;align-items:center;gap:22px;font-size:13px}.header-nav a{position:relative}.header-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;border-radius:999px;background:var(--coral);transform:scaleX(0);transition:.25s var(--ease)}.header-nav a:hover::after{transform:scaleX(1)}.lang{border:1px solid rgba(23,23,23,.15);background:#fff;border-radius:999px;padding:9px 12px;cursor:pointer;font:800 11px/1 Inter,sans-serif;letter-spacing:.09em;box-shadow:2px 3px 0 rgba(23,23,23,.12)}

.section-layer{position:relative;isolation:isolate;overflow:hidden}.paper-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(23,23,23,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,23,23,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 75%,transparent 100%)}
.hero{min-height:100svh;padding-top:var(--header);background:linear-gradient(180deg,#fffdf8 0%,#fffaf0 100%)}.hero-inner{min-height:calc(100svh - var(--header));display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(48px,7vw,92px) 86px;position:relative;z-index:3}.hero-copy{padding-inline-start:clamp(0px,2vw,24px)}.hero-hello{margin:0 0 10px;color:#4d4a44;font-size:clamp(18px,2vw,28px);font-family:"DM Serif Display",Georgia,serif}.hero-name{margin:0;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(62px,8vw,120px);line-height:.92;letter-spacing:-.045em;max-width:720px}.hero-role{position:relative;display:inline-block;margin-top:18px;font:800 clamp(24px,3.1vw,50px)/1 Inter,sans-serif;letter-spacing:-.055em;direction:ltr}.hero-role svg{position:absolute;left:-2%;right:-2%;bottom:-18px;width:104%;height:26px;overflow:visible}.hero-role path{fill:none;stroke:var(--blue-deep);stroke-width:7;stroke-linecap:round}.hero-meta{margin:34px 0 0;font-size:14px;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:32px}.sketch-button{position:relative;display:inline-flex;align-items:center;gap:18px;border:2px solid var(--ink);padding:14px 18px;border-radius:16px;font-weight:700;background:#fff;box-shadow:4px 5px 0 var(--ink);transform:rotate(-1.5deg);transition:transform .22s ease,box-shadow .22s ease}.sketch-button:hover{transform:translateY(-3px) rotate(.5deg);box-shadow:6px 8px 0 var(--ink)}.sketch-button.coral{background:#ffe2dc}.sketch-button b{font-size:18px}.text-link{font-weight:700;border-bottom:3px solid var(--green);padding-bottom:4px}
.hero-portrait-wrap{position:relative;min-height:min(72svh,740px);display:grid;place-items:center}.portrait-paper{position:absolute;width:76%;height:78%;border:2px solid var(--ink);border-radius:34px}.portrait-paper.one{background:var(--yellow);transform:rotate(6deg) translate(6%,2%)}.portrait-paper.two{background:var(--blue);transform:rotate(-4deg) translate(-5%,4%)}.portrait-frame{position:relative;z-index:3;width:min(78%,570px);height:min(68svh,690px);overflow:hidden;background:#f3eee3;border:2px solid var(--ink);border-radius:30px;box-shadow:10px 12px 0 rgba(23,23,23,.15)}.portrait-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:23%;background:linear-gradient(transparent,rgba(0,0,0,.08));pointer-events:none}.portrait-frame img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 28px rgba(0,0,0,.13));transition:transform .6s var(--ease)}.portrait-frame:hover img{transform:scale(1.025) translateY(-4px)}.portrait-tape{position:absolute;z-index:4;left:50%;top:-15px;width:120px;height:34px;background:rgba(255,255,255,.65);border:1px solid rgba(23,23,23,.15);transform:translateX(-50%) rotate(-3deg);backdrop-filter:blur(2px)}.portrait-arrow{position:absolute;z-index:5;right:-2%;bottom:9%;width:150px;transform:rotate(-7deg)}.portrait-note{position:absolute;z-index:5;left:2%;bottom:11%;background:#fff;border:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink);padding:11px 14px;border-radius:12px;font-size:12px;font-weight:700;transform:rotate(3deg)}.doodle{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.04))}.doodle-code{width:150px;left:1.5%;top:18%;transform:rotate(-7deg)}.doodle-star{width:92px;left:6%;bottom:16%;transform:rotate(8deg)}.doodle-sliders{width:120px;right:2.5%;top:15%;transform:rotate(8deg)}.hero-bottom{position:absolute;z-index:4;left:0;right:0;bottom:18px;display:flex;align-items:center;justify-content:space-between;color:#7e7a71;font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}.hero-bottom img{width:190px;opacity:.85}

.work-intro{padding:110px 0 78px;background:#fff}.intro-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(24px,4vw,50px);position:relative}.intro-icon{width:100px;height:100px;border:2px solid var(--ink);border-radius:24px;background:#e8fff4;display:grid;place-items:center;transform:rotate(-4deg);box-shadow:7px 8px 0 var(--green)}.intro-icon svg{width:64px}.intro-icon path,.intro-icon rect{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.eyebrow{margin:0 0 10px;font:800 11px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.work-intro h2,.contact h2{margin:0;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(48px,7vw,102px);line-height:.95;letter-spacing:-.045em}.intro-spark{width:90px;transform:rotate(11deg)}

.projects-section{background:#f6f0e6;padding:32px 0 130px;position:relative}.projects-section::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 18%,92% 58%,84% 26%,73% 78%,62% 35%,50% 76%,38% 31%,26% 72%,13% 28%,0 65%)}.projects-stack{padding-top:70px}.project-card{--accent-card:var(--yellow);--card-bg:#fff9df;position:sticky;top:calc(var(--header) + 18px);min-height:calc(100svh - var(--header) - 38px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);gap:clamp(24px,4vw,58px);align-items:center;margin-bottom:11vh;padding:clamp(18px,3.2vw,46px);border:2px solid var(--ink);border-radius:34px;background:var(--card-bg);box-shadow:0 24px 70px rgba(38,29,16,.08),8px 9px 0 rgba(23,23,23,.12);transform-origin:center top;overflow:hidden}.project-card[data-index="1"]{--accent-card:var(--blue);--card-bg:#eef8ff}.project-card[data-index="2"]{--accent-card:var(--green);--card-bg:#effcf5}.project-card[data-index="3"]{--accent-card:var(--purple);--card-bg:#f2efff}.project-card:nth-child(even) .project-gallery{order:2}.project-card:nth-child(even) .project-info{order:1}.project-card::before{content:"";position:absolute;width:210px;height:24px;background:var(--accent-card);right:7%;top:14px;transform:rotate(-3deg);opacity:.72}.project-card::after{content:"";position:absolute;width:86px;height:86px;border:6px solid var(--accent-card);border-radius:24px;left:-34px;bottom:-30px;transform:rotate(18deg);opacity:.7}.project-gallery{min-width:0;position:relative}.media-viewport{overflow:hidden;border:2px solid var(--ink);border-radius:24px;background:#fff;box-shadow:7px 8px 0 rgba(23,23,23,.14)}.media-track{display:flex;transition:transform .55s var(--ease);will-change:transform}.media-slide{flex:0 0 100%;min-width:0;aspect-ratio:16/10;display:grid;place-items:center;background:#fff;position:relative;overflow:hidden}.media-slide img,.media-slide video{width:100%;height:100%;object-fit:contain;background:#fff}.media-slide video{object-fit:cover}.expand-media{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:13px;border:2px solid var(--ink);background:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:3px 4px 0 rgba(23,23,23,.16);font-size:18px;z-index:4}.media-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:14px}.media-buttons{display:flex;gap:8px}.media-button{width:42px;height:42px;border:2px solid var(--ink);border-radius:13px;background:#fff;cursor:pointer;box-shadow:3px 4px 0 rgba(23,23,23,.13);font-weight:800}.media-button:hover{background:var(--accent-card)}.media-dots{display:flex;gap:7px;align-items:center}.media-dot{width:22px;height:5px;border:0;border-radius:999px;background:rgba(23,23,23,.17);padding:0;cursor:pointer;transition:.25s ease}.media-dot.active{width:38px;background:var(--ink)}.project-info{position:relative;z-index:3}.project-number{display:inline-flex;align-items:center;gap:12px;font:800 10px/1 Inter,sans-serif;letter-spacing:.12em;color:#655f56;text-transform:uppercase}.project-number::before{content:"";width:36px;height:7px;border-radius:999px;background:var(--accent-card)}.project-title{margin:22px 0 18px;font-family:"DM Serif Display",Georgia,serif;font-size:clamp(42px,5.6vw,82px);line-height:.93;font-weight:400;letter-spacing:-.045em}.project-idea{font-size:clamp(16px,1.5vw,21px);line-height:1.75;max-width:580px;margin:0;color:#3f3c36}.project-role{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.project-role span{background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:9px 12px;font-size:12px;font-weight:700;box-shadow:2px 3px 0 rgba(23,23,23,.08)}.project-sketch{position:absolute;right:5%;bottom:4%;width:110px;opacity:.9;pointer-events:none}.project-card:nth-child(even) .project-sketch{right:auto;left:5%;transform:scaleX(-1)}

.contact{min-height:88svh;background:#fff8d8;padding:clamp(90px,9vw,150px) 0 90px;display:flex;align-items:center}.contact-inner{display:grid;grid-template-columns:1fr minmax(330px,.72fr);gap:clamp(42px,8vw,120px);align-items:center;position:relative;z-index:3}.contact-copy{position:relative}.contact-copy>img{width:150px;margin:24px 0 0 22%;transform:rotate(16deg)}.contact-cards{display:grid;gap:14px}.contact-card{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"small arrow" "strong arrow";gap:6px 18px;padding:20px;border:2px solid var(--ink);border-radius:20px;box-shadow:6px 7px 0 var(--ink);transition:.22s ease}.contact-card:hover{transform:translate(-3px,-3px);box-shadow:9px 10px 0 var(--ink)}.contact-card small{grid-area:small;font:800 10px/1 Inter,sans-serif;letter-spacing:.12em}.contact-card strong{grid-area:strong;font-size:clamp(16px,2vw,24px);font-weight:700;word-break:break-word}.contact-card b{grid-area:arrow;align-self:center;font-size:24px}.contact-card.blue{background:#dff3ff}.contact-card.yellow{background:#ffe78c}.contact-card.green{background:#dcf9e9}.contact-scribble{position:absolute;border:6px solid var(--coral);opacity:.65}.scribble-a{width:220px;height:70px;border-radius:50%;right:-40px;top:90px;transform:rotate(-12deg)}.scribble-b{width:160px;height:160px;border-radius:38% 62% 42% 58%;left:-70px;bottom:60px;border-color:var(--blue-deep);transform:rotate(21deg)}.contact-star{position:absolute;width:86px;right:12%;bottom:10%;transform:rotate(-10deg)}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(16,16,16,.95);display:grid;place-items:center;padding:clamp(16px,4vw,54px);opacity:0;visibility:hidden;transition:.28s ease}.lightbox.open{opacity:1;visibility:visible}.lightbox-stage{width:min(1200px,88vw);height:min(80svh,850px);display:grid;place-items:center}.lightbox-stage img,.lightbox-stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:18px}.lightbox-close,.lightbox-nav{position:absolute;border:0;background:#fff;color:#111;display:grid;place-items:center;cursor:pointer;border-radius:14px}.lightbox-close{right:22px;top:22px;width:48px;height:48px;font-size:28px}.lightbox-nav{top:50%;width:52px;height:52px;font-size:22px}.lightbox-nav.prev{left:22px}.lightbox-nav.next{right:22px}.lightbox-count{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:#fff;font:700 11px/1 Inter,sans-serif;letter-spacing:.1em}.lightbox button:disabled{opacity:.3;cursor:default}

.reveal{opacity:0;transform:translateY(32px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:1050px){
  .hero-inner{grid-template-columns:1fr;gap:14px;padding-top:56px}.hero-copy{padding-top:10px}.hero-portrait-wrap{min-height:530px}.portrait-frame{height:520px}.doodle-code{top:11%}.doodle-sliders{top:48%}.hero-bottom{display:none}.project-card{grid-template-columns:1fr;position:relative;top:auto;min-height:auto;margin-bottom:34px}.project-card:nth-child(even) .project-gallery,.project-card:nth-child(even) .project-info{order:initial}.project-card:nth-child(even) .project-sketch{right:5%;left:auto;transform:none}.contact-inner{grid-template-columns:1fr}.contact-copy>img{margin-left:auto;margin-right:10%}
}
@media(max-width:720px){
  :root{--header:66px;--radius:24px}.header-nav{gap:14px}.header-nav a{display:none}.brand{font-size:10px}.hero{min-height:auto}.hero-inner{min-height:auto;padding-block:44px 92px}.hero-name{font-size:clamp(60px,19vw,90px)}.hero-role{font-size:clamp(24px,8vw,38px)}.hero-meta{margin-top:28px}.hero-actions{gap:14px;align-items:flex-start;flex-direction:column}.hero-portrait-wrap{min-height:430px;margin-top:6px}.portrait-frame{height:400px;width:82%}.portrait-arrow{width:112px;right:-3%;bottom:5%}.portrait-note{left:0;bottom:8%;font-size:10px}.doodle-code{width:82px;left:-2%;top:4%}.doodle-star{width:64px;left:3%;bottom:42%}.doodle-sliders{width:72px;right:-2%;top:53%}.work-intro{padding:76px 0 52px}.intro-inner{grid-template-columns:auto 1fr;align-items:start}.intro-icon{width:72px;height:72px;border-radius:18px}.intro-icon svg{width:46px}.intro-spark{position:absolute;right:0;bottom:-46px;width:62px}.work-intro h2{font-size:clamp(44px,13vw,68px)}.projects-section{padding-bottom:90px}.projects-stack{padding-top:48px}.project-card{padding:14px;border-radius:24px;box-shadow:5px 6px 0 rgba(23,23,23,.12)}.project-card::before{width:110px;height:16px;top:8px}.media-viewport{border-radius:18px;box-shadow:4px 5px 0 rgba(23,23,23,.12)}.media-slide{aspect-ratio:4/3}.project-info{padding:10px 4px 12px}.project-title{font-size:clamp(40px,12vw,62px);margin-top:16px}.project-idea{font-size:15px;line-height:1.7}.project-role{margin-top:18px}.project-sketch{display:none}.contact{padding:78px 0 74px}.contact h2{font-size:clamp(50px,14vw,74px)}.contact-card{padding:17px;box-shadow:4px 5px 0 var(--ink)}.contact-card:hover{transform:none;box-shadow:4px 5px 0 var(--ink)}.lightbox{padding:12px}.lightbox-stage{width:94vw;height:76svh}.lightbox-nav{top:auto;bottom:18px}.lightbox-nav.prev{left:18px}.lightbox-nav.next{right:18px}.lightbox-count{bottom:35px}.lightbox-close{right:14px;top:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.media-track{transition:none}.parallax{transform:none!important}}
.parallax{translate:0 var(--parallax-y,0px)}
@media(prefers-reduced-motion:reduce){.parallax{translate:none!important}}
.media-track{direction:ltr}
html[dir="rtl"] .hero-name,
html[dir="rtl"] .work-intro h2,
html[dir="rtl"] .project-title,
html[dir="rtl"] .contact h2{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-weight:700;letter-spacing:-.035em}

/* =========================================================
   HERO / HEADER — custom image-based landing section
   ========================================================= */

body,
html[dir="rtl"] body{
  font-family:"Baloo Bhaijaan 2",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html[dir="rtl"] .hero-name,
html[dir="rtl"] .work-intro h2,
html[dir="rtl"] .project-title,
html[dir="rtl"] .contact h2,
.work-intro h2,
.project-title,
.contact h2{
  font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;
}

:root{
  --header:56px;
}

/* Header stays transparent over the hero and becomes glassy after it. */
.header{
  height:var(--header);
  background:transparent;
  border-bottom:1px solid transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease,box-shadow .28s ease;
}
.header-inner{height:100%}
.brand,
.header-nav a{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  transition:color .28s ease,text-shadow .28s ease;
}
.brand{
  font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.09em;
}
.brand-sketch path{stroke:#ffd65c}
.header-nav{
  gap:18px;
  font-size:14px;
  font-weight:700;
}
.header-nav a::after{background:#ffd65c;bottom:-5px}
.lang{
  padding:6px 11px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.03em;
}
.header.is-solid{
  background:rgba(255,253,248,.88);
  border-bottom-color:rgba(23,23,23,.08);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 5px 24px rgba(0,0,0,.04);
}
.header.is-solid .brand,
.header.is-solid .header-nav a{
  color:var(--ink);
  text-shadow:none;
}
.header.is-solid .brand-sketch path{stroke:var(--blue-deep)}

/* Image hero */
.hero{
  position:relative;
  min-height:100svh;
  height:100svh;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:#101310;
}
.hero-background{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
}
.hero-background img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
}
.hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.08) 100%);
}

/* Profile: same visual row as the quote on desktop, lower half on mobile. */
.hero-person{
  position:absolute;
  z-index:8;
  left:clamp(54px,11vw,210px);
  top:53%;
  width:clamp(230px,20vw,360px);
  aspect-ratio:1/1.08;
  transform:translateY(-50%);
  pointer-events:auto;
}
.hero-person-circle{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:3%;
  width:88%;
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(145deg,#ffd96e 0%,#f4c74d 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.hero-person-orbit{
  position:absolute;
  z-index:2;
  border-radius:50%;
  pointer-events:none;
}
.hero-person-orbit.orbit-a{
  left:1%;
  bottom:0;
  width:96%;
  aspect-ratio:1;
  border:4px solid rgba(255,255,255,.92);
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(-28deg);
}
.hero-person-orbit.orbit-b{
  left:7%;
  bottom:7%;
  width:84%;
  aspect-ratio:1;
  border:3px solid rgba(255,214,92,.95);
  border-left-color:transparent;
  border-top-color:transparent;
  transform:rotate(20deg);
}
.hero-person-photo{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:0;
  width:92%;
  height:auto;
  max-width:none;
  transform:translateX(-50%);
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.22));
  transition:transform .55s var(--ease),filter .55s var(--ease);
}
.hero-person:hover .hero-person-photo{
  transform:translateX(-50%) translateY(-5px) scale(1.018);
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.27));
}
.hero-person-label{
  position:absolute;
  z-index:6;
  left:1%;
  bottom:5%;
  padding:7px 13px 6px;
  border:1.5px solid rgba(23,23,23,.9);
  border-radius:10px;
  background:rgba(255,255,255,.94);
  color:#171717;
  box-shadow:3px 4px 0 rgba(23,23,23,.9);
  font-size:13px;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
  transform:rotate(-2deg);
}
.hero-person-spark{
  position:absolute;
  z-index:3;
  display:block;
  background:#ffd65c;
  pointer-events:none;
}
.hero-person-spark.spark-a{
  left:-2%;
  top:22%;
  width:13px;
  height:13px;
  border-radius:3px;
  transform:rotate(42deg);
}
.hero-person-spark.spark-b{
  right:3%;
  bottom:20%;
  width:9px;
  height:28px;
  border-radius:999px;
  transform:rotate(38deg);
}

/* Small decorative accents stay at the outer edges, away from the quote. */
.hero-doodle{
  position:absolute;
  z-index:5;
  pointer-events:none;
  opacity:.86;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.10));
}
.hero-doodle-code{
  width:clamp(58px,5vw,88px);
  left:2.2%;
  top:17%;
  transform:rotate(-8deg);
}
.hero-doodle-star{
  width:clamp(42px,3.8vw,64px);
  left:4.2%;
  bottom:16%;
  transform:rotate(8deg);
}
.hero-doodle-sliders{
  width:clamp(58px,4.7vw,82px);
  right:2.5%;
  top:17%;
  transform:rotate(7deg);
}
.hero-doodle-loop{
  width:clamp(72px,7vw,116px);
  right:8%;
  bottom:5%;
  transform:rotate(5deg);
}
.hero-scroll-cue{
  position:absolute;
  z-index:9;
  left:50%;
  bottom:16px;
  width:30px;
  height:46px;
  transform:translateX(-50%);
  border:1.5px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(0,0,0,.10);
  backdrop-filter:blur(5px);
}
.hero-scroll-cue span{
  position:absolute;
  left:50%;
  top:8px;
  width:5px;
  height:8px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#fff;
  animation:heroScrollCue 1.7s ease-in-out infinite;
}
@keyframes heroScrollCue{
  0%,100%{transform:translate(-50%,0);opacity:.9}
  50%{transform:translate(-50%,15px);opacity:.25}
}

@media(max-width:1050px){
  .hero-person{
    left:clamp(34px,7vw,80px);
    top:55%;
    width:clamp(210px,30vw,300px);
  }
  .hero-doodle-code{top:13%}
  .hero-doodle-sliders{top:15%}
}

@media(max-width:720px){
  :root{--header:50px}
  .hero{height:100svh;min-height:100svh}
  .hero-background img{object-position:center center}
  .header-inner{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
  .brand{font-size:10px}
  .brand-sketch{width:27px;height:20px}
  .header-nav{gap:10px}
  .header-nav a{display:none}
  .lang{padding:5px 9px;font-size:10px}

  /* On mobile: quote stays in the upper-middle of the baked background;
     profile sits in the lower-middle with clear breathing room. */
  .hero-person{
    left:50%;
    top:auto;
    bottom:7.5%;
    width:min(56vw,225px);
    transform:translateX(-50%);
  }
  .hero-person-label{
    left:50%;
    bottom:0;
    transform:translateX(-50%) rotate(-2deg);
    font-size:11px;
    padding:6px 11px 5px;
  }
  .hero-person-orbit.orbit-a{border-width:3px}
  .hero-person-orbit.orbit-b{border-width:2px}
  .hero-doodle-code{
    width:52px;
    left:4%;
    top:8%;
  }
  .hero-doodle-star{
    width:39px;
    left:5%;
    bottom:27%;
  }
  .hero-doodle-sliders{
    width:48px;
    right:5%;
    top:auto;
    bottom:22%;
  }
  .hero-doodle-loop{
    width:68px;
    right:6%;
    bottom:4%;
  }
  .hero-scroll-cue{display:none}
}

@media(max-width:390px){
  .hero-person{width:min(55vw,190px);bottom:6.5%}
  .hero-doodle-code{width:46px}
  .hero-doodle-star{width:34px}
  .hero-doodle-sliders{width:43px}
  .hero-doodle-loop{width:58px}
}

@media(prefers-reduced-motion:reduce){
  .hero-scroll-cue span{animation:none}
}


/* ===== Hero/header refinements requested ===== */
.header .wrap{width:100%;max-width:none;padding-inline:max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-right));}
.header-inner{gap:16px;}
.brand{gap:0;color:#fff;letter-spacing:.14em;}
.brand-sketch{display:none !important;}
.header-nav{gap:12px;}
.header-nav a{display:inline-flex !important;align-items:center;white-space:nowrap;}
.lang{white-space:nowrap;}

.hero-person{
  left:22%;
  top:54%;
  bottom:auto;
  width:clamp(230px,20vw,320px);
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%);
  align-items:center;
}
.hero-person-circle{
  left:50%;
  bottom:8%;
  width:90%;
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(145deg,#ffd86a,#f3c84e);
  box-shadow:0 20px 38px rgba(0,0,0,.16);
  z-index:1;
}
.hero-person-mask{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:8%;
  width:90%;
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  overflow:hidden;
}
.hero-person-photo{
  left:50%;
  bottom:-1%;
  width:94%;
  transform:translateX(-50%);
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.18));
}
.hero-person:hover .hero-person-photo{
  transform:translateX(-50%) translateY(-4px) scale(1.01);
}
.hero-person-label{
  left:auto;
  right:-92px;
  bottom:29%;
  transform:rotate(-2deg);
}
.hero-person-orbit.orbit-a{left:3%;bottom:7%;width:94%;}
.hero-person-orbit.orbit-b{left:10%;bottom:14%;width:80%;}
.hero-person-spark.spark-a{left:4%;top:19%;}
.hero-person-spark.spark-b{right:12%;bottom:29%;}

@media(max-width:1050px){
  .hero-person{left:23%;top:54%;width:clamp(220px,25vw,290px);}
  .hero-person-label{right:-78px;bottom:28%;}
}

@media(max-width:720px){
  .header .wrap{padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));}
  .header-nav a{display:inline-flex !important;font-size:12px;}
  .brand{font-size:9px;}
  .lang{font-size:10px;padding:6px 10px;}

  .hero-person{
    left:50%;
    top:auto;
    bottom:8.5%;
    width:min(52vw,230px);
    transform:translateX(-50%);
  }
  .hero-person-circle,
  .hero-person-mask{bottom:6%;}
  .hero-person-label{
    right:-56px;
    left:auto;
    bottom:28%;
    font-size:10px;
    padding:6px 10px 5px;
  }
  .hero-doodle-star{left:6%;bottom:26%;}
  .hero-doodle-sliders{right:4%;bottom:14%;top:auto;}
}

@media(max-width:420px){
  .hero-person{width:min(56vw,205px);}
  .hero-person-label{right:-48px;bottom:27%;}
  .header-nav{gap:8px;}
  .lang{font-size:9px;padding:6px 8px;}
}


/* ===== Requested hero alignment fix ===== */
.header-nav{gap:14px;}
.hero{overflow:hidden;}
/* Keep the background crop stable so the quote stays in a predictable place */
.hero-background img{object-position:center center;}

.hero-person{
  left:calc(50% - clamp(360px, 21vw, 460px));
  top:58%;
  bottom:auto;
  width:clamp(250px, 20vw, 330px);
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%);
}
.hero-person-circle,
.hero-person-mask{
  width:92%;
  bottom:3%;
}
.hero-person-circle{box-shadow:0 18px 32px rgba(0,0,0,.14);}
.hero-person-mask{overflow:hidden;border-radius:50%;}
.hero-person-photo{
  width:97%;
  bottom:-2%;
}
.hero-person-label{
  left:calc(100% - 6px);
  right:auto;
  bottom:30%;
  transform:rotate(-1.5deg);
  box-shadow:2px 3px 0 rgba(23,23,23,.9);
}
.hero-person-orbit.orbit-a{
  left:5%;
  bottom:6%;
  width:90%;
}
.hero-person-orbit.orbit-b{
  left:11%;
  bottom:12%;
  width:78%;
}
.hero-person-spark.spark-a{left:10%;top:17%;}
.hero-person-spark.spark-b{right:13%;bottom:28%;}

@media(max-width:1280px){
  .hero-person{
    left:calc(50% - clamp(300px, 19vw, 400px));
    top:57%;
    width:clamp(230px, 21vw, 300px);
  }
  .hero-person-label{left:calc(100% - 8px);bottom:29%;}
}

@media(max-width:1050px){
  .hero-person{
    left:calc(50% - clamp(250px, 18vw, 300px));
    top:56%;
    width:clamp(210px, 24vw, 280px);
  }
}

@media(max-width:720px){
  /* Mobile: quote upper center, photo lower center */
  .header-nav a{display:inline-flex !important;font-size:12px;}
  .lang{font-size:10px;}
  .hero-background img{object-position:center center;}
  .hero-person{
    left:50%;
    top:auto;
    bottom:7%;
    width:min(46vw, 220px);
    transform:translateX(-50%);
  }
  .hero-person-circle,
  .hero-person-mask{
    width:94%;
    bottom:4%;
  }
  .hero-person-photo{width:98%;bottom:-1%;}
  .hero-person-label{
    left:calc(100% - 4px);
    right:auto;
    bottom:29%;
    font-size:10px;
    padding:6px 10px 5px;
  }
  .hero-person-orbit.orbit-a{left:4%;bottom:6%;width:92%;}
  .hero-person-orbit.orbit-b{left:11%;bottom:13%;width:78%;}
}

@media(max-width:430px){
  .hero-person{width:min(48vw, 198px);bottom:8%;}
  .hero-person-label{font-size:9.5px;left:calc(100% - 2px);}
  .header-nav{gap:8px;}
}


/* ===== Final hero corrections v3 ===== */
#top .hero-scroll-cue{display:none !important;}
#top.hero{overflow:hidden;}
#top .hero-background img{object-position:center center !important;}

/* Strong, conflict-free placement for desktop */
#top .hero-person{
  position:absolute !important;
  left:29% !important;
  top:64% !important;
  bottom:auto !important;
  width:clamp(250px,18vw,320px) !important;
  aspect-ratio:1 / 1 !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  z-index:8 !important;
}
#top .hero-person-circle{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:92% !important;
  aspect-ratio:1 !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#f8d25d,#efc84d) !important;
  box-shadow:0 18px 34px rgba(0,0,0,.14) !important;
  z-index:1 !important;
}
#top .hero-person-mask{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:92% !important;
  aspect-ratio:1 !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  overflow:hidden !important;
  z-index:4 !important;
}
#top .hero-person-photo{
  position:absolute !important;
  left:50% !important;
  bottom:-1% !important;
  width:88% !important;
  height:auto !important;
  transform:translateX(-50%) !important;
  object-fit:contain !important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.14)) !important;
}
#top .hero-person:hover .hero-person-photo{
  transform:translateX(-50%) translateY(-3px) scale(1.01) !important;
}
#top .hero-person-label{
  position:absolute !important;
  left:calc(100% - 8px) !important;
  right:auto !important;
  bottom:24% !important;
  transform:none !important;
  padding:7px 12px 6px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.96) !important;
  border:1.5px solid rgba(23,23,23,.9) !important;
  box-shadow:2px 3px 0 rgba(23,23,23,.9) !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#top .hero-person-orbit.orbit-a{
  left:4% !important;
  bottom:4% !important;
  width:92% !important;
  border-width:4px !important;
}
#top .hero-person-orbit.orbit-b{
  left:11% !important;
  bottom:11% !important;
  width:78% !important;
  border-width:3px !important;
}
#top .hero-person-spark.spark-a{left:8% !important; top:18% !important;}
#top .hero-person-spark.spark-b{right:13% !important; bottom:24% !important;}

/* Cleaner doodle layout */
#top .hero-doodle{opacity:.9 !important; filter:drop-shadow(0 5px 10px rgba(0,0,0,.09)) !important;}
#top .hero-doodle-code{left:3% !important; top:18% !important; width:62px !important; transform:rotate(-8deg) !important;}
#top .hero-doodle-star{left:5% !important; bottom:18% !important; width:46px !important; transform:rotate(8deg) !important;}
#top .hero-doodle-sliders{right:3% !important; top:18% !important; width:62px !important; transform:rotate(7deg) !important;}
#top .hero-doodle-loop{right:7% !important; bottom:7% !important; width:74px !important; transform:rotate(5deg) !important;}

/* Stable laptop/tablet */
@media (max-width: 1280px){
  #top .hero-person{left:28% !important; top:63% !important; width:clamp(235px,19vw,295px) !important;}
}
@media (max-width: 1050px){
  #top .hero-person{left:27% !important; top:62% !important; width:clamp(220px,22vw,275px) !important;}
  #top .hero-person-label{left:calc(100% - 10px) !important; bottom:23% !important;}
  #top .hero-doodle-code{left:2.5% !important; top:15% !important; width:56px !important;}
  #top .hero-doodle-sliders{right:2.5% !important; top:15% !important; width:56px !important;}
}

/* Mobile: quote upper center, photo lower center */
@media (max-width: 720px){
  #top .hero-person{
    left:50% !important;
    top:auto !important;
    bottom:7% !important;
    width:min(42vw,200px) !important;
    transform:translateX(-50%) !important;
  }
  #top .hero-person-circle,
  #top .hero-person-mask{width:94% !important; bottom:0 !important;}
  #top .hero-person-photo{width:90% !important; bottom:-1% !important;}
  #top .hero-person-label{
    left:calc(100% - 6px) !important;
    bottom:23% !important;
    font-size:10px !important;
    padding:6px 10px 5px !important;
  }
  #top .hero-person-orbit.orbit-a{left:3% !important; bottom:3% !important; width:94% !important; border-width:3px !important;}
  #top .hero-person-orbit.orbit-b{left:11% !important; bottom:10% !important; width:78% !important; border-width:2px !important;}
  #top .hero-doodle-code{left:4% !important; top:10% !important; width:48px !important;}
  #top .hero-doodle-star{left:6% !important; bottom:22% !important; width:38px !important;}
  #top .hero-doodle-sliders{right:4% !important; top:18% !important; width:48px !important;}
  #top .hero-doodle-loop{right:8% !important; bottom:4% !important; width:58px !important;}
}
@media (max-width: 420px){
  #top .hero-person{width:min(44vw,180px) !important; bottom:8% !important;}
  #top .hero-person-label{left:calc(100% - 2px) !important; font-size:9px !important;}
}