/* 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;
}html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
: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);
  /* The one phone gutter (≈22px at 393 wide): every section's content keeps this
     far from the screen's edges on phones. */
  --gutter-mobile: clamp(1.125rem, 5.5vw, 1.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; color-scheme: light; scroll-behavior: auto; background: var(--hot-pink); }
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, :is(section, article, footer)[tabindex="-1"]:focus { outline: none; box-shadow: none; }
/* Hit areas: small links get an invisible ::before that extends them vertically to
   44px for touch (24px minimum for a mouse), centred on the link. Nothing moves:
   the link's own box and spacing are unchanged. */
:is(.nav-logo, .site-footer a, .cs-back, .back-link) { position: relative; }
/* (On its own line already; a block-level box gives WebKit a definite height for the % inset.) */
.back-link { display: inline-block; }
:is(.nav-logo, .site-footer a, .cs-back, .back-link)::before { content: ''; position: absolute; inset: min(0px, calc(50% - 12px)) 0; }
@media (pointer: coarse) { :is(.nav-logo, .site-footer a, .cs-back, .back-link)::before { inset: min(0px, calc(50% - 22px)) 0; } }
/* Typesetting: no word left alone on a last line. Running copy avoids orphans; the
   short display lines that left one balance. (Services keep their own setting.) */
:where(p, li, dd, figcaption, blockquote):where(:not(#services *)) { text-wrap: pretty; }
:where(.form-intro, .footer-contact p, .cs-title, .website-information :is(h1, h2)) { text-wrap: balance; }

.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); }

.letter-flash { position:fixed; z-index:50; display:block; pointer-events:none; mask-repeat:no-repeat; mask-position:center; mask-size:contain; }
:root { --screen-block: 100svh; }
@supports (height: 100dvh) { :root { --screen-block: 100dvh; } }
.section-screen { position: relative; min-block-size: var(--screen-block); }
.hero { block-size: var(--screen-block); min-block-size: 30rem; overflow: clip; background: var(--hot-pink); }
/* A landscape phone is shorter than that floor: there the hero is exactly one
   screen, so the crab, the stone and "Come this way" are all on the first
   screen (every part of the composition is sized by dvh as well as vw). */
@media (orientation: landscape) and (max-height: 500px) { .hero { min-block-size: 0; } }
.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-display { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
/* FEARLESS! never runs into the stone: its width is also capped by the room left of
   the foreground (whose left edge is 101vw minus its width, see .hero-foreground).
   Only squarer landscape screens (iPad, under ~3:2) ever reach this cap; FOR THE keeps
   its proportion to it. Everywhere else the composition is unchanged. */
.hero-display { --fearless-room: calc(max(101vw - 62dvh * 659 / 603, 50.7vw, 101vw - 43rem * 659 / 603) - 8.3vw - 1.5vw); }
.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,var(--fearless-room) * .375); }
.hero-display-fearless { top: 32%; left: 8.3%; width: min(48vw,74dvh,43rem,var(--fearless-room)); }
.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: max(5%,env(safe-area-inset-bottom,0px)); 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; }
/* The arrow art points down (vertical journey); .7361 keeps the old stroke scale. */
.hero-invitation-arrow { display: block; width: calc(clamp(3.2rem,5.55vw,5rem) * .7361); translate: 0 18%; }

/* 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: .8125rem; font-style: italic; }
.manifesto-arrow { position: absolute; right: 6%; width: clamp(5rem,8.86vw,8rem); }

/* Services are a vertical stack of full-screen panels, including without JavaScript. */
.services { position: relative; overflow: visible; background: var(--purple); }
.services-viewport { height: auto; }
.services-track { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; 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); }
.service-panel > .sr-only { top: 0; left: 0; }
.service-background, .service-background img { position: absolute; inset: 0; width: 100%; height: 100%; }
.service-background img { object-fit: fill; 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-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%; }

/* Work: the staggered vertical gallery and its layout live in work.css. */
.work { 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; }

/* Exact logo proportions, centred Warwick (mobile layout: clients-responsive.css). */
.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%; }

