:root{--navy:#282b4a;--cream:#eae0c8;--lime:#c8f16d;--purple:#b5a7ef}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--navy);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3,.brand{font-family:'Space Grotesk','Arial Narrow',sans-serif;letter-spacing:-.055em}h1{font-size:clamp(4.2rem,9vw,10rem);line-height:.93;margin:35px 0}h2{font-size:clamp(3.4rem,7vw,7rem);line-height:1.02;margin:0 0 35px}h2 em,h1 em{font-family:Georgia,serif;font-weight:400}p{line-height:1.6}.section-pad{padding:88px clamp(22px,6vw,110px)}.site-header{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(22px,6vw,110px);border-bottom:1px solid #282b4a33;gap:20px}.brand{font-weight:700;font-size:34px;line-height:.8}.brand small{display:block;font:600 8px 'DM Sans',sans-serif;letter-spacing:.32em;text-align:right;margin-top:8px}.dot{color:#777fce}.nav{display:flex;gap:29px;font-weight:600;font-size:13px}.nav a:hover,.footer a:hover{text-decoration:underline}.header-cta,.pill{display:inline-flex;justify-content:center;align-items:center;gap:30px;background:var(--navy);color:var(--cream);border-radius:100px;padding:16px 24px;font-weight:700;font-size:14px}.header-cta{padding:12px 19px}.pill.light{background:var(--cream);color:var(--navy)}.menu-toggle{display:none}.hero{padding-top:42px;padding-bottom:32px}.hero-meta,.hero-bottom,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:11px;letter-spacing:.13em;font-weight:700}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:15px;min-height:580px}.hero-copy{max-width:475px;font-size:19px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.17em}.hero-actions{display:flex;align-items:center;gap:30px;margin:35px 0}.text-link,.inline-arrow{text-decoration:underline;text-underline-offset:6px;font-weight:700}.hero-art svg{width:100%;height:auto;display:block}.orbit-label{display:block;font-size:10px;letter-spacing:.18em;text-align:right}.outline-word{color:transparent;-webkit-text-stroke:2px var(--navy)}.status-dot{display:inline-block;background:#69a465;width:9px;height:9px;border-radius:50%;margin-right:9px}.hero-bottom{margin-top:20px;border-top:1px solid #282b4a44;padding-top:22px}.marquee{background:var(--lime);overflow:hidden;padding:21px 0}.marquee-track{white-space:nowrap;font-size:clamp(18px,3vw,36px);font-weight:700;letter-spacing:-.03em;animation:marquee 38s linear infinite}.marquee b{padding:0 24px}@keyframes marquee{to{transform:translateX(-50%)}}.section-heading{border-bottom:1px solid currentColor;padding-bottom:20px;margin-bottom:70px;opacity:.82}.about-grid,.services-intro,.work-title,.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px}.about-text{max-width:560px}.lead{font-size:clamp(23px,2.5vw,35px);line-height:1.3;font-weight:600}.statement{border-radius:18px;background:#d7ceb7;padding:40px;margin-top:75px;display:flex;justify-content:space-between;align-items:center;gap:35px}.statement p{font-size:clamp(20px,3vw,38px);margin:0}.statement>span{font-size:10px;letter-spacing:.15em}.dark-section{background:var(--navy);color:var(--cream)}.services-intro>p,.work-title>p,.process-grid>div>p{font-size:20px;max-width:380px;align-self:end}.service-item{border-top:1px solid #eae0c84a;padding:34px 0;display:grid;grid-template-columns:80px 1fr 50px;gap:22px;align-items:start}.service-item:last-child{border-bottom:1px solid #eae0c84a}.service-item h3{font-size:clamp(28px,4.4vw,57px);margin-bottom:10px}.service-item p{font-size:15px;opacity:.7;margin-bottom:0}.service-icon{font-size:35px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.work-visual{aspect-ratio:4/4.1;position:relative;overflow:hidden;padding:25px;display:flex;flex-direction:column;justify-content:space-between}.poster-film{background:#b5a7ef;color:var(--navy)}.poster-music{background:#c8f16d;color:var(--navy)}.poster-top,.poster-bottom{position:relative;z-index:2;font-size:10px;letter-spacing:.13em;font-weight:700}.work-visual strong{font-family:'Space Grotesk',sans-serif;letter-spacing:-.09em;line-height:.8;font-size:clamp(60px,9vw,140px);position:relative;z-index:2}.film-ring{position:absolute;top:20%;right:-20%;width:100%;aspect-ratio:1;border:50px solid #282b4a;border-radius:50%;opacity:.8}.film-play{position:absolute;top:36%;right:27%;font-size:65px;color:var(--cream)}.vinyl{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#282b4a 0 3px,#373b60 4px 7px);top:12%;right:-12%;display:grid;place-items:center;box-shadow:5px 15px 25px #0003}.vinyl-label{width:29%;height:29%;background:#b5a7ef;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:700}.work-details{display:flex;justify-content:space-between;align-items:center;padding:19px 0 30px;border-bottom:1px solid #282b4a55}.work-details h3{font-size:24px;margin:0 0 5px}.work-details p{margin:0;font-size:13px}.work-details>span{font-size:28px}.work-note{font-size:12px;opacity:.75}.work-cta{margin-top:20px}.process{background:#ded5be}.step{border-top:1px solid #282b4a77;padding:23px 0;display:grid;grid-template-columns:40px 1fr;gap:22px}.step h3{font-size:30px;margin:0 0 5px}.step p{margin:0}.contact{padding-bottom:115px}.contact-main{text-align:center;padding:25px 0 85px}.contact-main>p{font-size:12px;letter-spacing:.2em}.contact-main h2{font-size:clamp(65px,11vw,155px);margin:20px 0 45px}.contact-star{color:var(--lime);font-style:normal;padding-left:10px}.contact-email,.contact-phone{display:block;width:fit-content;margin:18px auto;border-bottom:1px solid currentColor;font-size:clamp(19px,3vw,42px);padding-bottom:6px;overflow-wrap:anywhere}.contact-phone{font-size:clamp(18px,2.5vw,32px)}.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:30px;border-top:1px solid #eae0c854}.contact-bottom>span{font-size:11px;letter-spacing:.14em}.footer{padding-top:54px;padding-bottom:40px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer-brand{font-family:'Space Grotesk',sans-serif;font-size:65px;font-weight:700;letter-spacing:-.08em}.footer-brand span{color:#7a83cf}.footer-bottom{border-top:1px solid #282b4a55;padding-top:25px;margin-top:65px;font-size:12px}.skip{position:absolute;top:-100px;left:12px;background:white;padding:12px}.skip:focus{top:5px;z-index:200}section{scroll-margin-top:30px}@media(max-width:760px){.site-header{flex-wrap:wrap}.menu-toggle{display:flex;flex-direction:column;gap:5px;background:transparent;border:0;padding:10px;order:3}.menu-toggle span{display:block;width:26px;height:2px;background:var(--navy)}.nav{display:none;width:100%;order:4;flex-direction:column;padding:20px 0;border-top:1px solid #282b4a33}.nav.open{display:flex}.header-cta{margin-left:auto}.hero-grid,.about-grid,.services-intro,.work-title,.process-grid,.work-grid{grid-template-columns:1fr}.hero-grid{gap:25px}.hero-art{max-width:560px;margin:auto}.hero-number{display:none}.section-pad{padding:65px 24px}.hero{padding-top:25px}.hero h1{font-size:clamp(65px,14vw,110px)}.statement{flex-direction:column;align-items:flex-start}.services-intro>p,.work-title>p{align-self:start}.service-item{grid-template-columns:35px 1fr 26px;gap:15px}.service-icon{font-size:22px}.work-visual strong{font-size:clamp(70px,18vw,140px)}.contact-main h2{font-size:clamp(59px,12vw,95px)}.contact-bottom{flex-direction:column;align-items:flex-start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track{animation:none}}

/* Contact shortcuts: always visible on mobile and desktop */
.quick-contact{position:fixed;right:20px;bottom:22px;z-index:100;display:flex;flex-direction:column;gap:10px}
.quick-contact-link{display:flex;align-items:center;justify-content:center;gap:9px;min-width:130px;padding:12px 14px;border-radius:999px;box-shadow:0 6px 24px #1518283d;font-size:13px;font-weight:700;transition:transform .2s,box-shadow .2s}
.quick-contact-link:hover,.quick-contact-link:focus-visible{transform:translateY(-3px);box-shadow:0 9px 27px #15182855}
.quick-contact-link svg{width:22px;height:22px;flex-shrink:0}
.quick-contact-mail{background:var(--cream);color:var(--navy);border:1px solid var(--navy)}
.quick-contact-whatsapp{background:#25d366;color:#11391c}
.contact-channels{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px}
.contact-channels a{border:1px solid #eae0c88c;border-radius:999px;padding:13px 21px;font-weight:700}
.contact-channels a:hover{background:var(--cream);color:var(--navy)}
@media(max-width:760px){.quick-contact{right:12px;bottom:14px;gap:9px}.quick-contact-link{min-width:0;width:52px;height:52px;padding:13px}.quick-contact-link span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}

/* Added verified project milestone */
.campaign-stat{display:inline-flex;align-items:center;gap:18px;padding:16px 22px;margin:0 0 32px;border:1px solid #282b4a70;border-radius:16px;color:var(--navy)}
.campaign-stat strong{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,6vw,72px);letter-spacing:-.065em;line-height:1}
.campaign-stat span{max-width:130px;font-size:12px;line-height:1.35;font-weight:700;letter-spacing:.14em}
:where(a,button):focus-visible{outline:3px solid #7e78bf;outline-offset:4px}

/* Hikeu Studio gradient refresh — warm editorial daylight into soft lavender. */
body {
  background-color: #eae0c8;
  background-image:
    radial-gradient(ellipse 85% 42% at 96% 13%, rgba(183,170,235,.47) 0%, transparent 76%),
    radial-gradient(ellipse 85% 38% at 0% 43%, rgba(245,208,183,.53) 0%, transparent 78%),
    radial-gradient(ellipse 76% 40% at 95% 76%, rgba(198,212,235,.56) 0%, transparent 76%),
    linear-gradient(155deg, #eae0c8 0%, #f5e8d5 27%, #e4dcda 51%, #eae0c8 73%, #dad8e8 100%);
  background-repeat: no-repeat;
  background-size: cover;
}
/* Let the page-wide gradient show through all light sections. */
.site-header,.hero,.about,.work,.footer { background: transparent; }
.statement {
  background: linear-gradient(125deg, rgba(255,250,235,.8), rgba(190,177,218,.53));
  border: 1px solid rgba(40,43,74,.13);
  box-shadow: 0 14px 35px rgba(40,43,74,.045);
}
.process {
  background: linear-gradient(125deg, #ded8df 0%, #e9dcca 49%, #cbc7e4 100%);
}
.dark-section {
  background: linear-gradient(130deg, #22253f 0%, #303553 49%, #36335d 100%);
  color: var(--cream);
}
.marquee { background: linear-gradient(95deg, #c8f16d 0%, #e2efa2 50%, #c4e6a7 100%); }
/* Maintain high contrast on buttons and outlines across all gradients. */
.quick-contact-mail { background: #f7efdf; }
@media (prefers-reduced-transparency: reduce) {
  body { background: #eae0c8; }
  .dark-section { background: #282b4a; }
}

/* Keep the animated number large; only the description uses compact text. */
.campaign-stat .campaign-count { max-width:none; font:inherit; letter-spacing:inherit; line-height:inherit; }


/* 2026 motion & vivid gradient refresh */
:root { --electric-violet:#7769d8; --rose:#ffb0be; --blue-glow:#91b4fc; }
body {
 background-color:#ebdec9;
 background-image:
   radial-gradient(ellipse 70% 48% at 92% 9%, rgba(122,105,233,.79), transparent 80%),
   radial-gradient(ellipse 82% 38% at 0% 22%, rgba(246,142,176,.64), transparent 73%),
   radial-gradient(ellipse 90% 55% at 100% 52%, rgba(103,155,246,.67), transparent 70%),
   radial-gradient(ellipse 75% 38% at 0% 81%, rgba(237,131,196,.59), transparent 72%),
   linear-gradient(145deg,#f0e0c1 0%,#e1b8e4 27%,#c4d2ff 54%,#f1c9c2 77%,#eae0c8 100%);
 background-size:cover;
}
.hero { background:linear-gradient(120deg,rgba(255,239,202,.37),rgba(174,169,249,.22)); }
.about { background:linear-gradient(135deg,rgba(251,199,209,.32),rgba(198,194,250,.31)); }
.work { background:linear-gradient(135deg,rgba(203,214,255,.42),rgba(252,204,216,.28)); }
.process { background:linear-gradient(130deg,#e4c2ea 0%,#c8d5fb 51%,#f4cebc 100%); }
.dark-section { background:linear-gradient(125deg,#1c1e3b 0%,#373271 52%,#3d4185 100%); }
.marquee { background:linear-gradient(90deg,#bef272,#b4b3ff 50%,#f0b3d1 100%); }
.statement { background:linear-gradient(115deg,rgba(255,245,206,.78),rgba(182,153,241,.55)); box-shadow:0 22px 65px #46356a20; }
.campaign-stat { background:linear-gradient(120deg,#f7dfef,#bebcf9);box-shadow:0 14px 34px #37327126;border:1px solid #48457e66; }
.hero-art { transform:translate3d(0,calc(var(--scroll-drift,0px) * -1),0);will-change:transform; }
.hero-art svg { filter:drop-shadow(0 25px 45px rgba(52,45,117,.18));animation:art-float 5s ease-in-out infinite; }
@keyframes art-float {0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-17px) rotate(1deg)}}
@media (prefers-reduced-motion:no-preference) {
  .js-motion [data-reveal] {opacity:0;transform:translate3d(0,54px,0);filter:blur(5px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.25,1),filter .7s ease;}
  .js-motion [data-reveal].is-visible {opacity:1;transform:translate3d(0,0,0);filter:blur(0);}
  .work-card .work-visual {transition:transform .65s cubic-bezier(.2,.75,.25,1),box-shadow .65s ease;}
  .work-card:hover .work-visual {transform:translateY(-9px) scale(1.018);box-shadow:0 32px 65px #1d224433;}
  .service-item {transition:padding-left .35s ease,background .35s ease;}
  .service-item:hover {padding-left:18px;background:rgba(255,255,255,.075);}
  .service-icon {transition:transform .4s ease;}
  .service-item:hover .service-icon {transform:rotate(45deg) translateX(5px);}
  .pill,.header-cta,.contact-channels a {transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;}
  .pill:hover,.header-cta:hover,.contact-channels a:hover {transform:translateY(-4px);box-shadow:0 12px 27px #1c1e3b40;}
  .campaign-stat.is-counted {animation:count-pop .42s cubic-bezier(.2,1.5,.3,1);}
  @keyframes count-pop {50%{transform:scale(1.065)}100%{transform:scale(1)}}
}
@media (prefers-reduced-motion:reduce) {
 .hero-art,.hero-art svg {transform:none!important;animation:none!important;filter:none}
 .js-motion [data-reveal] {opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}


/* October blue + butter-yellow identity; no pink or purple gradients. */
:root { --butter:#eae0c8; --sky:#a6d4ef; --azure:#5b9ed9; --ink:#282b4a; }
body { background-color:var(--butter); background-image:
 radial-gradient(ellipse 90% 37% at 88% 9%,rgba(68,137,211,.76),transparent 77%),
 radial-gradient(ellipse 90% 43% at 4% 32%,rgba(167,215,241,.91),transparent 76%),
 radial-gradient(ellipse 85% 38% at 99% 65%,rgba(86,161,221,.7),transparent 80%),
 radial-gradient(ellipse 85% 33% at 5% 94%,rgba(151,202,241,.73),transparent 76%),
 linear-gradient(143deg,#eae0c8 0%,#98c8ea 31%,#eae0c8 55%,#76b5e5 80%,#eae0c8 100%); }
.hero {background:linear-gradient(120deg,rgba(234,224,200,.49),rgba(104,173,227,.28));}
.about {background:linear-gradient(137deg,rgba(234,224,200,.45),rgba(117,180,228,.35));}
.work {background:linear-gradient(125deg,rgba(144,198,238,.72),rgba(234,224,200,.82) 48%,rgba(85,158,218,.42));}
.process {background:linear-gradient(135deg,#eae0c8 0%,#a1cde9 48%,#619ed6 100%);}
.dark-section {background:linear-gradient(130deg,#202945 0%,#282b4a 42%,#28527d 100%);}
.marquee {background:linear-gradient(95deg,#eae0c8,#a6d4ef 54%,#eae0c8);}
.statement {background:linear-gradient(115deg,rgba(251,239,207,.85),rgba(103,170,223,.58));box-shadow:0 20px 50px rgba(40,68,102,.16);}
.campaign-stat {background:linear-gradient(120deg,#f4e5c2,#a3d1ed);border:1px solid rgba(40,43,74,.35);box-shadow:0 14px 34px #274c802f;}
:where(a,button):focus-visible {outline-color:#226ba7;}
/* More expressive motion for the fourth full-screen area (Selected Work)
   and the following How We Work process area. */
@media (prefers-reduced-motion:no-preference) {
  .work {overflow:hidden;}
  .work .work-card {transition:transform .65s cubic-bezier(.2,.75,.2,1);}
  .work .work-card:nth-child(1) {transform:translate3d(0,calc(var(--work-parallax,0px) * -.27),0) rotate(-.6deg);}
  .work .work-card:nth-child(2) {transform:translate3d(0,calc(var(--work-parallax,0px) * .27),0) rotate(.6deg);}
  .work .work-card:hover {transform:translateY(-12px) rotate(0deg) scale(1.012);}
  .work .work-visual::after {content:'';position:absolute;inset:-75%;pointer-events:none;z-index:3;background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.25) 50%,transparent 57%);transform:translateX(-72%) rotate(9deg);transition:transform 1.15s ease;}
  .work .work-card:hover .work-visual::after {transform:translateX(72%) rotate(9deg);}
  .work .vinyl {animation:hikeu-vinyl-spin 16s linear infinite;}
  @keyframes hikeu-vinyl-spin {to {transform:rotate(360deg)}}
  .work .film-ring {animation:hikeu-ring-pulse 5s ease-in-out infinite;}
  @keyframes hikeu-ring-pulse {50% {transform:scale(1.07);opacity:.55}}
  .process .step {transition:transform .45s ease,background-color .45s ease,padding .45s ease;}
  .process .step:hover {transform:translateX(10px);background:rgba(255,255,255,.17);padding-left:12px;}
  .process .step:nth-child(2) {transition-delay:.07s;}
  .process .step:nth-child(3) {transition-delay:.14s;}
  .process .step:nth-child(4) {transition-delay:.21s;}
}
@media(max-width:760px){.work .work-card {transform:none!important;}.work .vinyl {animation-duration:22s;}}
@media(prefers-reduced-motion:reduce){.work .vinyl,.work .film-ring{animation:none!important;}}


/* Final polish update: smoother blue merge + click-only shine + static 8+ */
.process,
.contact { position: relative; overflow: hidden; }
.process {
  background: linear-gradient(180deg,
    rgba(234,224,200,.88) 0%,
    rgba(184,220,243,.92) 22%,
    rgba(155,205,238,.96) 58%,
    rgba(141,193,229,1) 100%);
}
.process::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(141,193,229,0) 0%,
    rgba(111,170,216,.28) 45%,
    rgba(40,43,74,.14) 100%);
}
.contact.dark-section {
  background: linear-gradient(180deg,
    rgba(141,193,229,.94) 0%,
    rgba(107,164,211,.96) 10%,
    rgba(66,94,136,.98) 24%,
    #2f3b61 36%,
    #282b4a 54%,
    #282b4a 100%);
}
.contact.section-pad { padding-top: 96px; }
.contact-main,
.contact-bottom,
.contact .section-heading { position: relative; z-index: 1; }

.campaign-stat .campaign-count { min-width: .85em; display: inline-block; }
.campaign-stat.is-counted { animation: none !important; }

@media (prefers-reduced-motion:no-preference) {
  .work .work-card { cursor: pointer; }
  .work .work-card .work-visual::after {
    content: '';
    position: absolute;
    inset: -80%;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    background: linear-gradient(110deg,
      transparent 42%,
      rgba(255,255,255,.30) 49%,
      rgba(255,255,255,.58) 50%,
      rgba(255,255,255,.30) 51%,
      transparent 58%);
    transform: translateX(-140%) rotate(10deg);
  }
  .work .work-card:hover .work-visual::after { opacity: 0; transform: translateX(-140%) rotate(10deg); }
  .work .work-card.shine-on .work-visual::after {
    opacity: 1;
    animation: hikeu-work-shine 1s cubic-bezier(.2,.72,.25,1) forwards;
  }
  @keyframes hikeu-work-shine {
    0%   { opacity: 0; transform: translateX(-140%) rotate(10deg); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(140%) rotate(10deg); }
  }
}
@media (max-width:760px) {
  .contact.section-pad { padding-top: 76px; }
  .contact.dark-section {
    background: linear-gradient(180deg,
      rgba(141,193,229,.92) 0%,
      rgba(94,149,198,.96) 10%,
      #384f78 28%,
      #282b4a 48%,
      #282b4a 100%);
  }
}


/* Aesthetic soft-gradient refinement + richer but elegant motion */
:root {
  --soft-butter: #ede4d1;
  --soft-blue: #d8e9f4;
  --soft-blue-2: #bdd9ec;
  --soft-blue-3: #8fb8da;
  --deep-navy-2: #233558;
}

html, body { background-color: var(--soft-butter); }
body {
  background-image:
    radial-gradient(ellipse 68% 34% at 14% 10%, rgba(173, 210, 234, 0.28), transparent 72%),
    radial-gradient(ellipse 56% 28% at 86% 20%, rgba(126, 176, 214, 0.18), transparent 72%),
    radial-gradient(ellipse 62% 30% at 50% 68%, rgba(176, 213, 238, 0.20), transparent 74%),
    radial-gradient(ellipse 55% 24% at 6% 92%, rgba(193, 223, 242, 0.16), transparent 72%),
    linear-gradient(180deg, #f0e7d6 0%, #e6f0f6 24%, #ecf3f7 45%, #e5f0f7 58%, #e9e1cf 76%, #efe6d6 100%);
  background-attachment: fixed;
}

.hero { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(197,220,236,0.10)); }
.about { background: linear-gradient(180deg, rgba(214,232,244,0.16), rgba(214,232,244,0.08)); }
.statement {
  background: linear-gradient(105deg, rgba(245,238,220,0.92), rgba(212,230,242,0.88));
  border: 1px solid rgba(40,43,74,.08);
  box-shadow: 0 14px 40px rgba(40,43,74,.08);
  backdrop-filter: blur(5px);
}

.dark-section {
  position: relative;
  background: linear-gradient(180deg, #31486f 0%, #2c4165 8%, #26395b 16%, #223252 28%, #202f4d 44%, #212d49 100%);
}
.services.dark-section::before,
.contact.dark-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(209,230,243,0.85) 0%, rgba(171,204,229,0.40) 36%, rgba(49,72,111,0) 100%);
}
.services > *, .contact > * { position: relative; z-index: 1; }

.work { background: linear-gradient(180deg, rgba(231,242,248,0.18), rgba(227,239,247,0.12)); }
.process {
  position: relative;
  background: linear-gradient(180deg, #eef4f7 0%, #d8e9f4 32%, #c1dced 62%, #a4c6df 100%);
}
.process::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(164,198,223,0) 0%, rgba(108,147,182,0.14) 48%, rgba(41,52,83,0.20) 100%);
}
.contact.dark-section {
  background: linear-gradient(180deg, #8eb7d7 0%, #5d7ea8 12%, #31496f 26%, #253655 45%, #212f4c 100%);
}
.marquee { background: linear-gradient(90deg, #eef1d7 0%, #deedf6 50%, #edf0d8 100%); }
.campaign-stat {
  background: linear-gradient(120deg, rgba(248,242,222,0.96), rgba(201,225,241,0.94));
  border: 1px solid rgba(40,43,74,.18);
  box-shadow: 0 12px 34px rgba(40,43,74,.07);
}
.footer { background: transparent; }

@media (prefers-reduced-motion:no-preference) {
  .site-header { backdrop-filter: blur(10px); }
  .statement,
  .campaign-stat,
  .work-card .work-visual,
  .quick-contact-link {
    transition: transform .45s ease, box-shadow .45s ease, border-color .35s ease, background-color .35s ease;
  }
  .statement:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 46px rgba(40,43,74,.10);
  }
  .campaign-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(40,43,74,.10);
  }
  .service-item {
    transition: transform .45s ease, padding-left .35s ease, background-color .35s ease, border-color .35s ease;
  }
  .service-item:hover {
    transform: translateX(6px);
    border-color: rgba(234,224,200,.55);
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  }
  .service-item h3,
  .work-details h3,
  .inline-arrow,
  .text-link,
  .nav a,
  .footer a {
    transition: letter-spacing .28s ease, opacity .28s ease, transform .28s ease;
  }
  .service-item:hover h3,
  .inline-arrow:hover,
  .text-link:hover,
  .nav a:hover,
  .footer a:hover,
  .work-card:hover .work-details h3 {
    letter-spacing: .01em;
  }
  .work .vinyl { animation-duration: 12s; }
  .work .film-ring { animation-duration: 4.2s; }
  .contact-main h2 {
    animation: contact-breathe 5.6s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes contact-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .quick-contact-link:hover { transform: translateY(-5px) scale(1.03); }
  .work-note { opacity: .7; transition: opacity .3s ease; }
  .work:hover .work-note { opacity: .95; }
}

@media (max-width:760px) {
  body { background-attachment: scroll; }
  .services.dark-section::before,
  .contact.dark-section::before { height: 90px; }
  .contact.dark-section {
    background: linear-gradient(180deg, #9dc0dc 0%, #5a79a1 12%, #31496f 28%, #263757 50%, #212f4c 100%);
  }
}


/* Consistent mild gradients across all sections */
:root {
  --page-butter: #efe5d4;
  --page-butter-2: #eadfcf;
  --page-blue-soft: #e6f0f6;
  --page-blue-mid: #d6e8f3;
  --page-blue-deep: #abcbe0;
  --navy-grad-1: #31486b;
  --navy-grad-2: #293d5f;
  --navy-grad-3: #22334f;
}

body {
  background-color: var(--page-butter);
  background-image:
    radial-gradient(ellipse 54% 26% at 16% 9%, rgba(180, 214, 236, 0.16), transparent 72%),
    radial-gradient(ellipse 46% 22% at 84% 21%, rgba(149, 193, 223, 0.12), transparent 74%),
    radial-gradient(ellipse 54% 24% at 50% 72%, rgba(191, 220, 239, 0.12), transparent 74%),
    linear-gradient(180deg, #f0e7d8 0%, #edf3f6 26%, #e7f0f5 50%, #ebf2f6 68%, #efe6d8 100%);
  background-attachment: fixed;
}

.site-header {
  background: linear-gradient(180deg, rgba(239,229,212,0.82), rgba(235,243,247,0.78));
}

.hero {
  background:
    radial-gradient(circle at 85% 22%, rgba(174, 207, 230, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(244,238,226,0.72), rgba(231,241,247,0.74));
}

.about {
  background:
    radial-gradient(circle at 15% 18%, rgba(171, 207, 231, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(232,241,247,0.82), rgba(239,229,211,0.66));
}

.statement {
  background: linear-gradient(115deg, rgba(246,240,226,0.94), rgba(222,236,245,0.92));
  border: 1px solid rgba(40,43,74,.08);
  box-shadow: 0 14px 40px rgba(40,43,74,.08);
}

.marquee {
  background: linear-gradient(90deg, rgba(242,243,220,0.96) 0%, rgba(225,238,246,0.96) 50%, rgba(241,241,220,0.96) 100%);
}

.dark-section {
  position: relative;
  background:
    radial-gradient(circle at 12% 14%, rgba(108, 148, 182, 0.18), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(89, 132, 173, 0.16), transparent 32%),
    linear-gradient(135deg, var(--navy-grad-1) 0%, var(--navy-grad-2) 52%, var(--navy-grad-3) 100%);
  color: var(--cream);
}

.services.dark-section,
.contact.dark-section {
  background:
    radial-gradient(circle at 14% 10%, rgba(120, 164, 198, 0.18), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(88, 130, 170, 0.14), transparent 32%),
    linear-gradient(135deg, #344d72 0%, #2d4568 48%, #253a59 100%);
}

.services.dark-section::before,
.contact.dark-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
}

.services > *, .contact > *, .footer > * {
  position: relative;
  z-index: 1;
}

.work {
  background:
    radial-gradient(circle at 88% 18%, rgba(171, 206, 230, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(238,244,247,0.78), rgba(234,241,246,0.68));
}

.process {
  position: relative;
  background:
    radial-gradient(circle at 14% 14%, rgba(175, 210, 233, 0.10), transparent 30%),
    linear-gradient(180deg, #eef4f7 0%, #e2eef5 36%, #d4e6f2 72%, #c6ddeb 100%);
}

.process::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(198,221,235,0) 0%, rgba(170,198,220,0.08) 48%, rgba(92,127,160,0.12) 100%);
}

.contact.dark-section {
  background:
    radial-gradient(circle at 82% 18%, rgba(108, 156, 194, 0.18), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(81, 124, 165, 0.12), transparent 30%),
    linear-gradient(180deg, #365075 0%, #30496d 34%, #293f61 70%, #243754 100%);
}

.footer {
  background:
    radial-gradient(circle at 14% 24%, rgba(242, 232, 208, 0.55), transparent 32%),
    radial-gradient(circle at 84% 14%, rgba(210, 229, 241, 0.36), transparent 28%),
    linear-gradient(180deg, rgba(235,242,247,0.94) 0%, rgba(237,230,214,0.96) 100%);
}

.footer-bottom {
  border-top: 1px solid rgba(40,43,74,.22);
}

.campaign-stat {
  background: linear-gradient(120deg, rgba(248,242,222,0.96), rgba(208,228,242,0.94));
  border: 1px solid rgba(40,43,74,.16);
  box-shadow: 0 12px 34px rgba(40,43,74,.07);
}

@media (max-width:760px) {
  body { background-attachment: scroll; }
  .site-header {
    background: linear-gradient(180deg, rgba(239,229,212,0.92), rgba(235,243,247,0.90));
  }
  .services.dark-section,
  .contact.dark-section {
    background:
      radial-gradient(circle at 18% 10%, rgba(120, 164, 198, 0.14), transparent 24%),
      radial-gradient(circle at 82% 84%, rgba(88, 130, 170, 0.10), transparent 28%),
      linear-gradient(135deg, #344d72 0%, #2d4568 48%, #253a59 100%);
  }
  .footer {
    background: linear-gradient(180deg, rgba(233,240,245,0.96), rgba(239,230,214,0.98));
  }
}


/* Blue gradient color swap for Services and Contact sections */
.services.dark-section,
.contact.dark-section {
  color: var(--navy);
  background:
    radial-gradient(circle at 14% 12%, rgba(234, 245, 252, 0.32), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(151, 196, 226, 0.18), transparent 34%),
    linear-gradient(135deg, #dfeef7 0%, #c8dfef 52%, #b5d1e6 100%);
}

.services.dark-section::before,
.contact.dark-section::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
}

.services .section-heading,
.contact .section-heading,
.services .small-arrow,
.contact .small-arrow,
.services .eyebrow,
.contact .eyebrow,
.services h2,
.contact h2,
.services p,
.contact p,
.services .service-item,
.contact .contact-bottom,
.contact .contact-main,
.contact .contact-bottom > span,
.contact .contact-channels a,
.contact .pill.light,
.contact .pill,
.contact .contact-star {
  color: var(--navy);
}

.services .section-heading,
.contact .section-heading,
.services .service-item,
.contact .contact-bottom,
.contact .contact-channels a {
  border-color: rgba(40,43,74,.22);
}

.services .service-item:hover {
  background: linear-gradient(90deg, rgba(40,43,74,.04), rgba(40,43,74,.01));
  border-color: rgba(40,43,74,.28);
}

.contact .contact-channels a:hover {
  background: var(--navy);
  color: var(--cream);
}

.contact .pill.light,
.contact .pill {
  background: var(--navy);
  color: var(--cream);
}

.contact .pill.light:hover,
.contact .pill:hover {
  background: #1f2340;
}

.contact .contact-star {
  color: #a6cf55;
}


/* FINAL TWO-TONE IDENTITY: flat navy and butter, no gradients */
:root{--navy:#282b4a;--cream:#eae0c8;--lime:#eae0c8;--purple:#282b4a;--butter:#eae0c8;--ink:#282b4a}
html,body{background:#eae0c8!important;background-image:none!important}
.site-header,.hero,.about,.work,.process,.footer,.statement,.marquee,.campaign-stat{
 background:#eae0c8!important;background-image:none!important;color:#282b4a;
}
.services.dark-section{background:#282b4a!important;background-image:none!important;color:#eae0c8!important}
.contact.dark-section{background:#282b4a!important;background-image:none!important;color:#eae0c8!important}
.services.dark-section::before,.contact.dark-section::before,.process::after{display:none!important}
.services .section-heading,.services .eyebrow,.services h2,.services p,.services .service-item,.services .small-arrow,
.contact .section-heading,.contact .eyebrow,.contact h2,.contact p,.contact .contact-main,.contact .contact-bottom,.contact .small-arrow,.contact .contact-bottom>span,.contact .contact-star {color:#eae0c8!important}
.services .section-heading,.services .service-item,.contact .section-heading,.contact .contact-bottom{border-color:#eae0c859!important}
.services .service-item:hover{background:#eae0c810!important}
.contact .contact-channels a{color:#eae0c8!important;border-color:#eae0c870!important;background:transparent!important}
.contact .contact-channels a:hover{background:#eae0c8!important;color:#282b4a!important}
.contact .pill,.contact .pill.light{background:#eae0c8!important;color:#282b4a!important}
.contact .pill:hover{background:#eae0c8!important;color:#282b4a!important}
.statement,.campaign-stat{border:1px solid #282b4a35;box-shadow:none}
.poster-film{background:#eae0c8!important;color:#282b4a!important;border:2px solid #282b4a}
.poster-music{background:#282b4a!important;color:#eae0c8!important;border:2px solid #282b4a}
.poster-music .vinyl{background:#eae0c8!important;box-shadow:8px 15px 22px #0003;border:14px double #282b4a}
.poster-music .vinyl-label{background:#282b4a!important;color:#eae0c8!important;border:2px solid #eae0c8}
.poster-film .film-ring{border-color:#282b4a!important}
.poster-film .film-play{color:#282b4a!important}
.dot,.footer-brand span{color:#282b4a!important}
.quick-contact-mail{background:#eae0c8!important;color:#282b4a!important;border:1px solid #282b4a}
.quick-contact-whatsapp{background:#282b4a!important;color:#eae0c8!important;border:1px solid #eae0c8}
.status-dot{background:#282b4a!important}
:where(a,button):focus-visible{outline-color:#282b4a}
/* all accents including decorative icons conform to the two-color design */
.contact .contact-star{color:#eae0c8!important}

/* Stronger movement: entry, stagger, cards, CTA, anchored scroll marker */
@media(prefers-reduced-motion:no-preference){
 .hero-content .eyebrow{animation:hero-rise .8s ease both}
 .hero-content h1{animation:hero-rise .95s .1s cubic-bezier(.15,.8,.2,1) both}
 .hero-copy{animation:hero-rise .9s .22s ease both}
 .hero-actions{animation:hero-rise .9s .32s ease both}
 @keyframes hero-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
 .js-motion [data-reveal]{transition-duration:1s;transition-timing-function:cubic-bezier(.16,.8,.18,1)}
 .service-item:nth-child(2),.step:nth-child(2){transition-delay:.08s}
 .service-item:nth-child(3),.step:nth-child(3){transition-delay:.14s}
 .service-item:nth-child(4),.step:nth-child(4){transition-delay:.20s}
 .service-item:hover{transform:translateX(12px)!important}
 .service-icon{display:inline-block;transition:transform .45s cubic-bezier(.2,.9,.2,1)}
 .service-item:hover .service-icon{transform:rotate(45deg) translate(8px,-4px)}
 .work-card{transform-origin:center;transition:transform .6s cubic-bezier(.16,.8,.22,1)!important}
 .work-card:hover{transform:translateY(-14px) scale(1.012)!important}
 .work-details>span{display:inline-block;transition:transform .35s ease}
 .work-card:hover .work-details>span{transform:translate(5px,-5px) rotate(14deg)}
 .statement svg{animation:studio-star-turn 24s linear infinite;transform-origin:center}
 @keyframes studio-star-turn{to{transform:rotate(360deg)}}
 .contact-star{display:inline-block;animation:studio-star-turn 20s linear infinite;transform-origin:center}
 .hero-bottom .down-icon{display:inline-block;animation:bob-down 2.2s ease-in-out infinite}
 @keyframes bob-down{50%{transform:translateY(9px)}}
 .pill,.header-cta,.contact-channels a,.quick-contact-link{transition:transform .3s ease,box-shadow .3s ease!important}
 .pill:hover,.header-cta:hover,.contact-channels a:hover{transform:translateY(-5px);box-shadow:0 9px 0 #282b4a26}
 .contact .pill:hover{box-shadow:0 8px 0 #eae0c82b}
 .work .work-card .work-visual::after{background:#eae0c85c!important;opacity:0;inset:0!important;transform:translateX(-105%) skewX(-24deg)!important;clip-path:polygon(0 0,30% 0,100% 100%,70% 100%)}
 .work .work-card:hover .work-visual::after{opacity:0!important;animation:none!important}
 .work .work-card.shine-on .work-visual::after{animation:two-tone-shine .75s ease-out forwards!important}
 @keyframes two-tone-shine{0%{opacity:0;transform:translateX(-105%) skewX(-24deg)}18%{opacity:.28}100%{opacity:0;transform:translateX(130%) skewX(-24deg)}}
}
@media(prefers-reduced-motion:reduce){.hero-content *,.statement svg,.contact-star{animation:none!important}}


/* Restored creative palette: solid surfaces, zero background gradients. Animation preserved. */
:root { --lime:#c8f16d; --purple:#b5a7ef; --navy:#282b4a; --cream:#eae0c8; }
body,html { background:#eae0c8!important; background-image:none!important; }
.site-header,.hero { background:#eae0c8!important; background-image:none!important; color:#282b4a!important; }
.about { background:#ecf0e9!important; background-image:none!important; color:#282b4a!important; }
.work { background:#eae0c8!important; background-image:none!important; color:#282b4a!important; }
.process { background:#d9e9f2!important; background-image:none!important; color:#282b4a!important; }
.footer { background:#eae0c8!important; background-image:none!important; color:#282b4a!important; }
.marquee { background:#c8f16d!important; background-image:none!important; color:#282b4a!important; }
.statement { background:#dce5d6!important; background-image:none!important; color:#282b4a!important; border:1px solid #282b4a18;box-shadow:0 14px 36px #282b4a16; }
.campaign-stat { background:#d3e5f1!important; background-image:none!important; color:#282b4a!important; border:1px solid #282b4a38;box-shadow:0 12px 34px #282b4a15; }
.services.dark-section { background:#282b4a!important; background-image:none!important; color:#eae0c8!important; }
.contact.dark-section { background:#282b4a!important; background-image:none!important; color:#eae0c8!important; }
.services.dark-section::before,.contact.dark-section::before,.process::after { display:none!important; }
.poster-film { background:#b5a7ef!important; background-image:none!important; color:#282b4a!important; border:0!important; }
.poster-music { background:#c8f16d!important; background-image:none!important; color:#282b4a!important; border:0!important; }
.poster-music .vinyl { background:repeating-radial-gradient(circle,#282b4a 0 3px,#373b60 4px 7px)!important; box-shadow:5px 15px 25px #0003; border:0!important; }
.poster-music .vinyl-label { background:#b5a7ef!important; color:#282b4a!important; border:0!important; }
.poster-film .film-ring { border-color:#282b4a!important; }
.poster-film .film-play { color:#eae0c8!important; }
.dot,.footer-brand span { color:#777fce!important; }
.quick-contact-mail { background:#eae0c8!important; color:#282b4a!important; border:1px solid #282b4a!important; }
.quick-contact-whatsapp { background:#25d366!important; color:#11391c!important; border:0!important; }
.status-dot { background:#69a465!important; }
.contact .contact-star { color:#c8f16d!important; }
.contact .pill.light,.contact .pill { background:#eae0c8!important; color:#282b4a!important; }
.contact .pill:hover { background:#c8f16d!important; color:#282b4a!important; }
/* Keep film/music accents and single-card click shine; no ambient color-shifting effects. */
@media(prefers-reduced-motion:no-preference) {
 .work .work-card .work-visual::after { background:#ffffff50!important; }
 .work .work-card.shine-on .work-visual::after { animation:two-tone-shine .75s ease-out forwards!important; }
}


/* Final correction: no light-blue surfaces in sections 2 and 4. */
.about, .process {
  background: #eae0c8 !important;
  background-image: none !important;
  color: #282b4a !important;
}
.about::before, .about::after, .process::before, .process::after {
  background: none !important;
}
/* Restore decorative identity in homepage wheel, keeping motion unchanged. */