/* ==========================================================================
   SON Agency — design system
   One quiet, premium language for every page: black and white with a single
   brand blue, an editorial grotesque, asymmetric composition, full-bleed
   photography, precise image frames and a consistent light/dark rhythm.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../resources/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "SON Graphik";
  src: url("../resources/fonts/CommercialGraphik-Upright-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colour */
  --black: #010205;
  --ink: #010205;
  --white: #ffffff;
  --surface: #eeeff2;
  --surface-strong: #e2e3e7;
  --line: #d8d8db;
  --grey: #6b6d70;
  --grey-strong: #535457;
  --dark: #0e0e12;
  --dark-surface: #212225;
  --dark-line: rgba(255, 255, 255, .16);
  --dark-muted: rgba(246, 246, 248, .67);
  --blue: #1c90ff;
  --focus: #1c90ff;
  --glass: rgba(255, 255, 255, .14);
  --glass-strong: rgba(255, 255, 255, .24);
  --glass-dark: rgba(64, 64, 68, .7);

  /* Type */
  --font: "SON Graphik", Helvetica, Arial, sans-serif;
  --font-heading: "Space Grotesk", Helvetica, Arial, sans-serif;
  --font-heading-weight: 700;
  --font-heading-stretch: normal;
  --display-lg: clamp(2.25rem, 1.2rem + 3.8vw, 4.75rem);
  --display-md: clamp(1.9rem, 1.1rem + 2.6vw, 3.5rem);
  --heading-xl: clamp(1.65rem, 1.2rem + 1.4vw, 2.5rem);
  --heading-lg: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  --heading-sm: clamp(1.15rem, 1.05rem + .35vw, 1.375rem);
  --lead: clamp(1.125rem, 1.02rem + .4vw, 1.375rem);
  --text: 1rem;
  --small: .875rem;

  /* Space & shape */
  --gutter: clamp(16px, 4.6vw, 88px);
  --max: 1440px;
  --section: clamp(52px, 6vw, 104px);
  --gap: clamp(16px, 1.6vw, 24px);
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 4px;
  --r-xl: 6px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blue); color: var(--white); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }
.icon { width: 24px; height: 24px; flex: none; }
.accent { color: inherit; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
main { display: block; }
.wp-block-group { margin: 0; }

/* ---------- Type scale ---------- */
.display-lg, .display-md, .heading-xl, .heading-lg, .heading-sm {
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.display-lg { font-size: var(--display-lg); line-height: 1; }
.display-md { font-size: var(--display-md); line-height: 1.02; }
.heading-xl { font-size: var(--heading-xl); line-height: 1.08; letter-spacing: -.045em; }
.heading-lg { font-size: var(--heading-lg); line-height: 1.12; letter-spacing: -.04em; }
.heading-sm { font-size: var(--heading-sm); line-height: 1.25; font-weight: 500; font-stretch: normal; letter-spacing: -.025em; }
.lead { font-size: var(--lead); line-height: 1.45; color: var(--grey-strong); text-wrap: pretty; }
p { text-wrap: pretty; }
.eyebrow { font-size: var(--small); color: var(--grey); }

/* One heading family across home, services, editorial and legal pages. */
body:not(.cms) :is(h1, h2, h3, h4, .display-lg, .display-md, .heading-xl, .heading-lg, .heading-sm, .tile-title, .statement-lead, .camera-tagline) {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-stretch: var(--font-heading-stretch);
}

/* ---------- Controls ---------- */
.btn, .submit-button, .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 13px 26px;
  border: 0; border-radius: var(--r-md);
  font-size: var(--text); font-weight: 400; line-height: 1.5; text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--primary, .submit-button, .wp-block-button__link { background: var(--black); color: var(--white); }
.btn--primary:hover, .submit-button:hover, .wp-block-button__link:hover { background: #2b2b2f; }
.btn--secondary { background: var(--line); color: var(--black); }
.btn--secondary:hover { background: #c9cacd; }
.btn--glass {
  background: var(--glass-dark); color: var(--white);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.btn--glass:hover { background: rgba(90, 90, 96, .78); }
.section--dark .btn--primary, .hero--dark .btn--primary { background: var(--white); color: var(--black); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.link-pure {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text); line-height: 1.5;
  transition: color .2s var(--ease);
}
.link-pure .icon { width: 20px; height: 20px; transition: transform .3s var(--ease-out); }
.link-pure:hover .icon { transform: translateX(4px); }
.link-pure:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link-pure--light { color: var(--white); }

.arrow-button {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--glass); color: var(--white);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: background-color .25s var(--ease), transform .35s var(--ease-out);
}
.arrow-button .icon { width: 20px; height: 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  padding: 3px 12px; border-radius: 999px;
  background: var(--glass); color: var(--white);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: var(--small); line-height: 1.6;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 1000;
  padding: 12px 18px; border-radius: var(--r-md);
  background: var(--white); color: var(--black);
}
.skip-link:focus { top: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  color: var(--ink);
  transition: transform .45s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease);
}
.header-bar {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--header-h);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  opacity: 1; transition: opacity .3s var(--ease);
}
.menu-toggle {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 4px; border: 0; background: none;
  font-size: var(--text);
}
.menu-icon { position: relative; width: 18px; height: 12px; }
.menu-icon::before, .menu-icon::after, .menu-icon {
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; }
.menu-icon::before { top: 0; }
.menu-icon::after { bottom: 0; }
.wordmark { display: block; justify-self: center; }
.wordmark img { height: 22px; width: auto; }
.logo-on-dark { display: none; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.language-selector { display: flex; align-items: center; gap: 2px; }
.language-option {
  min-width: 34px; height: 32px; padding: 0 6px;
  border: 0; border-radius: var(--r-sm); background: none;
  font-size: var(--small); letter-spacing: .02em; opacity: .55;
  transition: opacity .2s var(--ease);
}
.language-option:hover, .language-option[aria-pressed="true"] { opacity: 1; }
.language-option[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-contact {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px;
  border-radius: var(--r-md); background: var(--black); color: var(--white);
  font-size: var(--small);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.nav-contact:hover { background: #2b2b2f; }

/* Transparent header over a dark hero, until the page scrolls. */
body:has(.hero--dark) .site-header:not(.is-scrolled) { color: var(--white); }
body:has(.hero--dark) .site-header:not(.is-scrolled)::before,
body:has(.hero--light) .site-header:not(.is-scrolled)::before { opacity: 0; }
body:has(.hero--dark) .site-header:not(.is-scrolled) .logo-on-dark { display: block; }
body:has(.hero--dark) .site-header:not(.is-scrolled) .logo-on-light { display: none; }
body:has(.hero--dark) .site-header:not(.is-scrolled) .nav-contact { background: var(--glass-dark); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
body:has(.hero--dark) .site-header:not(.is-scrolled) .nav-contact:hover { background: rgba(90, 90, 96, .78); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.menu-open { transform: none; }

@media (max-width: 760px) {
  :root { --header-h: 60px; }
  .wordmark img { height: 18px; }
  .nav-contact { display: none; }
  .language-option { min-width: 30px; padding: 0 4px; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Flyout navigation ---------- */
.flyout { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; color: var(--ink); }
.flyout.is-open { visibility: visible; pointer-events: auto; }
.flyout-backdrop {
  position: absolute; inset: 0;
  background: rgba(1, 2, 5, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .45s var(--ease);
}
.flyout.is-open .flyout-backdrop { opacity: 1; }
.flyout-panel {
  position: absolute; inset: 0 auto 0 0;
  display: flex; flex-direction: column;
  width: min(100%, 520px); height: 100%;
  padding: 0 clamp(20px, 3vw, 48px) 32px;
  background: var(--white); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform .5s var(--ease-out);
}
.flyout.is-open .flyout-panel { transform: none; }
@media (min-width: 761px) { .flyout-panel { border-radius: 0 var(--r-xl) var(--r-xl) 0; } }
.flyout-head { display: flex; align-items: center; height: var(--header-h); flex: none; }
.flyout-close {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: -6px; padding: 8px; border: 0; border-radius: var(--r-md); background: none;
}
.flyout-close:hover { background: var(--surface); }
.flyout-list { margin-top: clamp(12px, 2.5vh, 28px); }
.flyout-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px; min-height: 44px; margin-inline: -12px; border-radius: var(--r-lg);
  font-size: clamp(1.25rem, 1.1rem + .65vw, 1.625rem); font-stretch: normal; line-height: 1.2;
  transition: background-color .2s var(--ease);
}
.flyout-link .icon { opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .35s var(--ease-out); }
.flyout-link:hover, .flyout-link[aria-current="page"] { background: var(--surface); }
.flyout-link:hover .icon, .flyout-link[aria-current="page"] .icon { opacity: 1; transform: none; }
.flyout-link--sub { font-size: clamp(1rem, .95rem + .25vw, 1.125rem); padding-block: 9px; }
.flyout-group { margin-block: 12px; padding-block: 12px; border-block: 1px solid var(--line); }
.flyout-group-title { padding-bottom: 6px; font-size: var(--small); color: var(--grey); }
.flyout-foot { margin-top: auto; padding-top: 28px; font-size: .875rem; display: grid; gap: 6px; color: var(--grey-strong); }
.flyout-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.flyout-panel .language-selector { margin-top: 18px; }
body.flyout-locked { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + 48px) 0 clamp(88px, 12vh, 136px);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--black); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero--dark { color: var(--white); background: var(--black); }
.hero--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(1, 2, 5, .82) 0%, rgba(1, 2, 5, .38) 34%, rgba(1, 2, 5, 0) 62%),
    linear-gradient(to bottom, rgba(1, 2, 5, .5) 0%, rgba(1, 2, 5, 0) 22%),
    linear-gradient(to right, rgba(1, 2, 5, .45) 0%, rgba(1, 2, 5, 0) 55%);
}
.hero--light { color: var(--ink); }
.hero--light .hero-media { background: var(--surface); }
.hero--light::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .45) 38%, rgba(255, 255, 255, 0) 70%);
}
.hero-content { display: grid; gap: clamp(18px, 2.4vh, 28px); justify-items: start; }
.hero-content h1 { max-width: 15ch; }
.hero--inner { min-height: 100vh; min-height: 100svh; }
.hero--inner .hero-content h1 { max-width: 18ch; }
.video-carousel .hero-content h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-stretch: var(--font-heading-stretch);
  letter-spacing: -.045em;
  line-height: 1.04;
  max-width: 20ch;
}
.hero-lead { max-width: 34rem; font-size: var(--lead); line-height: 1.45; opacity: .9; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 28px; translate: -50% 0;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: inherit; opacity: .85;
  animation: hero-nudge 2.6s var(--ease) infinite;
}
.hero-scroll:hover { opacity: 1; }
@keyframes hero-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(6px); } }
.video-toggle {
  position: absolute; right: var(--gutter); bottom: 28px;
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: var(--glass-dark); color: var(--white);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.video-toggle:hover { background: rgba(90, 90, 96, .78); }
.video-toggle-icon { width: 12px; height: 14px; border-inline: 3.5px solid currentColor; }
.video-toggle[aria-pressed="true"] .video-toggle-icon {
  width: 0; height: 0; margin-left: 4px; border: 0;
  border-left: 12px solid currentColor; border-block: 7.5px solid transparent;
}
.video-screen { position: absolute; inset: 0; cursor: pointer; }
.video-screen:focus-visible { outline-offset: -6px; border-radius: 0; }
.video-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s var(--ease); }
.video-slide.is-active { opacity: 1; }
@media (max-width: 700px) {
 .hero-media .video-screen { overflow: hidden; }
 .hero-media .video-slide { inset: 0; margin: auto; object-position: center center; }
}
.video-error { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 16px); color: var(--dark-muted); font-size: var(--small); }
@media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }
@media (max-width: 760px) {
  .hero, .hero--inner, .hero--home { min-height: 100vh; min-height: 100svh; padding-bottom: 88px; }
  .video-toggle { width: 44px; height: 44px; bottom: 26px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--light { background: var(--white); color: var(--ink); }
.section--surface { background: var(--surface); color: var(--ink); }
.section--dark { background: var(--black); color: var(--white); }
.section--dark .lead, .banner .banner-lead { color: var(--dark-muted); }
.section--tight-bottom { padding-bottom: 0; }
.section-title { display: grid; gap: 18px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-title--center { justify-items: start; text-align: left; }
.section-title--center .lead { max-width: 40rem; }
.section-title--start { justify-items: start; }
.section-title--start .lead { max-width: 44rem; }
.section-action { display: flex; justify-content: center; margin-top: clamp(40px, 4vw, 64px); }

/* Editorial headings pair a short title with a wider introduction. */
@media (min-width: 901px) {
 .section-title:has(> .lead) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
 .section-title:has(> .lead) .lead { max-width: 44ch; font-size: clamp(1.25rem, 1.7vw, 1.8rem); letter-spacing: -.035em; line-height: 1.25; }
 .team-card:nth-child(3n + 2) { padding-top: 40px; }
}
.tile-title, .flyout-link, .brand-dialog h2, .page-intro h1 { letter-spacing: -.035em; }
.feature-copy > .lead { letter-spacing: -.025em; }

/* ---------- Tiles ---------- */
.teaser-band { background: var(--white); padding-block: clamp(32px, 4vw, 64px) 0; }
.tile-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tile-row--compact { max-width: 1240px; margin-inline: auto; }
.tile-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--r-xl); background: var(--dark-surface); color: var(--white);
  transform: translateZ(0);
}
.tile-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(1, 2, 5, .78) 0%, rgba(1, 2, 5, .28) 38%, rgba(1, 2, 5, 0) 62%);
}
a.tile:hover .tile-image, a.tile:focus-within .tile-image { transform: scale(1.04); }
:is(a.tile,.tile--project):hover .arrow-button, :is(a.tile,.tile--project):focus-within .arrow-button { background: var(--glass-strong); transform: translateX(3px); }
.tile-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: clamp(18px, 2vw, 28px); }
.tile-title { font-size: var(--heading-sm); line-height: 1.25; font-stretch: normal; text-wrap: balance; }
.tile--teaser { aspect-ratio: 16 / 10; }
.tile-row--compact .tile--teaser { aspect-ratio: 16 / 10; }
.tile-row--compact .tile-title { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }

