/* ==========================================================================
   JJ INICIO — inner pages (About, Services, Service, Work, Project,
   Contact, Privacy). Loaded after style.css; same 12-col grid & tokens.
   ========================================================================== */

:root {
  --fs-h2-accent: clamp(2.5rem, calc(2.5rem + 2.29 * var(--fp)), 4.79rem);
  --fs-h3-accent: clamp(2.25rem, calc(2.25rem + 2.5 * var(--fp)), 4.75rem);
  --card-shadow: 0 .75rem 2.5rem rgba(10, 4, 30, .28);
}

.t-h2-accent, .t-h3-accent {
  font-family: var(--font-tertiary);
  color: var(--heading-accent);
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  font-variant-ligatures: no-contextual;
  -webkit-text-stroke: .015em currentColor;
}
.t-h2-accent { font-size: var(--fs-h2-accent); }
.t-h3-accent { font-size: var(--fs-h3-accent); }
.has-scribo .t-h2-accent, .has-scribo .t-h3-accent { -webkit-text-stroke: 0; }

/* a whole script line under a display heading ("we create the value.") */
.u-accent-line {
  display: block;
  padding-bottom: .5em; /* LXL: the line box starts under the line above; only the tall script letters reach up into it */
  font-family: var(--font-tertiary);
  font-stretch: 100%;
  font-size: 1.8em;
  font-weight: 400;
  line-height: .5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--heading-accent);
  -webkit-text-stroke: .015em currentColor;
}
.has-scribo .u-accent-line { -webkit-text-stroke: 0; }

.page-top { height: var(--section-page-top); }
.squiggle.is-subtle path { stroke: rgba(0, 0, 0, .2); }
.u-radius { border-radius: var(--radius-large); overflow: hidden; }

/* ==========================================================================
   About
   ========================================================================== */
.hero_about_wrap { padding-block: 0; z-index: 2; }
.hero_about_contain { align-items: center; }
.hero_about_title_wrap { position: relative; max-width: 100%; } /* sized by the heading, as on LXL */
.hero_about_title .t-display { max-width: 17em; } /* LXL: 17em, so the line length grows with the font */
.hero_about_title { text-align: center; }
.hero_about_title .t-display { text-wrap: balance; }
/* photo positions, sizes and tilts are LXL's exact values */
.hero_about_visual_item { position: absolute; z-index: 2; width: 12vw; }
.hero_about_visual_item.is-1 { inset: 0 auto auto 0; transform: translate(-110%, -30%) rotate(-7.5deg); }
.hero_about_visual_item.is-2 { inset: auto 0 0 auto; transform: translate(100%, 20%) rotate(4deg); }
.hero_about_visual_card { position: relative; width: 100%; aspect-ratio: 1; border: var(--border-large) solid var(--card); border-radius: var(--radius-large); overflow: clip; }
.hero_about_visual_card .u-image-wrapper { border-radius: inherit; }

.about-cycle_wrap { } /* full section padding top and bottom, as on LXL */

.team_wrap { z-index: 1; }
.team_contain { z-index: 1; }
.team_heading { grid-column: 2 / -2; margin-bottom: var(--space-5); }
.team_list {
  grid-column: 2 / -2;
  display: flex; flex-wrap: wrap; justify-content: center; /* a short last row sits centred */
  gap: var(--section-main) 0; /* LXL: no column gap, section-size row gap */
}
.team_item { position: relative; width: calc(100% / 3); transform-origin: center; will-change: transform; }
/* LXL "scatter": a tilt and a drop per card, repeating every six */
.team_item:nth-child(6n+1) { transform: rotate(-4deg); }
.team_item:nth-child(6n+2) { transform: rotate(4deg); margin-top: 1.5rem; }
.team_item:nth-child(6n+3) { transform: rotate(-2deg); }
.team_item:nth-child(6n+4) { transform: rotate(3deg); margin-top: 3rem; }
.team_item:nth-child(6n+5) { transform: rotate(-5deg); }
.team_item:nth-child(6n) { transform: rotate(4deg); margin-top: 3rem; }
.team_card {
  padding: .5rem;
  border-radius: var(--radius-large);
  background: var(--swatch--white);
  color: var(--swatch--ink);
  box-shadow: var(--card-shadow);
}
.team_card_visual { position: relative; aspect-ratio: 1; border-radius: var(--radius-main); overflow: hidden; }
.team_card_content { padding: var(--space-2) 1rem; }
.team_card_content .t-h4 { margin-bottom: .5rem; }
.team_card_content p { font-size: var(--fs-small); color: color-mix(in srgb, var(--swatch--ink) 60%, transparent); text-transform: uppercase; letter-spacing: .02em; }
/* full width at its natural shape, centred on the first row of cards (LXL has one row) */
.team_squiggle { position: absolute; left: 0; top: var(--team-row1-center, 40%); width: 100%; transform: translateY(-50%); pointer-events: none; }

