/* Moonlight reference: IBM Plex display, Alexandria interface; WHB colors retained.
   Unmodified WOFF2 files and their OFL notices live in /fonts/moonlight/. */
@font-face{font-family:'WHB Display';src:url('/fonts/moonlight/ibm-plex-sans-arabic-arabic-600-normal-0pRdybE_.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'WHB Display';src:url('/fonts/moonlight/ibm-plex-sans-arabic-arabic-700-normal-DrtBj6UE.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'WHB Interface';src:url('/fonts/moonlight/alexandria-arabic-500-normal-Dphr8v-Z.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'WHB Interface';src:url('/fonts/moonlight/alexandria-arabic-600-normal-CG1onHtq.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'WHB Interface';src:url('/fonts/moonlight/alexandria-arabic-700-normal-D0In6rsA.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}

:root{
  --font-body:'WHB Interface','Plus Jakarta Sans',sans-serif;
  --font-display:'WHB Display','Plus Jakarta Sans',sans-serif;
  --motion-fast:180ms;--motion-normal:340ms;--motion-slow:600ms;
  --motion-cinematic:1100ms;--ease-premium:cubic-bezier(.16,1,.3,1);
}
body[data-agency-shell]{font-family:var(--font-body);font-weight:500;font-size:1rem;line-height:1.85;font-synthesis:none}
body[data-agency-shell] :is(h1,h2,.font-display){font-family:var(--font-display);font-weight:700;letter-spacing:0;text-wrap:balance}
body[data-agency-shell] h3{font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.6}
body[data-agency-shell] :is(button,input,select,textarea){font-family:inherit;letter-spacing:0}
body[data-agency-shell] :is(.home-eyebrow,.campaign-eyebrow){letter-spacing:0;font-size:.875rem!important;font-weight:600}
body[data-agency-shell] :is(.agency-button,.agency-header-cta,.bg-cta){font-weight:600;line-height:1.7}
.agency-brand strong{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.45}
.agency-brand small{font-size:.75rem;line-height:1.7}
.agency-desktop-nav{gap:clamp(12px,1.8vw,26px)}
.agency-desktop-nav a{font-size:.875rem}
.agency-header-cta{padding-inline:16px}
body[data-agency-shell] .agency-bottom-nav span{font-size:.875rem!important;line-height:1.5}
.agency-menu nav a{font-size:1.125rem}
.home-section h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.4!important}
.home-service h3{font-size:1.25rem}
.home-service p,.agency-footer p{font-size:1rem;line-height:1.9}
.home-section .home-text-link{font-size:.875rem}
.campaign-gallery-heading h1{font-size:clamp(2.25rem,4.6vw,4rem);line-height:1.4}
.campaign-card-caption h2{font-size:1.5rem;line-height:1.5}
.campaign-project-heading h1{line-height:1.4}
body[data-agency-shell=compact] main>h1{font-size:clamp(1.875rem,6vw,2.5rem);line-height:1.45}
body[data-agency-shell] :is(.agency-contact-link bdi,[dir=ltr]){letter-spacing:normal}

/* Intrinsic scene rows accommodate all titles, including enlarged text. */
.home-hero{height:auto;min-height:38rem;border-radius:32px;background:#252636}
.hero-scenes{position:relative;inset:auto;display:grid}
.hero-scene{position:relative;inset:auto;grid-area:1/1;min-width:0;opacity:1;visibility:visible;pointer-events:none;transition:none}.hero-scene.is-active{pointer-events:auto}
.hero-visual{inset:0;height:auto;transform:none;clip-path:none;opacity:0;transition:opacity 1100ms ease}.hero-scene.is-active .hero-visual{opacity:1}.hero-copy{visibility:hidden}.hero-scene.is-active .hero-copy{visibility:visible}
.hero-visual img,.hero-scene.is-active img{object-position:30% 45%;transform:scale(1);transition:none}
.hero-visual:after,.dark .hero-visual:after{background:linear-gradient(270deg,#171925eb 0%,#202230c9 36%,#20223033 72%,#2022300a 100%),linear-gradient(0deg,#171925b3,transparent 45%)}
.hero-copy{position:relative;inset:auto;width:min(62%,680px);min-height:38rem;padding:4.5rem clamp(2rem,5vw,5rem) 7.5rem 1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero-copy :is(h1,h2){font-size:clamp(2.75rem,4.8vw,4.8rem);font-weight:700;line-height:1.3!important;letter-spacing:0;color:#fff8f4;max-width:14ch;margin:1rem 0}
.hero-copy .home-eyebrow{color:#f1c8d7!important;margin-bottom:0!important}
.hero-caption{font-size:1.125rem;line-height:1.85;color:#f0e6eb;margin-bottom:1.75rem}
.hero-copy .agency-button{background:#f2d8e2;color:#522c3c;min-height:52px;font-size:1rem;padding:.75rem 1.5rem}
/* The reference reveals the complete copy as one block, never by child. */
.hero-copy>*,.hero-scene.is-active .hero-copy>*{opacity:1;transform:none;transition:none;transition-delay:0ms}
.hero-copy .agency-button{transition:background .2s ease,transform .2s ease}
.hero-controls{right:clamp(2rem,5vw,5rem);left:clamp(2rem,5vw,5rem);bottom:1.5rem;gap:1rem}
.hero-index button{color:#d9d1da;font-size:.875rem}
.hero-index button[aria-pressed=true]{color:#fff}
.hero-progress{height:3px;border-radius:3px;background:#ffffff4d}
.hero-progress>span{background:#f1c8d7}
.hero-playback .agency-icon-button{color:#fff;border-color:#ffffff66;background:#25263680}
body[data-agency-shell] .home-hero :focus-visible{outline-color:#fff}

/* Motion values from the active Moonlight components. */
:is(.home-service,.campaign-card,.campaign-teaser,.film-cover,main>section.glass-strong){transition:transform 400ms var(--ease-premium),box-shadow 400ms var(--ease-premium),border-color 400ms var(--ease-premium)}
:is(.agency-button,.agency-header-cta,.portfolio-view,.occasion-cta){transition:transform .2s ease,background .2s ease}
.campaign-reveal{animation:none!important}
.hero-progress>span{transition:transform 300ms ease}
.hero-index button[aria-pressed=true] .hero-progress>span{transform:scaleX(1)}
.whb-title-wipe{background:linear-gradient(120deg,transparent,var(--ui-hover),transparent) left 88%/100% 100% no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.agency-header{width:calc(100% - 48px);max-width:1152px;margin:16px auto;top:8px;height:auto;min-height:70px;padding:12px 20px;border:1px solid var(--ui-border);border-radius:28px;background:var(--ui-surface);box-shadow:var(--ui-shadow);transition:min-height 500ms var(--ease-premium),margin 500ms var(--ease-premium),max-width 500ms var(--ease-premium),width 500ms var(--ease-premium),padding 500ms var(--ease-premium),border-radius 500ms var(--ease-premium),background 500ms var(--ease-premium)}
.agency-header.is-scrolled{max-width:1024px;min-height:62px;margin-block:8px;padding:8px 16px;border-radius:100px}
.agency-header .agency-brand img{width:40px;height:40px;transition:width 500ms var(--ease-premium),height 500ms var(--ease-premium)}
.agency-header .agency-brand strong{font-size:1rem;transition:font-size 500ms var(--ease-premium)}
.agency-header .agency-brand small{font-size:.65rem}
.agency-header.is-scrolled .agency-brand img{width:32px;height:32px}
.agency-header.is-scrolled .agency-brand strong{font-size:.875rem}
.agency-desktop-nav{gap:4px;position:relative;isolation:isolate}
.agency-desktop-nav a{padding:10px 12px;border-radius:100px}
.agency-desktop-nav a:after{display:none}
.agency-desktop-nav a[aria-current]{background:var(--ui-hover)}
.agency-desktop-nav.has-motion-pill a[aria-current]{background:transparent}
.agency-nav-pill{position:absolute;z-index:-1;pointer-events:none;border-radius:100px;background:var(--ui-hover);transform-origin:left center}
.agency-menu{inset:var(--menu-top,100px) auto auto 50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));height:auto;max-height:calc(100dvh - var(--menu-top,100px) - 16px);margin:0;padding:20px;border:1px solid var(--ui-border);border-radius:24px}
.agency-menu[open]{animation:none}
.agency-menu-top{font-size:1rem;padding-bottom:12px}
.agency-menu nav{margin:12px 0;gap:2px}
.agency-menu nav a{font-size:1rem;padding:10px 12px;min-height:44px}
.agency-menu-secondary{padding:10px 0}
.agency-theme{position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;transition:background .2s}
.agency-theme svg{position:relative;z-index:1}
.agency-theme::before{content:'';position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from 0deg,transparent,var(--ui-accent),transparent);opacity:0;pointer-events:none}
.dark .agency-theme::before{opacity:.2;animation:whb-theme-halo 6s linear infinite}
@keyframes whb-theme-halo{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){
  :is(.home-service,.campaign-card,.film-cover,main>section.glass-strong):hover{transform:translateY(-4px);box-shadow:0 22px 50px #25263814;border-color:var(--ui-accent)}
  .dark :is(.home-service,.campaign-card,.film-cover,main>section.glass-strong):hover{box-shadow:0 22px 50px #0004}
  :is(.agency-button,.agency-header-cta,.portfolio-view,.occasion-cta):hover{transform:translateY(-2px)}
  .home-work .campaign-teaser-art img,.home-work .campaign-teaser:hover img{transform:none}
}
:is(.agency-button,.agency-header-cta,.portfolio-view,.occasion-cta):active{transform:scale(.97)}
@media(min-width:1000px) and (max-width:1179px){.agency-header-cta{display:none!important}.agency-desktop-nav{gap:0}.agency-brand strong{font-size:1.375rem}}
@media(max-width:699px){
  .home-hero{min-height:42rem;border-radius:26px}
  .hero-visual{inset:0;height:auto}
  .hero-visual img{object-position:35% 28%}
  .hero-visual:after,.dark .hero-visual:after{background:linear-gradient(0deg,#171925fa 0%,#202230e6 35%,#20223066 68%,#20223014 100%)}
  .hero-copy{width:100%;min-height:42rem;justify-content:flex-end;padding:16rem 1.5rem 7rem}
  .hero-copy :is(h1,h2){font-size:clamp(2.25rem,8.6vw,3rem);max-width:16ch;margin:.75rem 0;line-height:1.35!important}
  .hero-copy .home-eyebrow{font-size:.875rem!important}
  .hero-caption{font-size:1rem;line-height:1.8;margin-bottom:1.25rem}
  .hero-copy .agency-button{font-size:.9375rem;min-height:50px}
  .hero-controls{right:1.5rem;left:1.5rem;bottom:1.25rem}
  .home-section h2{font-size:2rem}
  .home-service h3{font-size:1.0625rem}
  .home-service p{font-size:.9375rem;line-height:1.85}
  .home-services-grid{gap:0}
  .home-section-heading{flex-wrap:wrap;align-items:center}
  .home-section-heading .home-text-link{margin-top:0;white-space:normal}
  .agency-brand strong{font-size:1.375rem}
  .agency-brand small{font-size:.75rem}
  .agency-header{width:calc(100% - 24px);margin:12px auto;gap:8px;padding:12px}.agency-header.is-scrolled{padding:8px 12px}
  .agency-tools{gap:6px}
  .agency-bottom-nav a{min-width:0}
}
@media(max-width:359px){
  .agency-brand{gap:7px}.agency-brand img{width:34px;height:34px}.agency-brand strong{font-size:1.25rem}.agency-brand small{font-size:.6875rem}
  .hero-copy{padding-inline:1.25rem}.hero-controls{right:1.25rem;left:1.25rem}
  .home-services-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .hero-scene,.hero-visual,.hero-copy,.hero-copy>*,.hero-visual img{transition:none!important;animation:none!important;transform:none!important}
  .campaign-reveal,.agency-theme::before{animation:none!important}
  :is(.agency-button,.agency-header-cta)::after{display:none}
  :is(.home-service,.campaign-card,.film-cover,main>section.glass-strong,.agency-button,.agency-header-cta,.agency-icon-button,.portfolio-view,.occasion-cta,.home-service-icon,.agency-bottom-nav .agency-icon){transform:none!important;transition:none!important}
}