/* 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; }
  .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%; }
  /* 71.5vw only binds on tall phones (390-430 wide, taller than 16:9), where 40% of
     the height pushed the beach ball off the right edge: it keeps the framing the
     shorter phones have. */
  .hero-foreground { right: auto; bottom: 12%; left: 30%; height: min(40%,26rem,71.5vw); aspect-ratio: 374/342; }
  /* Keep the entire ground shadow below the grave's base, including at the
     right-hand end of the walk. Beach layers retain their shared scroll offset. */
  .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.94rem; margin: 0 0 0 .25rem; translate: 0 12%; }
  .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%; width: min(18vw,4.413rem); }
  .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%; }
  .work { 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.9rem; left: auto; right: 0; width: min(16vw,4rem); transform: rotate(-135deg); }
  .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); }
}
/* ---- Portrait tablets (600-1100 wide) ----
   The mobile art, composed for the bigger screen rather than a stretched phone:
   the stone, crab, logo and call to action grow with the screen (no rem caps),
   the manifesto gets its "Death to the Ordinary" title back, and the type grows
   towards its desktop sizes. */
@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-logo-desktop { width: min(22vw,13rem); }
  /* The stone and ball sit at the right, the ball clear of the edge. */
  .hero-foreground { left: auto; right: 3%; height: min(42%,70vw); }
  .hero-crab { left: 12%; width: min(26vw,17dvh); }
  .hero-invitation { font-size: clamp(1.5rem,3.2vw,2rem); }
  .hero-invitation-arrow { width: calc(clamp(1.5rem,3.2vw,2rem) * 1.3); }
  /* The desktop lettering, one line across the column above the copy. */
  .manifesto { padding-inline: 6%; }
  .manifesto-title { display: block; width: min(84vw,44rem); margin-bottom: clamp(2rem,4dvh,3.5rem); }
  .manifesto-copy { width: min(100%,38rem); max-width: none; font-size: clamp(1.35rem,2.4vw,1.56rem); line-height: 1.4; }
  .manifesto-arrow { width: clamp(5rem,12vw,8rem); }
  .work-heading h2, .clients-heading h2 { font-size: clamp(1.875rem,3.6vw,2.6rem); }
  .clients-heading picture { width: clamp(5rem,10vw,7rem); }
  .contact-title-ready { left: 24%; width: 35%; }.contact-title-fearless { left: 21%; width: 58%; }
  .contact-hand-mobile { left: 5%; }
}

/* ---- Phones: one gutter ----
   Every section's content starts and ends --gutter-mobile from the screen's edges
   (services adopt it too). */
@media (max-width: 599px) {
  :root { --section-gutter: var(--gutter-mobile); --page-gutter: var(--gutter-mobile); }
  .hero-invitation { max-width: calc(100% - 2 * var(--gutter-mobile)); }
  .manifesto.section-screen { padding-inline: var(--gutter-mobile); }
}
@media (prefers-reduced-motion: reduce) {
  html:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *) { scroll-behavior: auto; }
  *:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *), *:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *)::before, *:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html:where([data-motion="off"], [data-motion="off"] *) { scroll-behavior: auto; }
*:where([data-motion="off"], [data-motion="off"] *), *:where([data-motion="off"], [data-motion="off"] *)::before, *:where([data-motion="off"], [data-motion="off"] *)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* ---- Large screens (wider than 1920) ----
   The composition scales up with the screen as a 1920×1080 one would: every rem
   (type, caps, gaps, the nav) grows with the screen's width or height, whichever
   is relatively smaller, so a 21:9 ultrawide scales by its height. Figures placed
   across a full-bleed section keep a 16:9 composition centred on wider screens
   (--box-w/--box-x, for left/right/width only); backgrounds still run to both
   edges. At 1920 wide and below nothing changes. */
@media (min-width: 1921px) {
  html { font-size: max(100%, min(100vw / 120, 100vh / 67.5)); }
  :root { --box-w: min(100%, var(--screen-block) * 16 / 9); --box-x: calc((100% - var(--box-w)) / 2); }
  .hero-display-for, .hero-display-fearless { left: calc(var(--box-x) + var(--box-w) * .083); }
  .hero-logo-desktop { left: calc(var(--box-x) + var(--box-w) * .0855); }
  .hero-invitation { left: calc(var(--box-x) + var(--box-w) * .11); }
  .hero-crab { left: calc(var(--box-x) + var(--box-w) * .38); }
  .hero-foreground { right: calc(var(--box-x) - var(--box-w) * .01); }
  .manifesto-arrow { right: calc(var(--box-x) + var(--box-w) * .06); }
}
:root { --nav-height: clamp(4rem,7.64vw,6.875rem); }
/* CSS twins of the shared GSAP eases (src/motion/core/eases.ts), sampled by
   scripts/css-eases.mjs, for the page curtain and hover states. */