/* ==========================================================================
   Services overview
   ========================================================================== */
.services_wrap { padding-block: 0; }
.services_header { text-align: center; align-items: center; }
.services_header h1 { max-width: 16ch; margin-inline: auto; }
.services_card_stack {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
}
.services_card_list { position: relative; width: max(15rem, calc(20rem + (100vw - 90rem) * .175)); aspect-ratio: 320 / 416; } /* LXL: 320px at 1440, 401px at 1903 */
.services_card_item { position: absolute; inset: 0; will-change: transform; }
.services_card_item:nth-child(1) { z-index: 1; }
.services_card_item:nth-child(2) { z-index: 2; }
.services_card_item:nth-child(3) { z-index: 3; }
.services_card {
  --card-text: var(--swatch--ink);
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%;
  padding: .75rem;
  border-radius: var(--radius-large);
  background: var(--swatch--lavender);
  color: var(--card-text);
  box-shadow: var(--card-shadow);
  transition: transform .5s var(--ease-bounce);
}
.services_card.is-white { background: #fff3fe; }
.services_card.is-dark { --card-text: var(--swatch--white); background: #1c0b36; }
.services_card_item:hover .services_card { transform: scale(1.03) rotate(-1deg); }
.services_card_visual { position: relative; width: 50%; aspect-ratio: 1; border-radius: var(--radius-main); overflow: hidden; }
.services_card_content { padding: .75rem .75rem 1rem; }
.services_card_header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.services_card_heading {
  font-family: var(--font-secondary); font-stretch: 118%; font-weight: 800; letter-spacing: -.02em;
  font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; text-wrap: balance;
}
.services_card_heading { flex: 1 1 auto; min-width: 0; font-stretch: 100%; font-size: clamp(1.1rem, 1.75vw, var(--fs-h3)); } /* long names like PHOTOGRAPHY stay inside the card */
.services_card .card_stack_card_icon { flex: none; width: 1.75rem; color: var(--swatch--brand); }
.services_card.is-dark .card_stack_card_icon { color: var(--swatch--pink); }
.services_card_text { margin-top: .75rem; color: color-mix(in srgb, var(--card-text) 65%, transparent); }
.services_card_text strong { color: var(--card-text); font-weight: 700; }
.services_card .clickable { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.services_squiggle { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.services_stack_squiggle { position: absolute; inset: auto 0 10%; width: 110vw; margin-left: -10vw; pointer-events: none; } /* LXL */

/* training card (Services / Contact) — the LXL "Studios" block in JJ violet */
.studios_layout.is-training { --theme-accent: var(--swatch--violet); --heading-accent: var(--swatch--pink); }
.studios_squiggle { position: absolute; inset: auto 0 0; width: 100%; pointer-events: none; } /* LXL: along the bottom of the section */
.studios_layout.is-training .studios_content .t-h1 { max-width: 10ch; } /* LXL: heading 10ch, text 31ch */
.studios_layout.is-training .studios_text .t-main { max-width: 31ch; }
.studios_layout.is-training .studios_content { background: linear-gradient(160deg, #832eff 0%, #5a16c9 100%); }

/* ==========================================================================
   Single service
   ========================================================================== */
.service_wrap { padding-block: 0; z-index: 1; }
.service_contain { z-index: 1; gap: var(--section-main); }
.service_layout { align-items: center; }
.service_layout.is-bottom { align-items: start; }
.service_visual_stack { position: relative; grid-column: 2 / 6; aspect-ratio: 1; }
.service_content_wrap { grid-column: 7 / -1; display: flex; flex-direction: column; gap: var(--space-4); padding-right: var(--space-2); }
.service_content_wrap .t-h3 { max-width: 24ch; line-height: 1.2; }
.service_content { grid-column: 2 / 6; }
.service_content .t-large { max-width: 34ch; }
.service_content .t-large + .t-large { margin-top: 1em; }
.service_work_wrap { position: relative; grid-column: 7 / -1; }
.service_work_title_accent { position: absolute; left: -.25rem; top: 0; z-index: 2; transform: translateY(-80%) rotate(-7deg); }
.service_work_list { display: flex; flex-direction: column; gap: .75rem; max-width: 38rem; }
.service_work_item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-1-5);
  padding: .5rem var(--space-3) .5rem .5rem;
  border-radius: var(--radius-main);
  background: var(--swatch--white);
  color: var(--swatch--ink);
  transition: transform .5s var(--ease-bounce);
}
.service_work_item:hover { transform: scale(1.02) rotate(-.5deg); }
.service_work_visual { position: relative; flex: none; width: clamp(5rem, 7.8vw, 7rem); aspect-ratio: 1; border-radius: var(--radius-small); overflow: hidden; }
.service_work_item .t-h4 { flex: 1; }
.service_work_item .icon-sprite { flex: none; width: 1.75rem; color: var(--swatch--brand); }
.service_top_squiggle { position: absolute; inset: 0 0 auto auto; width: 40vw; pointer-events: none; } /* LXL sizes and positions */
.service_bottom_squiggle { position: absolute; inset: auto 0 0; width: 100%; pointer-events: none; }
@media (max-width: 991px) { .service_top_squiggle { width: 60vw; } }

/* toast stack — shared by Service and Contact */
.toast_stack { position: relative; }
.toast_item { position: absolute; inset: 0; border-radius: var(--radius-large); overflow: clip; }
/* shade comes from the stack position (--background-opacity, set by pages.js) */
.toast-item_overlay { position: absolute; inset: 0; z-index: 1; background: #000; opacity: var(--background-opacity, .2); pointer-events: none; }

/* ==========================================================================
   Work list
   ========================================================================== */
.work-list_wrap { padding-block: 0; height: 100svh; overflow: hidden; }
.work-list_layout { height: 100%; }
.work-list_header { grid-column: 1 / 6; padding-top: var(--section-page-top); }
.work-list_header_layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.work-list_title .t-display { line-height: .9; }
.work-list_filters { display: flex; flex-direction: column; align-items: flex-start; }
.work-filter_btn {
  padding: .45rem .625rem;
  border-radius: var(--radius-small);
  font-family: var(--font-primary); font-size: var(--fs-h6); font-weight: 600; line-height: 1.2;
  text-align: left;
  transition: background-color .2s, color .2s;
}
.work-filter_btn:hover { color: var(--heading-accent); }
.work-filter_btn.is-active { background: var(--card); }
.work-list_list_wrap { position: relative; grid-column: 6 / -1; margin-left: calc(var(--site-gutter) * 2); margin-right: calc(var(--site-margin) * -1 + var(--site-gutter)); }
.work-list_track { position: relative; will-change: transform; }
.work-list_item { transform-origin: center; }
.work-filter_btn[hidden] { display: none; }
.work-list_item { padding-block: .375rem; }
.work-list_item[hidden] { display: none; }
.work-list_item_card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  aspect-ratio: 795 / 447;
  padding: var(--space-1-5);
  border-radius: var(--radius-large);
  overflow: hidden;
  isolation: isolate;
}
.work-list_item_card .u-image-wrapper { z-index: -2; }
.work-list_item_card .u-image-wrapper img { transition: transform .8s var(--ease-osmo); }
.work-list_item_card:hover .u-image-wrapper img { transform: scale(1.05); }
.work-list_item_card .is-letterbox img { transform: scale(1.34); }
.work-list_item_card:hover .is-letterbox img { transform: scale(1.4); }
/* active card states (fade, overlay, title rise) are animated by pages.js, as on LXL */
.work-list_item_overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(10, 4, 30, .75) 100%); }
.work-list_item_content {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
}
.work-list_item_tags { color: color-mix(in srgb, var(--swatch--white) 70%, transparent); }

/* ==========================================================================
   Single project
   ========================================================================== */
.hero_work_wrap {
  position: relative;
  min-height: 100svh;
  justify-content: flex-end;
  padding: var(--section-page-top) 0 var(--site-margin);
  overflow: hidden;
  isolation: isolate;
}
.hero_work_visual { position: absolute; inset: 0; z-index: -1; }
.hero_work_visual .u-image-wrapper { background: #000; }
.hero_work_overlay { position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, rgba(10, 4, 30, 0) 0%, rgba(10, 4, 30, .8) 100%); }
.hero_work_contain { gap: var(--space-3); }
.hero_work_layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gutter); }
.hero_work_content { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.hero_work_text { color: color-mix(in srgb, var(--swatch--white) 75%, transparent); }
.hero_work_text a { transition: color .2s; }
.hero_work_text a:hover { color: var(--heading-accent); }

.video-player_wrap { padding-top: var(--section-page-top); z-index: 2; } /* LXL: page-top spacer above, main below; above the gallery so the squiggle's loop isn't clipped */
.video-player_contain { z-index: 1; }
.video-player_layout { position: relative; }
.video-player {
  position: relative;
  grid-column: 2 / -2;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-main);
  overflow: hidden;
  background: #000;
}
.video-player iframe, .video-player > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.video-player_dark { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
.video-player_play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: clamp(4rem, 6.7vw, 6rem); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: transform .5s var(--ease-bounce), background-color .3s;
}
.video-player_play svg { width: 38%; margin-left: 8%; }
.video-player_play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, .35); }
.video-player_play::after { content: ""; position: absolute; inset: -100vmax; } /* the whole poster is clickable */
.video-player.is-playing .video-player_play, .video-player.is-playing .video-player_dark { display: none; }
.gallery_heading { position: absolute; z-index: 4; left: 12%; top: 0; transform: translateY(-50%) rotate(-11deg); pointer-events: none; } /* LXL */
.gallery_heading.is-right { left: auto; right: 30%; }
.video-player_squiggle { position: absolute; inset: 0; width: 100%; pointer-events: none; } /* LXL: full width across the section */
.video-player_squiggle svg { height: 100%; } /* LXL .u-svg: fills the section, so the drawing sits centred on it */