.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tile--project { aspect-ratio: 4 / 3; }
.tile--project .tile-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 14px; }
.tile--project .chips { grid-column: 1 / -1; }
.tile--project .tile-title { font-size: var(--heading-lg); font-weight: 400; font-stretch: normal; }
/* The Dakar car sits right of centre: keep it whole in square and portrait tiles. */
.tile-image[src*="project-dakar"] { object-position: 88% 70%; }
.tile-logo {
  position: absolute; top: clamp(22px, 3vw, 40px); left: 50%; translate: -50% 0;
  width: auto; height: clamp(54px, 6vw, 84px); max-width: 52%; object-fit: contain;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .35));
}
.project-trigger { padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
.project-trigger::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-xl); }
.project-trigger:focus-visible { outline: none; }
.project-trigger:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -4px; }
.tile--project .project-page-link { position: relative; z-index: 3; grid-column: 2; grid-row: 2; }

@media (max-width: 900px) {
  .tile-row, .tile-row:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  .tile-row--compact { grid-auto-flow: column; grid-auto-columns: minmax(240px, 72%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .tile-row--compact::-webkit-scrollbar { display: none; }
  .tile-row--compact .tile { scroll-snap-align: start; }
  .tile--project { aspect-ratio: 1 / 1; }
}
@media (max-width: 640px) {
  .project-grid { grid-template-columns: 1fr; }
  .tile--project { aspect-ratio: 1 / 1; }
}

/* ---------- Home statement ---------- */
.statement { display: grid; gap: clamp(28px, 4vw, 56px); max-width: var(--max); margin-inline: auto; }
.statement-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 96px); }
.statement-columns > div { display: grid; gap: 12px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.statement-columns p { color: var(--ink); font-size: clamp(1.2rem, 1.6vw, 1.65rem); line-height: 1.2; letter-spacing: -.04em; }
.statement-lead { max-width: 1100px; font-size: var(--heading-xl); line-height: 1.2; font-stretch: normal; letter-spacing: -.045em; text-wrap: pretty; }
@media (max-width: 760px) { .statement-columns { grid-template-columns: 1fr; } }

/* ---------- Banner ---------- */
.banner { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(360px, 58vh, 580px); padding-block: clamp(52px, 6vw, 88px); color: var(--white); background: var(--black); overflow: hidden; }
.banner-media { position: absolute; inset: 0; z-index: -2; }
.banner-media img { width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(1, 2, 5, .85), rgba(1, 2, 5, .3) 50%, rgba(1, 2, 5, .1)); }
.banner-content { display: grid; gap: 20px; justify-items: start; }
.banner-content h2 { max-width: 16ch; }
.banner-lead { max-width: 38rem; font-size: var(--lead); }

/* ---------- Brand marquee ---------- */
.brands-section { overflow: hidden; }
.logo-marquee { overflow: hidden; width: 100%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.logo-marquee.is-dragging, .logo-marquee.is-dragging .logo-tile { cursor: grabbing; }
.logo-track { display: flex; width: max-content; animation: brand-flow 70s linear infinite; }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track, .logo-marquee.popup-open .logo-track { animation-play-state: paused; }
.logo-set { display: flex; gap: 12px; padding-right: 12px; }
@keyframes brand-flow { to { transform: translateX(-50%); } }
.logo-tile {
  position: relative; display: grid; place-items: center; flex: none;
  width: clamp(148px, 14vw, 200px); aspect-ratio: 4 / 3; padding: 0;
  border: 0; border-radius: var(--r-lg); background: var(--surface); overflow: hidden;
  cursor: grab; transition: background-color .3s var(--ease);
}
.logo-tile img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 76%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform .3s var(--ease), filter .35s var(--ease), opacity .35s var(--ease);
}
.logo-tile--fill { padding: 0; }
.logo-tile--fill img {
  top: 0;
  left: 0;
  transform: none;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.logo-tile--name span { font-size: var(--heading-sm); font-stretch: normal; color: var(--grey-strong); text-align: center; }
.logo-tile:hover img, .logo-tile:focus-visible img { transform: translate(-50%, -50%) scale(1.04); }
.logo-tile--fill:hover img, .logo-tile--fill:focus-visible img { transform: scale(1.04); }
.logo-tile:hover { background: var(--surface-strong); }
.logo-hint { margin-top: 20px; text-align: center; font-size: var(--small); color: var(--grey); }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } .logo-marquee { overflow-x: auto; } }

/* ---------- Facts ---------- */
.facts { display: grid; gap: clamp(32px, 3vw, 48px) var(--gap); counter-reset: none; }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.section--dark .facts li { border-color: var(--dark-line); }
.fact-num { font-size: var(--small); color: var(--grey); font-variant-numeric: tabular-nums; }
.section--dark .fact-num, .section--dark .facts p { color: var(--dark-muted); }
.facts p { color: var(--grey-strong); }
.feature .facts { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 1000px) { .facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .facts--3, .facts--4 { grid-template-columns: 1fr; } }

