*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto; /* Lenis (js/motion.js) drives smooth scroll; avoid double-smoothing */
  scrollbar-gutter: stable; /* reserve scrollbar space always, so toggling body overflow (e.g. page-loader lock) never shifts layout width */
}

body {
  margin: 0;
  background: var(--paper-50);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}

/* Superline has a single weight: stop browsers faking bold (15 Oct 2026) */
html {
  font-synthesis-weight: none;
}

/* Body titles in Barlow Condensed; page headers (h1) stay in Superline.
   Redefining --font-display on titles makes every page rule that uses it resolve to Barlow. */
h2, h3, h4, .studio-showcase__title {
  --font-display: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 var(--space-2);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.75rem;
  margin-bottom: var(--space-1);
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

section {
  padding: var(--space-5) 0;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ink-900);
}

/* AI visuals of the studio carry a visible label (15 Oct 2026).
   The image file itself is clean; the label is added here so it survives any crop. */
:is(.about-intro__media, .inline-photo):has(> img[src*="blueprint-studio-ai"]) {
  position: relative;
}
:is(.about-intro__media, .studio-showcase__slide, .media-gallery__slide):has(> img[src*="blueprint-studio-ai"])::after,
.page-hero--studio .page-hero__bg::before,
.served-panel::after,
.services-stack__panel--studio::after {
  content: "AI image of the new gym";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20, 24, 26, 0.75);
  color: #f5f3ec;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.02em;
  text-transform: none;
  pointer-events: none;
}
.page-hero--studio .page-hero__bg::before {
  top: auto;
  right: 28px;
  bottom: 28px;
}
.inline-photo:has(> img[src*="blueprint-studio-ai"])::after {
  content: "AI";
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(20, 24, 26, 0.75);
  color: #f5f3ec;
  font: 700 9px/1 var(--font-body);
  pointer-events: none;
}


/* Cropping rule (15 Oct 2026): faces/heads are always the focal point.
   Every photo is positioned on its subjects' heads, so object-fit / background-size: cover
   keeps them in frame in any slot shape. Add a line here for every new photo. */
img[src*="caroline-ralph."] { object-position: 52% 25% !important; }
img[src*="caroline-ralph-kiss."] { object-position: 60% 8% !important; }
img[src*="dog-obedience."] { object-position: 40% 5% !important; }
img[src*="jbwo-slatmill."] { object-position: 45% 15% !important; }
img[src*="jbwo-wall-climb."] { object-position: 55% 6% !important; }
img[src*="jbwo-wall-climb-card."] { object-position: 55% 20% !important; }
img[src*="jbwo-weight-pull."] { object-position: 50% 40% !important; }
img[src*="ralph-ball."] { object-position: 50% 38% !important; }
img[src*="ralph-run."] { object-position: 50% 35% !important; }
img[src*="working-dogs."] { object-position: 40% 25% !important; }
img[src*="dog-and-ball."] { object-position: 52% 33% !important; }
img[src*="ralph-exploring."] { object-position: 48% 40% !important; }
img[src*="group-walk-photosbycesc."] { object-position: 50% 42% !important; }
img[src*="park-walk-elliebescobyphotography."] { object-position: 50% 48% !important; }

/* 15 Oct 2026: the "Come in to train…" / "One standard…" statements are plain titles now
   (no inline photos), set in the body title font like every other section title. */
.about-blueprint h2.about-blueprint__lede {
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.85rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-900);
}
.equipment-stack__cta { display: flex; justify-content: center; margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.equipment-stack__cta .btn { text-align: center; }

/* Mobile footer: the three link columns had a 128px minimum each, which pushed the
   footer ~35px wider than a 390px phone and clipped the Contact column (15 Oct 2026). */
@media (max-width: 520px) {
  .site-footer .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .site-footer__credit { overflow-wrap: anywhere; }
}

/* 15 Oct 2026 (pm): new studio photos + Canine Services "three ways in" list */
img[src*="unity32-trial-outdoor."] { object-position: 58% 40% !important; }
img[src*="spring-pole."] { object-position: 50% 30% !important; }
img[src*="dog-stretch-conditioning."] { object-position: 40% 42% !important; }
img[src*="balance-kit."] { object-position: 62% 30% !important; }
.about-blueprint__ways {
  list-style: none;
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  padding: 0;
  max-width: 34rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  color: var(--ink-900);
}
.about-blueprint__ways li { padding: 0.7rem 0; border-top: 1px solid rgba(20, 24, 26, 0.14); }
.about-blueprint__ways li:last-child { border-bottom: 1px solid rgba(20, 24, 26, 0.14); }

/* 15 Oct 2026: Studio equipment intro centred above the centred button */
#equipment .section-kicker { justify-content: center; text-align: center; }
#equipment .equipment-stack__intro { text-align: center; margin-left: auto; margin-right: auto; }

/* 16 Oct 2026: new AI images (kitchen/lounge, wall climb). Focal points; labels come from the
   blueprint-studio-ai rule above, plus the About CTA float, which is small so uses a short tag. */
img[src*="blueprint-studio-ai-wall-climb."] { object-position: 50% 28% !important; }
img[src*="blueprint-studio-ai-kitchen."] { object-position: 55% 60% !important; }
.about-cta__float:has(> img[src*="blueprint-studio-ai"])::after {
  content: "AI image";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(20, 24, 26, 0.75);
  color: #f5f3ec;
  font: 600 11px/1 var(--font-body);
  pointer-events: none;
}

/* 16 Oct 2026: click to call. Header icon shows on mobile only (desktop has the number in the
   footer and on the contact page). */
.site-header__call { display: none; }
@media (max-width: 720px) {
  .site-header__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--nav-fg);
    text-decoration: none;
  }
  .site-header__call:hover, .site-header__call:focus-visible { background: var(--teal-700); border-color: var(--teal-700); color: var(--paper-50); }
  /* Logged-in admins get a name pill and a log-out pill, which leaves no room: hide the call icon for them. */
  .site-header__right:has(.site-header__auth-logout) .site-header__call { display: none; }
}
.contact-call a { font-size: 1.25rem; font-weight: 600; }