.gallery_wrap { z-index: 1; padding-bottom: var(--section-small); } /* LXL spacing */
.gallery_layout { position: relative; }
.gallery_list_wrap { grid-column: 2 / -2; cursor: grab; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.gallery_list_wrap.is-dragging { cursor: grabbing; }
.gallery_list { display: flex; gap: var(--site-gutter); will-change: transform; }
[data-gallery] .gallery_list { padding-bottom: max(0px, 52rem - 120vh); } /* LXL: the slide box stays 52rem tall when its image is capped at 120vh */
.gallery_item {
  position: relative; flex: none;
  width: auto; height: min(52rem, 120vh); /* LXL slider: 52rem tall (images capped at 120vh), as wide as their 3:2 frame, so the next one only just peeks in */
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-main);
  overflow: hidden;
}
.gallery_item img { pointer-events: none; }

.next_wrap { padding: var(--section-main) 0 calc(var(--section-main) + 1.25rem); } /* LXL: main spacers above and below, plus the card's 1.25rem frame */
.next_card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  margin-inline: 1.25rem;
  min-height: calc(100svh - 2.5rem);
  padding: var(--space-3);
  border-radius: var(--radius-main);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.next_card_visual { position: absolute; inset: 0; z-index: -1; }
.next_card_visual img { transition: transform 1.2s var(--ease-osmo); }
.next_card:hover .next_card_visual img { transform: scale(1.04); }
.next_card:hover .next_card_visual .is-letterbox img { transform: scale(1.4); }
.next_card_overlay { position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, rgba(10, 4, 30, 0), rgba(10, 4, 30, .8)); }
.next_card_heading { margin-bottom: -.15em; transform: rotate(-4deg); }