:root {
  --dd-pop: linear(0, 0.2124 3.83%, 0.4107 7.5%, 0.5047 9.33%, 0.6555 12.5%, 0.7136 13.83%, 0.788 15.67%, 0.8376 17%, 0.9049 19%, 0.9728 21.33%, 1.0062 22.67%, 1.0356 24%, 1.0702 25.83%, 1.0977 27.67%, 1.1134 29%, 1.1323 31.33%, 1.1404 33.33%, 1.1412 35.33%, 1.1325 38.33%, 1.1144 42%, 1.0973 44.67%, 1.0244 54%, 0.9981 57.83%, 0.9792 61.67%, 0.971 64.83%, 0.97 68%, 0.9935 88.17%, 1);
  --dd-slam: linear(0, 0.0032 4.17%, 0.0164 9.33%, 0.0343 13.33%, 0.0644 18%, 0.104 22.5%, 0.1511 26.67%, 0.2069 30.67%, 0.2714 34.5%, 0.3415 38%, 0.4156 41.17%, 0.4971 44.17%, 0.5806 46.83%, 0.6707 49.33%, 0.7604 51.5%, 0.856 53.5%, 0.9099 54.5%, 1 56%, 0.968 59%, 0.9463 62%, 0.9339 65%, 0.93 68%, 0.9333 70.33%, 0.946 73.33%, 0.9722 77%, 1 80%, 1);
  --dd-settle: linear(0, 0.0761 2%, 0.179 4.83%, 0.248 6.83%, 0.34 9.67%, 0.4014 11.67%, 0.4826 14.5%, 0.5363 16.5%, 0.6068 19.33%, 0.6751 22.33%, 0.7165 24.33%, 0.8017 29%, 0.836 31.17%, 0.876 34%, 0.9324 38.83%, 0.968 42.83%, 0.998 47.5%, 1.0147 51.5%, 1.0242 56.17%, 1.0249 60.17%, 1.0047 87.33%, 1);
  --dd-swoop: linear(0, -0.0031 3.17%, -0.0132 6.67%, -0.0649 17.33%, -0.0795 22.5%, -0.0806 25.17%, -0.0768 27.17%, -0.0651 28.83%, -0.0446 30.5%, -0.0091 32.5%, 0.0253 34%, 0.0701 35.67%, 0.1324 37.67%, 0.2452 40.83%, 0.5493 48.67%, 0.6417 51.17%, 0.7333 53.83%, 0.8016 56%, 0.891 59.17%, 0.956 61.83%, 0.9878 63.5%, 1.0124 65.5%, 1.0278 67.5%, 1.0379 69.67%, 1.044 72.33%, 1.0455 75.83%, 1.036 83.33%, 1);
  --dd-exit: linear(0, -0.0062 7.5%, -0.0141 11.33%, -0.0452 22.5%, -0.051 28.33%, -0.0471 31.5%, -0.0335 35%, -0.0132 38.17%, 0.0191 41.83%, 0.0614 45.67%, 0.1276 50.67%, 0.1976 55.33%, 0.293 61.17%, 0.3707 65.67%, 0.5444 75.33%, 1);
}
@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 max(5.14%,env(safe-area-inset-right)) 0 max(5.14%,env(safe-area-inset-left)); 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); }
/* Off-screen above the bar: covers the gap while the bar lands and rebounds. */
.site-nav::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 2rem; background: inherit; pointer-events: none; }
/* The site-nav piece animates the bar itself. */
.site-nav.has-motion { transition: none; }
.nav-logo { display: block; position: relative; width: clamp(7.225rem,11.39vw,10.253125rem); }
.nav-logo img { width: 100%; height: auto; }
/* The greeting's inline logo sits exactly over the <img> while the dog moves. */
.nav-logo .nav-logo-art { position: absolute; overflow: visible; pointer-events: none; }
.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 > * { grid-area: 1 / 1; }
.nav-toggle img { width: 100%; height: auto; }
.nav-close { display: none; font-size: 1rem; white-space: nowrap; }
.nav-toggle[aria-expanded='true'] img { display: none; }.nav-toggle[aria-expanded='true'] .nav-close { display: inline; }
/* Burger ↔ "Close": a stroked twin of the burger, shown only while it animates. */
.nav-toggle-rig { display: none; width: 100%; height: auto; overflow: visible; fill: none; stroke: #f4eaea; stroke-width: 5.1429; stroke-linecap: round; }
.nav-toggle.is-animating .nav-toggle-rig { display: block; }
.nav-toggle.is-animating img { display: block; visibility: hidden; }
.nav-toggle.is-animating .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; transition: color 160ms, transform 340ms var(--dd-settle); }
.site-menu a:hover, .site-menu a:focus-visible { color: var(--field-pink); }
/* Hover: a small lift, and the manifesto's brush underline paints on under the
   word (left to right, like writing) and wipes off when the pointer leaves. */
