:root {
  --ink: #070707;
  --panel: #111111;
  --lime: #dce82c;
  --ink-on-lime: #111;
  --text: #f3f1ea;
  --muted: #9c9c94;
  --line: rgba(255,255,255,.12);
  --display: "Bebas Neue", Impact, sans-serif;
  --sans: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(7,7,7,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 22px; min-height: 72px; }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 28px; height: 28px; border: 1px solid var(--text); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.name { letter-spacing: .18em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.nav ul { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a { text-decoration: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nav a[aria-current="page"], .nav a:hover { color: var(--text); }
.menu-btn { display: none; background: none; color: var(--text); border: 1px solid var(--line); padding: 8px 10px; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 16px; text-decoration: none; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; border: 1px solid transparent;
  white-space: nowrap;
}
.btn-lime { background: var(--lime); color: var(--ink-on-lime); }
.btn-ghost { background: transparent; color: var(--lime); border-color: var(--lime); }
.text-link { color: var(--text); text-decoration: none; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--lime); padding-bottom: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 26px 0 12px; }

.eyebrow { margin: 0 0 12px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.display { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 9vw, 108px); line-height: .88; letter-spacing: .01em; margin: 0 0 18px; }
.display-sm { font-family: var(--display); font-size: clamp(40px, 6vw, 72px); line-height: .9; margin: 0; }
.lime { color: var(--lime); }
.lede { max-width: 40em; color: #e4e1d8; margin: 0; }
.muted { color: var(--muted); }
.agency { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

.hero {
  min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end;
  background: #111 center/cover no-repeat; position: relative; padding-top: 120px;
}
.shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.28) 62%, rgba(0,0,0,.45)); }
.hero .wrap, .case-hero .wrap { position: relative; z-index: 1; padding-bottom: 48px; }
.credits { position: relative; z-index: 1; border-top: 1px solid var(--line); background: rgba(0,0,0,.45); padding: 14px 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.logo { height: 56px; width: auto; display: block; }
.logo-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.logo-row img { height: 42px; width: auto; max-width: 160px; object-fit: contain; filter: none; }

.lanes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.lane { padding: 0 0 36px; border-right: 1px solid var(--line); text-decoration: none; display: flex; flex-direction: column; }
.lane img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 22px; }
.lane h2 { font-family: var(--display); font-size: clamp(36px, 4vw, 52px); line-height: .92; margin: 0 22px 12px; }
.lane p { margin: 0 22px; color: var(--muted); font-size: 16px; }
.lane:last-child { border-right: 0; }
.lane:hover h2 { color: var(--lime); }

.about-photo { background: #111; min-height: 70vh; }
.about-photo img { width: 100%; height: 70vh; object-fit: cover; object-position: center 28%; display: block; }
.keyart { background: #0c0c0c; display: grid; place-items: center; min-height: 420px; padding: 28px; }
.keyart img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; }

.case-split { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 72vh; border-top: 1px solid var(--line); }
.case-still { min-height: 440px; background: #161616 center/cover no-repeat; display: flex; align-items: flex-end; }
.case-still div { width: 100%; padding: 28px; background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.case-still h2 { margin: 0 0 6px; font-size: 28px; }
.case-panel { background: var(--panel); padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }

.scale { position: relative; min-height: 62vh; background: #000 center/cover no-repeat; display: grid; align-items: end; }
.scale .shade { background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.scale .wrap { position: relative; z-index: 1; padding: 48px 0; }
.scale h2 { font-family: var(--display); font-size: clamp(48px, 8vw, 96px); line-height: .9; margin: 0 0 12px; }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 64px 0 20px; }
.work-list { list-style: none; margin: 0 0 80px; padding: 0; }
.work-row + .work-row { border-top: 1px solid var(--line); }
.work-row a { display: grid; grid-template-columns: 52px 168px 1fr auto; gap: 22px; align-items: center; padding: 18px 0; text-decoration: none; }
.num { font-family: var(--display); font-size: 32px; color: #3d3d3d; }
.thumb { aspect-ratio: 16/10; background: #1a1a1a center/cover no-repeat; }
.meta strong { display: block; font-size: 20px; }
.meta span { display: block; color: var(--muted); font-size: 14px; }

.end {
  min-height: 68vh; display: grid; align-items: center;
  background: #070707 center/cover no-repeat; position: relative; padding: 80px 0;
}
.end .shade { background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.4)); }
.end .wrap { position: relative; z-index: 1; }

.page-hero { padding: 72px 0 28px; }
.prose h2, .prose h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin: 28px 0 8px; }
.prose p { margin: 0 0 1em; color: #e6e3da; }
.blocks { display: grid; gap: 18px; margin: 28px 0 40px; }
.block { border-top: 1px solid var(--line); padding-top: 16px; }
.block h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.page-cta { margin: 36px 0 80px; }

.case-hero { min-height: 68vh; display: flex; align-items: flex-end; background: #111 center/cover no-repeat; position: relative; padding-top: 110px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 6px 8px; }

.book-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; margin: 20px auto 80px; }
.cal {
  min-height: 420px; border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; padding: 28px; color: var(--muted);
}
.note { font-size: 14px; color: var(--muted); }

footer { border-top: 1px solid var(--line); padding: 26px 0 40px; }
.footer-inner { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.footer-inner a { color: var(--muted); text-decoration: none; font-size: 14px; }
.footer-inner nav { margin-left: auto; display: flex; gap: 18px; }

@media (max-width: 860px) {
  .nav { display: none; }
  .nav.open { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: #0c0c0c; padding: 18px 20px 22px; border-bottom: 1px solid var(--line); align-items: flex-start; }
  .nav.open ul { flex-direction: column; align-items: flex-start; gap: 14px; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .lanes, .case-split, .book-grid, .work-row a { grid-template-columns: 1fr; }
  .lane { border-right: 0; border-bottom: 1px solid var(--line); }
  .display { font-size: 56px; }
  .header-inner .btn { display: none; }
}

/* 1.4.1 */
.lede-2 { margin-top: 1em; }
.credits-title { text-align: center; margin: 4px 0 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
section.credits { padding: 28px 0; }
.featured { padding: 24px 0 72px; }
.featured-title { margin: 0; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feature-card { text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.feature-img { display: block; aspect-ratio: 16/10; overflow: hidden; background: #111; margin-bottom: 12px; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.feature-card:hover img { transform: scale(1.03); }
.feature-client { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.feature-title { font-family: var(--display); font-size: clamp(32px, 4vw, 48px); line-height: .95; text-transform: uppercase; }
.feature-card:hover .feature-title { color: var(--lime); }
.feature-line { color: #dedcd4; }
.roots { padding: 72px 0; border-top: 1px solid var(--line); }
.roots-title { font-family: var(--display); font-size: clamp(40px, 6vw, 72px); line-height: .9; margin: 0 0 16px; text-transform: uppercase; }
.roots-img { margin-top: 32px; }
.roots-img img { width: 100%; height: auto; display: block; }
.case-tags { margin: 10px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.case-video { padding-top: 48px; }
.video-embed { position: relative; aspect-ratio: 16/9; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.about-split { background: #0b0b0b var(--about-bg) center/cover no-repeat; }
.about-photo { background: transparent; display: grid; place-items: center; padding: 48px; min-height: 0; }
.about-photo img.founders { width: min(420px, 80%); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.book-img { width: 100%; height: auto; display: block; }
.cal:has(.book-img) { padding: 0; border: 0; }
.admin-only { border: 1px dashed var(--lime); padding: 10px; color: var(--lime); }
.footer-cta { padding: 8px 0 28px; }
footer .social { display: flex; gap: 14px; margin-left: auto; }
footer .social a { color: var(--text); }
footer .social a:hover { color: var(--lime); }
.copyright { width: 100%; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
  .featured-grid { grid-template-columns: 1fr; }
  footer .social { margin-left: 0; }
}

/* 1.4.1: lanes with more weight */
.lanes { gap: 2px; background: var(--line); border-top: 0; padding: 0; }
.lane { background: #0d0d0d; padding: 0; border-right: 0; position: relative; overflow: hidden; }
.lane-img { display: block; aspect-ratio: 4/3; overflow: hidden; }
.lane-img img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; margin: 0; display: block; filter: brightness(.85); transition: transform .5s, filter .3s; }
.lane:hover .lane-img img { transform: scale(1.04); filter: brightness(1); }
.lane-body { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3.5vw, 48px); border-top: 3px solid var(--lime); flex: 1; }
.lane-num { font-family: var(--display); font-size: 56px; line-height: .8; color: var(--lime); }
.lane h2 { font-size: clamp(42px, 4.6vw, 68px); line-height: .9; margin: 0; color: #fff; }
.lane p { margin: 0; color: #e9e6dd; font-size: 19px; line-height: 1.45; max-width: 22em; }
.lane-more { margin-top: auto; font-size: 26px; color: var(--lime); }
@media (max-width: 860px) { .lane-img { aspect-ratio: 16/9; } }

/* 1.4.2: Book image stays inside the grid column */
.book-grid > * { min-width: 0; }
.cal:has(.book-img) { display: block; min-height: 0; padding: 0; border: 0; }
.book-img { width: 100%; max-width: 100%; height: auto; }

/* 1.4.3: larger client logos, image overlays, case heroes, calendar */
.logo-row { gap: 36px; justify-content: center; }
section.credits { padding: 36px 0 40px; }

/* Featured work text overlay */
.feature-card-overlay .feature-img { position: relative; aspect-ratio: 16/10; }
.feature-card-overlay .feature-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.2) 100%);
  pointer-events: none;
}
.feature-card-overlay .feature-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(18px, 2.5vw, 28px);
  display: flex; flex-direction: column; gap: 6px; z-index: 1;
}
.feature-card-overlay .feature-client { color: rgba(243,241,234,.78); }
.feature-card-overlay .feature-title { color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.45); }
.feature-card-overlay .feature-line { color: #e8e5dc; }
.feature-card-overlay:hover .feature-title { color: var(--lime); }

/* Lane text overlay (vignetted stills) */
.lane-overlay { min-height: 0; }
.lane-overlay .lane-img { position: relative; aspect-ratio: 3/4; display: block; }
.lane-overlay .lane-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); }
.lane-overlay:hover .lane-img img { filter: brightness(.88); transform: scale(1.03); }
.lane-overlay .lane-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}
.lane-overlay .lane-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  border-top: 0; padding: clamp(24px, 3vw, 40px);
  background: transparent;
}
.lane-overlay .lane-num { font-size: 48px; }
.lane-overlay h2 { font-size: clamp(36px, 3.8vw, 56px); }
.lane-overlay p { color: #ece9e0; font-size: 17px; max-width: 18em; }
@media (max-width: 860px) {
  .lane-overlay .lane-img { aspect-ratio: 16/10; }
}

/* Case heroes: keep top of stills readable; text sits in a strong bottom shade */
.case-hero {
  min-height: min(72vh, 760px);
  background-size: cover;
  background-repeat: no-repeat;
}
.case-hero .shade {
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.28) 100%);
}
.case-hero .display {
  font-size: clamp(44px, 7.2vw, 96px);
  max-width: 14ch;
  text-wrap: balance;
}
.case-hero .wrap { padding-bottom: 56px; }

/* Calendar embed on Book */
.cal-has-embed { padding: 0; border: 0; min-height: 0; display: block; }
.cal-embed { position: relative; width: 100%; min-height: 640px; background: #0c0c0c; border: 1px solid var(--line); }
.cal-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) {
  .cal-embed { min-height: 560px; }
  .logo-row img { height: 36px; max-width: 140px; }
}

/* 1.4.4: Contact form on Book page */
.cal-has-form {
  display: block;
  min-height: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  text-align: left;
  color: var(--text);
}
.tc-contact-form { width: 100%; max-width: 520px; }
.tc-field { margin: 0 0 16px; }
.tc-field label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tc-field input,
.tc-field textarea {
  width: 100%;
  background: #0c0c0c;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  border-radius: 2px;
}
.tc-field input:focus,
.tc-field textarea:focus { outline: 1px solid var(--lime); border-color: var(--lime); }
.tc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tc-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.tc-form-note { padding: 18px 20px; border: 1px solid var(--line); margin-bottom: 12px; }
.tc-form-note--ok { border-color: var(--lime); color: var(--lime); }
.tc-form-note--err { border-color: #c44; color: #f0a0a0; }
.tc-contact-form .btn { margin-top: 8px; }
@media (max-width: 860px) {
  .tc-field-row { grid-template-columns: 1fr; }
}

/* 1.4.7: Home hero — headline sits under the header instead of at the bottom of a 92vh box */
.hero {
  min-height: min(80vh, 780px);
  justify-content: flex-start;
  padding-top: clamp(40px, 8vh, 96px);
}
.hero .wrap { padding-bottom: clamp(40px, 6vh, 64px); }

/* 1.4.7: Book page — "Book a time" calendar, then "Or send a message" */
.book-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: .95; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
.book-cal { margin: 24px auto 0; }
.book-cal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; margin-bottom: 18px; }
.book-cal-intro { margin: 8px 0 0; }
.book-cal-open { white-space: nowrap; }
/* Google's scheduler has a transparent page and dark text: give it a light card so it reads on the dark site. */
.book-cal .cal-embed { min-height: 0; height: 764px; background: #fff; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.book-cal .cal-embed iframe { position: static; display: block; width: 100%; height: 100%; border: 0; background: #fff; }
/* Tall enough for Google's whole layout so the frame never scrolls on its own (no nested-scroll trap on phones).
   Google stacks below a 600px frame width (= viewport < 642px with the 20px gutters).
   1.4.9: was 1290px / 1780px, which left a 550-830px white band under "Powered by Google". These match
   Google's measured content in its tallest view (a day with a full column of times) plus ~24px, so nothing
   is clipped; if Google ever runs taller, the frame scrolls inside itself. The booking form is a dialog
   Google centres inside the frame (about 500-560px tall), so it fits at both heights. */
@media (max-width: 641px) {
  .book-cal .cal-embed { height: 1256px; }
}
/* 1.4.14: less white space under Google's scheduler (Bobby, Android). The 1.4.9 heights fit Google's TALLEST view
   (a day with a full column of times), so the first view most visitors see (month calendar, no times listed yet)
   left ~300px of white on phones and ~175-195px on tablets. Measured on turncard.tv, Oct 22 2026, content end
   inside the frame, no-times view / full-day view: phones 360-411px 949/1221, 412-641px 933/1205, under 360px
   ~1013-1064; tablets 642-959px 587-605/745, 960-1199px 568/726; 1200px+ 726 (side by side, unchanged).
   New heights = the no-times view + ~40-60px. On a day with many times the frame scrolls inside itself for the
   rest of the list (about 220px on phones, about 105px on tablets). The booking form dialog (500-560px) fits. */
@media (min-width: 642px) and (max-width: 959px) {
  .book-cal .cal-embed { height: 640px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .book-cal .cal-embed { height: 620px; }
}
@media (max-width: 641px) {
  .book-cal .cal-embed { height: 1000px; }
}
@media (max-width: 359px) {
  .book-cal .cal-embed { height: 1100px; }
}
.book-cal-fallback { margin: 12px 0 0; }
/* 1.4.9: footer Privacy Policy link, on the copyright line (only printed once a privacy page is set and published). */
.footer-inner .footer-privacy { font-size: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-inner .footer-privacy:hover { color: var(--lime); }
.book-grid-after-cal { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.book-form-title { grid-column: 1 / -1; margin-bottom: 4px; }
/* Portrait tablets: the 780px hero left a tall empty band under the button. */
@media (min-width: 700px) and (orientation: portrait) {
  .hero { min-height: min(60vh, 640px); }
}

/* 1.4.8: background stills are real <img> elements (srcset + lazy loading) */
.bg-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
.hero, .case-hero, .scale, .end { overflow: hidden; }
.thumb { display: block; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 1.4.8: sticky header. Desktop keeps the frosted bar (now with the Safari prefix);
   phones and tablets get a solid, slimmer bar so the hero headline never shows through it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
.site-header { -webkit-backdrop-filter: blur(14px); }
@media (max-width: 860px) {
  html { scroll-padding-top: 76px; }
  .site-header { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header-inner { min-height: 60px; gap: 14px; }
  .site-header .logo { height: 44px; }
  .nav.open { top: 60px; }
  .hero { padding-top: 44px; }
  .hero .display { font-size: clamp(44px, 14.6vw, 56px); }
}

/* 1.4.8: 404 page */
.notfound { padding: clamp(56px, 10vh, 120px) 0 clamp(72px, 12vh, 140px); }
.notfound .display { margin-bottom: 22px; }
.notfound .actions { margin-top: 30px; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }

/* 1.4.8: lane archives */
.lane-crumb { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.lane-crumb:hover { color: var(--text); border-color: var(--lime); }

/* 1.4.11: overlay lanes. Text sat bottom-anchored, so a lane whose line is one line shorter
   (03 "Programs built to grow with you.") started ~25px lower than 01/02.
   - The text block is now in normal flow at the bottom of the picture, so the picture grows
     instead of clipping "01" when the text is taller than the image (small phones).
   - In the 3-up row, the heading and line reserve the same height in all three tiles
     (2 lines by default; theme.js equalizes to the tallest tile if copy wraps more), so
     numbers, headings, lines and arrows share one baseline whatever the copy length. */
.lane-overlay .lane-img { display: grid; aspect-ratio: auto; }
.lane-overlay .lane-img::before { content: ""; grid-area: 1 / 1; padding-top: 133.333%; } /* 3:4 picture; 16:10 on small screens below */
.lane-overlay .lane-img img { position: absolute; inset: 0; }
.lane-overlay .lane-body { grid-area: 1 / 1; align-self: end; position: relative; left: auto; right: auto; bottom: auto; }
.lane-overlay .lane-more { margin-top: 0; }
@media (max-width: 860px) { .lane-overlay .lane-img::before { padding-top: 62.5%; } }
/* 1.4.12: the 2-line reservation now applies at every width, so 03's text also starts at the
   same place inside its picture as 01 and 02 when the tiles stack (phones/tablets). */
.lanes-overlay .lane-overlay p { min-height: calc(2em * 1.45); }

/* 1.4.14: optional logo marquee (off by default; Home → Client logos strip → "Scroll the logos as a moving strip").
   CSS only. Only the first set is announced; the copies are aria-hidden with empty alts. The track slides by exactly
   half its length (two of four identical sets), so the loop is seamless and never shows a gap. Image height is fixed, so nothing below moves while logos load. Pauses on hover and on
   keyboard focus (the strip is focusable); static wrapping row when the device asks for reduced motion. */
.logo-marquee { display: block; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.logo-marquee:focus { outline: none; }
.logo-marquee:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
.logo-track { display: flex; width: max-content; animation: tc-logo-marquee var(--tc-marquee-dur, 35s) linear infinite; will-change: transform; }
.logo-set { display: flex; flex: none; align-items: center; gap: 56px; padding-right: 56px; }
.logo-marquee img { flex: none; }
.logo-marquee:hover .logo-track,
.logo-marquee:focus .logo-track,
.logo-marquee:focus-within .logo-track { animation-play-state: paused; }
@keyframes tc-logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 860px) { .logo-set { gap: 40px; padding-right: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logo-track { display: block; width: auto; animation: none; transform: none; }
  .logo-set { flex-wrap: wrap; justify-content: center; gap: 36px; padding-right: 0; }
  .logo-set[aria-hidden="true"] { display: none; }
}