/* ==========================================================================
   Contact
   ========================================================================== */
.hero_contact_wrap { padding-block: 0; z-index: 2; overflow: clip; }
/* LXL's exact fan: equal 15vw photos pulled towards the middle, middle one on top */
.hero_contact_contain { z-index: 1; align-items: center; gap: clamp(4rem, calc(4rem + 5.713 * var(--fp)), 9.713rem); } /* above the squiggle */
.hero_contact_visual_list { display: flex; justify-content: center; align-items: center; }
.hero_contact_visual_item { position: relative; flex: none; width: 15vw; }
.hero_contact_visual_item.is-1 { transform: translate(50%, 12%) rotate(-7.5deg); }
.hero_contact_visual_item.is-2 { transform: translate(30%, 12%) rotate(-12deg); }
.hero_contact_visual_item.is-3 { z-index: 2; }
.hero_contact_visual_item.is-4 { z-index: 1; transform: translate(-26%, 14%) rotate(8deg); }
.hero_contact_visual_item.is-5 { transform: translate(-50%, 7%) rotate(-6deg); }
.hero_contact_visual_card { position: relative; width: 100%; aspect-ratio: 1; border: var(--border-large) solid var(--card); border-radius: var(--radius-large); overflow: clip; }
.hero_contact_content { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.hero_contact_content .t-display { max-width: 12ch; } /* LXL: 12ch, so the heading runs to three lines */
.hero_contact_content .t-main { max-width: 34ch; }
.hero_contact_squiggle { position: absolute; left: 0; top: 0; width: 50vw; pointer-events: none; }

/* copy-email button — LXL: the three lines (email / "Click to copy" / "Copied") stack in a
   1.4em window and slide up one line on hover, two once copied; the icon square darkens */
.copy-email-button {
  display: flex; align-items: center; gap: .625rem;
  height: var(--button-medium);
  padding: .25rem 1rem .25rem .25rem;
  border: var(--border-large) solid rgba(255, 255, 255, .2);
  border-radius: .5em;
  background: var(--btn-bg); color: var(--btn-text);
  overflow: clip;
}
.copy-email-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.copy-email-icon {
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; aspect-ratio: 1;
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--swatch--dark) 20%, transparent);
  transition: background .3s var(--ease-osmo);
}
.copy-email-icon svg { width: 60%; }
.copy-email-text { display: flex; flex-direction: column; align-items: center; height: 1.4em; overflow: hidden; }
.copy-email-text > span { white-space: nowrap; padding-block: .1em; line-height: 1.2; transition: transform .3s var(--ease-osmo); }
@media (hover: hover) and (pointer: fine) {
  .copy-email-button:hover .copy-email-icon { background: color-mix(in srgb, var(--swatch--dark) 30%, transparent); }
  .copy-email-button:hover .copy-email-text > span { transform: translateY(-100%); }
}
.copy-email-button:focus-visible .copy-email-icon { background: color-mix(in srgb, var(--swatch--dark) 30%, transparent); }
.copy-email-button:focus-visible .copy-email-text > span { transform: translateY(-100%); }
.copy-email-button[data-copy-clipboard-state=copied] .copy-email-icon { background: var(--swatch--dark); }
.copy-email-button[data-copy-clipboard-state=copied] .copy-email-text > span { transform: translateY(-200%); }
.contact_phone { color: color-mix(in srgb, var(--text) 70%, transparent); }
.contact_phone a { color: var(--text); }

