/* ==========================================================================
   Perth Auto Place — light brand system
   Slate neutrals + the logo cyan. Dark surfaces are used deliberately
   (hero photo panel, CTA band, footer) as accents, not as the page ground.
   ========================================================================== */

:root {
  /* Brand — sampled straight from the logo artwork (#09b0ef) */
  --brand-50:  #e9f8fe;
  --brand-100: #cbeffd;
  --brand-200: #9ae2fc;
  --brand-300: #5fd0fa;
  --brand-400: #2bbcf4;
  --brand-500: #09b0ef;   /* the logo cyan, exactly */
  --brand-600: #0b8dc2;
  --brand-700: #0e7099;
  --brand-800: #135b7c;

  /* Neutrals — warm "stone" greys. Softer than pure white, so the page reads
     crafted rather than glaring, and the logo's black sits in it naturally. */
  --n-0:   #ffffff;
  --n-50:  #fafaf9;
  --n-100: #f5f4f2;
  --n-200: #edebe8;
  --n-300: #e0ddd9;
  --n-400: #a8a29e;
  --n-500: #78716c;
  --n-600: #57534e;
  --n-700: #44403c;
  --n-800: #292524;
  --n-900: #1c1917;
  --n-950: #14120f;

  /* Semantic — everything below refers to these, never to raw hex */
  --bg:            var(--n-100);   /* soft ground, not glare */
  --surface:       var(--n-0);
  --surface-alt:   var(--n-200);
  --surface-dark:  var(--n-950);      /* the logo's black */
  --text:          var(--n-900);      /* 15.9:1 on the page ground */
  --text-muted:    var(--n-600);      /* 7.7:1 on white, 7.0:1 on ground */
  --text-subtle:   var(--n-500);      /* 4.8:1 on white */
  --text-on-dark:  #e7e5e4;           /* 14.9:1 on the dark band */
  /* Hero navy — the dark ground the page heroes sit on, carried down from the
     header so the two read as one slab. Cool enough to hold the logo cyan. */
  --hero-ink:      #0a1420;
  --hero-ink-deep: #060d16;
  --muted-on-dark: #a8a29e;
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --brand:         var(--brand-500);
  --brand-ink:     var(--brand-700);  /* cyan for text — 5.5:1 on white */
  --on-brand:      #14120f;           /* 7.9:1 on the brand fill */
  --ring:          var(--brand-600);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", var(--font-sans);

  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .05), 0 1px 1px rgba(28, 25, 23, .03);
  --shadow-md: 0 2px 4px rgba(28, 25, 23, .04), 0 12px 24px -12px rgba(28, 25, 23, .14);
  --shadow-lg: 0 2px 6px rgba(28, 25, 23, .04), 0 24px 48px -24px rgba(28, 25, 23, .22);
  --shadow-brand: 0 2px 6px rgba(11, 141, 194, .16), 0 16px 32px -16px rgba(11, 141, 194, .38);

  --wrap: 1240px;
  --header-h: 100px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

/* pap_image() wraps every picture in <picture> to offer WebP. That wrapper
   would otherwise become the grid or flex child, so any rule written against
   the img itself (a span, an aspect ratio, an order) would stop applying.
   display:contents removes the wrapper from layout and leaves the img as the
   child it always was. */
picture { display: contents; }
/* display:contents promotes ALL of the picture's children, and <source> is one
   of them. Left visible it takes a grid cell of its own, which pushed the two
   supporting workshop photographs out of column one. Hiding it costs nothing:
   the browser picks the source from the markup, not from the layout. */
picture > source { display: none; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-ink); text-decoration: none; transition: color .3s var(--ease); }
a:hover { color: var(--brand-800); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text); line-height: 1.12; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.022em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); font-weight: 800; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.06rem; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brand-200); color: var(--n-900); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--n-100); }
::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--n-400); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
/* 96px a side, not 128: at the old value two neighbouring sections put 256px
   of nothing between them, and 31% of the home page was empty. */
.section { padding: clamp(46px, 5.4vw, 78px) 0; position: relative; }
.section--tight { padding: clamp(34px, 4vw, 56px) 0; }
/* The stats strip is a band, not a section — it stays shallow. */
.section--stats { padding: clamp(30px, 3.4vw, 46px) 0; }
.section--ink { background: var(--surface-alt); }
.section--line { border-top: 1px solid var(--border); }
.grid { display: grid; gap: 26px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

.bg-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image:
    linear-gradient(rgba(28, 25, 23, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 25, 23, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}
.glow {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(9, 176, 239, .18) 0%, transparent 70%);
  filter: blur(20px);
}

/* ---------- Type utilities ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg, var(--brand-500), transparent); }
.eyebrow.is-centered { justify-content: center; }
.lead { font-size: 1.1rem; line-height: 1.72; color: var(--text-muted); max-width: 62ch; }
.lead--center { margin-inline: auto; }
.gradient-text {
  background: linear-gradient(120deg, var(--brand-600) 0%, var(--brand-700) 55%, var(--brand-800) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.muted { color: var(--text-muted); }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 58px); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
/* On a dark band the light-ground colours have no contrast — same type scale,
   same rhythm, only the three colours change. */
.section-head--ink h2 { color: #fff; }
.section-head--ink .eyebrow { color: var(--brand-300); }
.section-head--ink .lead { color: var(--muted-on-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;                       /* comfortable touch target */
  padding: 13px 26px; border-radius: var(--radius); border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; cursor: pointer; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: linear-gradient(120deg, var(--brand-500), var(--brand-600)); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.btn--primary:hover { color: var(--on-brand); transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.btn--ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: var(--n-50); border-color: var(--brand-400); color: var(--brand-ink); transform: translateY(-2px); }
.btn--dark { background: var(--surface-dark); color: #fff; }
.btn--dark:hover { background: var(--n-800); color: #fff; }
.btn--sm { min-height: 42px; padding: 9px 18px; font-size: .875rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--brand-ink); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--brand-200);
  box-shadow: var(--shadow-sm);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink);
}
.pill svg { width: 15px; height: 15px; color: var(--brand-500); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20, 18, 15, .92); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: box-shadow .38s var(--ease), background .38s var(--ease);
}
.site-header.is-stuck { background: rgba(20, 18, 15, .97); box-shadow: 0 10px 30px -18px rgba(28, 25, 23, .45); }
/* Slides out of the way when scrolling down, returns the moment you scroll up. */
.site-header { transform: translateY(0); transition: transform .38s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }

/* The admin bar is fixed over the top of the viewport, and a sticky header at
   top:0 sticks underneath it, so the logo was being clipped for anyone logged
   in. Visitors never saw this. WordPress uses 32px above 782px, 46px between
   601 and 782, and below 600 the bar scrolls away instead of being fixed, so
   no offset is wanted there. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Still hides — just without the slide. Cancelling the transform here would
     stop the header hiding at all. */
  .site-header { transition: background .3s, box-shadow .3s; }
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 72px; width: auto; transition: transform .38s var(--ease); }
.brand:hover img { transform: scale(1.04); }
.brand__text { display: none; }

.nav__primary { display: block; }
.nav__menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__menu > li { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px;
  font-size: .92rem; font-weight: 500; color: var(--text-on-dark); white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav__link:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.nav__menu > li.current-menu-item > .nav__link,
.nav__menu > li.current-menu-parent > .nav__link,
.nav__menu > li.current-page-ancestor > .nav__link { color: #fff; font-weight: 600; }
.nav__menu > li.current-menu-item > .nav__link::after,
.nav__menu > li.current-menu-parent > .nav__link::after,
.nav__menu > li.current-page-ancestor > .nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600)); border-radius: 2px;
}
.nav__caret { width: 13px; height: 13px; opacity: .55; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav__menu > li.is-open > .nav__link { color: #fff; background: rgba(255, 255, 255, .08); }
.nav__menu > li.is-open .nav__caret { transform: rotate(180deg); opacity: 1; }

/* ---------- Mega panel ----------
   A light card dropped out of the dark header. Anchored to the middle of its
   trigger, with a transparent strip on top so the pointer can travel from the
   link into the panel without it closing underneath. */
.mega {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  width: min(780px, calc(100vw - 32px));
  padding-top: 12px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(9px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.nav__menu > li.is-open > .mega,
html:not(.js) .nav__menu > li:hover > .mega,
html:not(.js) .nav__menu > li:focus-within > .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%);
}

.mega__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* Notch that ties the panel back to the link it belongs to. */
.mega__panel::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px;
  background: var(--surface);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  border-radius: 4px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
}

.mega__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px; list-style: none; margin: 0; padding: 10px;
}
.mega__item {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 13px;
  padding: 12px; border-radius: 12px; color: var(--text);
  transition: background .22s var(--ease);
}
.mega__item:hover { background: var(--n-50); }
.mega__item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; background: var(--n-50); }
.mega__icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.mega__icon svg { width: 20px; height: 20px; }
.mega__item:hover .mega__icon,
.mega__item:focus-visible .mega__icon { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.mega__text { display: block; min-width: 0; }
.mega__title {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--text);
}
.mega__go { width: 14px; height: 14px; flex: none; color: var(--brand-ink); opacity: 0; transform: translateX(-5px);
  transition: opacity .22s var(--ease), transform .22s var(--ease); }