.site-menu a:is(:hover, :focus-visible) { transform: translateY(-.1em); }
.site-menu a > span { position: relative; }
.site-menu a > span::after { content: ''; position: absolute; left: -.08em; right: -.08em; bottom: -.2em; height: .2em; background: url('/images/derived/manifesto-underline.svg') center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 220ms var(--dd-exit); pointer-events: none; }
.site-menu a:is(:hover, :focus-visible) > span::after { transform: none; transform-origin: 0 50%; transition: transform 340ms var(--dd-settle); }
/* The blind's weighted rail, seen only while the panel drops. */
.site-menu-rail { position: absolute; left: 0; right: 0; bottom: 0; height: .375rem; background: var(--hot-pink); transform: scaleY(0); transform-origin: 50% 100%; pointer-events: none; }
@media (max-width: 699px) { .nav-toggle { width: 2.75rem; height: 2.75rem; }.site-menu { width: 100%; } }
/* Phones: the logo and the menu sit on the one gutter (global.css); the burger art
   lines up with it too (the button keeps its 44px hit area). */
@media (max-width: 599px) { .site-nav { padding-inline: var(--gutter-mobile); }.nav-toggle { margin-right: -.5rem; }.site-menu { padding-inline: var(--gutter-mobile); } }
@media (prefers-reduced-motion: reduce) { .site-nav:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *) { transition: none; }.site-menu a:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *), .site-menu a > span:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *)::after { transition: none; }.site-menu a:is(:hover, :focus-visible):where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *) { transform: none; } }
.site-nav:where([data-motion="off"], [data-motion="off"] *) { transition: none; }
.site-menu a:where([data-motion="off"], [data-motion="off"] *), .site-menu a > span:where([data-motion="off"], [data-motion="off"] *)::after { transition: none; }
.site-menu a:is(:hover, :focus-visible):where([data-motion="off"], [data-motion="off"] *) { transform: 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 .jack:not(.is-motion-active) *, .motion-ready .service-panel:not(.is-motion-active) * { animation-play-state: paused !important; }
.motion-suspended * { animation-play-state: paused !important; }
.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 { translate: 0 var(--title-y) !important; rotate: var(--title-r) !important; 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 { --title-y: -2px; --title-r: -.24deg; } to { --title-y: 2px; --title-r: .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; }
.manifesto-copy p { position: relative; }
.motion-ready .client-draw-shaft,.motion-ready .client-draw-head { opacity: 0; }
.motion-ready [data-rig='letter'] { transform-box: fill-box; transform-origin: center; translate: 0 var(--float-y) !important; rotate: var(--float-r) !important; 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; }
/* The display lettering's ambient float (and the contact title's) animates two registered
   custom properties, and the glyph's translate/rotate are read from them. Same amplitude,
   easing, timing, phase and direction as the transform keyframes it replaces; only how it is
   drawn changed. A transform animation runs on the compositor, which lifts every floating glyph
   onto its own GPU layer: a bitmap that is shifted and rotated by fractions of a pixel (and kept
   at the raster scale it started with), so in Chrome the lettering looked soft, even pixelated,
   until a letter flash dropped the layer. An animated custom property runs on the main thread:
   each frame the glyph is repainted as a vector, crisp at any scale, zoom or DPR. translate and
   rotate compose with an SVG transform attribute instead of replacing it (the intro's GSAP
   transforms), are identity wherever the float is off, and are !important so GSAP's inline
   `translate/rotate: none` cannot stop a float (the transform animation used to win over inline
   styles too). Where GSAP drives a glyph's own transform (the hero intro's glyph groups, the team
   hero's glyphs, the team contact title while it lands) both are `none`: when GSAP reads an
   element whose translate/rotate are not `none` it folds them into an inline translate3d(), which
   hides its own transform attribute (glyphs frozen at rest) and leaves a GPU layer behind.
   Browsers without @property get the old transform keyframes back (ambient.ts). */
@property --float-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --float-r { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --title-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --title-r { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes letter-float { from { --float-y: -2.6px; --float-r: -.35deg; } to { --float-y: 2.6px; --float-r: .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 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:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *),.motion-ready .client-draw-head:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *) { stroke-dashoffset: 0; opacity: 1; }
}
.motion-ready .client-draw-shaft:where([data-motion="off"], [data-motion="off"] *),.motion-ready .client-draw-head:where([data-motion="off"], [data-motion="off"] *) { stroke-dashoffset: 0; opacity: 1; }
@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 *:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *) { animation: none !important; }.motion-ready .draw-shaft:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *),.motion-ready .draw-head:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *) { stroke-dashoffset: 0; opacity: 1; }.cookie-steam:where(:root:not([data-motion="on"]), :root:not([data-motion="on"]) *) { display: none; } }
.motion-ready *:where([data-motion="off"], [data-motion="off"] *) { animation: none !important; }
.motion-ready .draw-shaft:where([data-motion="off"], [data-motion="off"] *),.motion-ready .draw-head:where([data-motion="off"], [data-motion="off"] *) { stroke-dashoffset: 0; opacity: 1; }
.cookie-steam:where([data-motion="off"], [data-motion="off"] *) { 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-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; }
@media (max-width:1100px) and (orientation:portrait) {
  .art-desktop { display: none; }.art-mobile { display: block; }
  .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; }

  /* 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.
 * Art, horizon and cutter values below are the approved Figma frames; the title and copy
 * follow one shared typographic system (below). 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.
 */