/* ---------- Feature (service sections) ---------- */
.feature-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.feature--reverse .feature-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--reverse .feature-copy { order: 2; }
.feature-copy { display: grid; gap: 20px; justify-items: start; }
.feature-copy--wide { max-width: 980px; margin-bottom: clamp(40px, 5vw, 72px); }
.feature-body { display: grid; gap: 14px; color: var(--grey-strong); }
.section--dark .feature-body { color: var(--dark-muted); }
.feature-copy .link-pure { margin-top: 8px; }
.media-frame { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--dark-surface); }
.media-frame--wide { aspect-ratio: 16 / 9; }
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; }
.media-frame--logo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(1, 2, 5, .4), rgba(1, 2, 5, 0) 45%); }
.media-logo { position: absolute; z-index: 1; top: 8%; left: 50%; translate: -50% 0; width: auto !important; height: 22% !important; object-fit: contain !important; }
.media-stage { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 56px); border-radius: var(--r-xl); }
.media-stage--dark { background: radial-gradient(ellipse at 50% 120%, #2c2d31, var(--black) 70%); }
.media-stage--surface { background: var(--surface); }
.section--dark .media-stage--surface { background: var(--dark-surface); }
.media-stage.phones {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3vw, 40px) clamp(18px, 3vw, 36px);
  /* Let the phone shadows fade into the page instead of clipping at the stage edge. */
  overflow: visible;
}
.phones-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3.2vw, 26px);
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.phones .device-phone {
  box-shadow: inset 0 0 0 1.5px #3a3a3f, 0 12px 24px rgba(0, 0, 0, .09);
  animation: phone-float 7s ease-in-out infinite;
}
.phones .device-phone:nth-child(2) { animation-delay: -3.5s; }
@keyframes phone-float {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: translateY(-10px) rotate(.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .phones .device-phone { animation: none; }
}
.device-phone {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 195px;
  aspect-ratio: 9 / 19.2;
  padding: clamp(5px, 1.2vw, 8px);
  border-radius: clamp(22px, 4.5vw, 38px);
  background: #1a1a1d;
  box-shadow: inset 0 0 0 1.5px #3a3a3f, 0 30px 60px rgba(0, 0, 0, .45);
}
.device-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: clamp(17px, 3.7vw, 30px);
}
.phones .device-phone:nth-child(1),
.phones-lockup .device-phone:nth-child(1) {
  translate: 0 -3.5%;
}
.phones .device-phone:nth-child(2),
.phones-lockup .device-phone:nth-child(2) {
  translate: 0 3.5%;
}
.device-browser { width: 100%; overflow: hidden; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 30px 70px rgba(1, 2, 5, .18); }
.device-browser-bar { display: flex; gap: 6px; padding: 12px 14px; background: #f6f6f8; border-bottom: 1px solid var(--line); }
.device-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.magazine-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.magazine-row figure { overflow: hidden; border-radius: var(--r-lg); background: var(--surface); aspect-ratio: 636 / 900; box-shadow: 0 1px 0 var(--line); }
.magazine-row img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.magazine-row figure:hover img { transform: scale(1.03); }
@media (max-width: 900px) {
  .feature-grid, .feature--reverse .feature-grid { grid-template-columns: 1fr; }
  .feature--reverse .feature-copy { order: 0; }
  .magazine-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Agency story ---------- */
.story { display: grid; gap: clamp(48px, 6vw, 96px); max-width: 1140px; margin-inline: auto; }
.story-row { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.story-row--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.story-row--reverse .story-media { order: 2; }
.story-media { overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 4 / 5; background: var(--surface); width: 100%; max-width: 380px; }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-copy { display: grid; gap: 20px; max-width: 34rem; font-size: var(--lead); line-height: 1.5; color: var(--grey-strong); }
.story-copy p:first-child { color: var(--ink); }
@media (max-width: 760px) {
  .story-row, .story-row--reverse { grid-template-columns: 1fr; gap: 24px; }
  .story-row--reverse .story-media { order: 0; }
  .story-media { max-width: 340px; margin-inline: auto; }
}

/* ---------- Page head (pages without a photo hero) ---------- */
.page-head { display: grid; gap: 24px; padding-top: calc(var(--header-h) + clamp(56px, 9vw, 140px)); padding-bottom: clamp(48px, 6vw, 96px); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { max-width: 40rem; }

/* ---------- Clients ---------- */
.client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) var(--gap); }
.client-card { display: grid; gap: 12px; align-content: start; padding: 0 0 12px; }
.client-card .logo-tile { width: 100%; aspect-ratio: 2 / 1; margin-bottom: 10px; cursor: default; background: var(--surface); }
.section--surface .client-card .logo-tile { background: var(--white); }
.client-card .logo-tile img { filter: none; opacity: 1; }
.client-card .logo-tile:hover { background: var(--surface); }
.section--surface .client-card .logo-tile:hover { background: var(--white); }
.client-card .logo-tile:hover img { transform: translate(-50%, -50%); }
.client-card .logo-tile--fill:hover img { transform: none; }
.client-card p { color: var(--grey-strong); }
@media (max-width: 1000px) { .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .client-grid { grid-template-columns: 1fr; } .client-card .logo-tile { aspect-ratio: 2 / 1; } }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(32px, 4vw, 64px); align-items: start; }
.team-card { display: grid; gap: 12px; align-content: start; }
.team-photo { overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 4 / 5; max-height: 360px; margin-bottom: 14px; background: var(--surface); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.team-role { font-size: var(--small); color: var(--grey); }
.team-bio { display: grid; gap: 12px; max-width: 36rem; color: var(--grey-strong); }
.team-bio p { text-align: start; }
@media (min-width: 761px) and (max-width: 1050px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 128px); align-items: start; }
.contact-details { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 24px); }
.contact-description { color: var(--grey-strong); max-width: 26rem; }
.contact-list { margin-top: 12px; border-top: 1px solid var(--line); }
.contact-list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-label { grid-column: 1; font-size: var(--small); color: var(--grey); }
.contact-value { grid-column: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--heading-sm); font-stretch: normal; }
.contact-list .icon { grid-column: 2; grid-row: 1 / span 2; transition: transform .3s var(--ease-out); }
.contact-list a:hover .icon { transform: translateX(4px); }
.contact-form { display: grid; gap: 28px; padding: clamp(24px, 4vw, 56px); border-radius: var(--r-xl); background: var(--surface); }
.form-heading { display: grid; gap: 8px; }
.form-heading p, .form-note { color: var(--grey-strong); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field label, #email-fallback > label { font-size: var(--small); }
input:not([type="checkbox"]), textarea {
  width: 100%; min-height: 54px; padding: 13px 16px;
  border: 2px solid var(--grey); border-radius: var(--r-sm); background: var(--white); color: var(--ink);
  font-size: var(--text); line-height: 1.5;
  transition: border-color .2s var(--ease);
}
textarea { resize: vertical; min-height: 140px; }
input:not([type="checkbox"]):hover, textarea:hover { border-color: var(--ink); }
input:not([type="checkbox"]):focus-visible, textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--focus); }
::placeholder { color: #9b9ca0; }
.checkbox-label { display: block; }
.checkbox-label input { width: 20px; height: 20px; margin: 0 8px 0 0; vertical-align: -4px; accent-color: var(--black); }
.checkbox-label a, .form-legal-summary a { text-decoration: underline; text-underline-offset: 3px; }
.form-legal-summary { margin-top: 12px; font-size: var(--small); color: var(--grey); }
.form-note { font-size: var(--small); }
#form-status:empty { display: none; }
#email-fallback { display: grid; gap: 12px; }
#email-fallback .actions { align-items: center; gap: 20px; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } .contact-details { position: static; } }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
.cta-inner { display: grid; justify-items: center; gap: 32px; text-align: center; }

/* ---------- Dialogs ---------- */
.brand-dialog {
  width: min(640px, calc(100% - 32px)); max-height: min(86vh, 900px);
  padding: clamp(28px, 4vw, 48px); border: 0; border-radius: var(--r-lg);
  background: var(--white); color: var(--ink);
  box-shadow: 0 40px 100px rgba(1, 2, 5, .35);
}
.brand-dialog::backdrop { background: rgba(1, 2, 5, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px); } }
.brand-dialog h2 { padding-right: 40px; font-size: var(--heading-lg); font-weight: 400; font-stretch: normal; line-height: 1.18; }
.brand-dialog-description { margin-top: 16px; color: var(--grey-strong); }
.brand-dialog-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface); }
.brand-dialog-close:hover { background: var(--line); }
.project-dialog-discipline { margin-bottom: 8px; font-size: var(--small); color: var(--grey); }
.project-dialog-contact { display: flex; width: fit-content; margin-top: 28px; }
.project-dialog-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.project-dialog-gallery img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); }

