/* Shared contrast, type motion and section rhythm. Loaded after page styles. */
:root { --paper: #f2f2f4; --paper-ink: #1d1d1f; --paper-muted: #50505d; --section-lime: #c6ff00; }
.d1-word { display: inline-block; white-space: nowrap; }
.d1-letter { display: inline-block; transform-origin: 50% 85%; }
[data-letter-headings] :is(h1,h2,h3) :is(.d1-word,.d1-letter) { color: inherit; font: inherit; letter-spacing: inherit; }
[data-letter-headings] .hero h1 .ln { overflow: visible; }
[data-letter-headings] .hero h1 .ln > span { opacity: 1 !important; transform: none !important; animation: none !important; }
[data-letter-headings] .hero h1 .sweep-word { background: none !important; color: var(--word-ink, currentColor) !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
[data-letter-headings] .hero h1 .grad { background: none; color: #c6ff00; -webkit-text-fill-color: currentColor; }
[data-letter-headings] .hero-underline:after { animation: none; transform: scaleX(1); opacity: .65; }
.studio-home #problem, .studio-home #work, .studio-home #faq {
  background: var(--paper); color: var(--paper-ink); color-scheme: light;
  padding-block: clamp(72px, 8vw, 120px) !important;
}
.studio-home :is(#problem,#work,#faq) :is(h2,h3) { color: var(--paper-ink); }
.studio-home :is(#problem,#work) :is(.lede,.section-label,.work-intro > p) { color: var(--paper-muted); }
.studio-home #problem .fix-list li {
  color: var(--paper-ink); background: linear-gradient(120deg,#fff9,#fff4), #e5eefa;
  border-color: #1b354a22; box-shadow: inset 0 1px #fff, 0 10px 25px #24324608;
}
.studio-home #problem .fix-list li:nth-child(2) { background-color: #e7efd5; }
.studio-home #problem .fix-list li:nth-child(3) { background-color: #f5e1ee; }
.studio-home #problem .fix-list li:nth-child(4) { background-color: #e9e3f5; }
.studio-home #problem .fix-list .pain { color: #52595b; }
.studio-home #problem .fix-list .gain { color: #171b1e; }
.studio-home #problem .fix-list .gain svg { color: #172024; box-shadow: 0 0 0 1px #18302325; }
.studio-home #work .work-intro { margin-bottom: 38px; }
.studio-home #work .work-card { box-shadow: 0 22px 44px #1925301c; border-color: #27364130; }
.studio-home #work .work-card-foot { color: #fff; background-color: #101621; }
.studio-home #approach { background: var(--section-lime); color: #151b06; padding-block: clamp(72px,8vw,120px); }
.studio-home #approach :is(h2,h3,p,.section-label) { color: #1b2509; }
.studio-home #approach .approach-intro p { color: #37451b; }
.studio-home #approach .approach-item { background: #faffec85; border-color: #27380630; box-shadow: inset 0 1px #fff9,0 15px 30px #3145080a; }
.studio-home #approach .approach-link { color: #fff; background: #151c0a; border-color: #151c0a; }
.studio-home #faq .fq { background: #ffffff9e; border-color: #26333522; box-shadow: 0 8px 28px #26333506; }
.studio-home #faq .fq.open { background: #e9efd9; border-color: #66832e; }
.studio-home #faq :is(.q,.a,.a p) { color: #222b2c; }
.studio-home #faq .pm { color: #182d11; background: #dce8c9; }
.studio-home #faq .pm:before,.studio-home #faq .pm:after { background: #344c20; }
.studio-home #start { padding-block: clamp(72px,8vw,120px) !important; }
.studio-home .service-policy { color: #d6e5ef; font-size: 13px; margin-top: 16px; }
.studio-home .service-copy .service-policy { font-size: 13px; }
/* The colour blocks now do the visual work; keep the edges unobtrusive. */
.studio-home .ambient-edges { opacity: .055; }
.studio-home .ambient-edges i { animation-duration: 38s; }
.studio-home .edge-frost { opacity: .045; }

/* The ad offer stays focused; proof is light and the final step is lime. */
.campaign-page .client-work { background: var(--paper); color: var(--paper-ink); width: 100%; max-width: none; padding: 52px clamp(20px,4vw,48px); border-radius: 28px; margin-bottom: 70px; }
.campaign-page .client-work h2 { color: #333c3f; }
.campaign-page .client-card { background: #fff; color: #182126; border-color: #22313b20; box-shadow: 0 14px 26px #27353d0c; }
.campaign-page .client-domain { color: #505e64; }
.campaign-page .client-arrow { color: #223b14; background: #d6efb5; border: 0; }
.campaign-page .service:nth-child(1) { background: #142431; border-color: #559bd74a; }
.campaign-page .service:nth-child(2) { background: #242b17; border-color: #b9d36c4a; }
.campaign-page .service:nth-child(3) { background: #2c1b2b; border-color: #e187c54a; }
.campaign-page .next-step { background: var(--section-lime); color: #172000; padding: 30px; border-radius: 22px; margin-top: 38px; }
.campaign-page .next-step p { color: #334512; }
.campaign-page .next-step .cta { background: #172000; color: #fff; }
.campaign-page .next-step .cta-icon { background: #c6ff00; color: #172000; }
.campaign-page .service p { color: #d4d9df; }

/* Questions stay first on phones, with a small preview underneath. */
.builder-page { background: var(--paper); }
.builder-page .builder-shell { padding-bottom: 58px; }
.builder-page .preview-label { color: #394147; }
.builder-page .preview-label b { color: #476300; }
.builder-page .question-panel { background: #12151c; }
.builder-page .builder-privacy { color: #41494d; border-color: #1e2a3324; padding-block: 32px; }
.builder-page .builder-privacy h2 { color: #1c2529; }
.builder-page .builder-privacy a { color: #374c10; }
.builder-page .back-link { color: #d1d8df; }
.builder-page .builder-nav { background: #11141df0; }
.builder-page .question-panel :is(h1,h2) { color: #f5f6f7; }
.builder-page .question-panel h1 > span:not(.d1-word) { color: #c6ff00; }
.builder-page .question-panel :is(.lead,.step-copy) { color: #cbd1db; }

/* A quiet, oversized brand sign-off. Essential links stay still above it. */
.kinetic-footer { position: relative; overflow: hidden; width: 100%; background: #101413; color: #f4f5ef; padding: 54px 0 28px; border-top: 1px solid #ffffff21; isolation: isolate; }
.footer-invitation { width: min(1192px,calc(100% - 48px)); margin: 0 auto 30px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.footer-invitation p { font: 500 clamp(20px,2.6vw,34px)/1.25 Montserrat,system-ui,sans-serif; letter-spacing: -.045em; max-width: 620px; }
.footer-invitation a { padding: 13px 22px; display: inline-flex; gap: 28px; background: #c6ff00; color: #182000; border-radius: 50px; font: 600 14px/1.4 Jost,system-ui,sans-serif; text-decoration: none; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.footer-invitation a:hover { transform: translateY(-3px); }
.footer-ticker { display: flex; width: max-content; animation: footer-drift 50s linear infinite; animation-play-state: paused; }
.footer-ticker > span { display: block; flex: 0 0 auto; padding-right: .35em; color: #d9edbb; font: 800 clamp(46px,9.2vw,160px)/1.2 Montserrat,system-ui,sans-serif; letter-spacing: -.065em; white-space: nowrap; }
.footer-ticker i { font-style: normal; color: #ffb8dd; }
.footer-in-view .footer-ticker { animation-play-state: running; }
.footer-utility { width: min(1192px,calc(100% - 48px)); margin: 26px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; color: #bbc7c1; font: 400 13px/1.5 Jost,system-ui,sans-serif; }
.footer-utility nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-utility a { color: #e5ede7; text-decoration: underline; text-underline-offset: 4px; }
.site-motion-control { display: block; margin: 20px auto 0; border: 1px solid #ffffff40; border-radius: 30px; padding: 9px 18px; background: #ffffff08; color: #e5ede7; font: 400 12px Jost,system-ui; cursor: pointer; }
.kinetic-footer :focus-visible { outline: 3px solid #c6ff00; outline-offset: 5px; }
.motion-paused .footer-ticker,.site-motion-idle .footer-ticker { animation-play-state: paused !important; }
@keyframes footer-drift { to { transform: translateX(-50%); } }
@media(max-width:620px) {
  .campaign-page .client-work { padding: 28px 16px; border-radius: 20px; }
  .campaign-page .next-step { padding: 24px 20px; }
  .footer-invitation,.footer-utility { width: calc(100% - 36px); }
  .kinetic-footer { padding-top: 36px; padding-bottom: 72px; }
  .studio-home #problem .fix-list li { padding: 23px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .footer-ticker { animation: none !important; }
  .d1-letter { transform: none !important; opacity: 1 !important; }
  .footer-invitation a { transition: none; }
}

/* Set before first paint by site-init; cleared by a timed fail-open fallback. */
.d1-reveal-boot [data-letter-headings] main :is(h1,h2,.approach-item h3):not(.preview-title) { opacity: 0; }
.d1-reveal-boot .d1-privacy h2 { opacity: 1 !important; }
.d1-reveals-ready [data-reveal-state="waiting"] .d1-letter { opacity: 0; transform: translateY(.48em); }
.motion-paused [data-reveal-state="waiting"] .d1-letter { opacity: 1; transform: none; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: d1-page-out 180ms ease both; }
::view-transition-new(root) { animation: d1-page-in 260ms cubic-bezier(.16,1,.3,1) both; }
::view-transition-group(root) { animation-duration: 260ms; }
html[data-entry="internal"] body { animation: d1-page-entry 260ms cubic-bezier(.16,1,.3,1); }
@keyframes d1-page-out { to { opacity: 0; } }
@keyframes d1-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes d1-page-entry { from { opacity: .8; } to { opacity: 1; } }
.motion-paused body { animation: none !important; }
.motion-paused::view-transition-old(root),.motion-paused::view-transition-new(root) { animation: none !important; }
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  html[data-entry] body { animation: none !important; }
  .d1-reveal-boot [data-letter-headings] main :is(h1,h2,h3) { opacity: 1; }
}
/* Mask each word so letters rise into place without showing underneath. */
.d1-word{overflow:clip;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.d1-type-settled .d1-word{overflow:visible;vertical-align:baseline;font-kerning:normal}
.d1-reveals-ready [data-reveal-state="waiting"] .d1-letter{opacity:0;transform:translateY(1.08em)}
.motion-paused [data-reveal-state="waiting"] .d1-letter{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.d1-reveals-ready [data-reveal-state="waiting"] .d1-letter{opacity:1;transform:none}}
/* Colour glints and drawn accents complement the entrance without duplicating text. */
.d1-accent-underline,.d1-accent-highlight{background-repeat:no-repeat;background-position:0 100%;background-size:0% 100%;transition:background-size 1.1s cubic-bezier(.16,1,.3,1) 1s}
.d1-accent-underline{background-image:linear-gradient(transparent calc(100% - 4px),#ff3edb calc(100% - 4px));padding-bottom:.18em;margin-bottom:-.18em}
.d1-accent-highlight{background-image:linear-gradient(transparent 62%,#7b61ff35 62%,#00f0ff30 94%,transparent 94%)}
.d1-text-entered.d1-accent-visible .d1-accent-underline,.d1-text-entered.d1-accent-visible .d1-accent-highlight{background-size:100% 100%}
.d1-type-settled .d1-accent-sweep{background-image:linear-gradient(110deg,currentColor 32%,#ff3edb 44%,#00b6c6 52%,currentColor 66%);background-size:300% 100%;background-position:100% 50%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.d1-type-settled.d1-accent-visible .d1-accent-sweep{animation:d1-word-glint 7s ease-in-out infinite}
@keyframes d1-word-glint{0%,12%{background-position:100% 50%}43%,100%{background-position:0% 50%}}
@keyframes d1-colour-glint{0%,12%,43%,100%{color:inherit;text-shadow:none}23%{color:#ff3edb;text-shadow:0 0 15px #ff3edb38}32%{color:#00b6c6;text-shadow:0 0 15px #00f0ff30}}
[data-letter-headings] .hero h1 .hero-underline:after{animation:d1-hero-draw 1.2s cubic-bezier(.16,1,.3,1) .7s both;transform-origin:left}
@keyframes d1-hero-draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.75}}
.motion-paused .d1-accent-sweep .d1-letter{animation:none!important;text-shadow:none!important}.motion-paused .d1-accent-underline,.motion-paused .d1-accent-highlight{transition:none!important;background-size:100% 100%}
.motion-paused .d1-accent-sweep{animation:none!important;background:none!important;-webkit-text-fill-color:currentColor}
.site-motion-idle .d1-accent-sweep{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.d1-accent-sweep{animation:none!important;background:none!important;-webkit-text-fill-color:currentColor}}
@media(prefers-reduced-motion:reduce){.d1-accent-sweep .d1-letter{animation:none!important;text-shadow:none!important}.d1-accent-underline,.d1-accent-highlight{transition:none!important;background-size:100% 100%}[data-letter-headings] .hero h1 .hero-underline:after{animation:none!important}}