.toast_wrap { z-index: 1; }
.toast_layout { align-items: center; }
.toast_item_wrap { grid-column: 2 / 7; aspect-ratio: 564 / 470; }
.toast_content { grid-column: 8 / -1; display: flex; flex-direction: column; gap: var(--space-3); }
.toast_content .t-h1 { max-width: 10ch; } /* LXL: 10ch */
.toast_content .t-main { max-width: 32ch; } /* LXL: 32ch */

/* ==========================================================================
   Privacy
   ========================================================================== */
.legal_wrap { padding-bottom: var(--section-main); padding-top: 0; }
.legal_header { text-align: center; align-items: center; }
.legal_content { display: flex; flex-direction: column; gap: var(--space-2-5); width: min(100%, 45rem); margin-inline: auto; }
.legal_date { text-align: center; }
.legal_text { color: color-mix(in srgb, var(--text) 75%, transparent); }
.legal_text p, .legal_text ul { margin-bottom: 1em; }
.legal_text ul { padding-left: 1.25em; list-style: disc; }
.legal_text li + li { margin-top: .35em; }
.legal_text h2 { margin: 2em 0 1em; color: var(--text); }
.legal_text a { color: var(--text); }
.legal_squiggle { position: absolute; right: 0; top: 0; width: 30vw; pointer-events: none; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 991px) {
  .hero_about_visual_item.is-1 { transform: translate(119%, -83%) rotate(-7.5deg); }
  .hero_about_visual_item.is-2 { transform: translate(-122%, 89%) rotate(4deg); }
  .hero_about_visual_item { z-index: 0; } /* the photos tuck behind the heading */
  .hero_about_title { position: relative; z-index: 1; }
  .hero_contact_visual_item { width: 20vw; }
  .hero_contact_squiggle { width: 60vw; }
  .team_list { grid-column: 1 / -1; width: 92%; margin-inline: auto; } /* LXL: still three across */
  .service_visual_stack { grid-column: 1 / 6; }
  .service_content { grid-column: 1 / 6; }
  .service_work_wrap { grid-column: 7 / -1; }
  .work-list_wrap { height: auto; overflow: visible; } /* LXL: no bottom padding; the footer's spacer sets the gap */
  .work-list_layout { display: flex; flex-direction: column; gap: var(--space-3); }
  .work-list_header { padding-top: var(--section-page-top); }
  .work-list_list_wrap { margin: 0; }
  /* LXL tablet project hero: the image becomes a rounded 16:9 card above the title and details */
  .hero_work_wrap { min-height: auto; justify-content: flex-start; gap: var(--space-3); padding: var(--section-main) 0 0; overflow: visible; }
  .hero_work_visual { position: relative; inset: auto; z-index: 0; order: -1; width: calc(100% - var(--site-margin) * 2); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-large); overflow: clip; }
  .hero_work_contain { padding-bottom: var(--space-1); }
  /* LXL tablet: centred title, filters in a wrapping row, 3:2 image with the title and tags underneath */
  .work-list_header_layout { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
  .work-list_filters { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .work-list_track { display: flex; flex-direction: column; gap: var(--space-4); }
  .work-list_item { padding-block: 0; }
  .work-list_item_card { aspect-ratio: auto; padding: 0; gap: var(--space-2); justify-content: center; border-radius: 0; overflow: visible; }
  .work-list_item_card .u-image-wrapper { position: relative; inset: auto; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-large); }
  .work-list_item_overlay { display: none; }
  .work-list_item_content { opacity: 1; transform: none; }
  .work-list_item[data-wiggle]:hover [data-wiggle-target] { animation: none; } /* no title wiggle once the title sits under the image */
  .video-player, .gallery_list_wrap { grid-column: 1 / -1; }
  .gallery_item { height: min(40rem, 120vh); } /* LXL: 40rem tall on tablet */
  [data-gallery] .gallery_list { padding-bottom: max(0px, 40rem - 120vh); }
  .gallery_heading { left: var(--space-2); }
  .gallery_heading.is-right { right: var(--space-2); }
  .toast_item_wrap { grid-column: 1 / 7; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  .hero_about_title_wrap { margin-top: 34vw; } /* LXL: room above the title for the two photos */
  .hero_about_visual_item { width: 16vw; }
  .hero_about_visual_item.is-1 { inset: 0 auto auto 50%; transform: translate(-95%, -130%) rotate(-7.5deg); }
  .hero_about_visual_item.is-2 { inset: 0 50% auto auto; transform: translate(95%, -120%) rotate(4deg); }
  .team_list { width: 90%; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: var(--section-small); }
  .team_item { width: min(100%, 24rem); }
  .team_item:nth-child(n) { margin-top: 0; } /* LXL: tilts stay, drops go */
  .service_layout, .service_layout.is-bottom { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .service_visual_stack { width: min(100%, 26rem); margin-inline: auto; }
  .service_content_wrap { padding-right: 0; gap: var(--space-2); }
  .service_work_title_accent { transform: translateY(-75%) rotate(-7deg); }
  .work-list_header_layout { grid-template-columns: 1fr; gap: var(--space-2); }
  .work-list_filters { flex-direction: row; flex-wrap: wrap; gap: .25rem; }
  .work-list_item_card { aspect-ratio: 4 / 3; padding: var(--space-1); }
  .hero_work_layout { gap: .5rem; } /* LXL: stays three across, tighter gap */
  .hero_contact_visual_item { width: 28vw; }
  .hero_contact_visual_item.is-1 { transform: translate(20%, 12%) rotate(-7.5deg); }
  .hero_contact_visual_item.is-2 { transform: translate(-5%, 12%) rotate(-12deg); }
  .hero_contact_visual_item.is-3 { transform: translate(-20%) rotate(5deg); }
  .hero_contact_visual_item.is-4, .hero_contact_visual_item.is-5 { display: none; }
  .toast_layout { display: flex; flex-direction: column; gap: var(--space-5); }
  .toast_item_wrap { width: 100%; }
  .toast_content { text-align: center; align-items: center; }
  .next_card { margin-inline: .75rem; min-height: 80svh; }
  .next_wrap { padding-bottom: calc(var(--section-main) + .75rem); }
  .gallery_heading { transform: translateY(-75%) rotate(-11deg); }
  /* LXL: stills stack full width instead of sliding */
  .gallery_list { flex-direction: column; }
  .gallery_item { width: 100%; height: auto; }
  [data-gallery] .gallery_list { padding-bottom: 0; }
  .gallery_list_wrap[data-gallery] { cursor: default; touch-action: auto; }
  .cursor { display: none; }
}

@media (max-width: 479px) {
  .hero_about_visual_item { width: 28vw; }
  .hero_contact_squiggle { width: 80vw; }
  .services_card_heading { font-stretch: 100%; }
  .service_work_item { padding-right: 1rem; gap: var(--space-1); }
  .service_work_item .t-h4 { font-size: var(--fs-h5); }
}

@media (prefers-reduced-motion: reduce) {
  .services_card, .service_work_item, .video-player_play, .copy-email-icon, .copy-email-text > span { transition: none; }
}
/* a gallery with one image fills the content width (LXL "Key Art") */
.gallery_item:only-child { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.gallery_list_wrap:not([data-gallery]) { cursor: default; }
.hero_contact_visual_item.is-5 img { object-position: 50% 15%; } /* keep the face in frame */

/* ==========================================================================
   Training page (LXL "Studios" layout)
   ========================================================================== */
/* why-train grid: LXL "studio projects" — wide card, then two 4:5 cards */
.training_grid_wrap { z-index: 1; padding-block: var(--section-small); } /* LXL studio projects: small spacer top and bottom */
.training_grid {
  grid-column: 2 / -2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--site-gutter);
}
.training_grid_item {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-2-5) var(--space-2);
  border-radius: var(--radius-large); overflow: clip; color: var(--swatch--white);
  aspect-ratio: 4 / 5; z-index: 2;
}
.training_grid_item:nth-child(3n + 1) { grid-column: span 2; aspect-ratio: 3 / 1.75; z-index: 1; }
.training_grid_item .u-image-wrapper img { transition: transform .8s var(--ease-osmo); }
.training_grid_item:hover .u-image-wrapper img { transform: scale(1.05); }
/* LXL video cards: the clip sits over the poster and fades in while playing */
.training_grid_video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.training_grid_item[data-video-on-hover="active"] .training_grid_video { opacity: 1; }
.training_grid_overlay { position: absolute; inset: auto 0 0; z-index: 1; height: 60%; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.training_grid_content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-1); }
.training_grid_content .t-main { max-width: 35ch; opacity: .85; }
.training_grid_squiggle { position: absolute; inset: 20% 0 auto; z-index: 2; width: 100%; pointer-events: none; } /* LXL: over the tiles */
.training_grid_wrap > .u-container { z-index: 1; }
/* course cards (LXL "is-studios" stack): larger on small screens, title and arrow stay on one row.
   Archivo at 118% runs wider than LXL's Owners Wide, so these titles use the unstretched cut. */
