/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-cyrillic-ext-wght-normal.BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-cyrillic-wght-normal.DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-greek-ext-wght-normal.DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-greek-wght-normal.CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-vietnamese-wght-normal.CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-latin-ext-wght-normal.DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/inter-latin-wght-normal.Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}:root {
  --cream: #f1e9e9; --purple: #3c2d91; --electric-purple: #5d3ee0;
  --hot-pink: #df1480; --field-pink: #f355a6; --deep-ink: #291f44;
  --ink: #242a2c; --white: #fff;
  --page-gutter: clamp(1.25rem, 5vw, 6.25rem); --content-max: 90rem;
  --section-gutter: clamp(2rem, 10vw, 10rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; color-scheme: light; scroll-behavior: auto; background: var(--hot-pink); }
html.gate-pending, html.gate-pending body { overflow: hidden; }
body { margin: 0; min-width: 0; overflow-x: clip; background: var(--cream); color: var(--ink); font-family: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.heading-mobile { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10000; top: 1rem; left: 1rem; padding: .8rem 1rem; border-radius: .5rem; background: var(--white); color: var(--deep-ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, textarea, [role="region"]):focus-visible { outline: 3px solid var(--white); outline-offset: 4px; box-shadow: 0 0 0 7px var(--deep-ink); }
main:focus, .visitor-gate:focus, .gate-panel:focus { outline: none; box-shadow: none; }

.button { min-width: clamp(11rem,19.5vw,17.6rem); min-height: clamp(3.3rem,5.85vw,5.25rem); padding: 1rem 2rem; border: 0; border-radius: clamp(.75rem,1vw,.9rem); box-shadow: 0 2px 4px rgb(0 0 0 / 8%); color: var(--white); cursor: pointer; font-weight: 650; font-size: clamp(1rem,1.9vw,1.73rem); transition: transform 180ms ease, filter 180ms ease; }
.button:hover { filter: brightness(1.07); transform: translateY(-2px) rotate(-.3deg); }
.button:active { transform: translateY(1px) scale(.99); }
.button-purple { background: var(--electric-purple); }
.button-pink { background: var(--hot-pink); }

/* Visitor gate */
.visitor-gate { position: fixed; z-index: 9999; inset: 0; display: none; min-height: 100svh; overflow: auto; background: var(--purple); color: var(--cream); }
.gate-pending .visitor-gate { display: block; }
.visitor-gate.is-leaving { pointer-events: none; animation: gate-exit 650ms cubic-bezier(.65,0,.2,1) forwards; }
.gate-panel { position: relative; display: grid; min-height: 100svh; place-items: center; align-content: start; padding: clamp(2.8rem,9vh,5.7rem) var(--page-gutter) 3rem; text-align: center; }
.gate-panel[hidden] { display: none; }
.gate-logo { width: clamp(9.5rem,16.75vw,15.1rem); height: auto; }
.gate-question-copy { margin-top: clamp(4rem,13vh,8.3rem); }
.gate-question-copy p { margin: 0 0 .2rem; font-size: clamp(1.55rem,3.4vw,3.05rem); font-weight: 500; line-height: 1.17; }
.gate-question-copy svg { display:block; width: clamp(20rem,49vw,44rem); height: auto; transform: rotate(2.1deg); overflow:visible; }
.gate-actions { display: flex; gap: clamp(1rem,3vw,2.7rem); margin-top: clamp(2rem,7vh,4.5rem); }
.gate-ordinary-copy { display: grid; justify-items: center; margin-top: clamp(6rem,22vh,14rem); }
.gate-ordinary-copy p { margin: 0; font-size: clamp(1.8rem,3.4vw,3.05rem); font-weight: 500; line-height: 1.4; }
.gate-ordinary-copy span { margin: clamp(2rem,7vh,5rem) 0 2rem; font-size: clamp(1.2rem,1.7vw,1.52rem); }
@keyframes gate-exit { to { clip-path: inset(0 0 100% 0); opacity: 0; } }
@media (min-width:1101px), (min-width:700px) and (orientation:landscape) {
  .gate-panel { padding-top: clamp(2rem,7vh,4.5rem); }
  .gate-logo { width: clamp(8rem,12vw,11rem); }
  .gate-question-copy { margin-top: clamp(2.5rem,9vh,6rem); }
  .gate-question-copy p, .gate-ordinary-copy p { font-size: clamp(1.5rem,2.5vw,2.4rem); line-height: 1.25; }
  .gate-question-copy svg { width: min(40vw,35rem); }
  .gate-actions { margin-top: clamp(1.5rem,4vh,3rem); gap: 1.5rem; }
  .visitor-gate .button { min-width: 13rem; min-height: 3.6rem; padding: .7rem 1.4rem; font-size: 1.2rem; }
  .gate-ordinary-copy { margin-top: clamp(3rem,12vh,7rem); }
  .gate-ordinary-copy span { margin: 2rem 0 1.5rem; font-size: 1.125rem; }
}


/* One native vertical snap system. Services contribute five real snap targets. */
.gate-panel { display:flex; flex-direction:column; align-items:center; min-height:100svh; height:100dvh; padding-bottom:0; }
.gate-logo { flex:none; }
.gate-content,.gate-ordinary-copy { flex:1 0 auto; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 0; margin:0; }
.gate-panel .gate-question-copy,.gate-panel .gate-ordinary-copy { margin-top:0; }
.gate-ordinary-copy p { text-wrap:balance; }
.gate-ordinary-copy strong { display:inline-block; }
.letter-flash { position:fixed; z-index:50; display:block; pointer-events:none; mask-repeat:no-repeat; mask-position:center; mask-size:contain; }
.gate-pending .letter-flash { z-index:10000; }
:root { --screen-block: 100svh; }
@supports (height: 100dvh) { :root { --screen-block: 100dvh; } }
html { scroll-snap-type: y mandatory; }
html.is-form-active, html.gate-pending { scroll-snap-type: none; }
.section-screen { position: relative; min-block-size: var(--screen-block); scroll-snap-align: start; scroll-snap-stop: always; }
.hero { block-size: var(--screen-block); min-block-size: 30rem; overflow: clip; background: var(--hot-pink); }
.hero-art, .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art { overflow: hidden; background: var(--hot-pink); }
.hero-art img { max-width: none; object-fit: cover; object-position: center 77.1484%; }
.hero-foreground { position: absolute; z-index: 1; bottom: 4%; right: -1%; height: min(62%,46vw,43rem); aspect-ratio: 659/603; pointer-events: none; }
.hero-foreground img { width: 100%; height: 100%; }
.hero-crab { position: absolute; z-index: 2; bottom: 14.5%; left: 38%; width: min(17vw,23dvh,15rem); height: auto; pointer-events: none; transform-origin: 50% 80%; }
.hero-crab.is-awake { animation: crab-twitch 680ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes crab-twitch { 0%,100% { transform: rotate(0); } 28% { transform: rotate(-3deg) translateY(-3px); } 62% { transform: rotate(2deg); } }
.hero-display { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.hero-display > div { position: absolute; display: block; }
.hero-display svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-display-for { top: 24%; left: 8.3%; width: min(18vw,26dvh,16rem); }
.hero-display-fearless { top: 32%; left: 8.3%; width: min(48vw,74dvh,43rem); }
.hero-logo-desktop { position: absolute; z-index: 3; top: 7.2%; left: 8.55%; width: min(14vw,22dvh,12.3rem); height: auto; }
.hero-invitation { position: absolute; z-index: 3; bottom: 4%; left: 11%; display: flex; align-items: center; gap: 1rem; color: var(--cream); font-size: clamp(1.1rem,min(2.1vw,3.4dvh),2rem); line-height: 1.2; text-decoration: none; white-space: nowrap; }
.hero-invitation-arrow { display: block; width: clamp(3.2rem,5.55vw,5rem); transform: rotate(82.21deg) scaleX(-1); }
.hero-invitation-arrow img { width: 100%; height: auto; }

/* Live content and exact underline remain readable if text is enlarged. */
.manifesto { display: grid; place-content: center; justify-items: center; padding: clamp(3rem,9dvh,7rem) var(--page-gutter); overflow: clip; background: var(--cream); text-align: center; }
.manifesto::before { content: ''; position: absolute; top: -25px; left: -3%; width: 106%; height: 48px; border-radius: 50%; background: var(--electric-purple); }
.manifesto-title { position: relative; width: min(50vw,70dvh,45rem); aspect-ratio: 721/119; margin-bottom: clamp(1.5rem,5dvh,3.5rem); }
.manifesto-title > :is(img,svg) { position: absolute; max-width: none; height: auto; overflow:visible; }
.manifesto-title-a { top: 18.4%; left: 34.56%; width: 9.09%; }
.manifesto-title-b { top: 11.97%; left: 0; width: 32.31%; }
.manifesto-title-c { top: 0; left: 46.82%; width: 53.18%; }
.manifesto-copy { position: relative; z-index: 2; width: min(100%,38rem); font-size: clamp(1rem,min(1.7vw,2.8dvh),1.56rem); line-height: 1.4; }
.manifesto-copy p { margin: 0 auto 1.2em; }
.manifesto-copy strong span { background: url('/images/derived/manifesto-underline.svg') left bottom / 100% .24em no-repeat; padding-bottom: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.manifesto-copy small { display: block; font-size: .75rem; font-style: italic; }
.manifesto-arrow { position: absolute; right: 6%; bottom: -8%; width: clamp(5rem,8.86vw,8rem); height: min(37dvh,26rem); transform: rotate(-90deg); }
.manifesto-arrow img { width: 100%; height: 100%; }

/* Static stack is the no-JS/reduced-motion baseline. */
.services { position: relative; overflow: visible; background: var(--purple); }
.services-viewport { height: auto; }
.services-track { display: grid; width: 100%; }
.service-panel { position: relative; width: 100%; block-size: var(--screen-block); min-block-size: 30rem; overflow: hidden; background: var(--purple); color: var(--white); scroll-snap-align: start; scroll-snap-stop: always; }
.service-panel > .sr-only { top: 0; left: 0; }
.service-visual, .service-visual img, .service-background, .service-background img { position: absolute; inset: 0; width: 100%; height: 100%; }
.service-visual img { object-fit: contain; }
.service-background img { object-fit: fill; max-width: none; }
.service-art-stage { position: absolute; z-index: 1; top: 50%; left: 50%; width: auto; height: min(100%,calc(100vw * 1024 / 1440)); aspect-ratio: 1440/1024; transform: translate(-50%,-50%); }
.service-foreground, .service-foreground img { position: absolute; inset: 0; width: 100%; height: 100%; }
.service-foreground img { object-fit: contain; max-width: none; }
.service-copy { font-size: clamp(1rem,min(1.65vw,2.5dvh),1.5rem); line-height: 1.4; }
.service-copy p { margin: 0 0 1em; }.service-copy p:last-child { margin-bottom: 0; }
.service-live-copy { position: absolute; z-index: 3; }
.service-strategy .service-art-stage { left: 0; transform: translateY(-50%); }
.service-strategy .service-live-copy { top: 10.718%; left: 51.354%; width: 36.701%; }
.service-design .service-live-copy { top: 80.444%; left: 45.122%; width: 42.292%; }
.service-digital .service-live-copy { top: 9.766%; left: 46.563%; width: 36.736%; }
.content-desktop-stage { top: 73.5%; left: 59%; width: 33%; }
.content-desktop-copy { position: static; }.content-mobile-art { display: none; }
.services-scroll-stops { display: none; }
.services.is-scroll-enhanced { block-size: calc(5 * var(--screen-block)); }
.services.is-scroll-enhanced .services-viewport { position: sticky; top: 0; z-index: 1; block-size: var(--screen-block); overflow: clip; }
.services.is-scroll-enhanced .services-track { display: flex; width: 500%; height: 100%; will-change: transform; }
.services.is-scroll-enhanced .service-panel { flex: 0 0 20%; width: 20%; min-block-size: 0; block-size: 100%; scroll-snap-align: none; }
.services.is-scroll-enhanced .services-scroll-stops { position: relative; display: block; margin-top: calc(-1 * var(--screen-block)); pointer-events: none; }
.services-scroll-stop { display: block; block-size: var(--screen-block); scroll-snap-align: start; scroll-snap-stop: always; }
/* The browser owns both vertical scrolling and the horizontal transform. The
   tall section's containment range is exactly the four intervals between stops. */
.services.is-native-timeline { view-timeline-name: --services-progress; view-timeline-axis: block; view-timeline-inset: 0; }
.services.is-native-timeline .services-track {
  animation: services-progress linear both;
  animation-timeline: --services-progress;
  animation-range: contain 0% contain 100%;
}
@keyframes services-progress {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-80%,0,0); }
}

/* Native gallery; every card has a reachable, mandatory resting position. */
.work { --work-card-width: clamp(11rem,min(25vw,calc(50dvh * .665546)),22.5rem); padding: max(calc(var(--nav-height) + 1.5rem),9dvh) 0 clamp(1rem,4dvh,3rem); overflow: hidden; background: var(--cream); }
.work-heading { position: relative; z-index: 2; width: min(80%,var(--content-max)); margin-left: var(--section-gutter); color: var(--hot-pink); }
.work-heading h2, .clients-heading h2 { margin: 0; font-size: clamp(1.5rem,min(2.5vw,4dvh),2.25rem); font-weight: 600; line-height: 1.2; }
.work-heading picture { position: absolute; top: -1rem; left: min(40vw,29rem); width: clamp(4rem,8.6vw,7.75rem); transform: rotate(180deg); }
.work-heading picture img { width: 100%; height: auto; }
.work-carousel { width: 100%; margin-top: clamp(2rem,8dvh,5rem); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-padding-left: var(--section-gutter); }
.work-carousel::-webkit-scrollbar { display: none; }
.work-carousel.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.work-track { display: flex; gap: clamp(1rem,4vw,3.6rem); width: max-content; padding-left: var(--section-gutter); padding-right: max(var(--section-gutter),calc(100vw - var(--section-gutter) - var(--work-card-width))); }
.work-card { flex: 0 0 var(--work-card-width); width: var(--work-card-width); aspect-ratio: 396/595; overflow: hidden; border-radius: clamp(1rem,2.2vw,2rem); scroll-snap-align: start; scroll-snap-stop: always; background: #ddd; transform: translateZ(0); }
.work-card picture { display: block; width: 100%; height: 100%; }
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease, filter 250ms ease; }
@media (hover: hover) { .work-card:hover img { transform: scale(1.025); filter: saturate(1.06); } }
.work-controls { display: flex; justify-content: flex-end; gap: .65rem; margin: 1rem 0 0; padding: 0 var(--section-gutter); }
.work-controls button { min-height: 2.75rem; padding: .55rem .9rem; border: 2px solid var(--hot-pink); border-radius: 999px; background: transparent; color: var(--hot-pink); cursor: pointer; font-weight: 700; }
.work-controls button:disabled { opacity: .42; cursor: default; }

/* Exact logo proportions, centred Warwick, two counter-moving mobile rows. */
.clients { block-size: var(--screen-block); min-block-size: 30rem; overflow: clip; background: var(--deep-ink); color: var(--cream); }
.clients-heading { position: absolute; z-index: 2; top: 17%; left: 11%; width: max-content; max-width: 78%; }
.clients-heading picture { position: absolute; top: -.7rem; left: calc(100% + 2rem); width: min(5.93vw,8.35dvh); transform: rotate(114.4deg) scaleX(-1); }
.clients-heading picture img { width: 100%; height: auto; }
.client-field { position: absolute; top: 39%; left: 8.26%; width: 83.48%; height: 43.7%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); column-gap: 7.2vw; row-gap: 7.3dvh; }
.client-slot { display: grid; place-items: center; min-width: 0; min-height: 0; }
.client-logo { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.client-1 .client-logo { width: 55.74%; }.client-2 .client-logo { width: 60.77%; }
.client-3 .client-logo { width: 100%; }.client-4 .client-logo { width: 91.68%; }
.client-5 .client-logo { width: 100%; }.client-6 .client-logo { width: 71.63%; }
.client-marquees, .client-motion-toggle { display: none; }
.client-motion-toggle[hidden] { display: none !important; }

/* Contact stays in flow so typing/validation cannot hide its controls. */
.contact { padding: max(15rem,29.6dvh) 0 2rem; min-block-size: max(var(--screen-block),42rem); overflow: hidden; background: var(--hot-pink); color: var(--cream); }
.contact-title-art > div { position: absolute; }
.contact-title-art :is(img,svg) { display:block; width: 100%; height: auto; overflow:visible; }
.contact-title-ready { top: max(calc(var(--nav-height) + 1rem),7.5dvh); left: 10%; width: 55%; }
.contact-title-fearless { top: max(calc(var(--nav-height) + 4.3rem),13.5dvh); left: 8%; width: 84%; }
.contact-hand { position: absolute; z-index: 2; pointer-events: none; }
.contact-hand img { position: absolute; max-width: none; }
.contact-hand-desktop { display: none; }
.contact-hand-mobile { display: block; bottom: -5.2%; left: -23%; height: min(43dvh,24rem); width: auto; aspect-ratio: 290/366; }
.contact-hand-mobile .hand-a { top: 32.31%; left: 14.84%; width: 68.76%; height: 60.39%; }
.contact-hand-mobile .hand-b { top: 28.55%; left: 47.27%; width: 9.54%; height: 12.29%; }
.contact-hand-mobile .hand-c { top: 19.34%; left: 52.63%; width: 8.92%; height: 10.13%; }
.contact-hand-mobile .hand-d { top: 41%; left: 45.99%; width: 9.89%; height: 14.95%; }
.contact-hand-mobile .hand-e { top: 7.38%; left: 24.33%; width: 75.82%; height: 85.32%; }
.contact-form { position: relative; z-index: 3; width: min(86%,32rem); margin: 0 auto; padding-bottom: 7rem; }
.form-intro { margin: 0 0 .75rem .3rem; font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.contact-intro-break { display: block; }
.honeypot { position: absolute; left: -10000px; }
.field { position: relative; margin-bottom: 1.125rem; }.field-message { margin-bottom: 0; }
.field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.field input, .field textarea { width: 100%; border: 2px solid transparent; border-radius: 1.4rem; background: var(--field-pink); color: var(--deep-ink); font-size: 1rem; font-weight: 600; }
.field input { height: 2.75rem; padding: 0 1rem; }
.field textarea { height: clamp(6rem,14dvh,8rem); min-height: 6rem; padding: 1rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--deep-ink); opacity: 1; }
.field input:focus, .field textarea:focus { border-color: var(--cream); outline: none; box-shadow: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; box-shadow: none; }
.field [aria-invalid='true'] { border-color: var(--deep-ink); }
.field-error { position: absolute; top: 100%; left: 1rem; color: var(--white); font-size: .75rem; line-height: 1.3; }
.form-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; margin-top: 1.25rem; align-items: center; gap: 1rem; }
.form-status { margin: 0; color: var(--white); font-size: .8rem; font-weight: 600; }
.contact .button { min-width: 9rem; min-height: 2.9rem; padding: .7rem 1rem; border-radius: .55rem; font-size: 1rem; }

@media (max-width: 1100px) and (orientation: portrait) {
  .heading-desktop { display: none; }.heading-mobile { display: inline; }
  .gate-actions { flex-direction: column; }
  .gate-question-copy svg { width: min(85vw,32rem); }
  .hero { min-block-size: 30rem; }
  .hero-art img { object-position: center 69.2488%; }
  .hero-logo-desktop { top: max(4%,env(safe-area-inset-top)); left: 50%; width: min(34vw,8.75rem); transform: translateX(-50%); }
  .hero-display-for { top: 18%; left: 31%; width: 38%; }
  .hero-display-fearless { top: 25%; left: 10%; width: 80%; }
  .hero-foreground { right: auto; bottom: 12%; left: 30%; height: min(40%,26rem); aspect-ratio: 374/342; }
  /* Keep the entire ground shadow below the grave's base, including at the
     right-hand end of the walk. All beach layers still share one tilt depth. */
  .hero-crab { bottom: 14%; left: 4%; width: clamp(6rem,min(34vw,19dvh),10.5rem); }
  .hero-invitation { bottom: max(2.7%,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); gap: .5rem; align-items: end; font-size: clamp(1rem,2.8dvh,1.4rem); white-space: normal; }
  .hero-invitation span { min-width: max-content; }.hero-invitation strong { display: block; }
  .hero-invitation-arrow { width: 1.96rem; margin: 0 0 -.1rem .25rem; }
  .manifesto { min-block-size: var(--screen-block); padding: max(5rem,16dvh) 12% max(6rem,16dvh); }
  .manifesto-title { display: none; }
  .manifesto-copy { width: min(100%,32rem); font-size: clamp(1rem,min(5.1vw,2.62dvh),1.4rem); line-height: 1.3; }
  .manifesto-arrow { right: 10%; bottom: -2%; width: min(18vw,4.413rem); height: auto; aspect-ratio: 70.6094/233.697; transform: rotate(-96.91deg); }
  .manifesto-arrow img { width: 100%; height: auto; }
  .service-art-stage, .service-strategy .service-art-stage { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
  .service-copy { font-size: clamp(1rem,min(4.5vw,2.35dvh),1.2rem); line-height: 1.35; }
  .service-strategy .service-live-copy { top: 23%; left: 13%; width: 70%; }
  .service-design .service-live-copy { top: min(75.44%,calc(100% - 10rem)); left: 13%; width: 74%; }
  .service-digital .service-live-copy { top: 27%; left: 13%; width: 74%; }
  .content-desktop-art-stage { display: none; }
  .service-content-background { display: none; }
  .content-mobile-art { --social-width: min(100vw,calc(var(--screen-block) * 393 / 852)); position: absolute; inset: 0; display: block; overflow: hidden; }
  .content-mobile-scene { position: absolute; top: 0; left: calc(50% - var(--social-width) * .65776); width: calc(var(--social-width) * 1.96445); aspect-ratio: 772.031/549; overflow: hidden; }
  .content-mobile-scene img { position: absolute; top: 0; left: -.486%; width: 129.306%; height: auto; max-width: none; }
  .content-mobile-art .service-title { position: absolute; top: 55.164%; left: calc(50% - var(--social-width) * .3626); width: calc(var(--social-width) * .73282); height: auto; }
  .content-mobile-art .service-copy { position: absolute; top: min(70.423%,calc(100% - 11rem)); left: 13.74%; width: 72%; }
  .work { --work-card-width: min(80vw,calc(54dvh * .665546),24rem); padding-top: max(calc(var(--nav-height) + 1.5rem),8dvh); }
  .work-heading { width: 80%; }
  .work-heading h2, .clients-heading h2 { font-size: clamp(1.35rem,min(7.6vw,3.52dvh),1.875rem); }
  .work-heading picture { top: 4.55rem; left: auto; right: 0; width: min(16vw,4rem); transform: rotate(-135deg); }
  .work-carousel { margin-top: 9dvh; }
  .work-card { border-radius: 1.5rem; }
  .work-controls { display: none; }
  .clients-heading { top: max(calc(var(--nav-height) + 1.25rem),11%); left: 13.2%; width: 78.4%; }
  .clients-heading picture { top: calc(100% + 1rem); left: 1rem; width: clamp(3.8rem,14vw,5rem); transform: rotate(114.4deg) scaleX(-1); }
  .client-field { display: none; }
  .client-marquees { position: absolute; display: grid; gap: 7.1dvh; top: max(42%,calc(var(--nav-height) + 12rem)); left: 0; width: 100%; }
  .client-marquee-row { width: 100%; overflow: hidden; }
  .client-marquees:not(.is-animated) .client-marquee-row { overflow-x: auto; }
  .client-marquees:not(.is-animated) .client-marquee-group + .client-marquee-group { display: none; }
  .client-marquee-track { display: flex; width: max-content; }
  .client-marquee-group { --logo-gap: clamp(.25rem,1.5vw,.75rem); display: flex; gap: var(--logo-gap); padding-inline: calc(var(--logo-gap) / 2); }
  .client-marquee-item { display: grid; place-items: center; flex: 0 0 56vw; width: 56vw; height: 18dvh; padding: 1rem .75rem; }
  .client-marquees.is-animated .client-marquee-track { animation: logos-left 50s linear infinite; }
  .client-marquees.is-animated .client-marquee-row-1 .client-marquee-track { animation-name: logos-right; animation-delay: -9s; }
  .client-marquees.is-paused .client-marquee-track { animation-play-state: paused; }
  .client-motion-toggle { position: absolute; right: 7%; bottom: 3%; display: block; border: 0; border-bottom: 1px solid currentColor; padding: .5rem; color: var(--cream); background: transparent; font-size: .75rem; cursor: pointer; }
}
@keyframes logos-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes logos-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .hero-display-for { left: 17%; width: 28%; }.hero-display-fearless { left: 12%; width: 65%; }
  .hero-foreground { left: 46%; }.hero-crab { left: 16%; }
  .hero-invitation { font-size: 1.5rem; }
  .manifesto-copy { max-width: 34rem; font-size: 1.35rem; }
  .contact-title-ready { left: 24%; width: 35%; }.contact-title-fearless { left: 21%; width: 58%; }
  .contact-hand-mobile { left: 5%; }
  .client-marquee-item { flex-basis: 42vw; width: 42vw; }
}
@media (hover: none), (pointer: coarse), (max-width: 899px) { .work-controls { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .client-marquee-row { overflow-x: auto; }.client-marquee-group + .client-marquee-group { display: none; }
}
:root { --nav-height: clamp(4rem,7.64vw,6.875rem); }
@media (min-width:1101px), (min-width:700px) and (orientation:landscape) {
  :root { --nav-height: clamp(3rem,4.584vw,4.125rem); }
  .site-nav .nav-logo { width: clamp(6.375rem,8.5vw,7.65rem); }
  .site-nav .nav-toggle { width: 2.75rem; height: 2.75rem; }
}
.site-nav { position: fixed; z-index: 100; inset: 0 0 auto; height: var(--nav-height); display: flex; justify-content: space-between; align-items: center; padding: 0 5.14%; background: var(--deep-ink); opacity: 0; visibility: hidden; transform: translateY(-15%); transition: opacity 240ms ease, transform 240ms ease, visibility 240ms; }
.site-nav.is-visible { opacity: 1; visibility: visible; transform: none; }
.site-nav.is-over-clients { background: var(--hot-pink); }
.gate-pending .site-nav { display: none; }
.nav-logo { display: block; width: clamp(7.225rem,11.39vw,10.253125rem); }
.nav-logo img { width: 100%; height: auto; }
.nav-toggle { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding: .5rem; border: 0; color: var(--cream); background: transparent; cursor: pointer; }
.nav-toggle img { width: 100%; height: auto; }
.nav-close { display: none; font-size: 1rem; }
.nav-toggle[aria-expanded='true'] img { display: none; }.nav-toggle[aria-expanded='true'] .nav-close { display: inline; }
.site-menu { position: absolute; top: 100%; right: 0; width: min(100%,28rem); max-height:calc(100dvh - var(--nav-height)); overflow-y:auto; overscroll-behavior:contain; padding: 1.5rem 5vw 2rem; background: var(--deep-ink); box-shadow: 0 1rem 2rem rgb(0 0 0 / .12); }
.site-menu[hidden] { display: none; }
.site-menu a { display: block; padding: .75rem 0; color: var(--cream); font-weight: 600; font-size: clamp(1.1rem,2vw,1.5rem); text-decoration: none; }
.site-menu a:hover { color: var(--field-pink); }
@media (max-width: 699px) { .nav-toggle { width: 2.75rem; height: 2.75rem; }.site-menu { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .site-nav { transition: none; } }
.hero-art-scene { position: absolute; width: max(100%,calc(var(--screen-block) * 1440 / 1024)); aspect-ratio: 1440/1024; top: 77.1484%; left: 50%; transform: translate(-50%,-77.1484%); }
.hero-art-scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-art-mobile { display: none; }
/* Keep the horizon fixed; move the shoreline up to make the sea 30% shallower. */
.hero-art-desktop [id$="desktop-src-Sea"] { transform: translateY(187.5px) scaleY(.7); transform-origin: 0 0; }
.hero-art-sand,.hero-art-sea { background:none; overflow:visible; }
.hero-beach-layer { translate: 0 var(--hero-parallax,0px); }
.hero-crab { padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; isolation: isolate; }
.hero-crab svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.crab-shadow { position: absolute; z-index: -1; left: 9%; bottom: -1%; width: 88%; height: 15%; border-radius: 50%; background: var(--deep-ink); transform: rotate(-3deg); }
.hero-crab.is-annoyed [data-face-state='happy'] { display: none; }
.hero-crab.is-annoyed [data-face-state='angry'] { display: inline !important; }
[data-rig='left-claw'] { transform-origin: 63px 113px; } [data-rig='right-claw'] { transform-origin: 194px 123px; }
.motion-ready .is-walking [data-rig-static-backing] { display: none; }
.motion-ready .is-walking [data-rig-motion-backing] { display: inline; }
[data-rig='left-leg-outer'] { transform-origin: 60px 121px; --leg-from: -3deg; --leg-to: 2.5deg; --leg-phase: 0ms; }
[data-rig='left-leg-middle'] { transform-origin: 76px 134px; --leg-from: 2.5deg; --leg-to: -3deg; --leg-phase: -140ms; }
[data-rig='left-leg-inner'] { transform-origin: 82px 145px; --leg-from: -2deg; --leg-to: 2deg; --leg-phase: -280ms; }
[data-rig='right-leg-inner'] { transform-origin: 159px 145px; --leg-from: 2deg; --leg-to: -2deg; --leg-phase: -70ms; }
[data-rig='right-leg-middle'] { transform-origin: 183px 141px; --leg-from: -3deg; --leg-to: 2.5deg; --leg-phase: -210ms; }
[data-rig='right-leg-outer'] { transform-origin: 194px 133px; --leg-from: 2.5deg; --leg-to: -3deg; --leg-phase: -350ms; }
.motion-ready .is-walking [data-rig$='leg-outer'],.motion-ready .is-walking [data-rig$='leg-middle'],.motion-ready .is-walking [data-rig$='leg-inner'] { transform-box: view-box; animation: crab-leg-v6 420ms ease-in-out var(--leg-phase) infinite alternate; }
@media (min-width:1101px), (orientation:landscape) {
  .motion-ready .is-walking [data-rig$='leg-outer'],.motion-ready .is-walking [data-rig$='leg-middle'],.motion-ready .is-walking [data-rig$='leg-inner'] { animation-duration: 360ms; }
}
@keyframes crab-leg-v6 { from { transform: rotate(var(--leg-from)); } to { transform: rotate(var(--leg-to)); } }
.motion-ready .is-walking [data-rig='left-claw'], .motion-ready .is-walking [data-rig='right-claw'] { animation: crab-arms 650ms ease-in-out infinite alternate; }
.motion-ready [data-rig^='rig-cloud-'], .motion-ready [data-rig='cloud'] { animation: cloud-drift var(--cloud-duration,16s) ease-in-out var(--cloud-delay,0s) infinite alternate; }
.motion-ready [data-rig='rig-cloud-2'], .motion-ready [data-rig='rig-cloud-4'] { animation-direction: alternate-reverse; }
.motion-ready .water-mark { transform-box: fill-box; transform-origin: center; animation: water-drift var(--water-duration,4s) ease-in-out var(--water-delay,0s) infinite alternate; }
.motion-ready .hero:not(.is-motion-active) *, .motion-ready .service-panel:not(.is-motion-active) * { animation-play-state: paused !important; }
.motion-suspended *, .gate-pending main * { animation-play-state: paused !important; }
.motion-ready .clients:not(.is-motion-active) .client-marquee-track { animation-play-state: paused; }
.manifesto-arrow { height: auto; aspect-ratio: 127.6/422.3; }
.manifesto-arrow svg { width: 100%; height: auto; }
.service-intro-art svg, .service-title-art svg { overflow: visible; }
.client-draw-shaft,.client-draw-head { fill: none; stroke: #E23E83; stroke-linecap: round; stroke-linejoin: round; }
.motion-ready .contact.is-motion-active .contact-title-art > div { animation: contact-title-float 7s ease-in-out infinite alternate; }
.motion-ready .contact.is-motion-active .contact-title-art .contact-title-fearless { animation-duration: 12s; animation-delay: -3s; animation-direction: alternate-reverse; }
@keyframes contact-title-float { from { transform: translateY(-2px) rotate(-.24deg); } to { transform: translateY(2px) rotate(.24deg); } }
.draw-shaft,.draw-head { fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion-ready .draw-shaft,.motion-ready .draw-head { stroke-dashoffset: 1; opacity: 0; }
.motion-ready .manifesto.is-motion-active .draw-shaft { animation: arrow-draw 1.35s cubic-bezier(.35,.1,.45,1) 5s both; }
.motion-ready .manifesto.is-motion-active .draw-head { animation: arrow-draw .5s ease-out 6.4s both; }
.motion-ready .manifesto-copy > * { opacity: 0; }
.motion-ready .manifesto-copy strong span { background: none; }
.manifesto-copy p { position: relative; }
.underline-ink { position: absolute; inset: 0; pointer-events: none; }
.underline-ink i { position: absolute; height: .24em; background: url('/images/derived/manifesto-underline.svg') center / 100% 100% no-repeat; }
.motion-ready .client-draw-shaft,.motion-ready .client-draw-head { opacity: 0; }
.motion-ready [data-rig='letter'] { transform-box: fill-box; transform-origin: center; animation: letter-float var(--float-duration,4s) ease-in-out var(--float-delay,0s) infinite alternate; }
.motion-ready [data-rig-index='2'][data-rig='letter'],.motion-ready [data-rig-index='6'][data-rig='letter'] { animation-direction: alternate-reverse; }
.motion-ready [data-rig='bottle'] { transform-box: fill-box; transform-origin: 50% 90%; animation: bottle-bob var(--bob-duration,4s) ease-in-out var(--bob-delay,0s) infinite alternate; }
.motion-ready .steam-wisp { animation: steam-rise 2.9s ease-in-out infinite; }
.motion-ready .steam-wisp:nth-child(2) { animation-delay: -.95s; }.motion-ready .steam-wisp:nth-child(3) { animation-delay: -1.9s; }
.motion-ready .clients.is-motion-active .client-slot { animation: client-reveal 360ms ease-out both; }
.motion-ready .clients.is-motion-active .client-2 { animation-delay: 80ms; }.motion-ready .clients.is-motion-active .client-3 { animation-delay: 160ms; }.motion-ready .clients.is-motion-active .client-4 { animation-delay: 240ms; }.motion-ready .clients.is-motion-active .client-5 { animation-delay: 320ms; }.motion-ready .clients.is-motion-active .client-6 { animation-delay: 400ms; }
.motion-ready .clients.is-motion-active .client-marquee-item { animation: client-reveal 360ms ease-out both; }
.motion-ready .clients.is-motion-active .client-marquee-item:nth-child(2n) { animation-delay: 80ms; }
.motion-ready .clients.is-motion-active .client-marquee-item:nth-child(3n) { animation-delay: 160ms; }
@keyframes arrow-draw { 0% { opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes underline-draw { to { background-size: 100% .24em; } }
@keyframes letter-float { from { transform: translateY(-2.6px) rotate(-.35deg); } to { transform: translateY(2.6px) rotate(.35deg); } }
@keyframes bottle-bob { from { transform: translateY(-7px) rotate(-.9deg); } to { transform: translateY(7px) rotate(.9deg); } }
@keyframes steam-rise { 0% { opacity: 0; transform: translate(0,12px) scaleY(.8); } 25%,60% { opacity: .9; } 100% { opacity: 0; transform: translate(5px,-24px) scaleY(1.1); } }
@keyframes client-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes cloud-drift { from { transform: translateX(-24px); } to { transform: translateX(30px); } }
@keyframes water-drift { from { transform: translate(-7px,-2px) scaleX(.88); opacity: .65; } to { transform: translate(10px,3px) scaleX(1.08); opacity: 1; } }
@keyframes crab-arms { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@media (prefers-reduced-motion:reduce) {
  .motion-ready .client-draw-shaft,.motion-ready .client-draw-head { stroke-dashoffset: 0; opacity: 1; }
  .motion-ready .manifesto-copy strong span { background-image: url('/images/derived/manifesto-underline.svg'); }
  .underline-ink { display: none; }
}
@media (max-width:1100px) and (orientation:portrait) {
  .hero-art-desktop { display: none; }.hero-art-mobile { display: block; width: max(100%,calc(var(--screen-block) * 393 / 852)); aspect-ratio: 393/852; top: 69.2488%; transform: translate(-50%,-69.2488%); }
}
@media (prefers-reduced-motion:reduce) { .motion-ready * { animation: none !important; }.motion-ready .draw-shaft,.motion-ready .draw-head { stroke-dashoffset: 0; opacity: 1; }.motion-ready .manifesto-copy > * { opacity: 1; }.motion-ready .manifesto-copy strong span { background-size: 100% .24em; }.cookie-steam { display: none; } }
/* Artwork fills the available width. Display lettering has its own safe area. */
.art-mobile { display: none; }
.art-desktop { display: block; }
.service-art-only [data-rig-region='title'], .service-title-only [data-rig-region='illustration'] { display: none; }
.service-title-only { overflow: visible; }
.service-intro-art { position: absolute; width: min(92%,calc(var(--stage-height) * 1.6)); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.service-intro-art svg, .service-title-art svg { display: block; width: 100%; height: auto; }
.service-illustration { position: absolute; inset: 0; pointer-events: none; }
.service-illustration > svg { position: absolute; top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); }
.service-title-art { position: absolute; z-index: 2; }
.social-desktop-scene { position: absolute; inset: 0; }
.social-desktop-scene > svg { position: absolute; width: 100%; height: auto; top: 50%; left: 0; transform: translateY(-50%); }
[data-rig='embedded-title'] { display: none; }
.cookie-steam { pointer-events: none; }
.intro-grain { position: absolute; inset: var(--nav-height) 0 0; pointer-events: none; }
.intro-grain i { position: absolute; left: var(--grain-x); top: var(--grain-y); width: var(--grain-size); height: var(--grain-size); background: var(--deep-ink); opacity: .4; border-radius: 35% 60% 40% 25%; }
.motion-ready .is-motion-active .intro-grain i { animation: grain-flicker 5.7s steps(1,end) var(--grain-delay) infinite; }
@keyframes grain-flicker { 0%,32%,83% { opacity: 0; } 15%,64% { opacity: .38; } 46%,95% { opacity: .18; } }
@media (max-width:1100px) and (orientation:portrait) {
  .art-desktop { display: none; }.art-mobile { display: block; }
  .service-intro-art { width: 100%; top: 54%; }
  .social-mobile-scene { position: absolute; top: 0; left: -15%; width: 196.445%; aspect-ratio: 772.031/549; overflow: clip; }
  .social-mobile-scene svg { position: absolute; top: 0; left: -.486%; width: 129.306%; height: auto; max-width: none; }
}
/* A shared caption owns the title/copy rhythm at every aspect ratio. */
.service-panel { --display-unit: clamp(80px,10dvh,110px); }
.service-caption { position: absolute; z-index: 3; left: 10%; right: 10%; display: grid; grid-template-columns: 40% 54%; gap: 6%; align-items: center; }
.service-panel .service-caption .service-title-art,
.service-panel .service-caption .service-live-copy { position: static; inset: auto; width: 100%; margin: 0; }
.service-caption .service-title-art svg { width: 100%; height: var(--title-height); object-fit: contain; overflow: visible; }
.service-caption .service-live-copy { font-size: clamp(16px,1.5vw,22px); line-height: 1.5; }
@media (max-width:1100px) and (orientation:portrait) {
  .service-panel { --display-unit: clamp(42px,6.8dvh,62px); }
  .service-panel .service-caption { left: 12%; right: 12%; display: flex; flex-direction: column; align-items: stretch; gap: clamp(16px,2.6dvh,26px); }
  .service-strategy .service-caption, .service-digital .service-caption { top: calc(var(--nav-height) + 20px); }
  .service-design .service-caption, .service-content .service-caption { top: auto; bottom: 4.5dvh; }
  .service-strategy .service-caption { --title-height: var(--display-unit); }
  .service-design .service-caption { --title-height: calc(var(--display-unit) * 2.15); }
  .service-digital .service-caption { --title-height: calc(var(--display-unit) * 2.05); }
  .service-content .service-caption { --title-height: calc(var(--display-unit) * 1.9); }
  .service-caption .service-live-copy { font-size: clamp(16px,2.65vw,20px); line-height: 1.5; }
  .service-caption .service-title-art svg { object-position: left center; }
}
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait) {
  .service-illustration.art-mobile { display: none; }
  .service-illustration.art-desktop { display: block; }
  .social-mobile-scene { display: none; }
  .social-desktop-scene { display: block; }
}
@media (max-height:650px) and (orientation:portrait) {
  .social-mobile-scene { display: none; }
  .social-desktop-scene { display: block; }
  .social-desktop-scene > svg { top: 30%; }
  .service-digital .service-illustration > svg { top: 57%; }
}

/* Phone compositions use cropped ink bounds, not the empty full-page artboard. */
@media (max-width:599px) and (orientation:portrait) {
  .service-panel:not(.service-intro):not(.service-content) {
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(1rem,3dvh,1.75rem);
    padding: calc(var(--nav-height) + 1.25rem) 0 1.5rem;
  }
  .service-panel:not(.service-content) .service-caption {
    position: relative; inset: auto; width: 78%; margin-inline: auto;
    gap: clamp(.85rem,2dvh,1.25rem); flex: 0 0 auto;
  }
  .service-panel .service-illustration.art-mobile {
    position: relative; inset: auto; width: 100%; height: min(40dvh,24rem);
    flex: 0 1 auto; min-height: 0;
  }
  .service-panel .service-illustration.art-mobile svg { position: static; width: 100%; height: 100%; transform: none; overflow: visible; }
  .service-strategy .service-caption, .service-digital .service-caption { order: -1; }
  .service-design .service-illustration.art-mobile { height: min(35dvh,20rem); }
  .service-digital .service-illustration.art-mobile { height: min(32dvh,18rem); }
  .service-strategy .service-illustration.art-mobile { height: min(44dvh,26rem); translate: -8vw 0; }
  .service-design .service-caption { --title-height: clamp(100px,13dvh,120px); }
  .service-panel:not(.service-content) .service-live-copy { font-size: 1rem; line-height: 1.4; }
  .service-panel:not(.service-content) .service-live-copy p { margin-block: 0 .7em; }
  .service-panel:not(.service-content) .service-live-copy p:last-child { margin-bottom: 0; }
}

/* Nav-aware service layout. */
@media (min-width: 1101px), (min-width: 600px) and (orientation: landscape) {
  /* The panel itself is the layout wrapper: nav row is reserved, never overlaid. */
  .service-panel:not(.service-intro) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(18rem, 30vw, 32rem);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 5rem);
    padding: calc(var(--nav-height) + clamp(1rem, 2.4dvh, 2rem))
      clamp(2rem, 6vw, 7rem) clamp(1.25rem, 3.5dvh, 3rem);
  }
  /* The original irregular horizon ends above the complete reading column. */
  .service-background { z-index: 0; height: 67%; }
  .service-panel .service-illustration.art-desktop {
    position: relative;
    z-index: 1;
    inset: auto;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }
  .service-panel .service-illustration.art-desktop > svg {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: none;
  }
  .service-panel .service-caption {
    position: relative;
    z-index: 3;
    inset: auto;
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    grid-template-columns: minmax(0,1fr);
    align-items: start;
    gap: clamp(.75rem, 2dvh, 1.35rem);
    width: 100%;
    max-width: 32rem;
    translate: 0 7dvh;
  }
  .service-panel .service-caption .service-title-art,
  .service-panel .service-caption .service-live-copy {
    position: static;
    inset: auto;
    width: 100%;
    margin: 0;
  }
  .service-panel .service-caption .service-title-art svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(21dvh, 12rem);
    object-fit: contain;
    object-position: left center;
  }
  .service-strategy .service-title-art { max-width: 32rem; }
  .service-strategy .service-illustration.art-desktop { margin-left: calc(-1 * clamp(2rem,6vw,7rem)); width: calc(100% + clamp(2rem,6vw,7rem)); }
  .service-design .service-title-art,
  .service-digital .service-title-art,
  .service-content .service-title-art { max-width: 27rem; }
  .service-panel .service-live-copy {
    max-width: 40ch;
    font-size: clamp(1rem, min(1.25vw, 2.45dvh), 1.32rem);
    line-height: 1.42;
  }
  .service-panel .service-live-copy p { margin-block: 0 .8em; text-wrap: pretty; }
  .service-panel .service-live-copy p:last-child { margin-bottom: 0; }
  .service-content .service-live-copy p { text-wrap: balance; }

  .service-intro-art.art-desktop {
    position: absolute;
    inset: var(--nav-height) clamp(2rem, 6vw, 7rem) 0;
    display: grid;
    place-items: center;
    width: auto;
    transform: none;
  }
  .service-intro-art.art-desktop svg {
    width: min(78.4%, calc((var(--screen-block) - var(--nav-height) - 2rem) * 1.25));
    max-height: calc(var(--screen-block) - var(--nav-height) - 2rem);
  }

  /* Keep the Social background full-bleed, but make only its cropped foreground a grid item. */
  .service-content .social-desktop-scene { display: contents; }
  .service-content .social-desktop-scene > svg:first-child {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 67%;
    transform: none;
  }
  .service-content .social-desktop-scene > svg:last-child { scale: 1.07; transform-origin: left center; }
  .service-content .social-desktop-scene > svg:first-child { height: 90%; }
  .service-content .social-desktop-scene > svg:last-child {
    position: relative;
    inset: auto;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    transform: none;
  }
}

/* Short landscape keeps the same ownership model, with typography capped by usable height. */
@media (min-width: 600px) and (orientation: landscape) and (max-height: 600px) {
  /* Cancels the legacy 640px local screen token, which breaks viewport slides. */
  .service-panel { --screen-block: 100dvh; min-block-size: 0; }
  .service-panel:not(.service-intro) {
    grid-template-columns: minmax(0, 1fr) clamp(15.5rem, 36vw, 20rem);
    gap: clamp(1rem, 3vw, 2rem);
    padding: calc(var(--nav-height) + .65rem) clamp(1.25rem, 4vw, 3rem) .65rem;
  }
  .service-panel .service-caption { gap: .45rem; margin-bottom: 0; }
  .service-panel .service-caption .service-title-art svg { max-height: min(27dvh, 6.25rem); }
  .service-panel .service-live-copy { font-size: 1rem; line-height: 1.27; }
  .service-panel .service-live-copy p { margin-bottom: .45em; }
  .service-content .social-desktop-scene > svg:first-child { height: 80%; }
}

/* Tablet portrait: art gets the flexible row; grouped title/copy gets an intrinsic row. */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .service-panel:not(.service-intro) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, min(50dvh,36rem)) auto;
    align-content: center;
    gap: clamp(1rem, 2.5dvh, 1.75rem);
    padding: calc(var(--nav-height) + 1.25rem) 8vw clamp(1.5rem, 4dvh, 2.5rem);
  }
  .service-panel .service-illustration.art-desktop {
    position: relative;
    inset: auto;
    display: grid;
    grid-row: 1;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: clip;
  }
  .service-panel .service-illustration.art-desktop > svg {
    position: static;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .service-panel .service-caption {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(11rem, 40%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    width: 100%;
  }
  .service-panel .service-caption .service-title-art,
  .service-panel .service-caption .service-live-copy { position: static; width: 100%; }
  .service-panel .service-caption .service-title-art svg { width: 100%; height: auto; max-height: 10rem; }
  .service-panel .service-live-copy { font-size: clamp(1rem, 2.3vw, 1.18rem); line-height: 1.4; }
  .service-content .social-desktop-scene { display: contents; }
  .service-content .social-desktop-scene > svg:first-child {
    position: absolute; inset: 0; width: 100%; height: 100%; transform: none;
  }
  .service-content .social-desktop-scene > svg:last-child {
    position: relative; inset: auto; grid-row: 1; width: 100%; height: 100%; transform: none;
  }
}

/* Compact portrait keeps the accepted mobile composition; only improve wrapping. */
@media (max-width: 599px) and (orientation: portrait) {
  .service-panel .service-live-copy p { text-wrap: pretty; }
  .service-content .service-live-copy p { text-wrap: balance; }
}
/*
 * Responsive service composition, loaded after the shared service/motion styles.
 * The values below describe the visible title ink and live HTML copy in the
 * approved Figma frames. No imported Figma artwork and no inner-SVG transforms.
 *
 * Contract: title SVG outputs must have a viewBox cropped to their visible ink.
 * Branding/Social already satisfy this closely. Graphic/Digital reflowed variants
 * need tight viewBoxes when their letter groups are rearranged for phone/landscape.
 */

.services .service-panel:not(.service-intro) {
  display: block;
  padding: 0;
}

.services .service-panel:not(.service-intro) .service-caption {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: auto;
  height: 100%;
  align-self: stretch;
  justify-self: stretch;
  max-width: none;
  margin: 0;
  translate: none;
  pointer-events: none;
}

.service-panel .service-caption .service-title-art {
  position: absolute;
  inset: auto;
  left: var(--t-x);
  top: var(--t-y);
  width: var(--t-w);
  max-width: none;
  margin: 0;
}

.service-panel .service-caption .service-title-art > svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
  object-fit: initial;
  object-position: initial;
}

.service-panel .service-caption .service-live-copy {
  position: absolute;
  inset: auto;
  left: var(--c-x);
  top: var(--c-y);
  width: max(var(--c1-w), var(--c2-w));
  max-width: none;
  margin: 0;
  font-size: var(--c-size);
  line-height: 1.4;
  pointer-events: auto;
}

.services .service-panel:not(.service-intro) .service-live-copy p {
  width: var(--c1-w);
  margin: 0;
  text-wrap: pretty;
}

.services .service-panel:not(.service-intro) .service-live-copy p + p {
  width: var(--c2-w);
  margin-top: var(--c-gap);
  text-wrap: balance;
}

.service-content .service-live-copy p { text-wrap: balance; }

/* The reflowed one-line assets exist only for the short-landscape guide. */
.service-title-art.art-landscape { display: none; }

/* Phone family. Exact at 393 x 852; viewport-relative values remain fluid. */
@media (max-width: 599px) and (orientation: portrait) {
  .service-strategy { --t-x: 12.7226vw; --t-y: calc(var(--stage-unit) * 15.8451); --t-w: 54.7977vw; --c-x: 12.7226vw; --c-y: calc(var(--stage-unit) * 71.9484); --c1-w: 78.1170vw; --c2-w: 68.4478vw; --c-size: clamp(16px, min(5.0891vw, calc(var(--stage-unit) * 2.3474)), 20px); --c-gap: clamp(12px, calc(var(--stage-unit) * 1.9953), 17px); }
  .service-design   { --t-x: 13.4860vw; --t-y: calc(var(--stage-unit) * 15.9624); --t-w: 46.5394vw; --c-x: 12.7226vw; --c-y: calc(var(--stage-unit) * 71.8310); --c1-w: 74.5547vw; --c2-w: 74.5547vw; --c-size: clamp(16px, min(5.0891vw, calc(var(--stage-unit) * 2.3474)), 20px); --c-gap: clamp(8px, calc(var(--stage-unit) * 1.1737), 10px); }
  .service-digital  { --t-x: 10.9415vw; --t-y: calc(var(--stage-unit) * 16.2447); --t-w: 44.7837vw; --c-x: 11.7048vw; --c-y: calc(var(--stage-unit) * 70.3052); --c1-w: 66.1578vw; --c2-w: 66.1578vw; --c-size: clamp(16px, min(5.0891vw, calc(var(--stage-unit) * 2.3474)), 20px); --c-gap: clamp(12px, calc(var(--stage-unit) * 1.9953), 17px); }
  .service-content  { --t-x: 10.1781vw; --t-y: calc(var(--stage-unit) * 17.1362); --t-w: 72.6972vw; --c-x: 11.9593vw; --c-y: calc(var(--stage-unit) * 70.1878); --c1-w: 63.3588vw; --c2-w: 79.3893vw; --c-size: clamp(16px, min(5.0891vw, calc(var(--stage-unit) * 2.3474)), 20px); --c-gap: clamp(30px, calc(var(--stage-unit) * 5.3991), 46px); }
}

/* Tablet portrait. Exact at 768 x 1024. Art is still the existing desktop rig. */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .service-strategy { --t-x: 8.1068vw; --t-y: calc(var(--stage-unit) * 16.0156); --t-w: 33.4902vw; --c-x: 48.5677vw; --c-y: calc(var(--stage-unit) * 16.0156); --c1-w: 44.7917vw; --c2-w: 46.4063vw; --c-size: clamp(16px, min(2.7344vw, calc(var(--stage-unit) * 2.0508)), 21px); --c-gap: clamp(16px, calc(var(--stage-unit) * 2.2461), 23px); }
  .service-design   { --t-x: 10.9375vw; --t-y: calc(var(--stage-unit) * 72.1875); --t-w: 27.4870vw; --c-x: 47.2786vw; --c-y: calc(var(--stage-unit) * 71.7773); --c1-w: 46.4063vw; --c2-w: 46.4063vw; --c-size: clamp(16px, min(2.8646vw, calc(var(--stage-unit) * 2.1484)), 22px); --c-gap: clamp(16px, calc(var(--stage-unit) * 2.2461), 23px); }
  .service-digital  { --t-x: 8.8542vw; --t-y: calc(var(--stage-unit) * 16.1133); --t-w: 27.9688vw; --c-x: 44.7917vw; --c-y: calc(var(--stage-unit) * 16.1133); --c1-w: 43.7500vw; --c2-w: 43.7500vw; --c-size: clamp(16px, min(2.8646vw, calc(var(--stage-unit) * 2.1484)), 22px); --c-gap: clamp(18px, calc(var(--stage-unit) * 2.7344), 28px); }
  .service-content  { --t-x: 7.0313vw; --t-y: calc(var(--stage-unit) * 73.5352); --t-w: 38.1510vw; --c-x: 49.6094vw; --c-y: calc(var(--stage-unit) * 72.7539); --c1-w: 41.0156vw; --c2-w: 41.0156vw; --c-size: clamp(16px, min(2.8646vw, calc(var(--stage-unit) * 2.1484)), 22px); --c-gap: clamp(20px, calc(var(--stage-unit) * 3.4180), 35px); }
}

/* Broad desktop fallback below the first exact desktop reference. */
@media (min-width: 600px) and (orientation: landscape), (min-width: 1101px) {
  .service-strategy { --t-x: 62.4141vw; --t-y: calc(var(--stage-unit) * 49.4250); --t-w: 24.6719vw; --c-x: 62.4141vw; --c-y: calc(var(--stage-unit) * 63.9250); --c1-w: 31.2813vw; --c2-w: 33.1875vw; --c-size: clamp(15px, 1.9012vw, 24.3357px); --c-gap: clamp(14px, 2.5547vw, 32.7px); }
  .service-design   { --t-x: 62.5000vw; --t-y: calc(var(--stage-unit) * 19.2500); --t-w: 22.9609vw; --c-x: 63.6719vw; --c-y: calc(var(--stage-unit) * 43.1250); --c1-w: 30vw; --c2-w: 30vw; --c-size: clamp(15px, 1.875vw, 24px); --c-gap: clamp(12px, 2.2813vw, 29.2px); }
  .service-digital  { --t-x: 63.9844vw; --t-y: calc(var(--stage-unit) * 38.6250); --t-w: 21.5156vw; --c-x: 63.9844vw; --c-y: calc(var(--stage-unit) * 63.3750); --c1-w: 30vw; --c2-w: 30vw; --c-size: clamp(15px, 1.875vw, 24px); --c-gap: clamp(4px, 2vw, 25.6px); }
  .service-content  { --t-x: 63.2188vw; --t-y: calc(var(--stage-unit) * 48.8625); --t-w: 28.8125vw; --c-x: 63.2031vw; --c-y: calc(var(--stage-unit) * 70.4375); --c1-w: 30.1563vw; --c2-w: 30.1563vw; --c-size: clamp(15px, 1.7188vw, 22px); --c-gap: clamp(13px, 2.375vw, 30.4px); }
}

/* Exact short-landscape family at 844 x 390. */
@media (orientation: landscape) and (max-height: 600px) {
  .service-design .service-title-art.art-desktop,
  .service-digital .service-title-art.art-desktop { display: none; }
  .service-design .service-title-art.art-landscape,
  .service-digital .service-title-art.art-landscape { display: block; }
  .service-strategy { --t-x: 57.6659vw; --t-y: calc(var(--stage-unit) * 42.1795); --t-w: 23.9229vw; --c-x: 57.7014vw; --c-y: calc(var(--stage-unit) * 61.2821); --c1-w: 31.0427vw; --c2-w: 31.0427vw; --c-size: clamp(14px, calc(var(--stage-unit) * 3.8252), 15px); --c-gap: 14px; }
  .service-design   { --t-x: 55.3318vw; --t-y: calc(var(--stage-unit) * 26.4103); --t-w: 34.8104vw; --c-x: 55.3318vw; --c-y: calc(var(--stage-unit) * 43.5897); --c1-w: 36.2322vw; --c2-w: 36.2322vw; --c-size: clamp(14px, calc(var(--stage-unit) * 3.8462), 15px); --c-gap: 13px; }
  .service-digital  { --t-x: 55.6872vw; --t-y: calc(var(--stage-unit) * 44.6154); --t-w: 35.4265vw; --c-x: 55.6872vw; --c-y: calc(var(--stage-unit) * 61.7949); --c1-w: 39.6919vw; --c2-w: 38.8626vw; --c-size: clamp(14px, calc(var(--stage-unit) * 3.8462), 15px); --c-gap: 4px; }
  .service-content  { --t-x: 58.5308vw; --t-y: calc(var(--stage-unit) * 40); --t-w: 27.3223vw; --c-x: 58.5308vw; --c-y: calc(var(--stage-unit) * 65.5577); --c1-w: 36.2365vw; --c2-w: 36.2365vw; --c-size: clamp(14px, calc(var(--stage-unit) * 3.8462), 15px); --c-gap: 13px; }
  .service-content .service-live-copy { line-height: 1.3547; }
}

/* Prevent undefined coordinates on very small rotated phones. */
@media (max-width: 599px) and (orientation: landscape) {
  .service-strategy { --t-x: 57.6659vw; --t-y: calc(var(--stage-unit) * 42.1795); --t-w: 23.9229vw; --c-x: 57.7014vw; --c-y: calc(var(--stage-unit) * 61.2821); --c1-w: 31.0427vw; --c2-w: 31.0427vw; --c-size: 15px; --c-gap: 10px; }
  .service-design   { --t-x: 55.3318vw; --t-y: calc(var(--stage-unit) * 26.4103); --t-w: 34.8104vw; --c-x: 55.3318vw; --c-y: calc(var(--stage-unit) * 43.5897); --c1-w: 36.2322vw; --c2-w: 36.2322vw; --c-size: 15px; --c-gap: 9px; }
  .service-digital  { --t-x: 55.6872vw; --t-y: calc(var(--stage-unit) * 44.6154); --t-w: 35.4265vw; --c-x: 55.6872vw; --c-y: calc(var(--stage-unit) * 61.7949); --c1-w: 39.6919vw; --c2-w: 38.8626vw; --c-size: 15px; --c-gap: 4px; }
  .service-content  { --t-x: 58.5308vw; --t-y: calc(var(--stage-unit) * 40); --t-w: 27.3223vw; --c-x: 58.5308vw; --c-y: calc(var(--stage-unit) * 65.5577); --c1-w: 36.2365vw; --c2-w: 36.2365vw; --c-size: 15px; --c-gap: 9px; }
}

/* Exact interpolation: 1280 x 800 to 1512 x 982. */
@media (min-width: 1280px) and (max-width: 1512px) and (min-height: 601px) {
  .service-strategy { --t-x:calc(-135.1690px + 72.974138vw); --t-y:calc(calc(var(--stage-unit) * 49.425) - 85.7738px + 6.701078vw); --t-w:calc(49.3172px + 20.818966vw); --c-x:calc(-135.1690px + 72.974138vw); --c-y:calc(calc(var(--stage-unit) * 63.925) - 37.829px + 2.955388vw); --c1-w:calc(62.1931px + 26.422414vw); --c2-w:calc(66.7310px + 27.974138vw); --c-size:min(calc(3.8px + 1.604353vw), calc(calc(var(--stage-unit) * 3.041962) + 10.0098px - .782014vw)); --c-gap:calc(5.1138px + 2.155172vw); }
  .service-design   { --t-x:calc(100.4138px + 54.655172vw); --t-y:calc(calc(var(--stage-unit) * 19.25) + 88.469px - 6.911638vw); --t-w:calc(8.1069px + 22.327586vw); --c-x:calc(101.0690px + 55.775862vw); --c-y:calc(calc(var(--stage-unit) * 43.125) + 142.8276px - 11.158405vw); --c1-w:calc(11.0345px + 29.137931vw); --c2-w:calc(11.0345px + 29.137931vw); --c-size:min(calc(.6847px + 1.821509vw), calc(calc(var(--stage-unit) * 3) + 6.8088px - .53194vw)); --c-gap:calc(.5103px + 2.241379vw); }
  .service-digital  { --t-x:calc(-5.2759px + 64.396552vw); --t-y:calc(calc(var(--stage-unit) * 38.625) - 59.0483px + 4.613147vw); --t-w:calc(3.4000px + 21.25vw); --c-x:calc(-5.2759px + 64.396552vw); --c-y:calc(calc(var(--stage-unit) * 63.375) - 6.3862px + .498922vw); --c1-w:calc(4.4138px + 29.655172vw); --c2-w:calc(4.4138px + 29.655172vw); --c-size:min(calc(.2632px + 1.85444vw), calc(calc(var(--stage-unit) * 3) + 6.3873px - .499009vw)); --c-gap:calc(.2207px + 1.982759vw); }
  .service-content  { --t-x:calc(75.4069px + 57.327586vw); --t-y:calc(calc(var(--stage-unit) * 48.8625) + 9.5434px - .745582vw); --t-w:calc(-84.7172px + 35.431034vw); --c-x:calc(75.2069px + 57.327586vw); --c-y:calc(calc(var(--stage-unit) * 70.4375) + 14.3241px - 1.119073vw); --c1-w:calc(-88.4828px + 37.068966vw); --c2-w:calc(-88.4828px + 37.068966vw); --c-size:min(calc(-11.1034px + 2.586207vw), calc(calc(var(--stage-unit) * 2.75) - 5.4897px + .428879vw)); --c-gap:calc(9.9862px + 1.594828vw); }
}

/* Exact interpolation: 1512 x 982 to 1920 x 1080. */
@media (min-width: 1512px) and (max-width: 1920px) and (min-height: 601px) {
  .service-strategy { --t-x:calc(-153.2px + 74.166667vw); --t-y:calc(calc(var(--stage-unit) * 51.008147) + 25.1555px - 1.663721vw); --t-w:calc(104.6882px + 17.156863vw); --c-x:calc(-139.1176px + 73.235294vw); --c-y:calc(calc(var(--stage-unit) * 64.623218) - 18.786px + 1.242462vw); --c1-w:calc(219.7059px + 16.004902vw); --c2-w:calc(295.8824px + 12.818627vw); --c-size:min(calc(20.8602px + .476029vw), calc(calc(var(--stage-unit) * 2.85721) + 3.1791px - .210261vw)); --c-gap:calc(25.4706px + .808824vw); }
  .service-design   { --t-x:calc(-156.0588px + 71.617647vw); --t-y:calc(calc(var(--stage-unit) * 17.617108) - 36.0776px + 2.386087vw); --t-w:calc(22.9176px + 21.348039vw); --c-x:calc(-156.2471px + 72.794118vw); --c-y:calc(calc(var(--stage-unit) * 40.488798) - 173.8836px + 11.50024vw); --c1-w:calc(29.8706px + 27.892157vw); --c2-w:calc(29.8706px + 27.892157vw); --c-size:min(calc(21.6513px + .434828vw), calc(calc(var(--stage-unit) * 2.874328) + 3.8643px - .255574vw)); --c-gap:calc(30.6941px + .245098vw); }
  .service-digital  { --t-x:calc(-204.8824px + 77.598039vw); --t-y:calc(calc(var(--stage-unit) * 39.714868) + 199.8233px - 13.215826vw); --t-w:calc(-5.8647px + 21.862745vw); --c-x:calc(-156.7059px + 74.411765vw); --c-y:calc(calc(var(--stage-unit) * 63.492872) - 1.0265px + .067889vw); --c1-w:calc(270.4706px + 12.058824vw); --c2-w:calc(340.8824px + 7.401961vw); --c-size:min(calc(22.0108px + .416103vw), calc(calc(var(--stage-unit) * 2.882108) + 4.1757px - .276168vw)); --c-gap:calc(-9.8235px + 2.647059vw); }
  .service-content  { --t-x:calc(-255.1706px + 79.191176vw); --t-y:calc(calc(var(--stage-unit) * 48.686354) - 15.1473px + 1.001807vw); --t-w:calc(269.7824px + 11.985294vw); --c-x:calc(-255px + 79.166667vw); --c-y:calc(calc(var(--stage-unit) * 70.173116) - 21.9772px + 1.453516vw); --c1-w:calc(282.2588px + 12.54902vw); --c2-w:calc(282.2588px + 12.54902vw); --c-size:min(calc(21.2571px + .445956vw), calc(calc(var(--stage-unit) * 2.851324) + 3.6125px - .238921vw)); --c-gap:calc(7.7882px + 1.740196vw); }
}

/* Cap the designed reading column beyond the widest supplied frame. */
@media (min-width: 1920.01px) and (min-height: 601px) {
  .service-strategy { --t-x:calc(50vw + 310.8px);--t-y:calc(var(--stage-unit) * 50.3796);--t-w:434.1px;--c-x:calc(50vw + 307px);--c-y:calc(var(--stage-unit) * 65.0926);--c1-w:527px;--c2-w:542px;--c-size:min(30px,calc(var(--stage-unit) * 2.7778));--c-gap:41px; }
  .service-design   { --t-x:calc(50vw + 259px);--t-y:calc(var(--stage-unit) * 18.5185);--t-w:432.8px;--c-x:calc(50vw + 281.4px);--c-y:calc(var(--stage-unit) * 44.8333);--c1-w:565.4px;--c2-w:565.4px;--c-size:min(30px,calc(var(--stage-unit) * 2.7778));--c-gap:35px; }
  .service-digital  { --t-x:calc(50vw + 325px);--t-y:calc(var(--stage-unit) * 34.7222);--t-w:413.9px;--c-x:calc(50vw + 312px);--c-y:calc(var(--stage-unit) * 63.5185);--c1-w:502px;--c2-w:483px;--c-size:min(30px,calc(var(--stage-unit) * 2.7778));--c-gap:41px; }
  .service-content  { --t-x:calc(50vw + 305.3px);--t-y:calc(var(--stage-unit) * 49.0648);--t-w:499.9px;--c-x:calc(50vw + 305px);--c-y:calc(var(--stage-unit) * 70.7222);--c1-w:523.2px;--c2-w:523.2px;--c-size:min(29.82px,calc(var(--stage-unit) * 2.7611));--c-gap:41px; }
}

/* Existing animated illustrations: only these static outer wrappers move/scale. */
.services .service-panel .service-background {
  position: absolute;
  z-index: 0;
  inset: auto;
  left: var(--bg-x);
  top: var(--bg-y);
  width: var(--bg-w);
  height: var(--bg-h);
  margin: 0;
  transform: none;
}

.services .service-panel .service-background > img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill;
}

@media (max-width: 1100px) and (orientation: portrait) {
  .services .service-panel { --bg-x:0;--bg-y:0;--bg-w:100vw;--bg-h:calc(var(--stage-unit) * 100); }
}

@media (orientation: landscape) and (max-height: 600px) {
  .services .service-strategy,.services .service-digital { --bg-x:0;--bg-y:0;--bg-w:100vw;--bg-h:calc(var(--stage-unit) * 66.9992); }
  .services .service-design { --bg-x:0;--bg-y:-calc(var(--stage-unit) * 10.2564);--bg-w:100vw;--bg-h:calc(var(--stage-unit) * 119.5633); }
}

@media (min-width: 1101px) and (max-width: 1280px) and (min-height: 601px) {
  .services .service-strategy { --bg-x:-8.5156vw;--bg-y:0;--bg-w:108.5156vw;--bg-h:calc(var(--stage-unit) * 108.3092); }
  .services .service-design { --bg-x:-1.875vw;--bg-y:-calc(var(--stage-unit) * 7.5424);--bg-w:104.5782vw;--bg-h:calc(var(--stage-unit) * 86.0935); }
  .services .service-digital { --bg-x:0;--bg-y:0;--bg-w:100vw;--bg-h:calc(var(--stage-unit) * 67); }
}

@media (min-width: 1280px) and (max-width: 1512px) and (min-height: 601px) {
  .services .service-strategy { --bg-x:calc(-243.305px + 10.49259vw);--bg-y:calc(-6.515px + .50901vw);--bg-w:calc(-273.424px + 129.87685vw);--bg-h:calc(calc(var(--stage-unit) * 108.3092) + 285.669px - 22.31787vw); }
  .services .service-design { --bg-x:calc(76.961px - 7.88759vw);--bg-y:calc(-calc(var(--stage-unit) * 7.5424) - 94.157px + 7.35603vw);--bg-w:calc(38.193px + 101.59431vw);--bg-h:calc(calc(var(--stage-unit) * 86.0935) + 195.401px - 15.26571vw); }
  .services .service-digital { --bg-x:calc(-14.033px + 1.09634vw);--bg-y:calc(-12.857px + 1.00444vw);--bg-w:calc(14.032px + 98.90375vw);--bg-h:calc(calc(var(--stage-unit) * 67) + 142.648px - 11.1444vw); }
}

@media (min-width: 1512px) and (max-width: 1920px) and (min-height: 601px) {
  .services .service-strategy { --bg-x:calc(-398.387px + 20.74931vw);--bg-y:calc(calc(var(--stage-unit) * .1203) + 4.813px - .31832vw);--bg-w:calc(839.126px + 56.29551vw);--bg-h:calc(calc(var(--stage-unit) * 103.0366) + 121.534px - 8.03795vw); }
  .services .service-design { --bg-x:calc(-40.459px - .12169vw);--bg-y:calc(-calc(var(--stage-unit) * 5.8045) + 527.39px - 34.8803vw);--bg-w:calc(-76.658px + 109.19027vw);--bg-h:calc(calc(var(--stage-unit) * 82.487) - 549.892px + 36.3685vw); }
  .services .service-digital { --bg-x:calc(-14.482px + 1.12603vw);--bg-y:calc(calc(var(--stage-unit) * .2373) - 14.737px + .97469vw);--bg-w:calc(-26.556px + 101.58811vw);--bg-h:calc(calc(var(--stage-unit) * 64.3671) - 409.439px + 27.0793vw); }
}

@media (min-width: 1920.01px) and (min-height: 601px) {
  .services .service-strategy { --bg-x:calc(50vw - 960px);--bg-y:0;--bg-w:1920px;--bg-h:calc(var(--stage-unit) * 100); }
  .services .service-design { --bg-x:calc(50vw - 1002.796px);--bg-y:-calc(var(--stage-unit) * 18.9815);--bg-w:2019.796px;--bg-h:calc(var(--stage-unit) * 96.2262); }
  .services .service-digital { --bg-x:calc(50vw - 952.862px);--bg-y:calc(var(--stage-unit) * .6055);--bg-w:1923.936px;--bg-h:calc(var(--stage-unit) * 74.5971); }
}

.services .service-panel .service-illustration.art-desktop,
.services .service-panel .service-illustration.art-mobile {
  position: absolute;
  z-index: 1;
  inset: auto;
  left: var(--a-x);
  top: var(--a-y);
  width: min(var(--a-w), var(--a-block-cap, 99999px));
  height: auto;
  aspect-ratio: var(--a-ratio);
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: visible;
  translate: none;
  transform: none;
  scale: 1;
}

.services .service-panel .service-illustration.art-desktop > svg,
.services .service-panel .service-illustration.art-mobile > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  transform: none;
}

.services .service-strategy { --a-ratio: 1408 / 990; }
.services .service-design   { --a-ratio: 1232 / 784; }
.services .service-digital  { --a-ratio: 1044 / 704; }

@media (max-width: 599px) and (orientation: portrait) {
  .services .service-strategy { --a-ratio: 393 / 510; --a-x: 7.3990vw; --a-y: calc(var(--stage-unit) * 24.1545); --a-w: 85.0369vw; --a-block-cap: calc(var(--stage-unit) * 39.2248); }
  .services .service-design   { --a-ratio: 393 / 375; --a-x: 14.7417vw; --a-y: calc(var(--stage-unit) * 29.4782); --a-w: 86.5936vw; --a-block-cap: calc(var(--stage-unit) * 39.9428); }
  .services .service-digital  { --a-ratio: 393 / 285; --a-x: .8504vw; --a-y: calc(var(--stage-unit) * 36.2508); --a-w: 95.5422vw; --a-block-cap: calc(var(--stage-unit) * 44.0705); }
  .services .social-mobile-scene {
    position: absolute; inset: auto; left: -24.6819vw; top: calc(var(--stage-unit) * 2.4648);
    width: 255.5372vw; height: calc(var(--stage-unit) * 64.9553); aspect-ratio: auto;
    margin: 0; overflow: visible; translate: none; transform: none; scale: 1;
  }
  .services .social-mobile-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; }
}