.mega__item:hover .mega__go,
.mega__item:focus-visible .mega__go { opacity: 1; transform: none; }
.mega__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 3px; font-size: .8rem; line-height: 1.5; font-weight: 400; color: var(--text-muted);
}
.mega__grid .current-menu-item > .mega__item { background: var(--brand-50); }
.mega__grid .current-menu-item .mega__icon { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.mega__grid .current-menu-item .mega__title { color: var(--brand-800); }

.mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 13px 18px; background: var(--n-50);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mega__all { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--brand-ink); }
.mega__all svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.mega__all:hover svg { transform: translateX(4px); }
.mega__help { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); }
.mega__help a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.mega__help a:hover { color: var(--brand-ink); }
.mega__help svg { width: 14px; height: 14px; color: var(--brand-500); }

@media (prefers-reduced-motion: reduce) {
  .mega { transition: opacity .001ms, visibility .001ms; transform: translateX(-50%); }
  .mega__go, .mega__all svg, .nav__caret { transition: none; }
}

.nav__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__phone { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #fff; white-space: nowrap; }
.nav__phone svg { width: 16px; height: 16px; color: var(--brand-400); }
.nav__phone:hover { color: var(--brand-300); }

.nav__toggle {
  display: none; width: 46px; height: 46px; border-radius: 11px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; cursor: pointer; place-items: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

/* ---------- Mobile drawer ---------- */
.mobile-nav {
  display: none; border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(20, 18, 15, .99); max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.mobile-nav.is-open { display: block; animation: fadeUp .38s var(--ease) both; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mnav { padding: 10px 0 6px; }
.mnav > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mnav__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mnav__link { display: block; flex: 1 1 auto; padding: 15px 2px; font-size: 1rem; font-weight: 500; color: var(--text-on-dark); }
.mnav__link:hover, .mnav__link[aria-current="page"] { color: #fff; }
.mnav__link[aria-current="page"] { font-weight: 600; }
.mnav__toggle {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.mnav__toggle svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.mnav__group.is-open > .mnav__row .mnav__toggle { background: var(--brand-500); border-color: var(--brand-500); color: var(--on-brand); }
.mnav__group.is-open > .mnav__row .mnav__toggle svg { transform: rotate(180deg); }
.mnav__sub { max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); }
.mnav__group.is-open > .mnav__sub { max-height: 720px; }
.mnav__child {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 2px; font-size: .93rem; font-weight: 500; color: var(--muted-on-dark);
}
.mnav__child:hover, .mnav__child[aria-current="page"] { color: #fff; }
.mnav__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: rgba(9, 176, 239, .13); color: var(--brand-300); border: 1px solid rgba(9, 176, 239, .22);
}
.mnav__icon svg { width: 17px; height: 17px; }
.mnav__child[aria-current="page"] .mnav__icon { background: var(--brand-500); border-color: var(--brand-500); color: var(--on-brand); }
.mnav__sub > li:last-child .mnav__child { padding-bottom: 16px; }
.mobile-nav .mobile-actions { display: grid; gap: 10px; padding-top: 18px; padding-bottom: 24px; }

/* The desktop bar runs out of room before the tablet breakpoint — hand over
   to the drawer while the links still fit on one line. */
@media (max-width: 1080px) {
  .nav__primary { display: none; }
  .nav__toggle { display: grid; }
}
@media (max-width: 720px) {
  :root { --header-h: 78px; }
  .brand img { height: 54px; }
  .nav__phone { display: none; }
  .nav__cta .btn--sm { padding-inline: 14px; }
}

/* Both sides of the bar were flex:none, so on a narrow phone the row could not
   shrink and every page scrolled sideways by about 60px. The brand may now
   give way, and below 420px the logo is sized by width rather than height so
   it scales instead of pushing the buttons off screen. */
.nav { min-width: 0; }
.brand { flex: 0 1 auto; min-width: 0; }
.brand img { max-width: 100%; }

@media (max-width: 420px) {
  .nav { gap: 10px; }
  .brand img { width: 128px; height: auto; }
  .nav__cta { gap: 8px; }
  .nav__cta .btn--sm { padding-inline: 10px; font-size: .8rem; gap: 6px; }
  .nav__toggle { width: 40px; height: 40px; }
}

/* ---------- Hero (404 page) ---------- */
.hero {
  position: relative; min-height: min(70vh, 640px); display: flex; align-items: center;
  overflow: hidden; background: var(--hero-ink); color: var(--text-on-dark);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 13, 22, .95) 8%, rgba(6, 13, 22, .82) 52%, rgba(6, 13, 22, .5) 100%),
    linear-gradient(180deg, rgba(6, 13, 22, .5) 0%, transparent 45%, rgba(10, 20, 32, .9) 100%);
}
.hero__inner { position: relative; z-index: 2; padding: clamp(64px, 9vw, 110px) 0; width: 100%; }
.hero__content { max-width: 700px; }
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .8); }
.hero__sub { font-size: 1.05rem; color: rgba(255, 255, 255, .78); margin-bottom: 8px; }
.hero__services { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 34px; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 36px; font-size: .875rem; color: rgba(255, 255, 255, .74); }
.hero__trust .sep { width: 1px; height: 15px; background: rgba(255, 255, 255, .25); }
/* The grid overlay is drawn in ink for light sections — flip it to light here. */
.hero .bg-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; color: var(--brand-500); fill: currentColor; }

/* ---------- Page hero (inner pages) ----------
   A dark navy panel that carries straight on from the dark header, with the
   photograph left visible instead of bleached out. Copy sits in white over a
   cyan-lit scrim, and the light page ground picks up again below it. */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--hero-ink);
  color: var(--text-on-dark);
  border-bottom: 1px solid rgba(9, 176, 239, .22);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.9) contrast(1.04); }
/* Two scrims: one across, so the copy has contrast wherever the photo is busy;
   one down, so the panel settles into the section below instead of stopping dead. */
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(6, 13, 22, .96) 0%, rgba(6, 13, 22, .88) 38%, rgba(6, 13, 22, .56) 74%, rgba(6, 13, 22, .38) 100%),
    linear-gradient(180deg, rgba(6, 13, 22, .55) 0%, rgba(6, 13, 22, .18) 42%, rgba(10, 20, 32, .92) 100%);
}
/* A soft bloom of the logo cyan off the right edge, so the panel is lit rather
   than flat black. */