/* ---------- Cookie banner ---------- */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; display: flex; justify-content: center; pointer-events: none; }
.cookie-banner-inner {
  display: grid; gap: 20px; width: min(760px, 100%);
  padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg);
  background: var(--white); color: var(--ink); box-shadow: 0 24px 80px rgba(1, 2, 5, .28);
  pointer-events: auto; animation: dialog-in .5s var(--ease-out);
}
.cookie-banner-text { font-size: var(--small); color: var(--grey-strong); }
.cookie-banner-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-btn { min-height: 48px; padding: 10px 22px; border: 0; border-radius: var(--r-md); font-size: var(--small); }
.cookie-btn-primary { background: var(--black); color: var(--white); }
.cookie-btn-secondary { background: var(--line); color: var(--black); }
.cookie-btn-primary:hover { background: #2b2b2f; }
.cookie-btn-secondary:hover { background: #c9cacd; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--white); padding-block: clamp(48px, 6vw, 88px) 32px; }
.back-to-top { display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; margin: 0 auto clamp(48px, 6vw, 88px); color: var(--white); }
.back-to-top .icon { width: 20px; height: 20px; transition: transform .3s var(--ease-out); }
.back-to-top:hover .icon { transform: translateY(-4px); }
.footer-brand { display: grid; gap: 18px; justify-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--dark-line); }
.footer-brand .wordmark { justify-self: start; }
.footer-brand img { height: 24px; width: auto; }
.footer-brand p { font-size: var(--heading-sm); font-stretch: normal; color: var(--dark-muted); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gap); padding-block: 40px; }
.footer-label { margin-bottom: 14px; font-size: var(--small); color: var(--dark-muted); }
.footer-col ul { display: grid; gap: 8px; }
.footer-col a, .footer-cookie-trigger { color: var(--white); overflow-wrap: anywhere; }
.footer-col a:hover, .footer-cookie-trigger:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-cookie-trigger { padding: 0; border: 0; background: none; text-align: left; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--dark-line); font-size: var(--small); color: var(--dark-muted); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Legal pages ---------- */
.services-page-header.legal-page-header { display: grid; gap: 20px; padding-top: calc(var(--header-h) + clamp(56px, 8vw, 120px)); padding-bottom: clamp(40px, 5vw, 72px); }
.legal-page-header h1 { font-size: var(--display-md); font-weight: 400; font-stretch: normal; line-height: 1.08; letter-spacing: -.055em; }
.legal-page-header .lead { max-width: 48rem; }
.services-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.services-jump-pill { padding: 6px 16px; border-radius: 999px; background: var(--surface); font-size: var(--small); transition: background-color .2s var(--ease); }
.services-jump-pill:hover { background: var(--line); }
.services-jump-pill.is-active { background: var(--black); color: var(--white); }
.legal-content { display: grid; gap: 0; padding-bottom: var(--section); }
.legal-summary-card { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--surface); }
.legal-placeholder-note { font-size: var(--small); color: var(--grey); }
.legal-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.legal-data-grid dt { font-size: var(--small); color: var(--grey); }
.legal-data-grid a { text-decoration: underline; text-underline-offset: 3px; }
.legal-placeholder { color: var(--blue); }
.legal-section { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding-block: 32px; border-top: 1px solid var(--line); }
.legal-section-num { font-size: var(--small); color: var(--grey); padding-top: 6px; }
.legal-section-body { display: grid; gap: 14px; max-width: 52rem; color: var(--grey-strong); }
.legal-section-body h2 { color: var(--ink); font-size: var(--heading-lg); font-weight: 400; font-stretch: normal; line-height: 1.2; }
.legal-section-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-list { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.legal-table-wrap { overflow-x: auto; margin-top: 8px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.legal-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--small); }
.legal-table th, .legal-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table th { background: var(--surface); font-weight: 600; color: var(--ink); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-cookie-actions { margin-top: 24px; }
.legal-updated { margin-top: 32px; font-size: var(--small); color: var(--grey); }
@media (max-width: 700px) { .legal-section { grid-template-columns: 1fr; gap: 6px; } .legal-data-grid { grid-template-columns: 1fr; } }

/* ---------- Generic WordPress / 404 ---------- */
.page-intro { display: grid; gap: 24px; justify-items: start; padding-top: calc(var(--header-h) + 96px); padding-bottom: var(--section); }
.page-intro h1 { font-size: var(--display-md); font-weight: 400; font-stretch: normal; line-height: 1.08; }
.wp-block-buttons { display: flex; gap: 12px; }
.generic-page { padding-top: calc(var(--header-h) + 64px); padding-bottom: var(--section); }

/* ---------- 3D model viewer (/modelo-3d/) ---------- */
.camera-section { padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px; }
.camera-stage { position: relative; height: min(70vh, 640px); border-radius: var(--r-xl); background: radial-gradient(ellipse at 50% 52%, #f6f6f8, var(--surface) 75%); overflow: hidden; }
.camera-stage canvas { width: 100%; height: 100%; touch-action: none; cursor: grab; }
.camera-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--grey); }
.camera-controls { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.camera-controls button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--r-md); background: var(--white); font-size: var(--small); box-shadow: 0 2px 12px rgba(1, 2, 5, .08); }
.camera-caption { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 20px; }
.camera-tagline { font-size: var(--heading-lg); font-stretch: normal; line-height: 1.2; }