@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .services .service-strategy { --a-x: -4.5393vw; --a-y: calc(var(--stage-unit) * 38.8355); --a-w: 112.423vw; --a-block-cap: calc(var(--stage-unit) * 84.3172); }
  .services .service-design   { --a-x: -10.9253vw; --a-y: calc(var(--stage-unit) * 13.8496); --a-w: 104.3124vw; --a-block-cap: calc(var(--stage-unit) * 78.2343); }
  .services .service-digital  { --a-x: .0844vw; --a-y: calc(var(--stage-unit) * 40.5514); --a-w: 101.2655vw; --a-block-cap: calc(var(--stage-unit) * 75.9491); }
  .services .service-content .social-desktop-scene { position: absolute; inset: 0; display: block; }
  .services .service-content .social-desktop-scene > svg:last-child {
    position: absolute; inset: auto; left: -6.7708vw; top: calc(var(--stage-unit) * 10.0586);
    width: 113.2126vw; height: calc(var(--stage-unit) * 56.2000); max-width: none; max-height: none;
    margin: 0; overflow: visible; translate: none; transform: none; scale: 1;
  }
}

/* Desktop artwork interpolation; width has a viewport-height cap for short screens. */
@media (min-width: 600px) and (orientation: landscape), (min-width: 1101px) {
  .services .service-strategy { --a-x: -21.9884vw; --a-y: calc(var(--stage-unit) * 10.7744); --a-w: 83.6427vw; --a-block-cap: calc(var(--stage-unit) * 133.8284); }
  .services .service-design   { --a-x: -12.5616vw; --a-y: calc(var(--stage-unit) * 18.3191); --a-w: 73.8551vw; --a-block-cap: calc(var(--stage-unit) * 118.1681); }
  .services .service-digital  { --a-x: -1.0559vw; --a-y: calc(var(--stage-unit) * 15.1699); --a-w: 63.1704vw; --a-block-cap: calc(var(--stage-unit) * 101.0726); }
}