.page-hero::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: -40%; right: -8%; width: 58%; height: 180%;
  background: radial-gradient(closest-side, rgba(9, 176, 239, .22), transparent 70%);
}
.page-hero__inner { position: relative; z-index: 2; padding: clamp(60px, 7.5vw, 100px) 0 clamp(54px, 6.5vw, 84px); }
.page-hero h1 { margin: 14px 0 12px; max-width: 20ch; color: #fff; }
.page-hero .lead { max-width: 60ch; color: rgba(255, 255, 255, .8); }
.page-hero .eyebrow { color: var(--brand-300); }
.page-hero .eyebrow::before { background: linear-gradient(90deg, var(--brand-400), transparent); }
.page-hero .pill { background: rgba(9, 176, 239, .12); border-color: rgba(9, 176, 239, .45); color: var(--brand-200); box-shadow: none; }
.page-hero .pill svg { color: var(--brand-300); }
.page-hero .breadcrumbs { color: rgba(255, 255, 255, .55); }
.page-hero .breadcrumbs a { color: rgba(255, 255, 255, .72); }
.page-hero .breadcrumbs a:hover { color: #fff; }
.page-hero .breadcrumbs span.sep { color: rgba(255, 255, 255, .34); }
.page-hero .breadcrumbs .current { color: var(--brand-300); }
/* The ghost button has to invert too — a white pill on navy would read as the
   primary action and fight the cyan one next to it. */
.page-hero .btn--ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #fff; }
.page-hero .btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(9, 176, 239, .6); color: #fff; }
.page-hero .bg-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}

.breadcrumbs { font-size: .8rem; color: var(--text-subtle); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--brand-ink); }
.breadcrumbs span.sep { color: var(--n-400); }
.breadcrumbs .current { color: var(--brand-ink); font-weight: 600; }

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  /* column layout so the CTA can sit on a common baseline across a row */
  display: flex; flex-direction: column;
  transition: transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--brand-300); box-shadow: var(--shadow-lg); }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--n-100); flex: none; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 25, 23, .45) 0%, transparent 42%); }
.card__badge {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  padding: 5px 12px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255, 255, 255, .95); border: 1px solid var(--brand-200); color: var(--brand-ink);
}
.card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: 10px; }
.card__body p { color: var(--text-muted); font-size: .935rem; margin-bottom: 18px; }
.card__list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.card__body .link-arrow { margin-top: auto; align-self: flex-start; }
.card__list li { position: relative; padding-left: 22px; font-size: .875rem; color: var(--text-muted); }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}

.icon-box {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none;
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600);
  transition: background .38s var(--ease), border-color .38s var(--ease), color .38s var(--ease);
}
.icon-box svg { width: 24px; height: 24px; }
.card:hover .icon-box, .feature:hover .icon-box { background: var(--brand-100); border-color: var(--brand-300); color: var(--brand-700); }

.feature {
  display: block;
  padding: 30px 26px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
.feature:hover { transform: translateY(-4px); border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.feature h3 { font-size: 1.12rem; margin: 18px 0 8px; }
.feature p { color: var(--text-muted); font-size: .92rem; margin: 0; }

.pillar {
  position: relative; padding: 32px 26px 30px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: border-color .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
.pillar:hover { border-color: var(--brand-300); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar__num {
  font-family: var(--font-display); font-size: 3.3rem; font-weight: 800; line-height: 1;
  color: var(--brand-200); margin-bottom: 12px;
}
.pillar h3 { font-size: 1.1rem; margin-bottom: 8px; }
.pillar p { color: var(--text-muted); font-size: .92rem; margin: 0; }

.stat { text-align: center; padding: 4px; }
.stat .icon-box {
  width: 40px; height: 40px; border-radius: 12px;
  margin: 0 auto 12px;
}
.stat .icon-box svg { width: 19px; height: 19px; }
.stat__value { font-family: var(--font-display); font-size: clamp(1.45rem, 2vw, 1.85rem); font-weight: 800; color: var(--text); line-height: 1.05; margin-bottom: 4px; letter-spacing: -.02em; }
.stat__label { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }

/* ---------- Split (image + copy) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; object-fit: cover; }
.split__media--tall img { aspect-ratio: 3 / 4; }
/* Cut-out subjects sit straight on the section ground — no frame, no crop. */
.split__media--plain img {
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.split__media--plain .split__badge { right: 0; bottom: 18px; }
/* The media column's left edge is transparent on a cut-out, so anchoring the
   badge there left it hovering in the gap, attached to nothing. Sitting it over
   the lower body of the car makes it read as part of the picture. */
.split--bleed .split__badge { right: auto; left: 22%; bottom: 6%; }

/* About: the cut-out runs off the left edge of the page and closes right up to
   the copy, so the two read as one composition instead of two boxed columns.
   The cut-out is composited on the page ground, so there is no seam where they meet. */
.about-band {
  padding-top: clamp(34px, 4vw, 58px);
  /* The bleed is sized from 100vw, which counts the scrollbar, so it overshoots
     the usable width by a few px. `clip` contains that without creating a
     scroll container (which `hidden` would). body{overflow-x:hidden} does not
     help here — the html element remains the scroller. */
  overflow-x: clip;
}

.split--bleed {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(0px, 1vw, 18px);
  align-items: center;
}
.split--bleed .split__media {
  order: 2;                      /* copy left, image right */
  /* pull out through the wrap padding to the viewport edge */
  margin-right: calc(-1 * max(20px, (100vw - var(--wrap)) / 2 + 20px));
  margin-block: 0;
  z-index: 0;
}
.split--bleed .split__copy { order: 1; }
/* A wide, very low cyan bloom behind the car. On a flat pale ground a cut-out
   has nothing to sit against; this gives it air and ties the section to the
   brand without tinting the page. */
.split--bleed .split__media::before {
  content: "";
  position: absolute; z-index: 0;
  left: -6%; right: -10%; top: 6%; bottom: 6%;
  background: radial-gradient(58% 52% at 52% 52%, rgba(9, 176, 239, .13), rgba(9, 176, 239, 0) 70%);
  pointer-events: none;
}

/* A soft contact shadow on the section ground. Without it the cut-out hovers,
   which is what made this section feel unfinished. */
.split--bleed .split__media::after {
  content: "";
  position: absolute; z-index: 0;
  left: 16%; right: 6%; bottom: 3%;
  height: 42px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(28, 25, 23, .3), rgba(28, 25, 23, 0) 72%);
  filter: blur(10px);
  pointer-events: none;
}
.split--bleed .split__media img {
  position: relative; z-index: 1;
  width: 100%;
  /* The cut-out is cropped hard at its right edge. On this side of the page that
     edge runs off the screen, so only a light feather is needed to finish it. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
}
.split--bleed .split__copy { position: relative; z-index: 2; }

.split__media .glow { width: 60%; height: 60%; left: -12%; bottom: -12%; }
/* Quiet credential card. A solid cyan block here was the loudest thing on the
   page and fought the photograph it sat on. */
.split__badge {
  position: absolute; right: -14px; bottom: -22px; z-index: 2;
  display: flex; align-items: center; gap: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 20px; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: 260px;
}
.split__badge strong {
  font-family: var(--font-display);
  font-size: 1.9rem; line-height: 1;
  color: var(--brand-ink);
  letter-spacing: -.02em;
}
.split__badge span {
  font-size: .78rem; font-weight: 500; line-height: 1.35;
  color: var(--text-muted);
  border-left: 1px solid var(--border);
  padding-left: 13px;
}
.split__stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split__stack img { aspect-ratio: 1 / 1; border-radius: var(--radius); border: 1px solid var(--border); object-fit: cover; width: 100%; box-shadow: var(--shadow-sm); }
.split__stack img:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }

.check-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
/* On the home About block the list is the proof, so it gets hairlines and a
   little more air rather than reading as an afterthought under the copy. */
.about-band .check-list { gap: 0; }
/*
 * Grid rows stretch to the tallest item in the row, so a one line entry beside
 * a two line one used to hug the top of its cell and leave a gap above the next
 * hairline. Centring the text and the tick means any length an editor types
 * still sits properly between the rules.
 */
.about-band .check-list li {
  padding-top: 11px; padding-bottom: 11px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
}
.about-band .check-list li::before { top: 50%; margin-top: -10px; }
.about-band .check-list li::after { top: 50%; margin-top: -4px; }
.about-band .check-list li:nth-child(1), .about-band .check-list li:nth-child(2) { border-top: 0; }
.check-list--2 { grid-template-columns: repeat(2, 1fr); }
.check-list li { position: relative; padding-left: 32px; color: var(--text-muted); font-size: .93rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-50); border: 1px solid var(--brand-300);
}
.check-list li::after {
  content: ""; position: absolute; left: 6.5px; top: 8px; width: 7px; height: 4px;
  border-left: 2px solid var(--brand-600); border-bottom: 2px solid var(--brand-600);
  transform: rotate(-45deg);
}

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-200), transparent);
}
.step { position: relative; text-align: center; }
.step__dot {
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 2;
  background: var(--surface); border: 1px solid var(--brand-300); color: var(--brand-ink);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  box-shadow: var(--shadow-sm);
  transition: background .38s var(--ease), color .38s var(--ease), transform .38s var(--ease);
}
.step:hover .step__dot { background: linear-gradient(140deg, var(--brand-500), var(--brand-600)); color: var(--on-brand); transform: scale(1.07); }
.step h3 { font-size: 1.02rem; margin-bottom: 7px; }
.step p { font-size: .865rem; color: var(--text-muted); margin: 0; }

