/* Creative control room — expressive enough to be remembered, restrained enough to sell the work. */
:root {
  --creative-night: #0b1320;
  --creative-night-2: #121f30;
  --creative-paper: #eef2f6;
  --creative-white: #f8fbff;
  --creative-blue: #5277ff;
  --creative-ice: #a9d7ff;
  --creative-coral: #ff715f;
  --creative-line: rgba(20, 34, 51, .14);
}

html { background: var(--creative-paper); }
body {
  background:
    radial-gradient(circle at 5% 20%, rgba(82, 119, 255, .08), transparent 28rem),
    var(--creative-paper);
}
.film-grain { display: block; opacity: .018; mix-blend-mode: multiply; }
.pointer-glow { z-index: 0; width: 62rem; height: 62rem; opacity: 0; background: radial-gradient(circle, rgba(82,119,255,.09), transparent 68%); }
body:hover .pointer-glow { opacity: 1; }
main, .site-header, .site-footer, .project-cta { position: relative; z-index: 1; }

/* Navigation: one calm instrument panel instead of a row of stickers. */
.site-header {
  top: .65rem;
  width: calc(100% - 1.3rem);
  max-width: 112rem;
  min-height: 4.5rem;
  margin-inline: auto;
  padding: .65rem clamp(.8rem, 2vw, 1.4rem);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 1.1rem;
  background: rgba(246,249,252,.78);
  box-shadow: 0 .75rem 2.5rem rgba(16,31,47,.08);
  backdrop-filter: blur(22px) saturate(145%);
}
.identity-mark { border-radius: .55rem; background: var(--creative-night); }
.name-lockup strong { color: var(--creative-night); font-weight: 830; letter-spacing: -.045em; }
.name-lockup em { color: var(--creative-blue); }
.nav-icon { display: none !important; }
.nav-links { gap: .1rem; justify-content: flex-end; }
.nav-links a {
  position: relative;
  min-height: 2.55rem;
  padding: .62rem .72rem;
  border-radius: .55rem;
  color: #526071;
  font-size: .78rem;
  letter-spacing: .01em;
}
.nav-links a::after {
  position: absolute;
  right: .7rem;
  bottom: .35rem;
  left: .7rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--creative-blue); background: rgba(82,119,255,.07); }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.is-active::after { transform: scaleX(1); }
.nav-links a.is-active { color: var(--creative-white); background: var(--creative-night); }
.theme-toggle { border-radius: .55rem; }