@media (orientation: landscape) and (max-height: 600px) {
  .services .service-strategy { --a-x: -14.3643vw; --a-y: calc(var(--stage-unit) * 3.017); --a-w: 71.4027vw; --a-block-cap: calc(var(--stage-unit) * 154.5228); }
  .services .service-design   { --a-x: -5.1826vw; --a-y: calc(var(--stage-unit) * 15.5144); --a-w: 57.0560vw; --a-block-cap: calc(var(--stage-unit) * 123.4751); }
  .services .service-digital  { --a-x: 1.7028vw; --a-y: calc(var(--stage-unit) * 17.4951); --a-w: 52.9361vw; --a-block-cap: calc(var(--stage-unit) * 114.5592); }
  .services .service-content .social-desktop-scene { position: absolute; inset: 0; display: block; }
  .services .service-content .social-desktop-scene > svg:last-child {
    position: absolute; inset: auto; left: 4vw; top: calc(var(--stage-unit) * 12.0913);
    width: 56.7119vw; height: calc(var(--stage-unit) * 88.1250); max-width: none; max-height: none;
    margin: 0; overflow: visible; translate: none; transform: none; scale: 1;
  }
}

@media (min-width: 1280px) and (max-width: 1512px) and (min-height: 601px) {
  .services .service-strategy { --a-x:calc(-340.0672px + 4.57931vw); --a-y:calc(calc(var(--stage-unit) * 10.774375) - 41.7911px + 3.26493vw); --a-w:calc(167.1732px + 70.582328vw); --a-block-cap:calc(var(--stage-unit) * 133.8284); }
  .services .service-design   { --a-x:calc(73.0548px - 18.268966vw); --a-y:calc(calc(var(--stage-unit) * 18.319125) - 35.4659px + 2.770773vw); --a-w:calc(26.9836px + 71.746983vw); --a-block-cap:calc(var(--stage-unit) * 118.1681); }
  .services .service-digital  { --a-x:calc(-14.1826px + .052155vw); --a-y:calc(calc(var(--stage-unit) * 15.169875) + 19.4437px - 1.51904vw); --a-w:calc(8.8624px + 62.478017vw); --a-block-cap:calc(var(--stage-unit) * 101.0726); }
}