/* ---------- Brand marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 16px; width: max-content; animation: scrollX 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.brand-tile {
  flex: none;
  width: 132px; height: 92px;
  display: grid; place-items: center;
  padding: 14px 18px;
  border-radius: var(--radius);
  /* A faint warm ground rather than pure white: several of these marks are
     white line art, and on #fff they disappeared entirely. */
  background: linear-gradient(180deg, #fff 0%, var(--surface-alt) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.brand-tile:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.brand-tile img { max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; }

@keyframes scrollX { to { transform: translateX(-50%); } }

/* ---------- Reviews ---------- */
.review {
  padding: 30px 28px; border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
.review:hover { border-color: var(--brand-300); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review__text { color: var(--text-muted); font-size: .95rem; margin: 0; flex: 1; }
.review__who { display: flex; align-items: center; gap: 13px; padding-top: 16px; border-top: 1px solid var(--border); }
.review__avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.review__name { color: var(--text); font-weight: 600; font-size: .92rem; }
.review__vehicle { color: var(--text-subtle); font-size: .8rem; }

/* ---------- Gallery ---------- */
/* Three columns, and every sixth tile leads at double size. Six images then
   fill exactly three rows — 12 fill six — so the grid never ends on a ragged
   half-empty row the way per-image span flags did. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 16vw, 208px);
  gap: 14px;
}
.gallery figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.gallery figure:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gallery figure:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 18, 15, .85));
  opacity: 0; transition: opacity .38s var(--ease);
}
.gallery figure:hover::after { opacity: 1; }
/* Same mono micro-label used on the hero and showcase tiles. */
.gallery figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(6px);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.gallery figure:hover figcaption { opacity: 1; transform: none; }
/* No hover on touch, so the labels and their scrim simply stay put. */
@media (hover: none) {
  .gallery figure::after { opacity: .9; }
  .gallery figcaption { opacity: 1; transform: none; }
}

/* ---------- Team ---------- */
.member { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease); }
.member:hover { border-color: var(--brand-300); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.member__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--n-100); }
.member__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter .4s var(--ease), transform .55s var(--ease); }
.member:hover .member__media img { filter: none; transform: scale(1.04); }
.member__body { padding: 20px 22px 24px; }
.member__role { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 6px; }
.member h3 { font-size: 1.05rem; margin-bottom: 8px; }
.member p { font-size: .865rem; color: var(--text-muted); margin: 0; }

/* ---------- Accordion (FAQ) ---------- */
.accordion { display: grid; gap: 12px; }
.acc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.acc.is-open { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.acc__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text);
  transition: color .3s var(--ease);
}
.acc__q:hover { color: var(--brand-ink); }
.acc__icon { width: 22px; height: 22px; flex: none; position: relative; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--brand-600); border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.acc__icon::before { width: 14px; height: 2px; }
.acc__icon::after { width: 2px; height: 14px; }
.acc.is-open .acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.acc__a-inner { padding: 0 22px 22px; color: var(--text-muted); font-size: .93rem; }
.acc__cat { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.chip {
  min-height: 40px;
  padding: 8px 17px; border-radius: 999px; cursor: pointer; font-size: .84rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  transition: all .3s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--brand-300); }
.chip.is-active { background: linear-gradient(120deg, var(--brand-500), var(--brand-600)); border-color: transparent; color: var(--on-brand); font-weight: 600; }

/* ---------- CTA band (deliberately dark) ---------- */
/* The CTA band sits directly on top of the footer, and both used
   --surface-dark, so the two ran together as one black block with no edge.
   The band now carries the deep navy the heroes use; the footer keeps the warm
   black, and the seam between them is a real change of colour. */