/* ---------- Entrance motion (set by subtle-motion.js) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Gala and Volta cards use a solid surface; dialog photography is unchanged. */
.tile--project.tile--logo-only{background:#25272c}
.tile--logo-only::after{display:none}
.tile--logo-only .tile-logo{top:50%;left:50%;translate:-50% -50%;width:46%;height:28%;max-width:56%;filter:none}

/* Supplied white marks rendered black on the light logo tiles. */
.logo-tile img[src*="solidsafe.png"],
.logo-tile img[src*="espai-agrari-baixa-tordera.png"] { filter: brightness(0); }


/* Existing MacBook model, with the site screenshot mapped to its display. */
.service-web-macbook { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-xl); background: transparent; overflow: hidden; touch-action: pan-y; cursor: grab; }
.service-web-macbook:active { cursor: grabbing; }
.service-web-macbook canvas { display: block; width: 100%; height: 100%; }
.macbook-fallback { position: absolute; inset: 15% 8%; width: 84%; height: 70%; object-fit: contain; }
.macbook-ready .macbook-fallback { visibility: hidden; }
.service-web-macbook:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.magazine-viewer { margin-inline: auto; max-width: 1100px; outline-offset: 6px; }
.magazine-canvas { display: none; width: 100%; aspect-ratio: 1.65; background: radial-gradient(ellipse at center, #f5f6f8, #fff 72%); }
.magazine-ready .magazine-canvas { display: block; }
.magazine-ready .magazine-pages { display: none; }
.magazine-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.magazine-canvas canvas:active { cursor: grabbing; }
.magazine-controls { display: none; align-items: center; justify-content: center; gap: 24px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.magazine-ready .magazine-controls { display: flex; }
.magazine-controls button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-size: 24px; cursor: pointer; }
.magazine-controls button:disabled { opacity: .25; cursor: default; }
.magazine-hint { display: none; text-align: center; color: var(--grey); font-size: var(--small); margin-top: 14px; }
.magazine-ready .magazine-hint { display: block; }
@media (max-width: 600px) { .magazine-canvas { aspect-ratio: 1.15; } }

/* Brand boards presented intact inside two softly floating phones. */
.branding-feature { background: linear-gradient(180deg, #fff 0%, #f7f8fa 48%, #fff 100%); }
.branding-feature .feature-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); }
.branding-phones { padding-inline: clamp(12px, 2vw, 28px); }
.branding-phones .phones-lockup { max-width: 580px; gap: clamp(16px, 3vw, 32px); }
.branding-phones .device-phone { max-width: 260px; }
.branding-phones .device-phone img { object-fit: contain; object-position: center; background: #fff; }
.branding-phones .device-phone:first-child img { background: #ffffff; }
@media (max-width: 900px) { .branding-feature .feature-grid { grid-template-columns: 1fr; } }

/* Event coverage: editorial introduction, real work and a concise process. */
.events-editorial { padding-block: var(--section); }
.events-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 7vw, 110px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.events-heading .display-md { max-width: 15ch; font-size: var(--display-md); line-height: 1.04; }
.events-eyebrow { font-size: var(--small); color: var(--grey-strong); margin-bottom: 20px; }
.events-heading .lead { color: var(--grey-strong); margin-bottom: 24px; }
.events-gallery { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(16px, 2vw, 28px); }
.events-photo { position: relative; overflow: hidden; border-radius: var(--r-xl); margin: 0; min-height: 260px; aspect-ratio: 1.8; background: var(--surface); }
.events-photo--secondary { aspect-ratio: auto; }
.events-photo picture { display: block; width: 100%; height: 100%; }
.events-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.events-photo::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.7)); pointer-events: none; }
.events-photo figcaption { position: absolute; inset: auto 26px 24px; z-index: 1; display: grid; gap: 6px; color: #fff; }
.events-photo figcaption span:first-child { font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.events-photo figcaption span:last-child { font-size: var(--small); opacity: .8; }
.events-process { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: clamp(32px, 4vw, 56px); }
.events-process article { display: flex; align-items: start; gap: 22px; border-top: 1px solid var(--line); padding-top: 24px; }
.events-step { color: var(--blue); font-size: var(--small); padding-top: 5px; }
.events-process h3 { margin-bottom: 12px; }
.events-process p { color: var(--grey-strong); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .events-photo:hover img { transform: scale(1.035); } }
@media (max-width: 760px) {
 .events-heading, .events-process { grid-template-columns: 1fr; }
 .events-gallery { grid-template-columns: 1fr; }
 .events-photo, .events-photo--secondary { aspect-ratio: 4 / 3; min-height: 0; }
}

/* Branding, design and digital: numbered editorial chapters. */
.digital-intro { padding-bottom: clamp(24px, 3vw, 40px); }
.digital-intro-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.digital-intro .eyebrow { margin-bottom: 24px; }
.digital-intro h2 { max-width: 12ch; }
.digital-statement { font-size: clamp(1.3rem, 2.1vw, 2rem); line-height: 1.2; letter-spacing: -.045em; text-wrap: pretty; }
.digital-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(36px, 5vw, 64px); }
.digital-index a { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-content: start; border-top: 1px solid var(--line); padding-block: 18px; font-size: var(--small); line-height: 1.3; }
.digital-index a > span:first-child { grid-column: 1 / -1; color: var(--grey); font-variant-numeric: tabular-nums; }
.digital-index .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.digital-index a:hover .icon { transform: translate(3px, 3px); }
.digital-index a:hover { color: var(--blue); }
.digital-chapter { scroll-margin-top: calc(var(--header-h) + 20px); padding-top: clamp(28px, 4vw, 56px); }
.digital-chapter-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 6vw, 88px); padding-top: 24px; border-top: 1px solid var(--line); margin-bottom: clamp(28px, 4vw, 48px); }
.digital-chapter-label { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
.digital-chapter-label > span { padding-top: 6px; color: var(--grey); font-size: .75rem; font-variant-numeric: tabular-nums; }
.digital-chapter-heading h2 { font-size: clamp(1.8rem, 3vw, 2.9rem); font-weight: 400; letter-spacing: -.055em; line-height: 1.05; max-width: 20ch; }
.digital-chapter-heading > p { font-size: var(--text); line-height: 1.5; color: var(--grey-strong); max-width: 44ch; }
.digital-chapter-copy { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 6vw, 88px); margin-top: clamp(28px, 4vw, 48px); }
.digital-detail { display: grid; align-content: start; gap: 24px; color: var(--grey-strong); max-width: 48ch; }
.digital-detail .link-pure { color: var(--ink); justify-self: start; }
.digital-identities { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; max-width: 1000px; margin-inline: auto; }
.digital-identities .digital-work { width: fit-content; max-width: 100%; justify-self: center; }
.digital-identities .digital-work:nth-child(2) { padding-top: 48px; }
.digital-work img { width: 100%; border-radius: 3px; }
.digital-identities .digital-work img { width: auto; max-width: 100%; height: clamp(280px, 30vw, 420px); object-fit: contain; background: transparent; border-radius: 0; }
.digital-work figcaption { font-size: .75rem; padding-top: 12px; color: var(--grey-strong); }
.digital-design-grid { width: 100%; max-width: 760px; margin-inline: auto; }
.digital-work--swatches { margin: 0; }
.digital-work--swatches img { aspect-ratio: 16 / 9; max-height: 360px; object-fit: cover; }
.digital-interactive { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.digital-interactive-note { display: grid; gap: 20px; max-width: 28ch; }
.digital-interactive-note > p:last-child { font-size: clamp(1.25rem, 1.6vw, 1.6rem); letter-spacing: -.035em; line-height: 1.25; }
.digital-interactive-stage { min-width: 0; background: var(--surface); border-radius: 3px; padding: clamp(12px, 2vw, 28px); }
.digital-interactive--web .digital-interactive-stage { background: transparent; }
.digital-interactive .service-web-macbook { max-height: 390px; aspect-ratio: 1.8; background: transparent; }
.digital-interactive--editorial { grid-template-columns: 2fr 1fr; }
.digital-interactive--editorial .magazine-canvas { aspect-ratio: 1.65; background: transparent; }
.digital-interactive--editorial .magazine-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.digital-interactive--editorial .magazine-controls { margin-top: 12px; }
.digital-interactive--editorial .magazine-hint { margin-top: 12px; font-size: .75rem; }
@media (max-width: 760px) {
 .digital-intro-grid, .digital-chapter-heading, .digital-chapter-copy, .digital-interactive, .digital-interactive--editorial { grid-template-columns: 1fr; gap: 24px; }
 .digital-index { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
 .digital-identities { gap: 20px; }
 .digital-identities .digital-work img { height: clamp(200px, 50vw, 320px); }
 .digital-identities .digital-work:nth-child(2) { padding-top: 32px; }
 .digital-interactive-note { max-width: 34ch; }
 .digital-interactive--editorial .digital-interactive-note { order: -1; }
 .digital-interactive .service-web-macbook { aspect-ratio: 1.45; }
}

/* Direct contact closes every page, with one destination for all contact links. */
.shared-contact { background: #edf3fa; scroll-margin-top: 88px; outline: none; }
.shared-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 7vw, 100px); align-items: center; }
.shared-contact-intro .display-md { font-size: var(--display-md); line-height: 1.06; margin-block: 18px 24px; }
.shared-contact-intro > p:last-child { color: var(--grey-strong); max-width: 38ch; }
.contact-kicker { font-size: var(--small); color: var(--grey-strong); }
.shared-contact-links { min-width: 0; }
.shared-contact-link { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 20px; padding-block: 22px; border-top: 1px solid #c9d5e2; }
.shared-contact-link:last-child { border-bottom: 1px solid #c9d5e2; }
.shared-contact-link .contact-value { font-size: clamp(1.1rem, 1.8vw, 1.65rem); }
.shared-contact-link .icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; transition: transform .3s; }
.shared-contact-link:hover .icon { transform: translateX(5px); }
@media (max-width: 760px) { .shared-contact-grid { grid-template-columns: 1fr; } }

/* Agency editorial sections; the shared hero and service tiles retain their style. */
.agency-opening, .agency-perspective, .agency-values { font-family: var(--font); font-stretch: normal; }
.agency-opening { padding-top: var(--section); }
.agency-opening-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: var(--small); color: var(--grey-strong); }
.agency-opening-meta .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.agency-opening-meta .eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.agency-opening h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 400; font-stretch: normal; letter-spacing: -.075em; line-height: .98; max-width: 15ch; margin-block: clamp(28px, 4vw, 56px); text-wrap: balance; }
.agency-opening-copy { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 5vw, 80px); align-items: start; margin-bottom: clamp(32px, 4vw, 56px); }
.agency-opening-copy .heading-lg { max-width: 22ch; font-size: clamp(1rem, 1.3vw, 1.25rem); font-stretch: normal; line-height: 1.3; letter-spacing: -.025em; }
.agency-opening-copy > p:last-child { max-width: 42ch; color: var(--ink); font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.16; letter-spacing: -.045em; text-wrap: pretty; }
.agency-gallery { display: grid; grid-template-columns: 1.5fr .8fr 1fr; gap: clamp(16px, 2.4vw, 40px); align-items: start; }
.agency-gallery figure:nth-child(2) { padding-top: 24%; }
.agency-gallery figure:nth-child(3) { padding-top: 48%; }
.agency-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 360px; object-fit: cover; border-radius: 3px; }
.agency-gallery figure:first-child img { aspect-ratio: 4 / 3; object-position: center 35%; }
.agency-gallery figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: .75rem; line-height: 1.3; color: var(--grey-strong); }
.agency-gallery figcaption span:first-child { font-variant-numeric: tabular-nums; }
.agency-perspective-grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 5vw, 80px); }
.agency-perspective .eyebrow { margin-bottom: 24px; }
.agency-perspective h2 { font-stretch: normal; font-size: clamp(1.9rem, 2.8vw, 3rem); font-weight: 400; letter-spacing: -.06em; line-height: 1.02; max-width: 12ch; margin-bottom: 32px; }
.agency-perspective-copy { display: grid; gap: 24px; align-content: start; max-width: 58ch; color: var(--grey-strong); }
.agency-perspective-copy .lead { color: var(--ink); font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.16; letter-spacing: -.045em; }
.agency-perspective-copy > p:not(.lead) { max-width: 48ch; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.5; }
@media (max-width: 760px) {
 .agency-opening-meta { align-items: start; font-size: .75rem; }
 .agency-opening-copy, .agency-perspective-grid { grid-template-columns: 1fr; gap: 28px; }
 .agency-opening h2 { max-width: 11ch; }
 .agency-gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
 .agency-gallery figure:first-child { grid-column: 1 / -1; }
 .agency-gallery figure:first-child img { aspect-ratio: 4 / 3; object-position: center 40%; }
 .agency-gallery figure:nth-child(2) { padding-top: 16px; }
 .agency-gallery figure:nth-child(3) { padding-top: 56px; }
 .agency-gallery figure:nth-child(2) img, .agency-gallery figure:nth-child(3) img { aspect-ratio: 3 / 4; }
}

/* Values share the restrained black, white and blue agency palette. */
.agency-values { background: var(--white); }
.values-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: clamp(28px, 4vw, 56px); }
.values-heading h2 { max-width: 11ch; line-height: 1; font-stretch: normal; font-weight: 400; letter-spacing: -.06em; }
.values-heading > p { font-size: var(--lead); color: var(--grey-strong); max-width: 23ch; }
.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: clamp(28px, 4vw, 64px); row-gap: 20px; }
.value-card { padding: 28px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: start; color: var(--ink); }
.value-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 28px; }
.value-symbol { width: 36px; height: 36px; color: var(--blue); transition: transform .6s var(--ease-out); }
.value-index { font-size: var(--small); opacity: .45; }
.value-card h3 { font-size: clamp(1.35rem, 1.8vw, 1.8rem); letter-spacing: -.05em; line-height: 1.1; margin-bottom: 20px; font-weight: 400; }
.value-card p { font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.65; color: var(--grey-strong); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
 .value-card:hover .value-symbol { transform: translateY(-3px); }
}
@media (max-width: 1050px) { .values-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } .values-heading { display: block; } .values-heading > p { margin-top: 24px; } .value-card { min-height: 0; } }

.value-symbol { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.value-symbol svg { display: block; width: 36px; height: 36px; overflow: visible; }

.magazine-feature .feature-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); }
.magazine-feature .feature-media { min-width: 0; }
.magazine-feature .magazine-canvas { aspect-ratio: 1.35; }
.magazine-feature .magazine-controls { margin-top: 0; }
.magazine-feature .magazine-hint { margin-top: 10px; }
@media (max-width: 900px) { .magazine-feature .feature-grid { grid-template-columns: 1fr; } .magazine-feature .feature-copy { max-width: 620px; } }

.team-details { border-top: 1px solid var(--line); margin-top: 8px; }
.team-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; padding-block: 18px; font-size: var(--small); }
.team-details summary::-webkit-details-marker { display: none; }
.team-details summary::after { content: '+'; font-size: 26px; font-weight: 300; line-height: 1; transition: transform .25s var(--ease-out); }
.team-details[open] summary::after { transform: rotate(45deg); }
.team-collapse-label, .team-details[open] .team-expand-label { display: none; }
.team-details[open] .team-collapse-label { display: inline; }
.team-details .team-bio { padding-block: 4px 16px; }
.team-details summary:hover { color: var(--blue); }
.team-details summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
 .team-details[open] .team-bio { animation: team-bio-appear .35s var(--ease-out); }
 @keyframes team-bio-appear { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
}

/* Small, silent motion accents from the supplied creative footage. */
.motion-detail { display: inline-flex; width: clamp(72px, 7vw, 112px); height: clamp(72px, 7vw, 112px); flex: none; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; }
.motion-detail video { display: block; width: 100%; height: 100%; object-fit: contain; }
.motion-detail--ink video { filter: invert(1) hue-rotate(180deg); }
.motion-detail--on-dark { mix-blend-mode: screen; }
.motion-detail--portrait { width: clamp(56px, 6vw, 88px); height: clamp(80px, 8vw, 120px); }
.statement-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; margin-bottom: clamp(24px, 3vw, 40px); }
.statement-heading h2 { margin: 0; }
.statement-brand { display: block; }
.statement-brand img { display: inline-block; width: 5.6em; height: auto; max-width: 100%; vertical-align: -.3em; }
.feature-heading-with-motion { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; }
.feature-heading-with-motion h2 { flex: 1; min-width: 0; }
.events-motion-kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.events-motion-kicker .motion-detail { width: 64px; height: 64px; }
.events-motion-kicker .events-eyebrow { margin-bottom: 0; }
@media (max-width: 600px) {
 .feature-heading-with-motion { gap: 10px; }
 .feature-heading-with-motion .motion-detail { width: 64px; height: 72px; }
}