@media (min-width: 1512px) and (max-width: 1920px) and (min-height: 601px) {
  .services .service-strategy { --a-x:calc(-302.7394px + 2.110539vw); --a-y:calc(calc(var(--stage-unit) * 11.545723) + 35.3608px - 2.338679vw); --a-w:calc(354.0716px + 58.221324vw); --a-block-cap:calc(var(--stage-unit) * 136.2890); }
  .services .service-design   { --a-x:calc(-386.6169px + 12.132598vw); --a-y:calc(calc(var(--stage-unit) * 18.973727) + 261.2286px - 17.277023vw); --a-w:calc(261.4388px + 56.240686vw); --a-block-cap:calc(var(--stage-unit) * 124.1907); }
  .services .service-digital  { --a-x:calc(-345.2446px + 21.947794vw); --a-y:calc(calc(var(--stage-unit) * 14.810998) + 171.1294px - 11.318083vw); --a-w:calc(127.7371px + 54.615931vw); --a-block-cap:calc(var(--stage-unit) * 108.9225); }
}

@media (min-width: 1920.01px) and (min-height: 601px) {
  .services .service-strategy { --a-x:calc(50vw - 1222.217px); --a-y:calc(var(--stage-unit) * 10.6622); --a-w:1471.921px; --a-block-cap:calc(var(--stage-unit) * 136.2890); }
  .services .service-design   { --a-x:calc(50vw - 1113.671px); --a-y:calc(var(--stage-unit) * 12.4469); --a-w:1341.26px; --a-block-cap:calc(var(--stage-unit) * 124.1907); }
  .services .service-digital  { --a-x:calc(50vw - 883.847px); --a-y:calc(var(--stage-unit) * 10.5353); --a-w:1176.363px; --a-block-cap:calc(var(--stage-unit) * 108.9225); }
}