/* Opening frame: a living title sequence made from Samer's real work. */
.hero {
  isolation: isolate;
  grid-template-columns: minmax(0,.92fr) minmax(28rem,1.08fr);
  min-height: calc(100svh - 6.3rem);
  max-width: none;
  margin: .95rem .65rem .5rem;
  padding: clamp(3.5rem, 6vw, 7rem) clamp(1.2rem, 5vw, 6rem) clamp(4rem, 6vw, 7rem);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: clamp(1.35rem, 2.2vw, 2.25rem);
  color: var(--creative-white);
  background:
    radial-gradient(circle at 85% 16%, rgba(82,119,255,.34), transparent 26rem),
    radial-gradient(circle at 55% 110%, rgba(255,113,95,.18), transparent 30rem),
    linear-gradient(125deg, #09111c 0%, #0d1826 58%, #122235 100%);
  overflow: hidden;
}
.hero::before {
  z-index: -2;
  top: -24rem;
  right: -12rem;
  width: 64rem;
  background: conic-gradient(from 80deg, transparent, rgba(82,119,255,.3), transparent 34%, rgba(169,215,255,.12), transparent 68%);
  filter: blur(2rem);
  animation: hero-aurora 18s linear infinite;
}
.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: clamp(3rem, 6vw, 6.5rem) clamp(3rem, 6vw, 6.5rem);
  mask-image: linear-gradient(90deg, #000, transparent 80%);
  content: "";
  pointer-events: none;
}
.hero-wordmark {
  position: absolute;
  z-index: -1;
  right: -.035em;
  bottom: -.18em;
  color: transparent;
  font-family: var(--display);
  font-size: clamp(8rem, 20vw, 24rem);
  font-weight: 900;
  line-height: .75;
  letter-spacing: -.09em;
  -webkit-text-stroke: 1px rgba(255,255,255,.075);
  pointer-events: none;
  user-select: none;
}
.hero-copy { max-width: 49rem; padding: 0; }
.hero-role {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(1.6rem,3vw,2.7rem);
  color: #c7d4e1;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-role::before { width: 1.65rem; height: 2px; border-radius: 2px; background: var(--creative-coral); content: ""; }
.hero-intro { font-size: clamp(2.5rem, 4.4vw, 5.25rem); line-height: 1.02; letter-spacing: -.065em; }
.hero-intro span { color: #dce6f0; font-weight: 520; }
.hero-intro strong { max-width: 13em; margin-top: .55em; color: #fff; font-size: .46em; line-height: 1.25; letter-spacing: -.025em; }
.hero-stop { color: var(--creative-ice); white-space: nowrap; }
.hero-stop::after { height: .09em; bottom: -.03em; background: linear-gradient(90deg, var(--creative-blue), var(--creative-coral)); }
.hero-signature { margin-top: clamp(1.6rem,3vw,2.5rem); color: #fff; }
.hero-call { color: #aebccd; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.hero-signature .hero-name { color: var(--creative-white); font-size: clamp(2.15rem,3vw,3.5rem); text-shadow: .06em .06em 0 rgba(82,119,255,.55); }
.hero-actions { margin-top: 1.15rem; }
.hero-actions .text-link {
  min-height: 3rem;
  padding: .76rem 1.1rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.075);
  backdrop-filter: blur(10px);
}
.hero-actions .text-link::after { display: none; }
.hero-actions .text-link:hover { background: var(--creative-blue); border-color: var(--creative-blue); }
.hero-meta { display: flex; gap: 1.5rem; margin: 1.45rem 0 0; color: #91a3b4; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-meta span + span::before { margin-right: 1.5rem; color: var(--creative-coral); content: "●"; font-size: .55rem; }

.opening-board { gap: .8rem; padding: 2rem 0; transform-style: preserve-3d; }
.opening-board::before {
  inset: .8rem -.6rem 1rem;
  border-color: rgba(169,215,255,.22);
  border-radius: 1.4rem;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2rem 5rem rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.opening-frame {
  padding: .32rem;
  border-color: rgba(255,255,255,.17);
  border-radius: .9rem;
  color: #fff;
  background: rgba(14,26,40,.84);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.26);
}
.opening-main { transform: translate3d(var(--board-x),var(--board-y),2rem) rotate(-2.2deg); }
.opening-secondary { transform: translate3d(calc(var(--board-x)*-.7),0,1rem) rotate(2.3deg); }
.opening-third { transform: translate3d(calc(var(--board-x)*-.5),var(--board-y),3rem) rotate(3.4deg); }
.opening-frame:hover, .opening-frame:focus-visible, .opening-frame:focus-within { box-shadow: 0 2rem 4rem rgba(0,0,0,.38); }
.frame-caption, .frame-topline { padding-inline: .55rem; }
.frame-caption svg, .contact-links b { display: none; }

.hero-ribbon {
  position: relative;
  z-index: 3;
  width: calc(100% - 1.3rem);
  margin: -.9rem auto 1rem;
  overflow: hidden;
  border-radius: .7rem;
  background: var(--creative-blue);
  color: #fff;
  transform: rotate(-.65deg);
  box-shadow: 0 1rem 2.5rem rgba(50,76,170,.2);
}
.hero-ribbon-track { display: flex; width: max-content; align-items: center; gap: 1.35rem; padding: .78rem 0; animation: ribbon-run 26s linear infinite; }
.hero-ribbon span { font-size: .72rem; font-weight: 850; letter-spacing: .14em; white-space: nowrap; }
.hero-ribbon i { color: #bcd7ff; font: normal 1rem/1 Georgia,serif; }
@keyframes ribbon-run { to { transform: translateX(-50%); } }
@keyframes hero-aurora { to { transform: rotate(1turn); } }

/* Proof first: client questions become a compact editorial strip. */
.proof-rail {
  width: calc(100% - 1.3rem);
  max-width: 112rem;
  margin: 0 auto clamp(2.5rem,5vw,5rem);
  padding: .8rem;
  border: 1px solid rgba(16,31,47,.1);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.72);
  box-shadow: 0 1.5rem 4rem rgba(27,44,62,.07);
}
.proof-item { padding: 1rem clamp(1rem,2vw,1.6rem); border-top: 0; }
.proof-item strong { color: var(--creative-night); font-size: clamp(1.05rem,1.55vw,1.5rem); }
.proof-item:first-child { padding-left: 1rem; }

/* Chapters read like a directed sequence, not disconnected blocks. */
.section { padding-block: clamp(4rem,7vw,7rem); }
.section-heading { margin-bottom: clamp(2rem,4vw,3.5rem); }
.section-heading h2 { font-size: clamp(2.8rem,5.7vw,6.4rem); line-height: .92; letter-spacing: -.07em; }
.section-heading > div::before {
  display: block;
  margin-bottom: .85rem;
  color: var(--creative-blue);
  font: 750 .7rem/1 var(--body);
  letter-spacing: .16em;
}
#films .section-heading > div::before { content: "01 / MOTION"; color: var(--creative-ice); }
#scenes .section-heading > div::before { content: "02 / SCENES"; }
#programs .section-heading > div::before { content: "03 / PROGRAMS"; color: var(--creative-ice); }
#reels .section-heading > div::before { content: "04 / VERTICAL"; }
#stills .section-heading > div::before { content: "05 / STILLS"; }
#stories .section-heading > div::before { content: "06 / IMPACT"; }
.section-heading::after { height: 3px; width: min(14rem,35vw); background: linear-gradient(90deg,var(--creative-blue),var(--creative-coral)); }
.section-symbol { color: var(--creative-coral); }

#films {
  margin: .65rem;
  padding-inline: max(var(--gutter),1.2rem);
  border-radius: clamp(1.4rem,2vw,2rem);
  background:
    radial-gradient(circle at 90% 5%, rgba(82,119,255,.36), transparent 28rem),
    linear-gradient(140deg, #09131f, #122236);
  box-shadow: 0 2rem 6rem rgba(8,20,33,.18);
}
.motion-grid { align-items: center; }
.motion-grid .film-card:nth-child(2) { transform: translateY(1.4rem); }
.youtube-embed, .film-card > .video-trigger { border-radius: 1rem; }
.youtube-embed { border: 1px solid rgba(255,255,255,.12); box-shadow: 0 1.3rem 3rem rgba(0,0,0,.28); }

#scenes { margin: 0 .65rem; border-radius: 2rem; }
.scene-grid .film-card { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.scene-grid .film-card:hover { transform: translateY(-.45rem) scale(1.008); }

.programs { margin: .65rem; border-radius: 2rem; background: linear-gradient(145deg,#151823,#101a29 62%,#18284a); }
.program-project { border-radius: 1.35rem; background: radial-gradient(circle at 5% 5%,rgba(82,119,255,.52),transparent 40%),#101b2a; }
.episode-card { border-radius: 1rem; overflow: hidden; }

.partners { margin: 1rem .65rem; border: 0; border-radius: 1rem; background: var(--creative-night); color: #fff; overflow: hidden; }
.section-kicker { color: #9eb0c3; }
.logo-marquee { border-color: rgba(255,255,255,.12); }

.direct-videos { margin: .65rem; border-radius: 2rem; background: linear-gradient(135deg,#dce7ff,#f0e8f4 55%,#ffe8df); }
.direct-card { border-radius: 1.15rem; background: rgba(255,255,255,.62); box-shadow: 0 1rem 2.5rem rgba(20,34,51,.1); }
.direct-grid .direct-card:nth-child(even) { transform: translateY(1.7rem); }

.stills { margin: .65rem; padding-inline: max(var(--gutter),1.2rem); border-radius: 2rem; background: #f9fbfd; }
.still .image-trigger { border-radius: .85rem; box-shadow: 0 .8rem 2rem rgba(17,31,46,.08); }
.still figcaption { padding-inline: .15rem; }

.transformation { margin: .65rem; border-radius: 2rem; background: linear-gradient(145deg,#e4ebf7,#f7f9fb); }
.case-result strong { color: var(--creative-blue); }
.comparison-card, .story-card { border-radius: 1.15rem; }
.story-card-blue { background: #dce8ff; }
.story-card-yellow { background: #ffe4de; }

.about {
  margin: .65rem;
  padding-inline: max(var(--gutter),1.2rem);
  border-radius: 2rem;
  color: #edf4fb;
  background:
    radial-gradient(circle at 16% 100%,rgba(82,119,255,.28),transparent 28rem),
    var(--creative-night);
}
.about-portrait { transform: rotate(-2deg); border-color: rgba(255,255,255,.16); background: #182638; box-shadow: 0 2rem 5rem rgba(0,0,0,.28); }
.about-portrait figcaption strong { color: #fff; }
.about-copy p, .about-portrait figcaption { color: #aebdca; }
.capabilities li { border-color: rgba(255,255,255,.14); }
.capabilities strong { color: #fff; }

.site-footer { margin-top: .65rem; color: #fff; background: var(--creative-blue); }
.site-footer::before { background: radial-gradient(ellipse at var(--contact-x,70%) 35%,rgba(255,255,255,.2),transparent 55%); }
.footer-title em { color: #dce8ff; }
.contact-links a, .contact-links a:first-child { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(7,17,28,.85); }
.contact-links a:hover { color: var(--creative-night); background: #fff; }
.contact-icon { color: #fff; background: rgba(255,255,255,.12); }
.footer-meta { border-color: rgba(255,255,255,.3); color: #e8efff; }

@supports (animation-timeline: view()) {
  .section-heading h2 { animation: chapter-title both linear; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes chapter-title { from { opacity: .25; transform: translateY(1.4rem); letter-spacing: -.02em; } to { opacity: 1; transform: none; letter-spacing: -.07em; } }
}

[data-theme="dark"] body { background: #07101a; }
[data-theme="dark"] .site-header { border-color: rgba(255,255,255,.1); background: rgba(10,20,31,.82); }
[data-theme="dark"] .name-lockup strong { color: #fff; }
[data-theme="dark"] .nav-links a { color: #aebdca; }
[data-theme="dark"] .nav-links a.is-active { color: #fff; background: var(--creative-blue); }
[data-theme="dark"] .proof-rail { border-color: rgba(255,255,255,.1); background: #101d2a; }
[data-theme="dark"] .proof-item strong { color: #fff; }
[data-theme="dark"] #scenes, [data-theme="dark"] .stills { background: #0e1925; }
[data-theme="dark"] .direct-videos { background: linear-gradient(135deg,#17273d,#29263a 55%,#3a2526); }
[data-theme="dark"] .transformation { background: linear-gradient(145deg,#102033,#172536); }
[data-theme="dark"] .story-card-blue { background: #1c3150; }
[data-theme="dark"] .story-card-yellow { background: #3a2929; }

@media (max-width: 1120px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .nav-links a { padding-inline: .55rem; }
  .hero { grid-template-columns: minmax(0,.85fr) minmax(25rem,1.15fr); }
}

@media (max-width: 760px) {
  .film-grain { opacity: .012; }
  .pointer-glow { display: none; }
  .site-header { top: .35rem; width: calc(100% - .7rem); padding: .55rem .7rem .45rem; border-radius: .9rem; }
  .identity { grid-column: 1; grid-row: 1; }
  .header-tools { grid-column: 2; grid-row: 1; }
  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: .05rem;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg,#000 92%,transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: none; min-height: 2.3rem; padding: .5rem .62rem; background: transparent !important; font-size: .76rem; }
  .nav-links a.is-active { color: var(--creative-blue); }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    margin: .65rem .35rem .35rem;
    padding: 3.4rem 1rem 2.5rem;
    border-radius: 1.25rem;
    gap: 2rem;
  }
  .hero::after { background-size: 3.75rem 3.75rem; mask-image: linear-gradient(#000,transparent 65%); }
  .hero-wordmark { right: -.02em; bottom: -.06em; font-size: 34vw; }
  .hero-role { margin-bottom: 1.35rem; font-size: .7rem; }
  .hero-intro { font-size: clamp(2rem,8.6vw,3.25rem); line-height: 1.05; }
  .hero-intro strong { font-size: .48em; }
  .hero-signature { margin-top: 1.35rem; }
  .hero-signature .hero-name { font-size: 2.35rem; }
  .hero-actions { position: static; margin-top: .9rem; }
  .hero-meta { gap: .75rem; font-size: .62rem; }
  .hero-meta span + span::before { margin-right: .75rem; }
  .opening-board { width: 100%; padding: .4rem .25rem 1rem; gap: .55rem; }
  .opening-board::before { inset: -.25rem 0 .3rem; }
  .opening-main { transform: rotate(-1.2deg); }
  .opening-secondary { transform: rotate(1deg); }
  .opening-third { transform: rotate(1.6deg); }
  .hero-ribbon { width: calc(100% - .7rem); margin-top: -.35rem; border-radius: .55rem; transform: rotate(-.4deg); }
  .hero-ribbon-track { padding-block: .62rem; }
  .proof-rail { width: calc(100% - .7rem); grid-template-columns: 1fr; padding: .25rem .8rem; border-radius: 1rem; }
  .proof-item, .proof-item:first-child, .proof-item:last-child { grid-column: auto; padding: .85rem 0; border-right: 0; border-top: 1px solid var(--creative-line); }
  .proof-item:first-child { border-top: 0; }
  .section { padding-block: 4.25rem; }
  .section-heading h2 { font-size: clamp(2.55rem,13vw,4.4rem); }
  #films, #scenes, .programs, .direct-videos, .stills, .transformation, .about { margin-inline: .35rem; border-radius: 1.35rem; }
  .motion-grid .film-card:nth-child(2), .direct-grid .direct-card:nth-child(even) { transform: none; }
  .about { grid-template-columns: 1fr; }
  .about-portrait { position: static; width: min(75%,18rem); transform: rotate(-1.2deg); }
}

@media (max-width: 480px) {
  .name-lockup strong { font-size: 1.05rem; }
  .theme-toggle { width: 2.2rem; min-width: 2.2rem; height: 2.2rem; }
  .hero { padding-top: 2.75rem; }
  .hero-intro { font-size: clamp(1.85rem,8.7vw,2.55rem); }
  .hero-call { font-size: .68rem; }
  .hero-signature .hero-name { font-size: 2.1rem; }
  .opening-board { grid-template-columns: 1.15fr .85fr; }
  .frame-caption, .frame-topline { font-size: .72rem; }
  .section-heading h2 { font-size: clamp(2.35rem,12vw,3.4rem); }
  .direct-grid { gap: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-ribbon-track { animation: none; }
}