.statement-subheading { display: flex; align-items: center; gap: 14px; }
.statement-subheading .motion-detail { width: 42px; height: 48px; }

/* Instagram link on the FCB Prime project card. */
.project-instagram { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; overflow: hidden; color: #fff; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); text-decoration: none; transition: width .4s, border-radius .4s; }
.project-instagram-icon { width: 24px; height: 24px; flex-shrink: 0; transition: opacity .3s; }
.project-instagram span { position: absolute; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .4s; }
.project-instagram:is(:hover, :focus-visible) { width: 110px; border-radius: 30px; }
.project-instagram:is(:hover, :focus-visible) span { opacity: 1; }
.project-instagram:is(:hover, :focus-visible) .project-instagram-icon { opacity: 0; }
.project-instagram:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .project-instagram, .project-instagram-icon, .project-instagram span { transition: none; } }

.project-social-links { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.project-youtube { background: #f00; }

.project-tiktok, .project-x { background: #000; }

@media (max-width: 600px) {
  .tile--project .project-social-links { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

.project-dialog-website { display: flex; width: fit-content; margin-top: 20px; }
.project-dialog-website[hidden] { display: none; }

.project-facebook { background: #1877f2; }

/* Shared editorial components across home, services, work, brands and team. */
:root { --r-lg: 3px; --r-xl: 3px; }
.section-title { border-top: 1px solid var(--line); padding-top: 24px; }
.section-title .display-md { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.section-action { justify-content: flex-start; margin-top: 32px; }
.statement-heading { border-top: 1px solid var(--line); padding-top: 24px; }
.home-intro .statement { row-gap: 0; }
.home-intro .statement-heading { min-height: 240px; padding-block: 32px; margin-bottom: 0; }
.agency-detail-logo { display: block; width: clamp(120px, 20vw, 260px); max-width: 42%; height: auto; flex-shrink: 0; object-fit: contain; }
.home-intro .statement > a { margin-top: 32px; }
@media (max-width: 760px) {
 .home-intro .statement-heading { min-height: 196px; padding-block: 24px; gap: 16px; }
 .agency-detail-logo { width: 140px; }
}
.tile { display: block; overflow: visible; background: transparent; color: var(--ink); border-radius: 0; transform: none; }
.tile::after { display: none; }
.tile-visual { display: block; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); border-radius: 3px; }
.tile--teaser, .tile-row--compact .tile--teaser, .tile--project { aspect-ratio: auto; }
.tile-copy { padding: 16px 0 0; align-items: center; gap: 16px; }
.tile-title { line-height: 1.2; }
.tile .arrow-button { width: 32px; height: 32px; border: 1px solid var(--line); color: var(--ink); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
:is(a.tile,.tile--project):hover .arrow-button, :is(a.tile,.tile--project):focus-within .arrow-button { background: transparent; }
.tile:hover, .tile:focus-within { translate: none; rotate: none; box-shadow: none; }
.tile--project .tile-visual { aspect-ratio: 16 / 10; }
.project-grid { gap: clamp(32px, 4vw, 56px) var(--gap); align-items: start; }
.tile--project .tile-copy { row-gap: 12px; }
.tile--project .chips { gap: 0; }
.tile--project .chips li { padding: 0; background: none; color: var(--grey-strong); border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: .75rem; }
.tile--project .chips li + li::before { content: '·'; margin-inline: 8px; }
.tile--project .tile-title { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
.tile--project.tile--logo-only { background: transparent; }
.tile--logo-only .tile-visual { background: #25272c; }
.tile--project .tile-logo { max-height: 60%; }
.tile--project .project-instagram { width: 32px; height: 32px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 50%; }
.tile--project .project-instagram:is(:hover,:focus-visible) { width: 32px; border-color: var(--ink); }
.tile--project .project-instagram:is(:hover,:focus-visible) span { opacity: 0; }
.tile--project .project-instagram:is(:hover,:focus-visible) .project-instagram-icon { opacity: 1; }
.tile--project .project-instagram-icon { width: 16px; height: 16px; }
.tile--project .project-instagram:focus-visible { outline-color: var(--focus); outline-offset: 3px; }
.project-social-links { gap: 6px; flex-wrap: wrap; }
.client-card { gap: 12px; }
.client-card .heading-sm { font-weight: 400; font-size: clamp(1.2rem, 1.5vw, 1.5rem); letter-spacing: -.035em; }
.client-card .logo-tile { border-radius: 3px; }
.brand-directory-section + .brand-directory-section { padding-top: 24px; }
.team-photo:hover { translate: none; box-shadow: none; }
.team-role { font-size: .75rem; }
.team-card .heading-lg { font-size: clamp(1.25rem, 1.8vw, 1.8rem); }
.editorial-feature .feature-grid { border-top: 1px solid var(--line); padding-top: 28px; align-items: start; }
.editorial-feature .feature-copy { counter-reset: none; }
.editorial-feature .feature-copy .heading-xl::before { content: '01'; display: block; font-size: .75rem; line-height: 1.5; color: var(--grey); letter-spacing: 0; margin-bottom: 20px; }
.editorial-feature .feature-body { max-width: 48ch; font-size: var(--text); }
.media-stage--dark, .magazine-canvas, .branding-feature { background: var(--surface); }
.device-browser { box-shadow: none; border: 1px solid var(--line); }
.events-heading { border-top: 1px solid var(--line); padding-top: 24px; }
.events-photo, .events-photo--secondary { background: transparent; min-height: 0; aspect-ratio: auto; overflow: visible; }
.events-photo picture { height: auto; }
.events-photo img { aspect-ratio: 16 / 10; border-radius: 3px; }
.events-photo::after { display: none; }
.events-photo figcaption { position: static; padding-top: 12px; color: var(--ink); gap: 8px; }
.events-photo figcaption span:first-child { font-size: 1rem; }
.events-photo figcaption span:last-child { color: var(--grey-strong); opacity: 1; font-size: .75rem; }
.events-gallery { align-items: start; }
.shared-contact { background: var(--surface); }
.shared-contact-link { border-color: var(--line); }
.btn:hover, .submit-button:hover { translate: none; box-shadow: none; }
@media (max-width: 640px) {
 .tile--project .tile-visual { aspect-ratio: 4 / 3; }
 .tile--project .tile-copy { grid-template-columns: minmax(0,1fr) auto; }
 .tile--project .project-social-links { grid-column: 1 / -1; }
 .tile-row--compact { grid-auto-columns: minmax(220px, 72%); }
}
.banner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; width: 100%; max-width: var(--max); margin-inline: auto; padding: var(--section) var(--gutter); min-height: 0; background: var(--white); color: var(--ink); }
.banner::after { display: none; }
.banner-media { position: static; }
.banner-media img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.banner-content.wrap { padding: 0; }
.banner-content h2 { font-size: clamp(1.8rem, 2.8vw, 2.8rem); }
.banner .banner-lead { color: var(--grey-strong); font-size: var(--text); }
.banner .link-pure--light { color: var(--ink); }
.events-heading h2::before { content: '02'; display: block; font-size: .75rem; line-height: 1.5; color: var(--grey); letter-spacing: 0; margin-bottom: 20px; }
@media (max-width: 760px) {
 .banner { grid-template-columns: 1fr; }
 .banner[aria-labelledby="about-banner-title"] { background: var(--surface); border-top: 1px solid var(--line); }
 .banner[aria-labelledby="about-banner-title"] .banner-content { order: -1; }
 .banner[aria-labelledby="about-banner-title"] .banner-media img { aspect-ratio: 16 / 9; }
}

/* Small animated accents share the editorial heading rhythm. */
.editorial-motion-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; width: 100%; }
.editorial-motion-heading h2 { min-width: 0; margin-bottom: 0; }
.motion-detail--editorial { width: 64px; height: 64px; }
.projects-section[aria-labelledby="home-projects-title"] .motion-detail--editorial { width: 80px; height: 112px; }
.projects-section[aria-labelledby="home-projects-title"] .motion-detail--editorial video { transform: scale(1.65); }
.projects-section[aria-labelledby="home-projects-title"] .editorial-motion-heading { justify-content: flex-start; gap: 4px; width: fit-content; max-width: 100%; }
.projects-section #home-projects-title { flex: 0 1 auto; width: max-content; text-wrap: initial; }
.projects-section[aria-labelledby="home-projects-title"] .section-title { align-items: center; }
.motion-detail--tall { height: 88px; }
.motion-detail--small { width: 42px; height: 42px; }
.motion-kicker { display: flex; align-items: center; gap: 16px; }
.agency-perspective .editorial-motion-heading { margin-bottom: 32px; }
.digital-chapter-label:has(.motion-detail) { grid-template-columns: 28px minmax(0,1fr) 64px; }
.digital-chapter-label > .motion-detail { padding: 0; }
@media (max-width: 600px) {
 .editorial-motion-heading { gap: 16px; }
 .motion-detail--editorial { width: 48px; height: 56px; }
 .motion-detail--tall { height: 72px; }
 .digital-chapter-label:has(.motion-detail) { grid-template-columns: 20px minmax(0,1fr) 48px; gap: 12px; }
}

/* SON / Agency reveal uses the original logo, with two masked image layers. */
.son-logo { position: relative; display: block; line-height: 0; }
.son-logo.logo-on-dark { display: none; }
.son-logo-base { display: block; }
.son-logo-layer { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; }
.son-logo-layer img { display: block; width: 100%; height: 100%; max-width: none; }
.son-logo-layer--son { clip-path: inset(-20% 63% -20% -10%); }
.son-logo-layer--agency { clip-path: inset(-20% -10% -20% 37%); }
@keyframes son-logo-son {
  0% { opacity: 0; transform: translate(31.5%, 18px); filter: blur(5px) saturate(.4); }
  16%, 32% { opacity: 1; transform: translate(31.5%, 0); filter: blur(0) saturate(1); }
  65%, 99% { opacity: 1; transform: translate(0, 0); filter: none; }
  100% { opacity: 0; transform: none; filter: none; }
}
@keyframes son-logo-agency {
  0%, 36% { opacity: 0; transform: translateX(24px); clip-path: inset(-20% 63% -20% 37%); filter: blur(2px); }
  72%, 99% { opacity: 1; transform: translateX(0); clip-path: inset(-20% -10% -20% 37%); filter: blur(0); }
  100% { opacity: 0; transform: none; clip-path: inset(-20% -10% -20% 37%); filter: none; }
}
@keyframes son-logo-base { 0%, 99% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
 .brand-intro .son-logo-base, .is-logo-animating .son-logo-base { animation: son-logo-base var(--logo-duration) both; }
 .brand-intro .son-logo-layer--son, .is-logo-animating .son-logo-layer--son { animation: son-logo-son var(--logo-duration) cubic-bezier(.65,0,.2,1) both; }
 .brand-intro .son-logo-layer--agency, .is-logo-animating .son-logo-layer--agency { animation: son-logo-agency var(--logo-duration) cubic-bezier(.65,0,.2,1) both; }
}
.wordmark { --logo-duration: 1.8s; }
.brand-intro { --logo-duration: 2.4s; position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: var(--white); pointer-events: auto; animation: brand-intro-exit .65s 2.65s cubic-bezier(.76,0,.24,1) both; }
.brand-intro .son-logo { width: clamp(260px, 42vw, 580px); }
.brand-intro .son-logo-base { width: 100%; height: auto; }
.brand-intro-running { overflow: hidden; }
@keyframes brand-intro-exit { from { clip-path: inset(0); visibility: visible; } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .brand-intro { display: none; } }

/* MITLabs-inspired finishing: soft edges, quiet depth and a restrained SON glow.
   Paint-only changes preserve existing component geometry and typography. */
body:not(.cms) :is(.tile-visual,.banner-media img,.team-photo,.client-card .logo-tile) {
  border-radius: 8px;
}
body:not(.cms) :is(.logo-tile,.device-browser) {
  box-shadow: 0 2px 10px rgb(1 2 5 / .025), 0 12px 32px rgb(1 2 5 / .035);
}
body:not(.cms) :is(.shared-contact,.section--surface) {
  background-color: var(--surface);
  background-image: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--white) 65%, transparent), transparent);
}
body:not(.cms) .btn--glass {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 4px 18px rgb(1 2 5 / .08);
}
body:not(.cms) .tile .arrow-button {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body:not(.cms) :is(a.tile,.tile--project):is(:hover,:focus-within) .arrow-button {
  background: color-mix(in srgb, var(--blue) 10%, var(--white));
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  color: var(--ink);
}
body:not(.cms) .brand-dialog {
  border-radius: 12px;
  box-shadow: 0 24px 80px rgb(1 2 5 / .18);
}
@media (prefers-reduced-motion: reduce) {
  body:not(.cms) .tile .arrow-button { transition: none; }
}

/* Fixed-size social marks: labels stay accessible without clipping in circles. */
.cms-social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border:1px solid var(--line);border-radius:50%;background:var(--white);transition:background-color .2s,border-color .2s}
.cms-social-link img{display:block;width:18px;height:18px;object-fit:contain}
.cms-social-link:hover,.cms-social-link:focus-visible{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--white))}
.brand-dialog .cms-social-links{margin-top:20px}
@media(prefers-reduced-motion:reduce){.cms-social-link{transition:none}}

/* Shared feedback: only actionable controls move; layout stays stable. */
body:not(.cms) :is(.btn,.submit-button,.cookie-btn,.nav-contact,.cms-social-link,.arrow-button,.video-toggle,.brand-dialog-close,.menu-toggle,.flyout-close,.language-option,.magazine-toolbar button,.magazine-controls button,.magazine-reader-bar button,.camera-controls button,button.logo-tile){
 transition:scale .16s var(--ease-out),translate .2s var(--ease-out),background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}
body:not(.cms) :is(.tile-visual,.team-photo,button.logo-tile){transition:translate .28s var(--ease-out),box-shadow .28s var(--ease-out)}
body:not(.cms) :is(.link-pure,.project-trigger,.shared-contact-link,.flyout-link,.digital-index a,.team-details summary){transition:color .2s,opacity .2s}
body:not(.cms) :is(a.tile,.tile--project):focus-within .tile-visual{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--blue)}
body:not(.cms) :is(.link-pure,.project-trigger,.shared-contact-link,.digital-index a,.team-details summary,.menu-toggle,.flyout-close):focus-visible{color:var(--blue)}
@media(hover:hover) and (pointer:fine){
 body:not(.cms) :is(.btn,.submit-button,.nav-contact,.cms-social-link,.cookie-btn):not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px;box-shadow:0 6px 18px rgb(1 2 5 / .12)}
 body:not(.cms) :is(a.tile,.tile--project):hover .tile-visual{translate:0 -4px;box-shadow:0 10px 24px rgb(1 2 5 / .10)}
 body:not(.cms) button.logo-tile:hover{translate:0 -3px;box-shadow:0 6px 20px rgb(1 2 5 / .10)}
 body:not(.cms) :is(.menu-toggle,.flyout-close,.link-pure,.project-trigger,.shared-contact-link,.digital-index a,.team-details summary):hover{color:var(--blue)}
 body:not(.cms) :is(.magazine-toolbar button,.magazine-controls button,.magazine-reader-bar button,.camera-controls button):not(:disabled):hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent);border-color:var(--blue)}
 body:not(.cms) .language-option:hover{opacity:1;color:var(--blue)}
 body:not(.cms) .link-pure:hover .icon{transform:translateX(4px)}
}
body:not(.cms) :is(.btn,.submit-button,.cookie-btn,.nav-contact,.cms-social-link,.video-toggle,.brand-dialog-close,.menu-toggle,.flyout-close,.language-option,.magazine-toolbar button,.magazine-controls button,.magazine-reader-bar button,.camera-controls button,button.logo-tile).is-pressed{scale:.96;translate:0 0}
body:not(.cms) :is(.link-pure,.project-trigger,.shared-contact-link,.flyout-link,.digital-index a,.team-details summary).is-pressed{color:var(--blue);opacity:.72}
body:not(.cms) :is(a.tile.is-pressed,.tile--project:has(.project-trigger.is-pressed)) .tile-visual{translate:0 1px;box-shadow:0 2px 6px rgb(1 2 5 / .1)}
body:not(.cms) :is(input,textarea,select){transition:border-color .2s,box-shadow .2s}
body:not(.cms) :is(input,textarea,select):focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent)}
@supports(interpolate-size:allow-keywords){
 .team-details{interpolate-size:allow-keywords}
 .team-details::details-content{height:0;overflow:clip;transition:height .3s var(--ease-out),content-visibility .3s allow-discrete}
 .team-details[open]::details-content{height:auto}
 .team-details[open] .team-bio{animation:none}
}