/* Notched screens (viewport-fit=cover): the text and the marker keep clear of the safe areas
   (below, services-stage.css, src/scripts/services-text.ts). QA can stand in for a notch by
   setting these on the section (scripts/services/text-clearance.mjs --safe). */
.services { --svc-safe-l: env(safe-area-inset-left, 0px); --svc-safe-r: env(safe-area-inset-right, 0px); }

.services .service-panel:not(.service-intro) {
  display: block;
  padding: 0;
  /* services-responsive.css centres the old portrait-tablet grid; on a block box that would
     push the whole stage 32px down (block containers honour align-content). */
  align-content: normal;
}

.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;
}

/*
 * Services typography (client review 2: "adjust the text layout as you see fit"). ONE system
 * for the four scenes: as the visitor steps, the text stays in the same place and only its
 * content changes. Layout only (size and position); how the title lettering renders is
 * untouched.
 *
 * - One column: title and copy share a left edge (--col-x); the copy has one measure.
 * - One cap height (--cap) for every title. Each title art is sized from its own metrics,
 *   measured from its glyphs: --wpc (art width per cap), --base (its last baseline below the
 *   art's top, in caps), --cap-top (its letters' top below the art's top, in caps).
 * - Landscape: the copy's first line (--copy-y) is the anchor and the titles stand on it, their
 *   last baseline --title-gap above it, so one- and two-line titles share a baseline and the
 *   copy never moves. Portrait phones: title letters at --svc-title-y (top), art, copy at --copy-y.
 *   Portrait tablets: title and copy side by side, tops aligned at --svc-title-y.
 * - Copy: Inter at --copy-size, line height --leading; the bold punchline is the same size,
 *   --para-gap below the lead.
 */