/* Social foreground uses its dedicated authored wrapper; its background stays separate. */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .services .service-content .social-desktop-scene > svg:first-child {
    position:absolute;inset:0;width:100vw;height:calc(var(--stage-unit) * 100);max-width:none;transform:none;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .services .service-content .social-desktop-scene > svg:first-child {
    position:absolute;inset:auto;left:0;top:0;width:100vw;height:calc(var(--stage-unit) * 80);max-width:none;transform:none;
  }
}

@media (min-width: 1101px) and (min-height: 601px) {
  .services .service-content .social-desktop-scene { position: absolute; inset: 0; display: block; }
  .services .service-content .social-desktop-scene > svg:first-child {
    position:absolute;inset:auto;left:var(--social-bg-x);top:var(--social-bg-y);
    width:var(--social-bg-w);height:var(--social-bg-h);max-width:none;transform:none;
  }
  .services .service-content .social-desktop-scene > svg:last-child {
    position: absolute; inset: auto; left: var(--social-a-x); top: var(--social-a-y);
    width: var(--social-a-w); height: var(--social-a-h); max-width: none; max-height: none;
    margin: 0; overflow: visible; translate: none; transform: none; scale: 1;
  }
}

@media (min-width: 1101px) and (max-width: 1280px) and (min-height: 601px) {
  .services .service-content { --social-a-x:-7.6563vw;--social-a-y:calc(var(--stage-unit) * 9.875);--social-a-w:75.6706vw;--social-a-h:calc(var(--stage-unit) * 82.5309);--social-bg-x:-7.6563vw;--social-bg-y:0;--social-bg-w:107.6563vw;--social-bg-h:calc(var(--stage-unit) * 92.4059); }
}