.cta-band { position: relative; overflow: hidden; background: var(--hero-ink); }
.cta-band__bg { position: absolute; inset: 0; opacity: .22; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--hero-ink) 18%, rgba(10, 20, 32, .68) 100%); }
.cta-band__inner {
  position: relative; z-index: 2; padding: clamp(50px, 7vw, 84px) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
}
.cta-band h2 { margin-bottom: 10px; color: #fff; }
.cta-band p { color: var(--text-on-dark); margin: 0; max-width: 54ch; }
.cta-band .btn--ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #fff; }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .45); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
.info-card { padding: 30px 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.info-list li { display: flex; gap: 15px; align-items: flex-start; }
.info-list .icon-box { width: 42px; height: 42px; border-radius: 12px; }
.info-list .icon-box svg { width: 19px; height: 19px; }
.info-list__label { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 3px; }
.info-list__value { color: var(--text); font-size: .95rem; line-height: 1.5; }
.info-list__value a { color: var(--text); }
.info-list__value a:hover { color: var(--brand-ink); }

.hours-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hours-table td { padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table td:last-child { text-align: right; color: var(--text); font-weight: 500; }
.hours-table tr.is-today td { color: var(--brand-ink); font-weight: 600; }
.hours-table tr.is-today td:last-child { color: var(--brand-ink); }

.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.field label .req { color: var(--brand-ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  font-size: .93rem; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--n-400); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 40px; }
.form-note { font-size: .78rem; color: var(--text-subtle); margin: 0; }

.alert { padding: 15px 18px; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 22px; border: 1px solid; }
.alert--ok { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-800); }
.alert--err { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); line-height: 0; }
.map-embed iframe { width: 100%; height: 420px; border: 0; }

.areas { display: flex; flex-wrap: wrap; gap: 9px; }
.area {
  padding: 8px 15px; border-radius: 10px; font-size: .845rem; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: all .3s var(--ease);
}
.area:hover { color: var(--brand-ink); border-color: var(--brand-300); transform: translateY(-2px); }

/* ---------- Footer (deliberately dark) ---------- */
.site-footer { background: var(--surface-dark); color: var(--text-on-dark); border-top: 1px solid rgba(9, 176, 239, .22); }
.footer-cta { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-main { padding: clamp(48px, 6vw, 74px) 0 clamp(34px, 4vw, 52px); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 38px; }
.footer-main h4 { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.footer-main ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-main ul a { font-size: .9rem; color: var(--muted-on-dark); }
.footer-main ul a:hover { color: var(--brand-300); }
.footer-brand img { height: 52px; margin-bottom: 18px; }
.footer-brand p { font-size: .9rem; color: var(--muted-on-dark); max-width: 34ch; }
.footer-socials { display: flex; gap: 10px; margin-top: 20px; }
.footer-socials a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--text-on-dark);
  transition: all .3s var(--ease);
}
.footer-socials a:hover { color: var(--brand-300); border-color: var(--brand-600); transform: translateY(-2px); }
.footer-socials svg { width: 17px; height: 17px; }
.footer-contact { display: grid; gap: 14px; font-size: .9rem; color: var(--muted-on-dark); padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; list-style: none; }
.footer-contact svg { width: 16px; height: 16px; color: var(--brand-400); flex: none; margin-top: 3px; }
.footer-contact a { color: var(--muted-on-dark); }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: var(--muted-on-dark);
}
.footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: var(--muted-on-dark); }
.footer-bottom a:hover { color: #fff; }

.callbar { display: none; }

.to-top {
  position: fixed; right: 18px; bottom: 20px; z-index: 90;
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--brand-ink);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .38s var(--ease), transform .38s var(--ease), visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--brand-400); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Editor content ---------- */
.entry { max-width: 800px; margin-inline: auto; color: var(--text-muted); }
.entry h2, .entry h3 { margin-top: 1.7em; color: var(--text); }
.entry img { border-radius: var(--radius); }
.entry blockquote {
  margin: 1.7em 0; padding: 18px 24px; border-left: 3px solid var(--brand-500);
  background: var(--surface-alt); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text);
}
.entry code { background: var(--surface-alt); padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.entry ul li, .entry ol li { margin-bottom: .5em; }
.post-card__meta { font-size: .8rem; color: var(--text-subtle); margin-bottom: 8px; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: 9px 15px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text-muted); font-size: .88rem;
}
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--brand-500); color: var(--on-brand); border-color: transparent; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 999; background: var(--brand-600); color: #fff; padding: 10px 16px; border-radius: 8px; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Full-screen home hero
   The service sequence fills the viewport and advances itself; copy sits over it.
   ========================================================================== */

.herox {
  position: relative;
  background: var(--n-950);
  /* Same cyan hairline the inner-page heroes close on, so every hero meets the
     light page the same way. */
  border-bottom: 1px solid rgba(9, 176, 239, .22);
}

/* The hero used to end on a hard line with the light page starting underneath
   it. This fades the dark ground down into the page colour across the last
   strip of the hero, so the two meet instead of colliding. It sits under the
   copy (z-index 2, below .herox__inner and .herox__links at 3). */
.herox::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  height: clamp(90px, 12vh, 150px); pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0) 0%, rgba(20, 18, 15, .5) 42%, rgba(20, 18, 15, .88) 74%, var(--n-950) 100%);
}

.herox .bay {
  position: relative;
  /* Full-screen on a normal laptop, but capped so a tall monitor does not
     stretch the same amount of copy over 1100px of empty space. */
  min-height: min(calc(100vh - var(--header-h)), 840px);
  min-height: min(calc(100svh - var(--header-h)), 840px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Stage ---------- */
.herox__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.bay__shot {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  /* A slow drift rather than a slide: at 1.5% the movement is felt, not seen,
     so the two frames overlap as one image instead of sweeping past. */
  transform: translateX(1.5%) scale(1.04);
  transition: opacity 1.6s linear, transform 6s var(--ease-out);
  will-change: opacity, transform;
}
.bay__shot.is-active { opacity: 1; transform: translateX(0) scale(1); }
.bay__shot img { width: 100%; height: 100%; object-fit: cover; }

.herox__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(94deg, rgba(20, 18, 15, .93) 0%, rgba(20, 18, 15, .78) 34%, rgba(20, 18, 15, .3) 68%, rgba(20, 18, 15, .55) 100%),
    linear-gradient(180deg, rgba(20, 18, 15, .6) 0%, transparent 24%, rgba(20, 18, 15, .55) 72%, rgba(20, 18, 15, .9) 100%);
}

/* The scan sweep is retired: the cyan band read as a glitch across the photo
   rather than as motion. The crossfade below carries the change on its own.
   The element is left in the markup (and inert here) so the controller's
   .is-changing hook keeps working. */
.bay__scan { display: none; }

/* ---------- Copy over the stage ---------- */
.herox__inner {
  position: relative; z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
  align-items: end;
  align-content: center;          /* copy sits mid-stage, not shoved to the floor */
  flex: 1;
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(26px, 4vh, 56px);
  padding-bottom: clamp(18px, 2.5vh, 30px);
}
.herox__copy { max-width: 560px; }

/* The hero arrives in order rather than all at once: the eyebrow, then the
   headline, then the supporting copy, then the actions. Small delays, because
   a long entrance is the thing that makes a site feel slow. */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.herox__copy > * { animation: heroIn .7s var(--ease-out) both; }
.herox__copy > .pill      { animation-delay: .05s; }
.herox__copy > h1         { animation-delay: .14s; }
.herox__copy > .herox__sub{ animation-delay: .24s; }
.herox__copy > .btn-row   { animation-delay: .34s; }
.herox__copy > .herox__facts { animation-delay: .44s; }
.herox__now, .herox__links { animation: heroIn .8s var(--ease-out) .5s both; }

@media (prefers-reduced-motion: reduce) {
  .herox__copy > *, .herox__now, .herox__links { animation: none; }
}
.herox__copy h1 {
  margin: 20px 0 16px;
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: -.03em;
}
.herox__sub {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
  max-width: 44ch;
  margin-bottom: 30px;
}
.herox .pill { background: rgba(20, 18, 15, .5); border-color: rgba(9, 176, 239, .45); color: var(--brand-200); }
.herox__call { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
.herox__call:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); color: #fff; }

.herox__facts { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.herox__facts li { display: inline-flex; align-items: center; gap: 9px; font-size: .875rem; color: rgba(255, 255, 255, .78); }
.herox__facts svg { width: 17px; height: 17px; color: var(--brand-400); flex: none; }

/* ---------- Caption for the current frame ---------- */
.herox__now { position: relative; justify-self: end; max-width: 340px; width: 100%; }
.herox__now-item {
  display: none;
  padding: 20px 22px;
  border-radius: var(--radius);
  /* Measured at 2.47:1 over the brightest part of the photograph, which is
     unreadable. The card carries its own ground now rather than relying on the
     image being dark behind it, which it is not everywhere in the sequence. */
  background: rgba(10, 12, 18, .88);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
  backdrop-filter: blur(14px);
}
.herox__now-item.is-active { display: block; animation: nowIn .6s var(--ease) both; }
@keyframes nowIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.herox__now-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-300); margin-bottom: 10px;
}
.herox__now-tag svg { width: 13px; height: 13px; }
.herox__now-item strong { display: block; font-family: var(--font-display); font-size: 1.12rem; color: #fff; margin-bottom: 5px; }
.herox__now-item span { font-size: .87rem; color: rgba(255, 255, 255, .74); }

/* ---------- Department links along the foot of the hero ---------- */
.herox__links {
  position: relative; z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding-top: 18px;
  padding-bottom: clamp(20px, 3vh, 34px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.herox__links-label {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.herox__links nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px clamp(14px, 1.8vw, 26px);
  min-width: 0;
}
.herox__links a {
  position: relative;
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .74);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.herox__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--brand-400);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--ease);
}
.herox__links a:hover { color: #fff; }
.herox__links a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .bay__shot, .herox__now-item, .bay.is-changing .bay__scan { transition: none; animation: none; }
}