.services .service-strategy .service-title-art { --wpc: 4.8803; --base: 1.2017; --cap-top: .1639; }
.services .service-design .service-title-art.art-desktop { --wpc: 4.7142; --base: 2.4578; --cap-top: .1596; }
.services .service-design .service-title-art.art-mobile { --wpc: 4.3037; --base: 2.6097; --cap-top: .1596; }
.services .service-design .service-title-art.art-phone { --wpc: 4.3037; --base: 2.6908; --cap-top: .1596; }
.services .service-design .service-title-art.art-landscape { --wpc: 8.4269; --base: 1.1435; --cap-top: .1051; }
.services .service-digital .service-title-art.art-desktop,
.services .service-digital .service-title-art.art-mobile { --wpc: 4.1883; --base: 2.3672; --cap-top: .1616; }
.services .service-digital .service-title-art.art-phone { --wpc: 4.1768; --base: 2.561; --cap-top: .1593; }
.services .service-digital .service-title-art.art-landscape { --wpc: 7.8714; --base: 1.1664; --cap-top: .1562; }
.services .service-content .service-title-art { --wpc: 7.311; --base: 2.5379; --cap-top: .1274; }

.services .service-panel .service-caption .service-title-art {
  position: absolute;
  inset: auto;
  left: var(--col-x);
  top: calc(var(--copy-y) - var(--title-gap) - var(--cap) * var(--base));
  width: calc(var(--cap) * var(--wpc));
  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;
}

.services .service-panel .service-caption .service-live-copy {
  position: absolute;
  inset: auto;
  left: var(--copy-x, var(--col-x));
  top: var(--copy-y);
  width: var(--measure);
  max-width: none;
  margin: 0;
  font-size: var(--copy-size);
  line-height: var(--leading, 1.45);
  pointer-events: auto;
}
.services .service-panel .service-caption .service-live-copy p { width: auto; margin: 0; text-wrap: pretty; }
.services .service-panel .service-caption .service-live-copy p + p { margin-top: var(--para-gap); text-wrap: balance; }

/* The reflowed one-line assets exist only for short landscape screens. */
.service-title-art.art-landscape { display: none; }
@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; }
}

/*
 * Landscape (desktops, laptops, landscape tablets): one column right of the art, at the
 * confident scale of the approved frames — every title at the cap height Branding's had (5vw:
 * 72px at 1440, 51px at 1024), copy 22px at 1440 (18px at 1024, 24.5px at 1920), leading 1.4,
 * the punchline 1.25em below the lead.
 * Each scene places its block inside ONE colour field, at least max(48px, 5vh) from its split
 * (client review 3): Graphic in its pink sky, the others on their purple ground. The splits sit
 * at different heights and move with the aspect ratio, so the spot is measured, not guessed:
 * src/scripts/services-text.ts reads each split and the art from the page and sets
 * --svc-copy-y per scene, and, only where the art reaches the column or a block cannot fit,
 * --svc-col-x (moves the shared column right) and --svc-type-scale (shrinks every scene's type
 * together). Without JavaScript the per-scene fallbacks below apply (the 1440 × 900 spots).
 * The column (58.5vw) leaves the widest title (Social, 7.31 caps) ~5vw from the right edge.
 * QA: scripts/services/text-clearance.mjs.
 */
@media (min-width: 1101px), (min-width: 600px) and (orientation: landscape) {
  .services .service-panel {
    --col-x: var(--svc-col-x, min(58.5vw, calc(50vw + 163px)));
    /* (the measure keeps 5vw from the right edge, or clears a notch's safe area: phones on
       their side, viewport-fit=cover) */
    --copy-size: max(15px, calc(clamp(16px, min(calc(8.15px + .962vw), calc(14.5px + .52vw), calc(var(--stage-unit) * 2.75)), 26px) * var(--svc-type-scale, 1)));
    --leading: 1.4;
    --measure: min(34ch, calc(100vw - max(5vw, var(--svc-safe-r) + 16px) - var(--col-x)));
    --para-gap: calc(var(--copy-size) * 1.25);
    --cap: calc(clamp(32px, 5vw, 112px) * var(--svc-type-scale, 1));
    --title-gap: calc(var(--cap) * .38);
    --copy-y: var(--svc-copy-y, var(--copy-y-fallback));
  }
  .services .service-strategy { --copy-y-fallback: calc(var(--stage-unit) * 70.5); }
  .services .service-design { --copy-y-fallback: calc(var(--stage-unit) * 39.5); }
  .services .service-digital { --copy-y-fallback: calc(var(--stage-unit) * 69); }
  .services .service-content { --copy-y-fallback: calc(var(--stage-unit) * 75); }
}
/* Large screens (wider than 1920; global.css): the type scales as a bigger 1920 × 1080 would, with
   the site's rem (×4/3 at 2560 × 1440 and, by its height, at 3440 × 1440): the 1920 copy
   (24.5px) and cap (96px) in rem; the column's offset too. Continuous at 1920. */