.is-studios .card_stack_card_text { min-width: 0; font-stretch: 100%; letter-spacing: -.03em; }
.is-studios .card_stack_card_icon { flex-shrink: 0; }
@media (max-width: 767px) { .card_stack_list_wrap.is-studios { width: 60%; } }
@media (max-width: 479px) {
  .card_stack_list_wrap.is-studios { width: 80%; }
  .card_stack_list.is-studios { perspective: 60vw; }
  .is-studios .card_stack_card_content { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-1); }
  .is-studios .card_stack_card_text { flex: 0 1 auto; max-width: 12ch; }
}
@media (max-width: 991px) { .training_grid { grid-column: 1 / -1; } } /* LXL: full width on tablet */
@media (max-width: 767px) { .training_grid { display: flex; flex-direction: column; } } /* LXL: one column; wide cards keep their shape */
@media (max-width: 479px) { .training_grid_content .t-main { display: none; } } /* LXL: text hidden on phones only */

/* social cut (LXL project pages): one 9:16 video, 40vw wide, centred */
.social_wrap { z-index: 1; padding-block: var(--section-main) var(--section-small); } /* LXL: main spacer above, small below */
.social_contain { z-index: 1; }
.social_cut_list { grid-column: 2 / -2; display: flex; justify-content: center; }
.social_cut.video-player { grid-column: auto; width: 40vw; aspect-ratio: 9 / 16; }
.social_squiggle { position: absolute; inset: auto 0 0; width: 100%; pointer-events: none; }
@media (max-width: 991px) { .social_cut.video-player { width: 60vw; } }
@media (max-width: 767px) { .social_cut_list { grid-column: 1 / -1; } .social_cut.video-player { width: 100%; } }