@media (max-width: 980px) {
  .herox .bay { min-height: auto; }
  .herox__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: clamp(72px, 16vh, 130px);
    padding-bottom: 24px;
  }
  .herox__copy { max-width: none; }
  .herox__now { justify-self: start; max-width: 420px; }
}

@media (max-width: 560px) {
  .herox__copy h1 { font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .herox__links-label { display: none; }
  .herox__links nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .herox__links nav::-webkit-scrollbar { display: none; }
  .herox__facts { gap: 10px 18px; }
  .herox__facts li { font-size: .8rem; }
  .herox__now-item { padding: 16px 18px; }
}

/* ==========================================================================
   Before / after — "drag the line"
   Full-bleed dark band. Same dark accent surface as the hero panel and footer,
   with the brand cyan on the split instead of the reference's red.
   ========================================================================== */

/* Same vertical rhythm as every other .section, so the band reads as part of
   the page rather than an insert. */
.drag {
  background: var(--surface-dark);
  /* Was 128px a side while every other section moved to 78, which made this
     the widest gap on the page by a long way. */
  padding: clamp(46px, 5.4vw, 78px) 0;
  overflow: hidden;
}

/* ---------- The comparison ---------- */
.ba { position: relative; }

.ba__stage {
  position: relative;
  aspect-ratio: 1400 / 900;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--n-900);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
  touch-action: pan-y;              /* horizontal drag compares, vertical still scrolls */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Clipping the top layer keeps both images pixel-aligned at any split. */
.ba__img--before {
  clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
  /* The whole point of this half is the swirls and oxidation, and at the
     photograph's own exposure they were not visible. Lifting it reads as
     honest: the damage is what is being shown, not hidden. */
  filter: brightness(1.5) contrast(1.14);
}

.ba__tag {
  position: absolute; top: clamp(14px, 2vw, 26px); z-index: 3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.ba__tag--before { left: clamp(14px, 2vw, 28px); }
.ba__tag--after  { right: clamp(14px, 2vw, 28px); }

.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  z-index: 4;
  width: 56px; margin-left: -28px;
  display: block;
  padding: 0; border: 0; background: none;
  cursor: ew-resize;
}
.ba__handle::before {                 /* the split line */
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--brand-500);
  box-shadow: 0 0 16px rgba(9, 176, 239, .75);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; grid-auto-flow: column; place-items: center; gap: 0;
  background: rgba(20, 18, 15, .82);
  border: 1px solid var(--brand-500);
  color: #fff;
  backdrop-filter: blur(8px);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.ba__grip svg { width: 13px; height: 13px; }
.ba__badge {
  position: absolute; top: 68%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-500);
  color: var(--on-brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 12px 34px -10px rgba(9, 176, 239, .7);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.ba__handle:hover .ba__grip { transform: translate(-50%, -50%) scale(1.1); background: var(--brand-500); }
.ba__handle:hover .ba__badge { transform: translate(-50%, -50%) scale(1.06); }
.ba__handle:focus-visible { outline: none; }
.ba__handle:focus-visible .ba__grip { outline: 2px solid #fff; outline-offset: 3px; }
.ba.is-dragging .ba__grip { transform: translate(-50%, -50%) scale(1.14); }
.ba.is-dragging .ba__badge { opacity: 0; }
.ba.is-dragging .ba__stage { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .ba__grip, .ba__badge { transition: none; }
}

@media (max-width: 720px) {
  /* 14:9 is only ~240px tall on a phone — crop taller so the paint reads */
  .ba__stage { aspect-ratio: 4 / 3; }
  .ba__badge { width: 58px; height: 58px; font-size: .58rem; top: 72%; }
  .ba__grip { width: 34px; height: 34px; }
  .ba__tag { font-size: .6rem; letter-spacing: .2em; }
}

/* ==========================================================================
   What we do — services showcase
   One stage. The chosen service fills the background and its copy sits on the
   left; the six services are a strip of tiles down the right, and the active
   tile widens so its name has room. The backgrounds are stacked and cross-faded
   rather than swapped, so changing service never flashes an empty frame.
   ========================================================================== */

.show { position: relative; background: var(--surface-dark); color: var(--text-on-dark); padding: clamp(52px, 6.4vw, 92px) 0; overflow: hidden; }

/* The heading shares the stage's box and its side padding, so the h2 above sits
   on the same line as the service title inside. */
.show__head,
.show__stage {
  width: 100%; max-width: min(var(--wrap), 100% - 40px);
  margin-inline: auto;
}
.show__head { position: relative; z-index: 1; padding-inline: clamp(26px, 3.4vw, 46px); margin-bottom: clamp(22px, 3vw, 36px); }
.show__head .eyebrow { color: var(--brand-300); }
.show__head h2 { margin: 12px 0 14px; color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; max-width: 20ch; }
/* Kept whole so it wraps as a phrase rather than breaking after "One". */
.show__head-accent { color: var(--brand-300); white-space: nowrap; }
.show__head-lead { margin: 0; color: rgba(255, 255, 255, .72); line-height: 1.7; max-width: 56ch; }

/* ---------- the stage ---------- */
.show__stage {
  position: relative; z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px rgba(0, 0, 0, .45);
}

.show__bg { position: absolute; inset: 0; z-index: 0; }
.show__bg-img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.show__bg-img.is-active { opacity: 1; }
.show__bg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*
 * Held dark to about the 40% mark, which is where the copy ends, then released
 * so the photograph is actually visible behind the tiles. Sampled behind the
 * description at every breakpoint: the lightest reading is 14:1 against the
 * body colour, well past AA.
 */
.show__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(101deg, rgba(6, 9, 13, .90) 0%, rgba(6, 9, 13, .81) 34%, rgba(6, 9, 13, .54) 54%, rgba(6, 9, 13, .26) 78%, rgba(6, 9, 13, .36) 100%),
    linear-gradient(0deg, rgba(6, 9, 13, .55), rgba(6, 9, 13, 0) 46%);
}

.show__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 3vw, 48px); align-items: end;
  min-height: clamp(430px, 46vw, 560px);
  padding: clamp(26px, 3.4vw, 46px);
}

/* ---------- the copy ---------- */
.show__panels { align-self: center; }
.show__panel { display: block; }
.show__panel[hidden] { display: none; }
.show__panel.is-active { animation: showIn .5s var(--ease) both; }
@keyframes showIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.show__count { display: flex; align-items: baseline; gap: 8px; margin: 0 0 22px; font-variant-numeric: tabular-nums; }
.show__count b { color: #fff; font-size: 1.65rem; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.show__count span { color: rgba(255, 255, 255, .45); font-size: .88rem; }
/* A short rule after the count, so the eye starts at the top of the panel. */
.show__count::after { content: ""; flex: 1; max-width: 54px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .3), transparent); }