@media (min-width: 1921px) {
  .services .service-panel {
    --col-x: var(--svc-col-x, min(58.5vw, calc(50vw + 10.1875rem)));
    --copy-size: max(15px, calc(min(1.53rem, calc(var(--stage-unit) * 2.75)) * var(--svc-type-scale, 1)));
    --cap: calc(min(5vw, 6rem) * var(--svc-type-scale, 1));
  }
}
/* Short landscape (phones on their side): the same column and placement, scaled to the short stage. */
@media (orientation: landscape) and (max-height: 600px) {
  .services .service-panel {
    --col-x: var(--svc-col-x, 54vw);
    --copy-size: max(13px, calc(clamp(14px, calc(var(--stage-unit) * 4.4), 16px) * var(--svc-type-scale, 1)));
    --leading: 1.45;
    --para-gap: calc(var(--copy-size) * .85);
    --cap: calc(clamp(20px, min(3.6vw, calc(var(--stage-unit) * 7.6)), 34px) * var(--svc-type-scale, 1));
    --copy-y-fallback: min(calc(var(--stage-unit) * 58), calc(var(--stage-unit) * 77 - var(--copy-size) * 6.7 - 10px));
    /* self-contained: rotated phones under 600px wide get no other landscape block */
    --measure: min(34ch, calc(100vw - max(5vw, var(--svc-safe-r) + 16px) - var(--col-x)));
    --title-gap: calc(var(--cap) * .38);
    --copy-y: var(--svc-copy-y, var(--copy-y-fallback));
  }
}

/*
 * Portrait phones: title (top) / art / copy (bottom), at the same positions in every scene. The
 * widest title (Social Media & Marketing) spans the column exactly; the copy starts just below
 * the lowest art (Branding's cutter).
 */
@media (max-width: 599px) and (orientation: portrait) {
  .services .service-panel {
    /* the site's one phone gutter (global.css), or a notch's safe area */
    --col-x: max(var(--gutter-mobile), calc(max(var(--svc-safe-l), var(--svc-safe-r)) + 16px));
    --measure: calc(100vw - var(--col-x) * 2);
    --copy-size: clamp(16px, min(4.6vw, calc(var(--stage-unit) * 2.3)), 19px);
    --para-gap: calc(var(--copy-size) * .75);
    --cap: min(calc(var(--measure) / 7.311), calc(var(--stage-unit) * 5.4));
    --svc-title-y: calc(var(--stage-unit) * 10.8);
    --copy-y: calc(var(--stage-unit) * 72.5);
  }
  .services .service-panel .service-caption .service-title-art { top: calc(var(--svc-title-y) - var(--cap) * var(--cap-top)); }
}

/*
 * Portrait tablets: title and copy side by side above the art, tops aligned. The band ends
 * above the highest art (Graphic's monitor, Social's cloud and sun, ~19% down the stage).
 */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .services .service-panel {
    --col-x: max(8vw, calc(var(--svc-safe-l) + 16px));
    --copy-x: 48.5vw;
    --measure: min(34ch, calc(100vw - max(8vw, var(--svc-safe-r) + 16px) - var(--copy-x)));
    --copy-size: clamp(16px, 2.1vw, 19px);
    --para-gap: calc(var(--copy-size) * .6);
    --cap: min(calc((var(--copy-x) - var(--col-x) - 4vw) / 7.311), calc(var(--stage-unit) * 3.2));
    --svc-title-y: calc(var(--stage-unit) * 2.6);
    --copy-y: calc(var(--svc-title-y) - var(--copy-size) * .42);
  }
  .services .service-panel .service-caption .service-title-art { top: calc(var(--svc-title-y) - var(--cap) * var(--cap-top)); }
}