/* LXL drag cursor: a brand pill with two dots that follows the pointer over galleries */
.cursor { position: fixed; top: 0; left: 0; z-index: 100; display: flex; align-items: center; justify-content: center; width: 0; height: 0; color: var(--swatch--white); pointer-events: none; }
.cursor_bubble { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 5rem; height: 2.25rem; margin-top: -1.5rem; border-radius: var(--radius-round); background: var(--swatch--brand); clip-path: inset(50% round 100rem); transition: clip-path .6s cubic-bezier(.65, 0, 0, 1); }
.cursor_bubble_drag { position: relative; overflow: hidden; }
.cursor_bubble_drag_span { display: block; font-family: var(--font-secondary); font-stretch: 118%; font-weight: 800; text-transform: uppercase; transform: translateY(100%) scale(.5); transition: transform .6s cubic-bezier(.65, 0, 0, 1); }
.cursor_drag_dots { position: absolute; display: flex; justify-content: space-between; width: 0; margin-top: -1.5rem; overflow: hidden; border-radius: 50em; transform: scale(0); transition: all .6s cubic-bezier(.65, 0, 0, 1); }
.cursor_drag_dot { flex: none; width: .5rem; aspect-ratio: 1; border-radius: var(--radius-round); background: var(--swatch--brand); }
body:has([data-cursor=drag]:hover) .cursor_bubble { clip-path: inset(0% round 100rem); }
body:has([data-cursor=drag]:hover) .cursor_bubble_drag_span { transform: none; }
body:has([data-cursor=drag]:hover) .cursor_drag_dots { width: 7rem; transform: none; }
@media (hover: hover) and (pointer: fine) { .gallery_list_wrap[data-cursor=drag], .gallery_list_wrap[data-cursor=drag].is-dragging { cursor: none; } }
@media not ((hover: hover) and (pointer: fine)) { .cursor { display: none; } }

/* ==========================================================================
   LXL tablet / phone layouts for Work and project pages (≤991px)
   ========================================================================== */