@media (min-width: 1280px) and (max-width: 1512px) and (min-height: 601px) {
  .services .service-content { --social-a-x:calc(179.6828px - 21.693966vw);--social-a-y:calc(calc(var(--stage-unit) * 9.875) + 2.0221px - .157974vw);--social-a-w:calc(-222.3898px + 93.044828vw);--social-a-h:calc(-151.5992px + 63.980172vw);--social-bg-x:calc(179.681px - 21.69379vw);--social-bg-y:0;--social-bg-w:calc(-316.394px + 132.37453vw);--social-bg-h:calc(calc(var(--stage-unit) * 92.4059) + 18.902px - 1.4767vw); }
}

@media (min-width: 1512px) and (max-width: 1920px) and (min-height: 601px) {
  .services .service-content { --social-a-x:calc(-90.2588px - 3.840686vw);--social-a-y:calc(calc(var(--stage-unit) * 9.837678) - 25.0261px + 1.655166vw);--social-a-w:calc(-230.6765px + 93.592892vw);--social-a-h:calc(282.9547px + 34.685784vw);--social-bg-x:calc(-90.257px - 3.84078vw);--social-bg-y:calc(-15.412px + 1.01929vw);--social-bg-w:calc(206.865px + 97.76743vw);--social-bg-h:calc(calc(var(--stage-unit) * 92.057) - 316.671px + 20.94383vw); }
}