.show__kicker {
  display: inline-block; margin-bottom: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-300);
}
.show__panel h3 { margin: 0 0 16px; color: #fff; font-size: clamp(1.6rem, 2.9vw, 2.4rem); line-height: 1.08; letter-spacing: -.015em; }
.show__desc { margin: 0 0 30px; color: rgba(255, 255, 255, .8); line-height: 1.75; max-width: 45ch; }
.show__cta { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(8px); }
.show__cta:hover { background: #fff; border-color: #fff; color: var(--n-950); }
.show__cta:hover svg { transform: translateX(3px); }
.show__cta svg { transition: transform .25s var(--ease); }

/* ---------- the tiles ---------- */
.show__thumbs { display: flex; gap: 10px; align-self: stretch; align-items: stretch; min-height: 0; }

.show__thumb {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; overflow: hidden;
  background: rgba(6, 9, 13, .45);
  transition: flex-grow .45s var(--ease), border-color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* The chosen tile takes the extra room, which is what gives its name space to
   sit on one or two lines instead of four. The ring and the lift are the other
   half of saying which one is open. */
.show__thumb.is-active {
  flex-grow: 1.9;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 1px rgba(9, 176, 239, .35), 0 22px 44px rgba(0, 0, 0, .5);
}
.show__thumb:not(.is-active):hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .38); }
.show__thumb:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 3px; }

.show__thumb-shot { position: absolute; inset: 0; }
/*
 * The waiting tiles have to sit behind the photograph, not on top of it. Now
 * that the scrim lets the background through, a lightly dimmed tile reads as a
 * pane of frosted glass floating in front, which is the wrong depth: they are
 * held well under the backdrop instead, and only the open one comes forward.
 */
.show__thumb-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), filter .35s var(--ease); filter: grayscale(.15) brightness(.78); }
.show__thumb.is-active .show__thumb-shot img { filter: none; }
.show__thumb:not(.is-active):hover .show__thumb-shot img { filter: none; transform: scale(1.05); }
/*
 * The label runs the height of the tile, so the shade has to cover that whole
 * run, not just sit at the foot of it. Measured against all six photographs
 * with the label hidden: the weakest is 9.3:1.
 */
.show__thumb-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6, 9, 13, .9) 4%, rgba(6, 9, 13, .62) 46%, rgba(6, 9, 13, .46));
  transition: background .35s var(--ease);
}
.show__thumb:not(.is-active):hover .show__thumb-shot::after {
  background: linear-gradient(0deg, rgba(6, 9, 13, .88) 4%, rgba(6, 9, 13, .55) 46%, rgba(6, 9, 13, .38));
}
.show__thumb.is-active .show__thumb-shot::after {
  background: linear-gradient(0deg, rgba(6, 9, 13, .95) 4%, rgba(6, 9, 13, .34) 54%, rgba(6, 9, 13, 0));
}

/* Six names will not fit across half a stage lying flat, so the waiting tiles
   carry theirs turned up the card. The open one turns back to normal, which is
   the other half of showing which service you are looking at. */