/* Responsive continuity: preserve image compositions and readable column widths. */
body:not(.cms) :is(.feature-grid,.banner,.digital-chapter-heading,.shared-contact-grid,.section-title)>*{min-width:0}
body:not(.cms) :is(.shared-contact-link,.team-bio,.client-card p){overflow-wrap:anywhere}
@media(min-width:701px) and (max-width:900px){
 .feature-grid,.feature--reverse .feature-grid,.branding-feature .feature-grid,.magazine-feature .feature-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px}
 .feature--reverse .feature-copy{order:2}
 .feature-copy .lead{font-size:1.125rem}
 .media-stage.phones{padding-inline:8px}
 .banner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}
 .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
}
@media(max-width:700px){
 body:not(.cms){--section:clamp(40px,9vw,60px);--gutter:clamp(16px,4.6vw,28px)}
 .feature-grid,.feature--reverse .feature-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .feature-copy{display:contents}
 .feature-copy>h2,.feature-heading-with-motion{order:1}
 .feature-copy>.lead{order:2}
 .feature-grid>.feature-media{order:3;width:100%}
 .feature-copy>.feature-body{order:4;max-width:none}
 .feature-copy>.link-pure{order:5;justify-self:start}
 .feature-media .phones{padding:20px 12px}
 .phones-lockup{max-width:380px;gap:clamp(12px,4vw,22px)}
 .feature-body,.team-bio,.client-card p{font-size:1rem;line-height:1.55;text-align:start}
 .team-bio p,.client-card p{text-align:start}
 .facts--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
 .facts--3{grid-template-columns:minmax(0,1fr);gap:24px}
 .facts .heading-sm{font-size:1.1rem}
 .facts p{font-size:.9375rem}
 .events-gallery{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px}
 .events-photo,.events-photo--secondary{aspect-ratio:auto}
 .events-photo img{aspect-ratio:4/5;object-fit:cover}
 .events-photo figcaption{flex-wrap:wrap;line-height:1.4}
 .events-photo figcaption span:first-child{font-size:.875rem}
 .tile--project .tile-visual{aspect-ratio:16/10}
 .project-grid{row-gap:32px}
 .brand-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:24px;overflow-y:auto}
 .brand-dialog h2{padding-right:32px}
 .brand-dialog .cms-social-links{justify-content:flex-start;gap:8px}
 .cms-social-link{width:44px;height:44px;flex-basis:44px}
 .digital-index a{min-height:48px}
}
@media(max-width:360px){
 .facts--3,.facts--4{column-gap:12px}
 .shared-contact-link{gap:6px 10px}
 .brand-dialog{padding:20px}
}