@media (min-width: 1920.01px) and (min-height: 601px) {
  .services .service-content { --social-a-x:calc(50vw - 1124px);--social-a-y:calc(var(--stage-unit) * 10.463);--social-a-w:1566.307px;--social-a-h:949.047px;--social-bg-x:calc(50vw - 1124px);--social-bg-y:calc(var(--stage-unit) * .3851);--social-bg-w:2084px;--social-bg-h:calc(var(--stage-unit) * 99.9691); }
}

/* Accessibility: preserve natural text height and never crop inside the copy box. */
.service-panel .service-live-copy,
.service-panel .service-live-copy p { min-height: 0; height: auto; overflow: visible; }
/* Horizon geometry measured from visible Figma shapes, not their empty groups. */
.services .service-panel .service-background { inset:0; width:100%; height:100%; transform:none; background:var(--hot-pink); clip-path:polygon(0 0,100% 0,100% var(--horizon-right),0 var(--horizon-left)); }
.services .service-panel .service-background img { display:none; }
@media (max-width:599px) and (orientation:portrait) {
 .service-strategy { --horizon-left:calc(var(--stage-unit) * 32.68200); --horizon-right:calc(var(--stage-unit) * 38.38069); }
 .service-design { --horizon-left:calc(var(--stage-unit) * 51.64319); --horizon-right:calc(var(--stage-unit) * 51.64319); }
 .service-digital { --horizon-left:calc(var(--stage-unit) * 51.88640); --horizon-right:calc(var(--stage-unit) * 49.03898); }
}
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait) {
 .service-strategy { --horizon-left:calc(var(--stage-unit) * 47.94217); --horizon-right:calc(var(--stage-unit) * 53.64086); }
 .service-design { --horizon-left:calc(var(--stage-unit) * 50.00000); --horizon-right:calc(var(--stage-unit) * 50.00000); }
 .service-digital { --horizon-left:calc(var(--stage-unit) * 76.71286); --horizon-right:calc(var(--stage-unit) * 73.86544); }
}
@media (min-width:1101px), (orientation:landscape) {
 .service-strategy { --horizon-left:calc(var(--stage-unit) * 24.70770); --horizon-right:calc(var(--stage-unit) * 43.07468); }
 .service-design { --horizon-left:calc(var(--stage-unit) * 72.56523); --horizon-right:calc(var(--stage-unit) * 78.50083); }
 .service-digital { --horizon-left:calc(var(--stage-unit) * 32.66599); --horizon-right:calc(var(--stage-unit) * 30.75822); }
}
@media (min-width:1280px) and (max-width:1512px) and (min-height:601px) {
 .service-strategy { --horizon-left:calc(calc(var(--stage-unit) * 24.707696) + -161.617869px + 12.626396vw); --horizon-right:calc(calc(var(--stage-unit) * 43.074676) + -124.123905px + 9.697180vw); }
 .service-design { --horizon-left:calc(calc(var(--stage-unit) * 72.565234) + 84.778128px + -6.623291vw); --horizon-right:calc(calc(var(--stage-unit) * 78.500826) + 96.894923px + -7.569916vw); }
 .service-digital { --horizon-left:calc(calc(var(--stage-unit) * 32.665991) + 56.523915px + -4.415931vw); --horizon-right:calc(calc(var(--stage-unit) * 30.758221) + 52.629437px + -4.111675vw); }
}
@media (min-width:1512px) and (max-width:1920px) and (min-height:601px) {
 .service-strategy { --horizon-left:calc(calc(var(--stage-unit) * 27.690714) + 218.294852px + -14.437490vw); --horizon-right:calc(calc(var(--stage-unit) * 45.365659) + 108.918126px + -7.203580vw); }
 .service-design { --horizon-left:calc(calc(var(--stage-unit) * 71.000465) + 16.953785px + -1.121282vw); --horizon-right:calc(calc(var(--stage-unit) * 76.712414) + -18.393101px + 1.216475vw); }
 .service-digital { --horizon-left:calc(calc(var(--stage-unit) * 31.622716) + 214.417748px + -14.181068vw); --horizon-right:calc(calc(var(--stage-unit) * 29.786827) + 225.778656px + -14.932451vw); }
}
@media (min-width:1920px) and (min-height:601px) {
 .service-strategy { --horizon-left:calc(var(--stage-unit) * 22.23655); --horizon-right:calc(var(--stage-unit) * 42.64431); }
 .service-design { --horizon-left:calc(var(--stage-unit) * 70.57687); --horizon-right:calc(var(--stage-unit) * 77.17197); }
 .service-digital { --horizon-left:calc(var(--stage-unit) * 26.26542); --horizon-right:calc(var(--stage-unit) * 24.14568); }
}
@media (orientation:landscape) and (max-height:600px) {
 .service-strategy { --horizon-left:calc(var(--stage-unit) * 24.92060); --horizon-right:calc(var(--stage-unit) * 36.56064); }
 .service-design { --horizon-left:calc(var(--stage-unit) * 79.18125); --horizon-right:calc(var(--stage-unit) * 79.18125); }
 .service-digital { --horizon-left:calc(var(--stage-unit) * 37.03702); --horizon-right:calc(var(--stage-unit) * 31.22095); }
}
/* The original cutter has its own layout slot, as in the approved compositions. */
.services .service-cutter { position:absolute;left:var(--cut-x);top:var(--cut-y);width:min(var(--cut-w),var(--cut-cap,9999px));pointer-events:none; }
.service-cutter svg { display:block;width:100%;height:auto;overflow:visible; }
@media (max-width:599px) and (orientation:portrait) { .service-strategy { --cut-x:46.055979vw;--cut-y:calc(var(--stage-unit) * 56.455399);--cut-w:35.815142vw;--cut-cap:calc(var(--stage-unit) * 16.520364); } }
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait) { .service-strategy { --cut-x:38.151041vw;--cut-y:calc(var(--stage-unit) * 78.90625);--cut-w:30.598958vw;--cut-cap:calc(var(--stage-unit) * 22.949218); } }
@media (min-width:1101px), (orientation:landscape) { .service-strategy { --cut-x:23.671875vw;--cut-y:calc(var(--stage-unit) * 78.5);--cut-w:25.415554vw;--cut-cap:calc(var(--stage-unit) * 40.664886); } }
@media (min-width:1280px) and (max-width:1512px) and (min-height:601px) { .service-strategy {--cut-x:calc(-248.806977px + 43.109920vw);--cut-w:calc(50.796092px + 21.447109vw);--cut-y:calc(calc(var(--stage-unit) * 78.5) + 181.066163px + -14.145794vw);--cut-cap:calc(var(--stage-unit) * 38.195151); } }
@media (min-width:1512px) and (max-width:1920px) and (min-height:601px) { .service-strategy {--cut-x:calc(158.482421px + 16.172790vw);--cut-w:calc(107.589104px + 17.690957vw);--cut-y:calc(calc(var(--stage-unit) * 75.158020) + -167.851946px + 11.101319vw);--cut-cap:calc(var(--stage-unit) * 41.412545); } }
@media (min-width:1920px) and (min-height:601px) { .service-strategy { --cut-x:24.427083vw;--cut-y:calc(var(--stage-unit) * 79.351851);--cut-w:23.294556vw;--cut-cap:calc(var(--stage-unit) * 41.412545); } }
@media (orientation:landscape) and (max-height:600px) { .service-strategy { --cut-x:25.778964vw;--cut-y:calc(var(--stage-unit) * 79.991374);--cut-w:21.906022vw;--cut-cap:calc(var(--stage-unit) * 47.406878); } }
/* Independent original bottle assemblies follow the authored responsive slots. */
.services .service-content .social-desktop-scene > svg:last-child { display:none; }
.services .social-bottle-slots { position:absolute;inset:0;display:block;pointer-events:none;z-index:1; }
.social-bottle-slot { position:absolute;left:var(--b-x);top:var(--b-y);width:min(var(--b-w),var(--b-cap)); }
.social-bottle-slot svg { display:block;width:100%;height:auto;overflow:visible; }
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait) {
 .social-bottle-main { --b-x:5.078125vw;--b-y:calc(var(--stage-unit) * 23.632812);--b-w:53.969177vw;--b-cap:calc(var(--stage-unit) * 40.476883); }
 .social-bottle-middle { --b-x:50.78125vw;--b-y:calc(var(--stage-unit) * 38.295698);--b-w:16.406271vw;--b-cap:calc(var(--stage-unit) * 12.304703); }
 .social-bottle-right { --b-x:67.968781vw;--b-y:calc(var(--stage-unit) * 38.964843);--b-w:27.679312vw;--b-cap:calc(var(--stage-unit) * 20.759484); }
 .social-bottle-small { --b-x:5.597448vw;--b-y:calc(var(--stage-unit) * 36.621093);--b-w:9.723466vw;--b-cap:calc(var(--stage-unit) * 7.292599); }
}
@media (min-width:1101px), (orientation:landscape) {
 .social-bottle-main { --b-x:0.398330vw;--b-y:calc(var(--stage-unit) * 29.560058);--b-w:36.686727vw;--b-cap:calc(var(--stage-unit) * 58.698763); }
 .social-bottle-middle { --b-x:33.75vw;--b-y:calc(var(--stage-unit) * 38.5);--b-w:11.152468vw;--b-cap:calc(var(--stage-unit) * 17.843950); }
 .social-bottle-right { --b-x:35.9375vw;--b-y:calc(var(--stage-unit) * 50.5);--b-w:18.815563vw;--b-cap:calc(var(--stage-unit) * 30.104902); }
 .social-bottle-small { --b-x:7.675554vw;--b-y:calc(var(--stage-unit) * 41.375);--b-w:6.609734vw;--b-cap:calc(var(--stage-unit) * 10.575575); }
}
@media (min-width:1280px) and (max-width:1512px) and (min-height:601px) {
 .social-bottle-main {--b-x:calc(156.009193px + -11.789887vw);--b-w:calc(-107.822330px + 45.110346vw);--b-y:calc(calc(var(--stage-unit) * 29.560058) + 6.046551px + -0.472386vw);--b-cap:calc(var(--stage-unit) * 58.698763); }
 .social-bottle-middle {--b-x:calc(57.991379px + 29.219423vw);--b-w:calc(-32.776246px + 13.713113vw);--b-y:calc(calc(var(--stage-unit) * 38.5) + 7.875431px + -0.615268vw);--b-cap:calc(var(--stage-unit) * 17.843950); }
 .social-bottle-right {--b-x:calc(51.559806px + 31.909390vw);--b-w:calc(-55.294352px + 23.135435vw);--b-y:calc(calc(var(--stage-unit) * 50.5) + 10.329148px + -0.806964vw);--b-cap:calc(var(--stage-unit) * 30.104902); }
 .social-bottle-small {--b-x:calc(134.620865px + -2.841700vw);--b-w:calc(-19.424826px + 8.127298vw);--b-y:calc(calc(var(--stage-unit) * 41.375) + 8.463146px + -0.661183vw);--b-cap:calc(var(--stage-unit) * 10.575575); }
}
@media (min-width:1512px) and (max-width:1920px) and (min-height:601px) {
 .social-bottle-main {--b-x:calc(-204.222139px + 12.034936vw);--b-w:calc(-63.326750px + 42.167517vw);--b-y:calc(calc(var(--stage-unit) * 29.448455) + 155.293713px + -10.270748vw);--b-cap:calc(var(--stage-unit) * 69.100887); }
 .social-bottle-middle {--b-x:calc(-261.791475px + 50.369083vw);--b-w:calc(-19.261246px + 12.819263vw);--b-y:calc(calc(var(--stage-unit) * 38.354641) + 90.535899px + -5.987824vw);--b-cap:calc(var(--stage-unit) * 21.006353); }
 .social-bottle-right {--b-x:calc(-265.574046px + 52.883851vw);--b-w:calc(-32.478666px + 21.626461vw);--b-y:calc(calc(var(--stage-unit) * 50.309352) + 3.610671px + -0.238800vw);--b-cap:calc(var(--stage-unit) * 35.439758); }
 .social-bottle-small {--b-x:calc(-216.782399px + 20.399256vw);--b-w:calc(-11.408686px + 7.597131vw);--b-y:calc(calc(var(--stage-unit) * 41.218793) + 69.707444px + -4.610280vw);--b-cap:calc(var(--stage-unit) * 12.449650); }
}
@media (min-width:1920px) and (min-height:601px) {
 .social-bottle-main { --b-x:1.398366vw;--b-y:calc(var(--stage-unit) * 25.568395);--b-w:38.869249vw;--b-cap:calc(var(--stage-unit) * 69.100887); }
 .social-bottle-middle { --b-x:36.734110vw;--b-y:calc(var(--stage-unit) * 36.092574);--b-w:11.816074vw;--b-cap:calc(var(--stage-unit) * 21.006353); }
 .social-bottle-right { --b-x:39.051869vw;--b-y:calc(var(--stage-unit) * 50.219138);--b-w:19.934864vw;--b-cap:calc(var(--stage-unit) * 35.439758); }
 .social-bottle-small { --b-x:9.108506vw;--b-y:calc(var(--stage-unit) * 39.477132);--b-w:7.002928vw;--b-cap:calc(var(--stage-unit) * 12.449650); }
}
@media (orientation:landscape) and (max-height:600px) {
 .social-bottle-main { --b-x:8.767772vw;--b-y:calc(var(--stage-unit) * 21.282051);--b-w:31.840425vw;--b-cap:calc(var(--stage-unit) * 68.905946); }
 .social-bottle-middle { --b-x:37.914691vw;--b-y:calc(var(--stage-unit) * 30.997846);--b-w:9.360182vw;--b-cap:calc(var(--stage-unit) * 20.256394); }
 .social-bottle-right { --b-x:38.569590vw;--b-y:calc(var(--stage-unit) * 48.461538);--b-w:14.927436vw;--b-cap:calc(var(--stage-unit) * 32.304503); }
 .social-bottle-small { --b-x:2.369668vw;--b-y:calc(var(--stage-unit) * 44.871794);--b-w:5.331753vw;--b-cap:calc(var(--stage-unit) * 11.538461); }
}
@media (max-width:599px) and (orientation:portrait) { .services .social-bottle-slots,.services .social-desktop-scene{display:none;} .services .social-mobile-scene{display:block;left:50vw;} }
/* Clouds and sun keep their own original motion inside independent layout slots. */
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait) {
 .social-scene-sun { --b-x:62.953599vw;--b-y:calc(var(--stage-unit) * 13.378906);--b-w:14.632444vw;--b-cap:calc(var(--stage-unit) * 10.974333); }
 .social-scene-cloud-left { --b-x:-6.653022vw;--b-y:calc(var(--stage-unit) * 10.023295);--b-w:41.427262vw;--b-cap:calc(var(--stage-unit) * 31.070446); }
 .social-scene-cloud-right { --b-x:60.677083vw;--b-y:calc(var(--stage-unit) * 19.012200);--b-w:39.152510vw;--b-cap:calc(var(--stage-unit) * 29.364383); }
}
@media (min-width:1101px), (orientation:landscape) {
 .social-scene-sun { --b-x:39.740371vw;--b-y:calc(var(--stage-unit) * 14.690032);--b-w:9.946718vw;--b-cap:calc(var(--stage-unit) * 15.914749); }
 .social-scene-cloud-left { --b-x:-7.576179vw;--b-y:calc(var(--stage-unit) * 9.823791);--b-w:28.161070vw;--b-cap:calc(var(--stage-unit) * 45.057712); }
 .social-scene-cloud-right { --b-x:38.192901vw;--b-y:calc(var(--stage-unit) * 22.859344);--b-w:26.614758vw;--b-cap:calc(var(--stage-unit) * 42.583614); }
}
@media (min-width:1280px) and (max-width:1512px) and (min-height:601px) {
 .social-scene-sun {--b-x:calc(40.384731px + 36.585314vw);--b-w:calc(-29.232636px + 12.230517vw);--b-y:calc(calc(var(--stage-unit) * 14.690032) + 3.005229px + -0.234783vw);--b-cap:calc(var(--stage-unit) * 15.914749); }
 .social-scene-cloud-left {--b-x:calc(179.444622px + -21.595290vw);--b-w:calc(-82.763313px + 34.626954vw);--b-y:calc(calc(var(--stage-unit) * 9.823791) + 2.009179px + -0.156967vw);--b-cap:calc(var(--stage-unit) * 45.057712); }
 .social-scene-cloud-right {--b-x:calc(44.933257px + 34.682490vw);--b-w:calc(-78.218814px + 32.725603vw);--b-y:calc(calc(var(--stage-unit) * 22.859344) + 4.676740px + -0.365370vw);--b-cap:calc(var(--stage-unit) * 42.583614); }
}
@media (min-width:1512px) and (max-width:1920px) and (min-height:601px) {
 .social-scene-sun {--b-x:calc(-431.031307px + 67.763624vw);--b-w:calc(65.111012px + 5.990858vw);--b-y:calc(calc(var(--stage-unit) * 14.634564) + 166.962226px + -11.042475vw);--b-cap:calc(var(--stage-unit) * 16.679212); }
 .social-scene-cloud-left {--b-x:calc(-90.394990px + -3.748755vw);--b-w:calc(-48.611967px + 32.368267vw);--b-y:calc(calc(var(--stage-unit) * 9.786707) + -290.469676px + 19.210957vw);--b-cap:calc(var(--stage-unit) * 53.042478); }
 .social-scene-cloud-right {--b-x:calc(-441.162798px + 66.831700vw);--b-w:calc(174.219828px + 16.029926vw);--b-y:calc(calc(var(--stage-unit) * 22.773024) + 150.021051px + -9.922027vw);--b-cap:calc(var(--stage-unit) * 44.629112); }
}
@media (min-width:1920px) and (min-height:601px) {
 .social-scene-sun { --b-x:45.314076vw;--b-y:calc(var(--stage-unit) * 10.462962);--b-w:9.382057vw;--b-cap:calc(var(--stage-unit) * 16.679212); }
 .social-scene-cloud-left { --b-x:-8.456827vw;--b-y:calc(var(--stage-unit) * 17.044180);--b-w:29.836393vw;--b-cap:calc(var(--stage-unit) * 53.042478); }
 .social-scene-cloud-right { --b-x:43.854471vw;--b-y:calc(var(--stage-unit) * 19.024703);--b-w:25.103875vw;--b-cap:calc(var(--stage-unit) * 44.629112); }
}
@media (orientation:landscape) and (max-height:600px) {
 .social-scene-sun { --b-x:78.791469vw;--b-y:calc(var(--stage-unit) * 15.641025);--b-w:7.339154vw;--b-cap:calc(var(--stage-unit) * 15.882682); }
 .social-scene-cloud-left { --b-x:2.251184vw;--b-y:calc(var(--stage-unit) * 18.205128);--b-w:11.493666vw;--b-cap:calc(var(--stage-unit) * 24.873473); }
 .social-scene-cloud-right { --b-x:38.270142vw;--b-y:calc(var(--stage-unit) * 15.897435);--b-w:19.637614vw;--b-cap:calc(var(--stage-unit) * 42.497812); }
}
.service-title-art.art-phone { display: none; }
@media (max-width:599px) and (orientation:portrait) {
  .services .social-mobile-scene {
    width: min(100vw, calc(var(--stage-unit) * 46.1268));
    height: auto;
    aspect-ratio: 393 / 852;
    left: 50%;
    top: 0;
    translate: -50% 0;
  }
}
/* Preserve title/copy clearance on laptops with less vertical space. */
@media (min-width:1101px), (min-width:600px) and (orientation:landscape) and (min-height:601px) {
  .services .service-strategy .service-caption .service-title-art { translate: 0 calc(-1 * clamp(14px,2.2dvh,24px)); }
  .services .service-design .service-illustration.art-desktop { translate: clamp(24px,4vw,72px) 0; }
}
@media (min-width:1101px), (min-width:600px) and (orientation:landscape) and (min-height:601px) {
  .service-strategy { --title-aspect: 3.732; }
  .service-design { --title-aspect: 1.7314; }
  .service-digital { --title-aspect: 1.6435; }
  .service-content { --title-aspect: 2.595; }
  .service-panel .service-caption .service-title-art {
    width: min(var(--t-w), calc((var(--c-y) - var(--t-y) - 12px) * var(--title-aspect)));
  }
}
@media (max-width:599px) and (orientation:portrait) {
  .service-design .service-title-art.art-mobile,
  .service-digital .service-title-art.art-mobile { display: none; }
  .service-title-art.art-phone { display: block; }
  /* Leave breathing room above the complete illustration, including steam. */
  .services :is(.service-strategy,.service-design,.service-digital) .service-title-art { translate:0 calc(-1 * clamp(16px,3dvh,28px)); }
  .services .service-panel:not(.service-intro) .service-live-copy p { text-wrap:balance; }
}
@media (max-width:599px) and (orientation:portrait) and (max-height:700px) {
  .services .service-design .service-title-art { translate:0 -30px; }
}
/* The snap area is a whole screen; its composition starts below the fixed nav.
   Keep vectors uniformly scaled. Never scaleY an entire illustrated scene. */