@media (max-width: 991px) {
  /* Work list: image card with the title and tags centred below it */
  .work-list_header_layout { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .work-list_filters { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .25rem; }
  .work-list_track { gap: var(--space-4); }
  .work-list_item { padding-block: 0; }
  .work-list_item_card { aspect-ratio: auto; min-height: 0; padding: 0; gap: var(--space-2); border-radius: 0; overflow: visible; justify-content: center; }
  .work-list_item_card .u-image-wrapper { position: relative; inset: auto; z-index: auto; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-large); }
  .work-list_item_overlay { display: none; }
  .work-list_item_content { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .work-list_item_tags { color: color-mix(in srgb, var(--text) 60%, transparent); }

  /* Project hero: a rounded 16:9 image card on top, title and details below */
  .hero_work_wrap { min-height: 0; justify-content: flex-start; gap: var(--space-3); padding: var(--section-main) 0 0; }
  .hero_work_visual { position: relative; inset: auto; order: -1; width: calc(100% - var(--site-margin) * 2); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-large); overflow: clip; z-index: 0; }
  .hero_work_visual .u-overlay, .hero_work_overlay { display: none; }
  .hero_work_contain { padding-bottom: var(--space-1); }
  .hero_work_text { color: color-mix(in srgb, var(--text) 70%, transparent); }
}
@media (max-width: 767px) {
  /* stills stack vertically, no dragging */
  .gallery_list { flex-direction: column; transform: none !important; }
  .gallery_item { width: 100%; }
  .gallery_hint { display: none; }
  .gallery_list_wrap[data-cursor=drag] { cursor: default; }
}
@media (max-width: 479px) {
  .hero_work_layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .hero_work_text { font-size: var(--fs-small); }
  .next_card { aspect-ratio: 1; min-height: 0; padding: var(--space-2); }
}

/* LXL tablet / phone rules for service pages, Contact, Services cards and Next-up (exact values) */
@media (max-width: 991px) {
  .service_contain { gap: var(--section-small); }
  .service_layout { display: flex; flex-direction: column; align-items: center; gap: var(--section-main); }
  .service_layout.is-bottom { gap: var(--section-large); justify-content: flex-start; align-items: center; }
  .service_visual_stack { width: 60%; margin-inline: auto; }
  .service_content_wrap { padding-right: 0; gap: var(--space-2-5); text-align: center; justify-content: center; align-items: center; }
  .service_content { text-align: center; width: auto; }
  .service_content .btn-wrapper { justify-content: center; }
  .service_work_wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
  .service_work_list { width: 100%; }
  .service_work_title_accent { left: 50%; transform: translate(-50%, -160%) rotate(-7deg); }
  .toast_layout { display: flex; flex-direction: column; align-items: center; gap: var(--section-main); }
  .toast_item_wrap { width: 70%; }
  .toast_content { width: 100%; text-align: center; align-items: center; justify-content: center; }
  .services_card_list { width: 50%; }
  .next_card { min-height: 0; aspect-ratio: 3 / 2; margin-inline: 1rem; }
}
@media (max-width: 767px) {
  .service_content_wrap .t-display { margin-inline: auto; }
  .service_work_visual { width: 6rem; }
  .toast_item_wrap { width: 80%; }
  .services_card_list { width: 80%; }
  .services_card { font-size: .8em; }
  .next_card { margin-inline: .75rem; }
}
@media (max-width: 479px) {
  .service_visual_stack { width: 70%; }
  .next_card { aspect-ratio: 1; padding: var(--space-2); }
}

/* LXL section spacing */
.training_grid_wrap { padding-block: var(--section-small); }
.next_wrap { padding-block: var(--section-main); }
@media (max-width: 767px) { .team_wrap { padding-top: var(--section-small); } }
/* LXL phone team list: 92% of a 90%-wide wrap, cards fill it */
@media (max-width: 767px) { .team_list { width: calc(90% * .92); margin-inline: auto; } .team_item { width: 100%; } }

/* LXL tablet / phone Services cards: a sticky list, 20rem cards, 135px apart, 10dvh above and below */
@media (max-width: 991px) {
  .services_card_stack { min-height: 0; display: block; padding-block: 10dvh; }
  .services_card_list { display: flex; flex-direction: column; gap: 135px; width: max(20rem, 50%); max-width: 100%; margin-inline: auto; aspect-ratio: auto; }
  .services_card_item { position: sticky; inset: auto; top: var(--section-page-top); width: 100%; aspect-ratio: 320 / 416; }
}
@media (max-width: 767px) { .services_card_list { width: 20rem; } }
.services_contain { gap: 0; } /* LXL: the stacks follow the heading directly */