/* Slightly softer corners, shared by desktop and mobile. */
body:not(.cms){--r-sm:8px;--r-md:12px;--r-lg:14px;--r-xl:16px}
body:not(.cms) :is(.tile-visual,.banner-media img,.team-photo,.client-card .logo-tile,.digital-work img,.agency-gallery img,.events-photo img,.digital-interactive-stage){border-radius:var(--r-lg)}
body:not(.cms) .brand-dialog{border-radius:20px}

/* The public website always uses the light appearance. */
body:not(.cms){color-scheme:light}

/* Full editorial showcase and complete, readable magazine editions. */
.digital-interactive--editorial{grid-template-columns:minmax(0,1fr);gap:20px}
.digital-interactive--editorial .digital-interactive-note{display:flex;align-items:baseline;justify-content:space-between;gap:24px;max-width:none}
.digital-interactive--editorial .digital-interactive-note>p:last-child{font-size:1rem;letter-spacing:0}
.digital-interactive--editorial .digital-interactive-stage{padding:clamp(16px,3vw,40px);border:1px solid var(--line);border-radius:20px}
.magazine-feature .feature-grid{grid-template-columns:minmax(0,1fr)}
.magazine-feature .feature-copy{max-width:760px}
.magazine-viewer{max-width:1280px;width:100%}
.magazine-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.magazine-toolbar label{display:grid;gap:8px;font-size:.8125rem;color:var(--grey-strong)}
.magazine-toolbar select{appearance:none;-webkit-appearance:none;font:inherit;font-size:1rem;color:var(--ink);padding:12px 48px 12px 14px;border:1px solid var(--line);border-radius:10px;background-color:var(--white);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010205' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px 18px;max-width:100%}
.magazine-read{padding:12px 18px;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--white);font-size:.875rem;white-space:nowrap}
.digital-interactive--editorial .magazine-canvas,.magazine-feature .magazine-canvas,.magazine-canvas{aspect-ratio:1.55;background:transparent}
.magazine-pages img{display:block;width:min(100%,620px);margin:auto;height:auto}
.magazine-initialized>.magazine-controls,.magazine-reader .magazine-controls{display:flex}
.magazine-controls{--magazine-control-size:46px;flex-wrap:wrap;gap:16px;font-size:.875rem}
.magazine-controls>[role=status]{min-width:100px;text-align:center}
.magazine-controls button{flex-shrink:0;width:var(--magazine-control-size);height:var(--magazine-control-size);padding:0;line-height:1}
.magazine-controls button svg{display:block;width:24px;height:24px;flex:none}
.magazine-goto{display:flex;align-items:center;gap:8px;margin-left:16px}
.magazine-goto label{display:flex;align-items:center;gap:8px}
.magazine-goto input{width:72px;height:var(--magazine-control-size);min-height:0;padding:0 10px;line-height:1;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font:inherit}
.magazine-controls .magazine-goto button{width:auto;height:var(--magazine-control-size);padding:0 14px;border-radius:8px;font-size:.875rem}
.magazine-controls button:hover:not(:disabled){background:var(--surface);border-color:var(--grey-strong)}
.magazine-initialized .magazine-hint{display:block}
.magazine-reader{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--surface);color:var(--ink)}
.magazine-reader[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.magazine-reader::backdrop{background:rgba(1,2,5,.7)}
.magazine-reader-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 12px;background:var(--white);border-bottom:1px solid var(--line)}
.magazine-reader-bar strong{font-size:1rem;font-weight:500}
.magazine-reader-bar button{display:grid;place-items:center;width:32px;height:32px;padding:0;line-height:1;font-size:24px;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink)}
.magazine-reader-bar button svg{display:block;width:20px;height:20px}
.magazine-reader-scroll{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;padding:6px}
.magazine-reader-scroll img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:none;object-fit:contain;margin:0}
.magazine-reader .magazine-controls{--magazine-control-size:36px;gap:10px;padding:5px 10px calc(5px + env(safe-area-inset-bottom));margin:0;border-top:1px solid var(--line);background:var(--white)}
@media(max-width:700px){
 .magazine-toolbar{align-items:flex-end;gap:10px;flex-wrap:wrap}
 .magazine-toolbar select{font-size:.875rem;max-width:220px}
 .magazine-read{padding:10px 14px;font-size:.8125rem}
 .digital-interactive--editorial .digital-interactive-stage{padding:16px 8px;border-radius:12px}
 .digital-interactive--editorial .magazine-canvas,.magazine-feature .magazine-canvas{aspect-ratio:1.25}
 .digital-interactive--editorial .digital-interactive-note{display:grid;gap:8px}
 .magazine-controls{--magazine-control-size:42px;gap:10px}
 .magazine-goto{margin-left:0}
 .magazine-controls>[role=status]{min-width:84px}
 .magazine-reader-scroll{padding:4px}
}

/* A full-width open spread with touch page turning on phones. */
@media(max-width:700px){
 .digital-interactive--editorial{margin-inline:calc(-1 * var(--gutter));width:calc(100% + 2 * var(--gutter));gap:12px}
 .digital-interactive--editorial .digital-interactive-stage{padding:12px 0;border:0;border-radius:0}
 .digital-interactive--editorial .digital-interactive-note{padding-inline:var(--gutter)}
 .magazine-feature .feature-media{width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter))}
 .magazine-viewer{min-width:0}
 .magazine-toolbar,.magazine-hint{margin-inline:12px}
 .magazine-viewer>.magazine-controls{width:calc(100% - 24px)}
 .magazine-reader-scroll{padding:0}
 .magazine-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin-bottom:12px}
 .magazine-toolbar label{min-width:0;gap:6px}
 .magazine-toolbar select{width:100%;max-width:none;height:46px;min-height:46px;padding:10px 32px 10px 10px;background-position:right 10px center;font-size:16px}
 .magazine-read{height:46px;min-height:46px;align-self:end;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:.8125rem}
 .magazine-ready .magazine-canvas{display:block;aspect-ratio:1272/900}
 .magazine-ready .magazine-pages{display:none}
 .magazine-initialized>.magazine-controls,.magazine-reader .magazine-controls{display:grid;grid-template-columns:46px minmax(84px,1fr) 46px;max-width:360px;margin:12px auto 0;gap:10px;--magazine-control-size:46px}
 .magazine-goto{grid-column:1/-1;justify-content:center;margin:0}
 .magazine-goto input{font-size:16px}
 .magazine-reader .magazine-controls{max-width:none;width:100%;margin:0;padding-inline:max(12px,env(safe-area-inset-left))}
 .magazine-reader-bar button{width:44px;height:44px;flex-shrink:0}
 .magazine-hint{font-size:.75rem;line-height:1.5}
}

/* Respect reduced motion for every public component, including pseudo-elements. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 body:not(.cms) *,body:not(.cms) *::before,body:not(.cms) *::after{
  animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
  transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important;
 }
 body:not(.cms) :is(button,.btn,.nav-contact,.cms-social-link,.tile-visual,.team-photo){translate:none!important;scale:none!important}
}
@media(prefers-reduced-motion:reduce){
 @supports(interpolate-size:allow-keywords){.team-details::details-content{transition:none}}
}

/* Prose follows its measured line count at the current width and language. */
body:not(.cms) p.prose-paragraph{text-align:start}
body:not(.cms) p.prose-paragraph.is-justified{text-align:justify;text-align-last:start;hyphens:auto;overflow-wrap:break-word}

.project-dialog-gallery video{display:block;width:100%;max-height:80vh;object-fit:contain;border-radius:var(--r-lg);background:#111}

/* Subtle movement for the three introductory image cards. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .teaser-band .tile-visual { transition: translate .35s ease, box-shadow .35s ease; }
 .teaser-band .tile-image { transition: transform .65s cubic-bezier(.2, .65, .3, 1); }
 .teaser-band .tile-title { transition: translate .35s ease; }
 .teaser-band .tile:hover .tile-visual { translate: 0 -5px; box-shadow: 0 12px 28px rgb(1 2 5 / .13); }
 .teaser-band .tile:hover .tile-image { transform: scale(1.055); }
 .teaser-band .tile:hover .tile-title { translate: 0 -2px; }
}

/* A visible view of SON Agency in the local sporting community. */
.home-field-photo img { display: block; width: 100%; height: auto; max-height: 525px; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 60%; border-radius: var(--r-lg, 16px); }
@media (max-width: 600px) { .home-field-photo img { aspect-ratio: 1 / 1; } }

.contact-icon-button { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; overflow: hidden; background: var(--white); color: var(--ink); }
.contact-icon-button svg { display: block; width: 24px; height: 24px; }
@media (max-width: 600px) { .contact-icon-button { width: 48px; height: 48px; } }

.shared-contact-link { grid-template-columns: auto minmax(0, 1fr); }
.shared-contact-link .contact-icon-button { grid-column: 1; grid-row: 1 / span 2; }
.shared-contact-link .contact-label, .shared-contact-link .contact-value { grid-column: 2; }
.shared-contact-link .contact-label { grid-row: 1; }
.shared-contact-link .contact-value { grid-row: 2; }
.shared-contact-link .contact-icon-button--email { background: var(--blue); border-color: var(--blue); color: #fff; }
.shared-contact-link .contact-icon-button--whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.shared-contact-link .contact-icon-button--instagram { background: radial-gradient(circle at 28% 105%, #ffd776 0%, #ffb54f 20%, #f56040 38%, #e1306c 55%, #c13584 68%, #833ab4 85%, #5851db 100%); border-color: transparent; color: #fff; }

.shared-contact-link .contact-icon-button--instagram svg { width: 32px; height: 32px; }

@media (prefers-reduced-motion: no-preference) {
 .contact-icon-button { transition: transform .25s ease; }
 .contact-icon-button svg { transition: transform .25s ease; }
 .shared-contact-link:is(:hover, :focus-visible) .contact-icon-button { transform: translateY(-4px); }
 .shared-contact-link:is(:hover, :focus-visible) .contact-icon-button svg { transform: scale(1.12) rotate(-5deg); }
}