.show__thumb-body {
  position: relative; z-index: 1; display: flex; align-items: baseline; gap: 10px;
  padding: 14px 12px 16px;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.show__thumb.is-active .show__thumb-body { writing-mode: horizontal-tb; transform: none; display: block; }
.show__thumb-no { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.show__thumb.is-active .show__thumb-no { display: block; color: var(--brand-300); margin-bottom: 7px; }
.show__thumb-name { color: #fff; font-weight: 700; font-size: .82rem; line-height: 1.28; letter-spacing: .005em; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.show__thumb:hover .show__thumb-name, .show__thumb.is-active .show__thumb-name { color: #fff; }
.show__thumb.is-active .show__thumb-name { display: block; }

/*
 * On a desktop the stage is a full-bleed band, so the photograph is the size of
 * the screen rather than a card sitting on one. The copy inside still lines up
 * with the heading above it and with every other section's text, because both
 * are held to the same wrap. Phones keep the inset card.
 */
/*
 * The copy column is a fixed share of the wrap, so the wider the screen the
 * smaller a fraction of the photograph it covers, and the further the scrim can
 * be pulled back. Below this the two columns are tight enough that the text
 * reaches into the bright half: measured at 4.6:1 there on the lighter setting,
 * which is too close to the 4.5:1 floor to leave standing.
 */
@media (min-width: 1181px) {
  .show__scrim {
    background:
      linear-gradient(101deg, rgba(6, 9, 13, .86) 0%, rgba(6, 9, 13, .76) 36%, rgba(6, 9, 13, .44) 56%, rgba(6, 9, 13, .18) 76%, rgba(6, 9, 13, .5) 100%),
      linear-gradient(0deg, rgba(6, 9, 13, .48), rgba(6, 9, 13, 0) 44%);
  }
}

@media (min-width: 981px) {
  .show__stage { max-width: none; border-radius: 0; box-shadow: none; }
  .show__head { max-width: var(--wrap); padding-inline: 20px; }
  /*
   * The copy keeps the wrap's left edge, so it stays in line with the heading
   * and with every other section. The tiles do not: holding them to the wrap
   * too left a bare strip of photograph down the right on a wide screen and
   * made the tiles smaller than they need to be. The right edge follows the
   * viewport instead, and the tiles take the width that frees up.
   */
  .show__grid {
    width: 100%; max-width: none; margin-inline: 0;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    padding-left: max(20px, calc((100% - var(--wrap)) / 2 + 20px));
    padding-right: clamp(24px, 3.4vw, 64px);
    padding-block: clamp(44px, 4.6vw, 76px);
    min-height: clamp(500px, 44vw, 720px);
  }
}

@media (max-width: 980px) {
  /*
   * The angled scrim is aimed at the two-column layout, where the copy only
   * ever crosses the dark left third. Once the columns stack, the copy runs the
   * full width and lands on the bright part of the photograph: measured at 2.2:1
   * on a phone. Stacked, the scrim runs top to bottom instead.
   */
  .show__scrim {
    background:
      linear-gradient(180deg, rgba(6, 9, 13, .93) 0%, rgba(6, 9, 13, .89) 58%, rgba(6, 9, 13, .74) 100%),
      linear-gradient(0deg, rgba(6, 9, 13, .45), rgba(6, 9, 13, 0) 42%);
  }
  .show__grid { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; }
  .show__panels { padding-block: clamp(10px, 3vw, 26px); }
  /* No room to share on a phone, so the tiles become a swipeable strip of
     fixed-width cards instead of an accordion. */
  .show__thumbs {
    gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  .show__thumbs::-webkit-scrollbar { display: none; }
  .show__thumb { flex: 0 0 148px; min-height: 172px; scroll-snap-align: start; }
  .show__thumb.is-active { flex: 0 0 148px; }
  .show__thumb-body { writing-mode: horizontal-tb; transform: none; display: block; }
  .show__thumb-no { display: block; margin-bottom: 6px; }
  .show__thumb-name { display: block; }
}
@media (max-width: 560px) {
  .show__thumb { flex: 0 0 128px; min-height: 152px; }
  .show__thumb.is-active { flex: 0 0 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .show__panel.is-active { animation: none; }
  .show__bg-img, .show__thumb, .show__thumb-shot img, .show__cta svg { transition: none; }
  .show__thumb:not(.is-active):hover { transform: none; }
  .show__thumb:not(.is-active):hover .show__thumb-shot img { transform: none; }
}

/* ==========================================================================
   Shared layout breakpoints
   The grid primitives above are all fixed-column, so without this block every
   multi-column layout — .split, .g-2/3/4, .steps, .gallery, the footer — keeps
   its desktop column count on a phone and overflows the viewport. Kept at the
   end of the file so it wins on specificity without touching the base rules.
   ========================================================================== */

@media (max-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  /* stacked: drop the bleed so the image sits in the normal column */
  .split--bleed { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split--bleed .split__media { margin-right: 0; order: -1; }
  .split--bleed .split__copy { order: 0; }
  /* Reversed splits put the image second on desktop; stacked, it belongs on top. */
  .split--reverse .split__media { order: -1; }

  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery figure:nth-child(6n + 1) { grid-column: auto; grid-row: auto; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .check-list--2 { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .gallery { grid-auto-rows: 150px; }

  /* Badges hang off the image corner; inside 20px of gutter that clips. */
  /* Stacked: the card sits under the image and shrinks to its content rather
     than stretching the full width and crowding the photo. */
  .split__badge { position: static; display: inline-flex; margin: 16px 0 0; max-width: none; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Workshop — the facility band
   This sits directly under the page hero. Both were dark navy, so the hero and
   this section ran together as one block with no boundary. The site's own
   rhythm is dark then light, so this is the light band and the hero keeps the
   navy: the edge between them is now a real change of ground.
   ========================================================================== */

.shopfloor {
  position: relative;
  overflow: hidden;
  background: var(--surface-alt);
  padding: clamp(56px, 8vh, 96px) 0 clamp(56px, 8vh, 92px);
}

/* A trace of the brand cyan, enough to lift the corner without tinting the
   page. On a light ground this has to be far weaker than it was on the dark. */
.shopfloor__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 55% at 90% 18%, rgba(9, 176, 239, .09), rgba(9, 176, 239, 0) 70%);
}

.shopfloor .wrap { position: relative; z-index: 1; }

.shopfloor__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

.shopfloor__copy h2 {
  color: var(--text);
  margin: 14px 0 16px;
  font-size: clamp(1.85rem, 3.4vw, 2.8rem);
  line-height: 1.1;
}
.shopfloor__lead {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 0 28px;
}
.shopfloor__ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.shopfloor__ghost:hover { border-color: var(--brand-500); color: var(--brand-ink); }

/* Lead photograph across the top, two supporting frames beneath it. An even
   three-up grid made all three read as equally important, which none are. */
.shopfloor__shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.shopfloor__shot {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.shopfloor__shot--lead { grid-column: span 2; aspect-ratio: 16 / 9; }

/* The equipment. This is the evidence the page rests on, so it gets a row of
   its own rather than a tick list beside the copy. */
.shopfloor__kit {
  list-style: none;
  margin: clamp(38px, 6vh, 64px) 0 0;
  padding: clamp(28px, 4vh, 38px) 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.shopfloor__kit li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.shopfloor__kit li:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.shopfloor__kit svg { width: 22px; height: 22px; color: var(--brand-500); flex: none; }
.shopfloor__label { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.shopfloor__no {
  position: absolute; top: 8px; right: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem; letter-spacing: .1em;
  color: var(--text-subtle);
}

/* Departments: a strip of links, not a third grid of cards. */
.deptstrip {
  margin-top: clamp(34px, 5vh, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 22px;
}
.deptstrip__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-subtle);
}
.deptstrip a {
  position: relative;
  font-size: .92rem; font-weight: 600; color: var(--text-muted);
  padding-bottom: 2px;
}
.deptstrip a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brand-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.deptstrip a:hover { color: var(--text); }
.deptstrip a:hover::after { transform: scaleX(1); }

@media (max-width: 980px) {
  .shopfloor__top { grid-template-columns: minmax(0, 1fr); }
  .shopfloor__kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .shopfloor__shots { gap: 10px; }
  .shopfloor__kit { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .shopfloor__kit li { padding: 14px; }
  .deptstrip { gap: 8px 16px; }
  .deptstrip a { font-size: .86rem; }
}

/* ==========================================================================
   Gallery lightbox
   ========================================================================== */

/* The button covers its tile. It carries no visible box of its own: the tile
   already reads as an image, and a second frame on top would fight it. */
.gallery__zoom {
  position: absolute; inset: 0;
  /* Above the caption, which is z-index 2. The caption is invisible until
     hover but still hit-testable, so without this it swallowed every click
     along the bottom of the tile. */
  z-index: 3;
  border: 0; padding: 0; margin: 0;
  background: transparent; cursor: zoom-in;
  border-radius: inherit;
}
.gallery__zoom:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -3px; }

body.has-lightbox { overflow: hidden; }

.lightbox {
  /* The WordPress admin bar is z-index 99999, so anything lower opens behind
     it for a logged-in user. */
  position: fixed; inset: 0; z-index: 100000;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 10, 16, .93);
  backdrop-filter: blur(3px);
}
.lightbox.is-open { display: flex; }

.lightbox__figure { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.lightbox__img {
  max-width: 100%; max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lightbox__cap {
  color: rgba(255, 255, 255, .82);
  font-size: .9rem; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em; text-transform: uppercase;
}

.lightbox__close, .lightbox__nav {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

.lightbox__close { top: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px); }
.lightbox__nav--prev { left: clamp(8px, 2vw, 24px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 24px); }

@media (max-width: 560px) {
  .lightbox__nav { width: 40px; height: 40px; bottom: 16px; top: auto; }
  .lightbox__nav--prev { left: 25%; }
  .lightbox__nav--next { right: 25%; }
  .lightbox__img { max-height: calc(100vh - 200px); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { backdrop-filter: none; }
}

/* ==========================================================================
   How it works — picture cards
   Five steps read faster as pictures than as numbered circles: the photograph
   carries the meaning and the number is only a marker. Runs on the dark ground
   the home page passes in, and on the light one elsewhere.
   ========================================================================== */

.howto { position: relative; overflow: hidden; }

.howto__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 46% at 82% 8%, rgba(9, 176, 239, .10), rgba(9, 176, 239, 0) 70%);
}
.howto .wrap { position: relative; z-index: 1; }

.howto__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(30px, 4.4vh, 52px);
}
.howto__head h2 { margin: 12px 0 14px; max-width: 20ch; }
.howto__lead { color: var(--text-muted); max-width: 52ch; margin: 0; }

/* The reference sets this as handwriting. A third webfont for one line is a
   real cost on a site we have just spent effort making light, so it is an
   italic treatment of the display face instead. */
.howto__mark {
  margin: 0; justify-self: end; text-align: right;
  font-family: var(--font-display);
  font-style: italic; font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  line-height: 1.25; max-width: 12ch;
  color: var(--brand-ink);
  position: relative; padding-bottom: 12px;
}
.howto__mark::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 78%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(9, 176, 239, 0), var(--brand-500));
}

.howto__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  counter-reset: howto;
}

/* The notched corner is the card, not the picture: cutting the photograph left
   ordinary rectangular cards with a shaved image inside, which is not what the
   reference does. Clipping the card gives the whole tile the angled shape. */
.howto__step {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0 0 22px;
  background: var(--surface-dark);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  transition: transform .32s var(--ease), background .32s var(--ease);
}
.howto__step:hover { transform: translateY(-4px); background: #1b2430; }

/* A hairline drawn inside the clip, since a border would be cut away with it. */
.howto__step::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .1);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  transition: border-color .32s var(--ease);
}
.howto__step:hover::after { border-color: rgba(9, 176, 239, .45); }

.howto__shot { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.howto__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.howto__step:hover .howto__shot img { transform: scale(1.05); }

.howto__no {
  display: block; margin: 14px 20px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .06em;
  color: var(--brand-400);
}
.howto__step h3 { margin: 0 20px 8px; font-size: 1.02rem; color: #fff; }
.howto__step p { margin: 0 20px; font-size: .88rem; line-height: 1.6; color: rgba(255, 255, 255, .68); }

@media (max-width: 980px) {
  .howto__head { grid-template-columns: minmax(0, 1fr); }
  .howto__mark { justify-self: start; text-align: left; max-width: none; }
  .howto__mark::after { left: 0; right: auto; width: 120px; background: linear-gradient(90deg, var(--brand-500), rgba(9, 176, 239, 0)); }
  .howto__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .howto__steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .howto__shot { aspect-ratio: 16 / 9; }
}