:root { --stage-height: calc(var(--screen-block) - var(--nav-height)); --stage-unit: calc(var(--stage-height) / 100); }
.service-panel > .section-stage, .clients > .section-stage {
  position: relative; top: var(--nav-height); width: 100%; height: var(--stage-height);
}
.services .service-intro-art { top: 50%; }
@media (min-width:1101px), (min-width:600px) and (orientation:landscape) {
  .services .service-intro-art.art-desktop {
    inset: 0; width: 100%; height: 100%; transform: none;
    display: grid; place-items: center;
  }
  .services .service-intro-art.art-desktop svg {
    width: min(68vw, calc(var(--stage-height) * 1.25));
    max-height: calc(var(--stage-height) - 3rem);
  }
  .services .service-strategy .service-illustration.art-desktop {
    left: calc(var(--a-x) + 7vw);
    width: calc(min(var(--a-w), var(--a-block-cap)) * .90);
  }
  .service-rolling-pin { position:absolute; left:-3vw; top:65%; width:min(30vw,calc(var(--stage-height) * .55)); }
  .service-rolling-pin svg { display:block; width:100%; height:auto; overflow:visible; }
  .service-strategy .service-illustration [data-layout="native-rolling-pin"] { display:none; }
  .services .service-cutter { top:auto; bottom:2%; width:min(23vw,calc(var(--stage-height) * .35)); }
  .services .service-design .service-illustration.art-desktop {
    /* Preserve the monitor's left margin when a short display caps art width. */
    left: calc(var(--a-x) - 3vw + (var(--a-w) - min(var(--a-w), var(--a-block-cap))) * .3);
  }
  .services .service-digital .service-illustration.art-desktop {
    left: calc(var(--a-x) + 4vw);
    width: calc(min(var(--a-w), var(--a-block-cap)) * .94);
  }
}
.services .intro-grain { inset: 0; }
@media (max-width:599px) and (orientation:portrait) {
  .services .service-content {
    --t-y: calc(var(--stage-unit) * 11.5);
    --c-gap: clamp(16px, calc(var(--stage-unit) * 3.5), 28px);
  }
  .services .service-content .service-live-copy {
    top: auto;
    bottom: 6%;
  }
}
@media (max-width:599px) and (orientation:portrait) and (max-height:700px) {
  .services .service-content { --t-y: calc(var(--stage-unit) * 8); }
  .services .social-mobile-scene { width: min(100vw, calc(var(--stage-unit) * 42)); }
}
.clients .clients-heading { top: 9%; }
.clients .client-marquees { top: 35%; }
.work.section-screen { padding-top: calc(var(--nav-height) + clamp(1.5rem, calc(var(--stage-unit) * 5), 3rem)); }
.contact.section-screen { padding-top: calc(var(--nav-height) + clamp(1.5rem, calc(var(--stage-unit) * 7), 5rem)); }
.manifesto.section-screen { padding-top: calc(var(--nav-height) + clamp(3rem,9dvh,7rem)); }
@media (max-width:1100px) and (orientation:portrait) {
  .clients .clients-heading { top: 8%; }
  .clients .clients-heading picture { display: none !important; }
  .manifesto.section-screen { padding-top: calc(var(--nav-height) + 8dvh); padding-bottom: 12dvh; }
  .contact.section-screen { padding-top: calc(var(--nav-height) + 1.5rem); }
}
@media (orientation:landscape) and (max-height:600px) {
  /* A readable composition may be taller than a very short viewport. Native
     scrolling must remain available; do not crop text to enforce slide sizing. */
  .services .service-panel { min-block-size: max(var(--screen-block), 25rem); }
  .service-panel > .section-stage { height: max(var(--stage-height), calc(25rem - var(--nav-height))); }
  .services .service-content { --c-y: calc(var(--stage-unit) * 71); --c-gap: 8px; }
}
@media(hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference) {
  [data-tilt-layer] { translate:calc(var(--tilt-x,0px) * var(--tilt-depth,0)) calc(var(--tilt-y,0px) * var(--tilt-depth,0)); }
  .hero-beach-layer[data-tilt-layer] { translate:calc(var(--tilt-x,0px) * var(--tilt-depth)) calc(var(--hero-parallax,0px) + var(--tilt-y,0px) * var(--tilt-depth)); }
  [data-tilt-scene] [data-rig^='rig-cloud-'] { translate:calc(var(--tilt-x,0px) * .15) calc(var(--tilt-y,0px) * .15); }
}
.site-footer[data-astro-cid-nns7i3if] {
  position: relative;
  background: var(--deep-ink);
  color: var(--cream);
  padding: clamp(3rem,7vw,6rem) var(--section-gutter) 2rem;
  scroll-snap-align: end;
  scroll-snap-stop: always;
}

.footer-main[data-astro-cid-nns7i3if] {
  max-width: 80rem;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr .7fr;
  gap: 3rem;
}

.footer-logo[data-astro-cid-nns7i3if] {
  display: block;
  width: clamp(8rem, 13vw, 12rem);
  align-self: start;
}

.footer-logo[data-astro-cid-nns7i3if] img[data-astro-cid-nns7i3if] {
  width: 100%;
  height: auto;
}

.site-footer[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if] {
  color: inherit;
  text-decoration: none;
  text-underline-offset: .25em;
}

.site-footer[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if]:hover {
  color: var(--field-pink);
  text-decoration: underline;
}

.site-footer[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if]:focus-visible {
  outline: 2px dashed var(--field-pink);
  outline-offset: 5px;
}

.footer-contact[data-astro-cid-nns7i3if] p[data-astro-cid-nns7i3if] {
  margin: 0 0 1rem;
  font-size: 1.125rem;
}

.footer-contact[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if], nav[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if] {
  display: block;
  width: fit-content;
  padding: .4rem 0;
  font-size: 1rem;
  line-height: 1.5;
}

.footer-bottom[data-astro-cid-nns7i3if] {
  max-width: 80rem;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid #f1e9e940;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  font-size: .8125rem;
  line-height: 1.6;
}

.footer-bottom[data-astro-cid-nns7i3if] p[data-astro-cid-nns7i3if] {
  margin: 0;
}

.footer-credit[data-astro-cid-nns7i3if] {
  flex-basis: 100%;
  opacity: .75;
}

@media (width <= 699px) {
  .footer-main[data-astro-cid-nns7i3if] {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .footer-main[data-astro-cid-nns7i3if] nav[data-astro-cid-nns7i3if] {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom[data-astro-cid-nns7i3if] {
    margin-top: 2rem;
  }
}