/* 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); }
}

/* Landscape tablets (600–1100 wide, taller than 600, e.g. 1024 x 768): the Social wrapper is a
   real box here too. Left at display: contents (services-responsive.css) the staged shot found
   no Social art to hide, and Social's sea and island showed through at every other stop. */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: landscape) and (min-height: 601px) {
  .services .service-content .social-desktop-scene { position: absolute; inset: 0; display: block; }
}
/* 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;
  }
}
@media (min-width:1101px), (min-width:600px) and (orientation:landscape) and (min-height:601px) {
  .services .service-design .service-illustration.art-desktop { translate: clamp(24px,4vw,72px) 0; }
}
@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; }
}
/* Each panel 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);
}
@media (min-width:1101px), (min-width:600px) and (orientation:landscape) {
  .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);
  }
}
@media (max-width:599px) and (orientation:portrait) and (max-height:700px) {
  .services .social-mobile-scene { width: min(100vw, calc(var(--stage-unit) * 42)); }
}
.clients .clients-heading { top: 9%; }
.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%; }
  .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))); }
}
.motion-toggle[data-astro-cid-ws4wxc4c] {
  display: none;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: 0 .375rem;
  margin: 0 -.375rem;
  border: 0;
  border-radius: .5rem;
  background: none;
  color: var(--cream);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:root[data-motion] .motion-toggle[data-astro-cid-ws4wxc4c] {
  display: inline-flex;
}

.motion-toggle[data-astro-cid-ws4wxc4c]:hover {
  color: var(--field-pink);
}

.motion-toggle[data-astro-cid-ws4wxc4c]:focus-visible {
  outline: 2px dashed var(--field-pink);
  outline-offset: 2px;
  box-shadow: none;
}

.motion-toggle-track[data-astro-cid-ws4wxc4c] {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.375rem;
  border: 2px solid;
  border-radius: 999px;
  transition: background-color .18s, border-color .18s;
}

.motion-toggle-knob[data-astro-cid-ws4wxc4c] {
  position: absolute;
  top: 2px;
  left: 2px;
  width: .875rem;
  height: .875rem;
  border-radius: 50%;
  background: currentColor;
  transition: transform .26s var(--dd-settle, ease);
}

.motion-toggle-state[data-astro-cid-ws4wxc4c] {
  min-width: 1.6em;
  font-weight: 600;
}

.motion-toggle-off[data-astro-cid-ws4wxc4c] {
  display: none;
}

:root[data-motion="on"] .motion-toggle-track[data-astro-cid-ws4wxc4c] {
  border-color: var(--hot-pink);
  background: var(--hot-pink);
}

:root[data-motion="on"] .motion-toggle-knob[data-astro-cid-ws4wxc4c] {
  background: var(--cream);
  transform: translateX(1.125rem);
}

:root[data-motion="off"] .motion-toggle-on[data-astro-cid-ws4wxc4c] {
  display: none;
}

:root[data-motion="off"] .motion-toggle-off[data-astro-cid-ws4wxc4c] {
  display: inline;
}

.motion-toggle--footer[data-astro-cid-ws4wxc4c] {
  font-size: .8125rem;
  margin-block: calc(.8em - 1.375rem);
}

.motion-toggle--menu[data-astro-cid-ws4wxc4c] {
  margin-top: 1rem;
  font-size: 1rem;
}
.site-footer[data-astro-cid-nns7i3if] {
  position: relative;
  background: var(--deep-ink);
  color: var(--cream);
  padding: clamp(3rem,7vw,6rem) var(--section-gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
}

.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);
}

.site-footer[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if]:not(.footer-logo) {
  position: relative;
}

.site-footer[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if]:not(.footer-logo):after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .12rem;
  height: .28rem;
  background: currentColor;
  -webkit-mask: url("/images/derived/manifesto-underline.svg") center / 100% 100% no-repeat;
  mask: url("/images/derived/manifesto-underline.svg") center / 100% 100% no-repeat;
  transform: scaleX(var(--draw, 0));
  transform-origin: var(--draw-origin, left center);
  pointer-events: none;
}

.footer-bottom[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if]:after {
  bottom: -.22rem;
  height: .22rem;
}

.site-footer[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if]:not(.footer-logo):focus-visible {
  --draw: 1;
}

@media (hover: hover) {
  .site-footer[data-astro-cid-nns7i3if] a[data-astro-cid-nns7i3if]:not(.footer-logo):hover {
    --draw: 1;
  }
}

.footer-logo[data-astro-cid-nns7i3if] {
  position: relative;
}

.footer-logo[data-astro-cid-nns7i3if] .footer-logo-art {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.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;
  }
}